Changeset 225547 in webkit


Ignore:
Timestamp:
Dec 5, 2017 2:28:20 PM (6 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Styles: make Computed a top-level sidebar tab
​https://bugs.webkit.org/show_bug.cgi?id=174229
<rdar://problem/33170193>

Reviewed by Matt Baker.

Styles dropdown tab selector was removed. Styles and Computed are now top-level sidebar tabs.

Visual styles is no longer visible in the Styles sidebar tabs by default but can be enabled in the settings.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/Setting.js:
  • UserInterface/Main.html:
  • UserInterface/Views/CSSStyleDeclarationSection.js:

(WI.CSSStyleDeclarationSection.prototype.findMatchingPropertiesAndSelectors):

  • UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WI.CSSStyleDeclarationTextEditor.prototype.findMatchingProperties):
(WI.CSSStyleDeclarationTextEditor.prototype.removeNonMatchingProperties):

  • UserInterface/Views/ComputedStyleDetailsSidebarPanel.js: Added.

(WI.ComputedStyleDetailsSidebarPanel):

  • UserInterface/Views/DOMTreeOutline.js:

(WI.DOMTreeOutline.prototype._ondragover):
(WI.DOMTreeOutline.prototype._ondrop):

  • UserInterface/Views/ElementsTabContentView.js:

(WI.ElementsTabContentView):

  • UserInterface/Views/GeneralStyleDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css.
  • UserInterface/Views/GeneralStyleDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js.

(WI.GeneralStyleDetailsSidebarPanel):
(WI.GeneralStyleDetailsSidebarPanel.prototype.get panel):
(WI.GeneralStyleDetailsSidebarPanel.prototype.visibilityDidChange):
(WI.GeneralStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
(WI.GeneralStyleDetailsSidebarPanel.prototype.layout):
(WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
(WI.GeneralStyleDetailsSidebarPanel.prototype.sizeDidChange):
(WI.GeneralStyleDetailsSidebarPanel.prototype.get _initialScrollOffset):
(WI.GeneralStyleDetailsSidebarPanel.prototype._updateNoForcedPseudoClassesScrollOffset):
(WI.GeneralStyleDetailsSidebarPanel.prototype._showPanel):
(WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonClicked):
(WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonContextMenu):
(WI.GeneralStyleDetailsSidebarPanel.prototype._populateClassToggles):
(WI.GeneralStyleDetailsSidebarPanel.prototype._createToggleForClassName):
(WI.GeneralStyleDetailsSidebarPanel.prototype._filterDidChange):
Styles and Computed tabs share a few UI components, such as force state (:hover, :focus, etc.),
filter field, and CSS class toggle components. To implement this, CSSStyleDetailsSidebarPanel was renamed
to GeneralStyleDetailsSidebarPanel.

CSSStyleDetailsSidebarPanel used to support several panels. This is no longer the case with GeneralStyleDetailsSidebarPanel:

  • _initiallySelectedPanel was removed.
  • _selectedPanel was replaced by _panel.
  • UserInterface/Views/GroupNavigationItem.js:

(WI.GroupNavigationItem.prototype.get minimumWidth):

  • UserInterface/Views/NavigationBar.css:

(.navigation-bar .item,):
(.sidebar-navigation-bar):
(.sidebar-navigation-bar .holder):

  • UserInterface/Views/NavigationBar.js:

(WI.NavigationBar.prototype._calculateMinimumWidth):
Minor optimization: don't toggle class names when there are no visible navigation items.

  • UserInterface/Views/RulesStyleDetailsPanel.js:

(WI.RulesStyleDetailsPanel.prototype.filterDidChange):

  • UserInterface/Views/RulesStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.

(WI.RulesStyleDetailsSidebarPanel):

  • UserInterface/Views/SearchTabContentView.js:

(WI.SearchTabContentView):

  • UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

  • UserInterface/Views/Sidebar.js:

(WI.Sidebar):

  • UserInterface/Views/SidebarNavigationBar.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.

(WI.SidebarNavigationBar):
(WI.SidebarNavigationBar.prototype.insertNavigationItem):
(WI.SidebarNavigationBar.prototype._calculateMinimumWidth):
SidebarNavigationBar wraps navigation items in an element so it can correctly calculate the width of all items with spacing between them.

  • UserInterface/Views/StyleDetailsPanel.js:

(WI.StyleDetailsPanel.prototype.get _initialScrollOffset):

  • UserInterface/Views/VisualStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.

(WI.VisualStyleDetailsSidebarPanel):

Location:
trunk/Source/WebInspectorUI
Files:
15 edited
4 copied
2 moved

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r225546 r225547  
     12017-12-05  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Styles: make Computed a top-level sidebar tab
     4        https://bugs.webkit.org/show_bug.cgi?id=174229
     5        <rdar://problem/33170193>
     6
     7        Reviewed by Matt Baker.
     8
     9        Styles dropdown tab selector was removed. Styles and Computed are now top-level sidebar tabs.
     10
     11        Visual styles is no longer visible in the Styles sidebar tabs by default but can be enabled in the settings.
     12
     13        * Localizations/en.lproj/localizedStrings.js:
     14        * UserInterface/Base/Setting.js:
     15        * UserInterface/Main.html:
     16        * UserInterface/Views/CSSStyleDeclarationSection.js:
     17        (WI.CSSStyleDeclarationSection.prototype.findMatchingPropertiesAndSelectors):
     18        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
     19        (WI.CSSStyleDeclarationTextEditor.prototype.findMatchingProperties):
     20        (WI.CSSStyleDeclarationTextEditor.prototype.removeNonMatchingProperties):
     21        * UserInterface/Views/ComputedStyleDetailsSidebarPanel.js: Added.
     22        (WI.ComputedStyleDetailsSidebarPanel):
     23        * UserInterface/Views/DOMTreeOutline.js:
     24        (WI.DOMTreeOutline.prototype._ondragover):
     25        (WI.DOMTreeOutline.prototype._ondrop):
     26        * UserInterface/Views/ElementsTabContentView.js:
     27        (WI.ElementsTabContentView):
     28        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css.
     29        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js.
     30        (WI.GeneralStyleDetailsSidebarPanel):
     31        (WI.GeneralStyleDetailsSidebarPanel.prototype.get panel):
     32        (WI.GeneralStyleDetailsSidebarPanel.prototype.visibilityDidChange):
     33        (WI.GeneralStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
     34        (WI.GeneralStyleDetailsSidebarPanel.prototype.layout):
     35        (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
     36        (WI.GeneralStyleDetailsSidebarPanel.prototype.sizeDidChange):
     37        (WI.GeneralStyleDetailsSidebarPanel.prototype.get _initialScrollOffset):
     38        (WI.GeneralStyleDetailsSidebarPanel.prototype._updateNoForcedPseudoClassesScrollOffset):
     39        (WI.GeneralStyleDetailsSidebarPanel.prototype._showPanel):
     40        (WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonClicked):
     41        (WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonContextMenu):
     42        (WI.GeneralStyleDetailsSidebarPanel.prototype._populateClassToggles):
     43        (WI.GeneralStyleDetailsSidebarPanel.prototype._createToggleForClassName):
     44        (WI.GeneralStyleDetailsSidebarPanel.prototype._filterDidChange):
     45        Styles and Computed tabs share a few UI components, such as force state (:hover, :focus, etc.),
     46        filter field, and CSS class toggle components. To implement this, CSSStyleDetailsSidebarPanel was renamed
     47        to GeneralStyleDetailsSidebarPanel.
     48
     49        CSSStyleDetailsSidebarPanel used to support several panels. This is no longer the case with GeneralStyleDetailsSidebarPanel:
     50        - _initiallySelectedPanel was removed.
     51        - _selectedPanel was replaced by _panel.
     52
     53        * UserInterface/Views/GroupNavigationItem.js:
     54        (WI.GroupNavigationItem.prototype.get minimumWidth):
     55        * UserInterface/Views/NavigationBar.css:
     56        (.navigation-bar .item,):
     57        (.sidebar-navigation-bar):
     58        (.sidebar-navigation-bar .holder):
     59        * UserInterface/Views/NavigationBar.js:
     60        (WI.NavigationBar.prototype._calculateMinimumWidth):
     61        Minor optimization: don't toggle class names when there are no visible navigation items.
     62
     63        * UserInterface/Views/RulesStyleDetailsPanel.js:
     64        (WI.RulesStyleDetailsPanel.prototype.filterDidChange):
     65        * UserInterface/Views/RulesStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
     66        (WI.RulesStyleDetailsSidebarPanel):
     67        * UserInterface/Views/SearchTabContentView.js:
     68        (WI.SearchTabContentView):
     69        * UserInterface/Views/SettingsTabContentView.js:
     70        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
     71        * UserInterface/Views/Sidebar.js:
     72        (WI.Sidebar):
     73        * UserInterface/Views/SidebarNavigationBar.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
     74        (WI.SidebarNavigationBar):
     75        (WI.SidebarNavigationBar.prototype.insertNavigationItem):
     76        (WI.SidebarNavigationBar.prototype._calculateMinimumWidth):
     77        SidebarNavigationBar wraps navigation items in an element so it can correctly calculate the width of all items with spacing between them.
     78
     79        * UserInterface/Views/StyleDetailsPanel.js:
     80        (WI.StyleDetailsPanel.prototype.get _initialScrollOffset):
     81        * UserInterface/Views/VisualStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
     82        (WI.VisualStyleDetailsSidebarPanel):
     83
    1842017-12-05  Joseph Pecoraro  <pecoraro@apple.com>
    285

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r225487 r225547  
    537537localizedStrings["Left"] = "Left";
    538538localizedStrings["Legacy Style Editor"] = "Legacy Style Editor";
     539localizedStrings["Legacy Visual Styles Panel"] = "Legacy Visual Styles Panel";
    539540localizedStrings["Letter"] = "Letter";
    540541localizedStrings["Ligatures"] = "Ligatures";
    … …  
    913914localizedStrings["Style Rules"] = "Style Rules";
    914915localizedStrings["Style rule"] = "Style rule";
    915 localizedStrings["Styles"] = "Styles";
    916916localizedStrings["Styles Invalidated"] = "Styles Invalidated";
    917 localizedStrings["Styles Panel:"] = "Styles Panel:";
    918917localizedStrings["Styles Recalculated"] = "Styles Recalculated";
     918localizedStrings["Styles Sidebar:"] = "Styles Sidebar:";
    919919localizedStrings["Styles \u2014 Computed"] = "Styles \u2014 Computed";
    920920localizedStrings["Styles \u2014 Rules"] = "Styles \u2014 Rules";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r224354 r225547  
    124124
    125125    // Experimental
     126    experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
    126127    experimentalLegacyStyleEditor: new WI.Setting("experimental-legacy-style-editor", false),
    127     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
     128    experimentalLegacyVisualSidebar: new WI.Setting("experimental-legacy-visual-sidebar", false),
    128129};

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r225259 r225547  
    4141    <link rel="stylesheet" href="Views/CSSStyleDeclarationSection.css">
    4242    <link rel="stylesheet" href="Views/CSSStyleDeclarationTextEditor.css">
    43     <link rel="stylesheet" href="Views/CSSStyleDetailsSidebarPanel.css">
    4443    <link rel="stylesheet" href="Views/CallFrameIcons.css">
    4544    <link rel="stylesheet" href="Views/CallFrameTreeElement.css">
    … …  
    9291    <link rel="stylesheet" href="Views/FontResourceContentView.css">
    9392    <link rel="stylesheet" href="Views/FormattedValue.css">
     93    <link rel="stylesheet" href="Views/GeneralStyleDetailsSidebarPanel.css">
    9494    <link rel="stylesheet" href="Views/GoToLineDialog.css">
    9595    <link rel="stylesheet" href="Views/GradientEditor.css">
    … …  
    465465    <script src="Views/Popover.js"></script>
    466466    <script src="Views/SidebarPanel.js"></script>
    467     <script src="Views/StyleDetailsPanel.js"></script>
    468467    <script src="Views/TabBar.js"></script>
    469468    <script src="Views/TabBarItem.js"></script>
    … …  
    508507    <script src="Views/TimelineTreeElement.js"></script>
    509508
     509    <script src="Views/GeneralStyleDetailsSidebarPanel.js"></script>
     510    <script src="Views/RulesStyleDetailsSidebarPanel.js"></script>
     511    <script src="Views/ComputedStyleDetailsSidebarPanel.js"></script>
     512    <script src="Views/VisualStyleDetailsSidebarPanel.js"></script>
     513    <script src="Views/StyleDetailsPanel.js"></script>
     514
    510515    <script src="Views/CanvasTabContentView.js"></script>
    511516    <script src="Views/ConsoleTabContentView.js"></script>
    … …  
    545550    <script src="Views/CSSStyleDeclarationSection.js"></script>
    546551    <script src="Views/CSSStyleDeclarationTextEditor.js"></script>
    547     <script src="Views/CSSStyleDetailsSidebarPanel.js"></script>
    548552    <script src="Views/CSSStyleSheetTreeElement.js"></script>
    549553    <script src="Views/CallFrameTreeElement.js"></script>
    … …  
    724728    <script src="Views/ShaderProgramTreeElement.js"></script>
    725729    <script src="Views/Sidebar.js"></script>
     730    <script src="Views/SidebarNavigationBar.js"></script>
    726731    <script src="Views/Slider.js"></script>
    727732    <script src="Views/SoftContextMenu.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js

    r223308 r225547  
    321321    findMatchingPropertiesAndSelectors(needle)
    322322    {
    323         this._element.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, WI.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
     323        this._element.classList.remove(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, WI.GeneralStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
    324324
    325325        var hasMatchingSelector = false;
    326326
    327327        for (var selectorElement of this._selectorElements) {
    328             selectorElement.classList.remove(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     328            selectorElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
    329329
    330330            if (needle && selectorElement.textContent.includes(needle)) {
    331                 selectorElement.classList.add(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     331                selectorElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
    332332                hasMatchingSelector = true;
    333333            }
    … …  
    342342
    343343        if (!hasMatchingProperty && !hasMatchingSelector) {
    344             this._element.classList.add(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     344            this._element.classList.add(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
    345345            return false;
    346346        }

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js

    r224354 r225547  
    251251
    252252            if (matchingProperties[i])
    253                 property.__filterResultClassName = WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
     253                property.__filterResultClassName = WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName;
    254254            else
    255                 property.__filterResultClassName = WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName;
     255                property.__filterResultClassName = WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName;
    256256
    257257            this._updateTextMarkerForPropertyIfNeeded(property);
    … …  
    289289            if (indexesOfNeedle.length) {
    290290                matchingPropertyNames.push(property.name);
    291                 property.__filterResultClassName = WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
     291                property.__filterResultClassName = WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName;
    292292                property.__filterResultNeedlePosition = {start: indexesOfNeedle, length: needle.length};
    293293            }

  • trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js

    r225546 r225547  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2017 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .navigation-bar {
    27     display: flex;
    28     justify-content: center;
    29     align-items: center;
    30     flex-wrap: wrap;
    31 
    32     border-bottom: 1px solid var(--border-color);
    33 
    34     height: var(--navigation-bar-height);
    35 
    36     white-space: nowrap;
    37     overflow: hidden;
    38 
    39     outline: none;
    40 }
    41 
    42 .navigation-bar .item {
    43     display: flex;
    44     align-items: center;
    45     flex-wrap: wrap;
    46 
    47     height: auto;
    48     outline: none;
    49 }
    50 
    51 .navigation-bar .item.force-hidden {
    52     display: none;
    53 }
     26WI.ComputedStyleDetailsSidebarPanel = class ComputedStyleDetailsSidebarPanel extends WI.GeneralStyleDetailsSidebarPanel
     27{
     28    constructor()
     29    {
     30        super("style-computed", "Computed", WI.ComputedStyleDetailsPanel);
     31    }
     32};

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

    r224314 r225547  
    363363    _ondragover(event)
    364364    {
    365         if (event.dataTransfer.types.includes(WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType)) {
     365        if (event.dataTransfer.types.includes(WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType)) {
    366366            event.preventDefault();
    367367            event.dataTransfer.dropEffect = "copy";
    … …  
    445445            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
    446446        } else {
    447             let className = event.dataTransfer.getData(WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType);
     447            let className = event.dataTransfer.getData(WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType);
    448448            if (className && treeElement)
    449449                treeElement.representedObject.toggleClass(className, true);

  • trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js

    r222484 r225547  
    3030        let {image, title} = WI.ElementsTabContentView.tabInfo();
    3131        let tabBarItem = new WI.GeneralTabBarItem(image, title);
    32         let detailsSidebarPanelConstructors = [WI.DOMNodeDetailsSidebarPanel, WI.CSSStyleDetailsSidebarPanel];
     32        let detailsSidebarPanelConstructors = [WI.RulesStyleDetailsSidebarPanel, WI.ComputedStyleDetailsSidebarPanel, WI.DOMNodeDetailsSidebarPanel];
    3333
    3434        if (window.LayerTreeAgent && !WI.settings.experimentalEnableLayersTab.value)
    3535            detailsSidebarPanelConstructors.push(WI.LayerTreeDetailsSidebarPanel);
     36
     37        if (WI.settings.experimentalLegacyVisualSidebar.value)
     38            detailsSidebarPanelConstructors.push(WI.VisualStyleDetailsSidebarPanel);
    3639
    3740        super(identifier || "elements", "elements", tabBarItem, null, detailsSidebarPanelConstructors, true);

  • trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js

    r225546 r225547  
    2424 */
    2525
    26 WI.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel extends WI.DOMDetailsSidebarPanel
     26WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel extends WI.DOMDetailsSidebarPanel
    2727{
    28     constructor()
    29     {
    30         const dontCreateNavigationItem = true;
    31         super("css-style", WI.UIString("Styles"), dontCreateNavigationItem);
    32 
    33         this._selectedPanel = null;
    34         this._computedStyleDetailsPanel = new WI.ComputedStyleDetailsPanel(this);
    35         this._rulesStyleDetailsPanel = new WI.RulesStyleDetailsPanel(this);
    36         this._visualStyleDetailsPanel = new WI.VisualStyleDetailsPanel(this);
    37 
    38         if (WI.settings.experimentalLegacyStyleEditor.value)
    39             this._activeRulesStyleDetailsPanel = this._rulesStyleDetailsPanel;
    40         else
    41             this._activeRulesStyleDetailsPanel = new WI.SpreadsheetRulesStyleDetailsPanel(this);
    42 
    43         this._panels = [this._computedStyleDetailsPanel, this._activeRulesStyleDetailsPanel, this._visualStyleDetailsPanel];
    44         this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._activeRulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
    45 
    46         this._lastSelectedPanelSetting = new WI.Setting("last-selected-style-details-panel", this._activeRulesStyleDetailsPanel.navigationInfo.identifier);
     28    constructor(identifier, displayName, panelConstructor)
     29    {
     30        super(identifier, displayName);
     31
     32        this.element.classList.add("css-style");
     33        this._panel = new panelConstructor(this);
     34
    4735        this._classListContainerToggledSetting = new WI.Setting("class-list-container-toggled", false);
    48 
    49         this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedPanelSetting.value) || this._activeRulesStyleDetailsPanel;
    50 
    51         this._navigationItem = new WI.ScopeRadioButtonNavigationItem(this.identifier, this.displayName, this._panelNavigationInfo, this._initiallySelectedPanel.navigationInfo);
    52         this._navigationItem.addEventListener(WI.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
    53 
    5436        this._forcedPseudoClassCheckboxes = {};
    5537    }
    … …  
    5739    // Public
    5840
     41    get panel() { return this._panel; }
     42
    5943    supportsDOMNode(nodeToInspect)
    6044    {
    … …  
    6650        super.visibilityDidChange();
    6751
    68         if (!this._selectedPanel)
     52        if (!this._panel)
    6953            return;
    7054
    7155        if (!this.visible) {
    72             this._selectedPanel.hidden();
     56            this._panel.hidden();
    7357            return;
    7458        }
    … …  
    7660        this._updateNoForcedPseudoClassesScrollOffset();
    7761
    78         this._selectedPanel.shown();
    79         this._selectedPanel.markAsNeedsRefresh(this.domNode);
     62        this._panel.shown();
     63        this._panel.markAsNeedsRefresh(this.domNode);
    8064    }
    8165
    8266    computedStyleDetailsPanelShowProperty(property)
    8367    {
    84         this._activeRulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
    85         this._switchPanels(this._activeRulesStyleDetailsPanel);
    86 
    87         this._navigationItem.selectedItemIdentifier = this._lastSelectedPanelSetting.value;
     68        this.parentSidebar.selectedSidebarPanel = "style-rules";
     69
     70        let styleRulesPanel = null;
     71        for (let sidebarPanel of this.parentSidebar.sidebarPanels) {
     72            if (!(sidebarPanel instanceof WI.RulesStyleDetailsSidebarPanel))
     73                continue;
     74
     75            styleRulesPanel = sidebarPanel;
     76            break;
     77        }
     78
     79        console.assert(styleRulesPanel, "Styles panel is missing.");
     80        styleRulesPanel.panel.scrollToSectionAndHighlightProperty(property);
    8881    }
    8982
    … …  
    9790
    9891        this.contentView.element.scrollTop = this._initialScrollOffset;
    99 
    100         for (let panel of this._panels) {
    101             panel.element._savedScrollTop = undefined;
    102             panel.markAsNeedsRefresh(domNode);
    103         }
     92        this._panel.markAsNeedsRefresh(domNode);
    10493
    10594        this._updatePseudoClassCheckboxes();
    … …  
    164153        }
    165154
    166         this._computedStyleDetailsPanel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
    167         this._rulesStyleDetailsPanel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
    168 
    169         console.assert(this._initiallySelectedPanel, "Should have an initially selected panel.");
    170 
    171         this._switchPanels(this._initiallySelectedPanel);
    172         this._initiallySelectedPanel = null;
     155        this._panel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
     156
     157        this._showPanel(this._panel);
    173158
    174159        let optionsContainer = this.element.createChild("div", "options-container");
    … …  
    213198        this._updateNoForcedPseudoClassesScrollOffset();
    214199
    215         if (this._selectedPanel)
    216             this._selectedPanel.sizeDidChange();
     200        if (this._panel)
     201            this._panel.sizeDidChange();
    217202    }
    218203
    … …  
    223208        if (!WI.cssStyleManager.canForcePseudoClasses())
    224209            return 0;
    225         return this.domNode && this.domNode.enabledPseudoClasses.length ? 0 : WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
     210        return this.domNode && this.domNode.enabledPseudoClasses.length ? 0 : WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
    226211    }
    227212
    … …  
    229214    {
    230215        if (this._forcedPseudoClassContainer)
    231             WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
    232     }
    233 
    234     _panelMatchingIdentifier(identifier)
    235     {
    236         let selectedPanel = null;
    237         for (let panel of this._panels) {
    238             if (panel.navigationInfo.identifier !== identifier)
    239                 continue;
    240 
    241             selectedPanel = panel;
    242             break;
    243         }
    244 
    245         return selectedPanel;
    246     }
    247 
    248     _handleSelectedItemChanged()
    249     {
    250         let selectedIdentifier = this._navigationItem.selectedItemIdentifier;
    251         let selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
    252         this._switchPanels(selectedPanel);
    253     }
    254 
    255     _switchPanels(selectedPanel)
    256     {
    257         console.assert(selectedPanel);
    258 
    259         if (this._selectedPanel) {
    260             this._selectedPanel.hidden();
    261             this._selectedPanel.element._savedScrollTop = this.contentView.element.scrollTop;
    262             this.contentView.removeSubview(this._selectedPanel);
    263         }
    264 
    265         this._selectedPanel = selectedPanel;
    266         if (!this._selectedPanel)
    267             return;
    268 
    269         this.contentView.addSubview(this._selectedPanel);
    270 
    271         if (typeof this._selectedPanel.element._savedScrollTop === "number")
    272             this.contentView.element.scrollTop = this._selectedPanel.element._savedScrollTop;
    273         else
    274             this.contentView.element.scrollTop = this._initialScrollOffset;
    275 
    276         let hasFilter = typeof this._selectedPanel.filterDidChange === "function";
     216            WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
     217    }
     218
     219    _showPanel()
     220    {
     221        this.contentView.addSubview(this._panel);
     222
     223        let hasFilter = typeof this._panel.filterDidChange === "function";
    277224        this.contentView.element.classList.toggle("has-filter-bar", hasFilter);
    278225        if (this._filterBar)
    279             this.contentView.element.classList.toggle(WI.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
    280 
    281         this.contentView.element.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
    282         this._selectedPanel.shown();
    283 
    284         this._lastSelectedPanelSetting.value = selectedPanel.navigationInfo.identifier;
     226            this.contentView.element.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
     227
     228        this.contentView.element.classList.toggle("supports-new-rule", typeof this._panel.newRuleButtonClicked === "function");
     229        this._panel.shown();
    285230    }
    286231
    … …  
    322267    }
    323268
    324 
    325269    _newRuleButtonClicked()
    326270    {
    327         if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonClicked === "function")
    328             this._selectedPanel.newRuleButtonClicked();
     271        if (this._panel && typeof this._panel.newRuleButtonClicked === "function")
     272            this._panel.newRuleButtonClicked();
    329273    }
    330274
    331275    _newRuleButtonContextMenu(event)
    332276    {
    333         if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonContextMenu === "function")
    334             this._selectedPanel.newRuleButtonContextMenu(event);
     277        if (this._panel && typeof this._panel.newRuleButtonContextMenu === "function")
     278            this._panel.newRuleButtonContextMenu(event);
    335279    }
    336280
    … …  
    374318
    375319        let classes = this.domNode.getAttribute("class");
    376         let classToggledMap = this.domNode[WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
     320        let classToggledMap = this.domNode[WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol];
    377321        if (!classToggledMap)
    378             classToggledMap = this.domNode[WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol] = new Map;
     322            classToggledMap = this.domNode[WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol] = new Map;
    379323
    380324        if (classes && classes.length) {
    … …  
    398342            return;
    399343
    400         let classToggledMap = this.domNode[WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
     344        let classToggledMap = this.domNode[WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol];
    401345        if (!classToggledMap)
    402346            return;
    … …  
    418362        classNameTitle.draggable = true;
    419363        classNameTitle.addEventListener("dragstart", (event) => {
    420             event.dataTransfer.setData(WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType, className);
     364            event.dataTransfer.setData(WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType, className);
    421365            event.dataTransfer.effectAllowed = "copy";
    422366        });
    … …  
    438382    _filterDidChange()
    439383    {
    440         this.contentView.element.classList.toggle(WI.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
    441 
    442         this._selectedPanel.filterDidChange(this._filterBar);
     384        this.contentView.element.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
     385
     386        this._panel.filterDidChange(this._filterBar);
    443387    }
    444388
    … …  
    449393};
    450394
    451 WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in sizeDidChange.
    452 WI.CSSStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
    453 WI.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
    454 WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
    455 WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
    456 WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
    457 
    458 WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
    459 WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";
     395WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in sizeDidChange.
     396WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
     397WI.GeneralStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
     398WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
     399WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
     400WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
     401
     402WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
     403WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";

  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css

    r221338 r225547  
    4040}
    4141
    42 .navigation-bar .item {
     42.navigation-bar .item,
     43.sidebar-navigation-bar > .holder .item {
    4344    display: flex;
    4445    align-items: center;
    … …  
    5253    display: none;
    5354}
     55
     56.sidebar-navigation-bar {
     57    display: block;
     58    text-align: center;
     59    height: var(--navigation-bar-height);
     60    border-bottom: 1px solid var(--border-color);
     61}
     62
     63.sidebar-navigation-bar .holder {
     64    display: inline-flex;
     65    align-items: center;
     66    height: var(--navigation-bar-height);
     67    padding: 0 2px;
     68    border-bottom: none;
     69}

  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js

    r224481 r225547  
    422422    _calculateMinimumWidth()
    423423    {
     424        let visibleNavigationItems = this._visibleNavigationItems;
     425        if (!visibleNavigationItems.length)
     426            return 0;
     427
    424428        const wasCollapsed = this.element.classList.contains(WI.NavigationBar.CollapsedStyleClassName);
    425429
    … …  
    428432            this.element.classList.add(WI.NavigationBar.CollapsedStyleClassName);
    429433
    430         let totalItemWidth = this._visibleNavigationItems.reduce((total, item) => total + item.minimumWidth, 0);
     434        let totalItemWidth = visibleNavigationItems.reduce((total, item) => total + item.minimumWidth, 0);
    431435
    432436        // Remove the collapsed style class if we were not collapsed before.

  • trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js

    r225487 r225547  
    356356        for (var labels of this._ruleMediaAndInherticanceList) {
    357357            for (var i = 0; i < labels.length; ++i) {
    358                 labels[i].classList.toggle(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, filterBar.hasActiveFilters());
     358                labels[i].classList.toggle(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, filterBar.hasActiveFilters());
    359359
    360360                if (i === labels.length - 1)
    … …  
    370370                if (this._ruleMediaAndInherticanceList[i].length) {
    371371                    for (var label of this._ruleMediaAndInherticanceList[i])
    372                         label.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
     372                        label.classList.remove(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
    373373                } else
    374                     section.element.classList.add(WI.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
     374                    section.element.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
    375375
    376376                matchFound = true;

  • trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsSidebarPanel.js

    r225546 r225547  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2017 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .navigation-bar {
    27     display: flex;
    28     justify-content: center;
    29     align-items: center;
    30     flex-wrap: wrap;
     26WI.RulesStyleDetailsSidebarPanel = class RulesStyleDetailsSidebarPanel extends WI.GeneralStyleDetailsSidebarPanel
     27{
     28    constructor()
     29    {
     30        let rulesStyleDetailsPanelConstructor;
    3131
    32     border-bottom: 1px solid var(--border-color);
     32        if (WI.settings.experimentalLegacyStyleEditor.value)
     33            rulesStyleDetailsPanelConstructor = WI.RulesStyleDetailsPanel;
     34        else
     35            rulesStyleDetailsPanelConstructor = WI.SpreadsheetRulesStyleDetailsPanel;
    3336
    34     height: var(--navigation-bar-height);
    35 
    36     white-space: nowrap;
    37     overflow: hidden;
    38 
    39     outline: none;
    40 }
    41 
    42 .navigation-bar .item {
    43     display: flex;
    44     align-items: center;
    45     flex-wrap: wrap;
    46 
    47     height: auto;
    48     outline: none;
    49 }
    50 
    51 .navigation-bar .item.force-hidden {
    52     display: none;
    53 }
     37        super("style-rules", "Styles", rulesStyleDetailsPanelConstructor);
     38    }
     39};

  • trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js

    r224499 r225547  
    3131        let tabBarItem = new WI.GeneralTabBarItem(image, title);
    3232        let detailsSidebarPanelConstructors = [WI.ResourceDetailsSidebarPanel, WI.ProbeDetailsSidebarPanel,
    33             WI.DOMNodeDetailsSidebarPanel, WI.CSSStyleDetailsSidebarPanel];
     33            WI.DOMNodeDetailsSidebarPanel, WI.ComputedStyleDetailsSidebarPanel, WI.RulesStyleDetailsSidebarPanel];
    3434
    3535        if (window.LayerTreeAgent && !WI.settings.experimentalEnableLayersTab.value)

  • trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js

    r225257 r225547  
    248248
    249249        if (window.CSSAgent) {
    250             experimentalSettingsView.addSetting(WI.UIString("Styles Panel:"), WI.settings.experimentalLegacyStyleEditor, WI.UIString("Legacy Style Editor"));
    251             experimentalSettingsView.addSeparator();
     250            let stylesGroup = experimentalSettingsView.addGroup(WI.UIString("Styles Sidebar:"));
     251            stylesGroup.addSetting(WI.settings.experimentalLegacyStyleEditor, WI.UIString("Legacy Style Editor"));
     252            stylesGroup.addSetting(WI.settings.experimentalLegacyVisualSidebar, WI.UIString("Legacy Visual Styles Panel"));
    252253        }
    253254
    … …  
    272273
    273274        listenForChange(WI.settings.experimentalLegacyStyleEditor);
     275        listenForChange(WI.settings.experimentalLegacyVisualSidebar);
    274276        listenForChange(WI.settings.experimentalEnableLayersTab);
    275277

  • trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js

    r223308 r225547  
    4343            this.element.classList.add("has-navigation-bar");
    4444
    45             this._navigationBar = new WI.NavigationBar(null, null, "tablist");
     45            this._navigationBar = new WI.SidebarNavigationBar(null, null, "tablist");
    4646            this._navigationBar.addEventListener(WI.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
    4747            this.addSubview(this._navigationBar);

  • trunk/Source/WebInspectorUI/UserInterface/Views/SidebarNavigationBar.js

    r225546 r225547  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2017 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .navigation-bar {
    27     display: flex;
    28     justify-content: center;
    29     align-items: center;
    30     flex-wrap: wrap;
     26WI.SidebarNavigationBar = class SidebarNavigationBar extends WI.NavigationBar
     27{
     28    constructor(element, navigationItems, role, label)
     29    {
     30        super(element, navigationItems, role, label);
    3131
    32     border-bottom: 1px solid var(--border-color);
     32        this.element.classList.add("sidebar-navigation-bar");
     33        this._holderElement = this.element.appendChild(document.createElement("div"));
     34        this._holderElement.className = "holder";
     35    }
    3336
    34     height: var(--navigation-bar-height);
     37    // Public
    3538
    36     white-space: nowrap;
    37     overflow: hidden;
     39    insertNavigationItem(navigationItem, index)
     40    {
     41        return super.insertNavigationItem(navigationItem, index, this._holderElement);
     42    }
    3843
    39     outline: none;
    40 }
     44    // Private
    4145
    42 .navigation-bar .item {
    43     display: flex;
    44     align-items: center;
    45     flex-wrap: wrap;
    46 
    47     height: auto;
    48     outline: none;
    49 }
    50 
    51 .navigation-bar .item.force-hidden {
    52     display: none;
    53 }
     46    _calculateMinimumWidth()
     47    {
     48        return this._holderElement.offsetWidth;
     49    }
     50};

  • trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js

    r221594 r225547  
    126126        if (!WI.cssStyleManager.canForcePseudoClasses())
    127127            return 0;
    128         return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
     128        return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
    129129    }
    130130

  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsSidebarPanel.js

    r225546 r225547  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2017 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .navigation-bar {
    27     display: flex;
    28     justify-content: center;
    29     align-items: center;
    30     flex-wrap: wrap;
    31 
    32     border-bottom: 1px solid var(--border-color);
    33 
    34     height: var(--navigation-bar-height);
    35 
    36     white-space: nowrap;
    37     overflow: hidden;
    38 
    39     outline: none;
    40 }
    41 
    42 .navigation-bar .item {
    43     display: flex;
    44     align-items: center;
    45     flex-wrap: wrap;
    46 
    47     height: auto;
    48     outline: none;
    49 }
    50 
    51 .navigation-bar .item.force-hidden {
    52     display: none;
    53 }
     26WI.VisualStyleDetailsSidebarPanel = class VisualStyleDetailsSidebarPanel extends WI.GeneralStyleDetailsSidebarPanel
     27{
     28    constructor()
     29    {
     30        super("style-visual", "Visual", WI.VisualStyleDetailsPanel);
     31    }
     32};
Note: See TracChangeset for help on using the changeset viewer.