Changeset 143006 in webkit


Ignore:
Timestamp:
Feb 15, 2013 9:05:09 AM (11 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Added an option to split Elements and Sources sidebars in two panes.
​https://bugs.webkit.org/show_bug.cgi?id=109298.

Patch by Vladislav Kaznacheev <​kaznacheev@chromium.org> on 2013-02-15
Reviewed by Vsevolod Vlasov.

Introduced the "Split sidebar" context menu option that splits the horizontal sidebar into two panes.
The width split ratio is 1:1 by default and is preserved when the Inspector window is resized.
Elements sidebar is split into two tabbed panes, Sources sidebar is split into a pane stack and a tabbed pane.

No new tests.

  • inspector/front-end/DOMBreakpointsSidebarPane.js:

(WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype._reattachBody):

  • inspector/front-end/ElementsPanel.js:

(WebInspector.ElementsPanel.get this):
(WebInspector.ElementsPanel):
(WebInspector.ElementsPanel.prototype._sidebarContextMenuEventFired):
(WebInspector.ElementsPanel.prototype._populateContextMenuForSidebar.toggleSetting):
(WebInspector.ElementsPanel.prototype.get _arrangeSidebarPanes.get this):
(WebInspector.ElementsPanel.prototype.addExtensionSidebarPane):

  • inspector/front-end/ExtensionServer.js:

(WebInspector.ExtensionServer.prototype._onCreateSidebarPane):

  • inspector/front-end/ScriptsPanel.js:

(WebInspector.ScriptsPanel):
(WebInspector.ScriptsPanel.prototype._appendUISourceCodeItems):
(WebInspector.ScriptsPanel.prototype._contextMenuEventFired):
(WebInspector.ScriptsPanel.prototype._sidebarContextMenuEventFired):
(WebInspector.ScriptsPanel.prototype._populateContextMenuForSidebar.toggleSetting):
(WebInspector.ScriptsPanel.prototype.get _arrangeSidebarPanes.get this):

  • inspector/front-end/SidebarPane.js:

(WebInspector.SidebarPane):
(WebInspector.SidebarPane.prototype.expand):
(WebInspector.SidebarPane.prototype.onContentReady):
(WebInspector.SidebarPane.prototype._setExpandCallback):
(WebInspector.SidebarPane.prototype.wasShown):
(WebInspector.SidebarPaneTitle):
(WebInspector.SidebarPaneTitle.prototype._expand):
(WebInspector.SidebarPaneTitle.prototype._collapse):
(WebInspector.SidebarPaneTitle.prototype._toggleExpanded):
(WebInspector.SidebarPaneTitle.prototype._onTitleKeyDown):
(WebInspector.SidebarPaneStack):
(WebInspector.SidebarPaneStack.prototype.addPane):
(WebInspector.SidebarTabbedPane):
(WebInspector.SidebarTabbedPane.prototype.addPane):

  • inspector/front-end/SidebarView.js:
  • inspector/front-end/SplitView.js:

(WebInspector.SplitView):
(WebInspector.SplitView.prototype.get mainElement):
(WebInspector.SplitView.prototype.get sidebarElement):

Location:
trunk/Source/WebCore
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r143005 r143006  
     12013-02-15  Vladislav Kaznacheev  <kaznacheev@chromium.org>
     2
     3        Web Inspector: Added an option to split Elements and Sources sidebars in two panes.
     4        https://bugs.webkit.org/show_bug.cgi?id=109298.
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        Introduced the "Split sidebar" context menu option that splits the horizontal sidebar into two panes.
     9        The width split ratio is 1:1 by default and is preserved when the Inspector window is resized.
     10        Elements sidebar is split into two tabbed panes, Sources sidebar is split into a pane stack and a tabbed pane.
     11
     12        No new tests.
     13
     14        * inspector/front-end/DOMBreakpointsSidebarPane.js:
     15        (WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype._reattachBody):
     16        * inspector/front-end/ElementsPanel.js:
     17        (WebInspector.ElementsPanel.get this):
     18        (WebInspector.ElementsPanel):
     19        (WebInspector.ElementsPanel.prototype._sidebarContextMenuEventFired):
     20        (WebInspector.ElementsPanel.prototype._populateContextMenuForSidebar.toggleSetting):
     21        (WebInspector.ElementsPanel.prototype.get _arrangeSidebarPanes.get this):
     22        (WebInspector.ElementsPanel.prototype.addExtensionSidebarPane):
     23        * inspector/front-end/ExtensionServer.js:
     24        (WebInspector.ExtensionServer.prototype._onCreateSidebarPane):
     25        * inspector/front-end/ScriptsPanel.js:
     26        (WebInspector.ScriptsPanel):
     27        (WebInspector.ScriptsPanel.prototype._appendUISourceCodeItems):
     28        (WebInspector.ScriptsPanel.prototype._contextMenuEventFired):
     29        (WebInspector.ScriptsPanel.prototype._sidebarContextMenuEventFired):
     30        (WebInspector.ScriptsPanel.prototype._populateContextMenuForSidebar.toggleSetting):
     31        (WebInspector.ScriptsPanel.prototype.get _arrangeSidebarPanes.get this):
     32        * inspector/front-end/SidebarPane.js:
     33        (WebInspector.SidebarPane):
     34        (WebInspector.SidebarPane.prototype.expand):
     35        (WebInspector.SidebarPane.prototype.onContentReady):
     36        (WebInspector.SidebarPane.prototype._setExpandCallback):
     37        (WebInspector.SidebarPane.prototype.wasShown):
     38        (WebInspector.SidebarPaneTitle):
     39        (WebInspector.SidebarPaneTitle.prototype._expand):
     40        (WebInspector.SidebarPaneTitle.prototype._collapse):
     41        (WebInspector.SidebarPaneTitle.prototype._toggleExpanded):
     42        (WebInspector.SidebarPaneTitle.prototype._onTitleKeyDown):
     43        (WebInspector.SidebarPaneStack):
     44        (WebInspector.SidebarPaneStack.prototype.addPane):
     45        (WebInspector.SidebarTabbedPane):
     46        (WebInspector.SidebarTabbedPane.prototype.addPane):
     47        * inspector/front-end/SidebarView.js:
     48        * inspector/front-end/SplitView.js:
     49        (WebInspector.SplitView):
     50        (WebInspector.SplitView.prototype.get mainElement):
     51        (WebInspector.SplitView.prototype.get sidebarElement):
     52
    1532013-02-15  Vsevolod Vlasov  <vsevik@chromium.org>
    254

  • trunk/Source/WebCore/inspector/front-end/DOMBreakpointsSidebarPane.js

    r142231 r143006  
    367367
    368368WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
    369     expanded: function()
    370     {
    371         return this._wrappedPane.expanded();
    372     },
    373 
    374369    expand: function()
    375370    {
    376371        this._wrappedPane.expand();
    377     },
    378 
    379     collapse: function()
    380     {
    381         this._wrappedPane.collapse();
    382372    },
    383373
    … …  
    399389    _reattachBody: function()
    400390    {
    401         if (this.bodyElement.parentNode == this.element)
    402             return;
    403 
    404         this.bodyElement.removeSelf();
    405         this.element.appendChild(this.bodyElement);
     391        if (this.bodyElement.parentNode !== this.element)
     392            this.element.appendChild(this.bodyElement);
    406393    },
    407394

  • trunk/Source/WebCore/inspector/front-end/ElementsPanel.js

    r142132 r143006  
    6767
    6868    this.contentElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     69    this.splitView.sidebarElement.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
    6970
    7071    this.treeOutline = new WebInspector.ElementsTreeOutline(true, true, false, this._populateContextMenu.bind(this), this._setPseudoClassForNodeId.bind(this));
    … …  
    8687    this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
    8788
    88     this.sidebarPanes.styles.setShowCallback(this.updateStyles.bind(this, false));
    89     this.sidebarPanes.metrics.setShowCallback(this.updateMetrics.bind(this));
    90     this.sidebarPanes.properties.setShowCallback(this.updateProperties.bind(this));
    91     this.sidebarPanes.eventListeners.setShowCallback(this.updateEventListeners.bind(this));
     89    this.sidebarPanes.styles.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateStyles.bind(this, false));
     90    this.sidebarPanes.metrics.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateMetrics.bind(this));
     91    this.sidebarPanes.properties.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateProperties.bind(this));
     92    this.sidebarPanes.eventListeners.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateEventListeners.bind(this));
    9293
    9394    this.sidebarPanes.styles.addEventListener("style edited", this._stylesPaneEdited, this);
    … …  
    9596    this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
    9697
    97     this.sidebarPaneView = new WebInspector.SidebarPaneGroup();
    98     for (var pane in this.sidebarPanes)
    99         this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
    100     this.sidebarPaneView.attachToPanel(this);
    101 
    102     this.sidebarPanes.styles.expand();
     98    this._splitDirectionSetting = WebInspector.settings.createSetting(this.name + "PanelSplitHorizontally", false);
     99    this._splitDirectionSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
     100
     101    this._splitSidebarSetting = WebInspector.settings.createSetting(this.name + "PanelSplitSidebar", false);
     102    this._splitSidebarSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
     103
     104    this._arrangeSidebarPanes();
    103105
    104106    this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
    … …  
    351353        contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Word wrap" : "Word Wrap"), toggleWordWrap.bind(this), WebInspector.settings.domWordWrap.get());
    352354
    353         this.sidebarPaneView.populateContextMenu(contextMenu);
     355        this._populateContextMenuForSidebar(contextMenu);
    354356
    355357        contextMenu.show();
    … …  
    10931095    },
    10941096
     1097    _sidebarContextMenuEventFired: function(event)
     1098    {
     1099        var contextMenu = new WebInspector.ContextMenu(event);
     1100        this._populateContextMenuForSidebar(contextMenu);
     1101        contextMenu.show();
     1102    },
     1103
     1104    _populateContextMenuForSidebar: function(contextMenu)
     1105    {
     1106        if (!WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled())
     1107            return;
     1108
     1109        function toggleSetting(setting)
     1110        {
     1111            setting.set(!setting.get());
     1112        }
     1113        contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split horizontally" : "Split Horizontally"), toggleSetting.bind(this, this._splitDirectionSetting), this._splitDirectionSetting.get());
     1114
     1115        if (!this.splitView.isVertical())
     1116            contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split sidebar" : "Split Sidebar"), toggleSetting.bind(this, this._splitSidebarSetting), this._splitSidebarSetting.get());
     1117    },
     1118
     1119    _arrangeSidebarPanes: function()
     1120    {
     1121        if (this.sidebarPaneView)
     1122            this.sidebarPaneView.detach();
     1123
     1124        var vertical = !WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled() || !this._splitDirectionSetting.get();
     1125        this.splitView.setVertical(vertical);
     1126
     1127        if (vertical) {
     1128            this.sidebarPaneView = new WebInspector.SidebarPaneStack();
     1129            for (var pane in this.sidebarPanes)
     1130                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
     1131        } else if (!this._splitSidebarSetting.get()) {
     1132            this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
     1133            for (var pane in this.sidebarPanes)
     1134                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
     1135        } else {
     1136            this.sidebarPaneView = new WebInspector.SplitView(true, this.name + "PanelSplitSidebarRatio", 0.5);
     1137
     1138            var group1 = new WebInspector.SidebarTabbedPane();
     1139            group1.show(this.sidebarPaneView.firstElement());
     1140            group1.addPane(this.sidebarPanes.computedStyle);
     1141            group1.addPane(this.sidebarPanes.styles);
     1142            group1.addPane(this.sidebarPanes.metrics);
     1143
     1144            var group2 = new WebInspector.SidebarTabbedPane();
     1145            group2.show(this.sidebarPaneView.secondElement());
     1146            group2.addPane(this.sidebarPanes.properties);
     1147            group2.addPane(this.sidebarPanes.domBreakpoints);
     1148            group2.addPane(this.sidebarPanes.eventListeners);
     1149
     1150            this.sidebarPaneView.extensionPaneContainer = group2;
     1151        }
     1152        this.sidebarPaneView.show(this.splitView.sidebarElement);
     1153        this.sidebarPanes.styles.expand();
     1154    },
     1155
     1156    /**
     1157     * @param {string} id
     1158     * @param {WebInspector.SidebarPane} pane
     1159     */
     1160    addExtensionSidebarPane: function(id, pane)
     1161    {
     1162        this.sidebarPanes[id] = pane;
     1163        var container = this.sidebarPaneView.extensionPaneContainer || this.sidebarPaneView;
     1164        container.addPane(pane);
     1165    },
     1166
    10951167    __proto__: WebInspector.Panel.prototype
    10961168}

  • trunk/Source/WebCore/inspector/front-end/ExtensionServer.js

    r142603 r143006  
    232232        if (!panel)
    233233            return this._status.E_NOTFOUND(message.panel);
    234         if (!panel.sidebarPaneView || !panel.sidebarPanes)
     234        if (!panel.addExtensionSidebarPane)
    235235            return this._status.E_NOTSUPPORTED();
    236236        var id = message.id;
    237237        var sidebar = new WebInspector.ExtensionSidebarPane(message.title, message.id);
    238238        this._clientObjects[id] = sidebar;
    239         panel.sidebarPanes[id] = sidebar;
    240         panel.sidebarPaneView.addPane(sidebar);
     239        panel.addExtensionSidebarPane(id, sidebar);
    241240
    242241        return this._status.OK();

  • trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js

    r142269 r143006  
    110110    this.splitView.mainElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
    111111
     112    this.splitView.sidebarElement.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
     113
    112114    this.sidebarPanes = {};
    113115    this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane();
    … …  
    124126    }
    125127
    126     this.sidebarPaneView = new WebInspector.SidebarPaneGroup();
    127     this.sidebarPaneView.element.id = "scripts-debug-sidebar-contents";
    128     for (var pane in this.sidebarPanes)
    129         this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
    130     this.sidebarPaneView.attachToPanel(this);
    131 
    132     this.sidebarPanes.callstack.expand();
    133     this.sidebarPanes.scopechain.expand();
    134     this.sidebarPanes.jsBreakpoints.expand();
    135 
    136     if (WebInspector.settings.watchExpressions.get().length > 0)
    137         this.sidebarPanes.watchExpressions.expand();
     128    this._splitDirectionSetting = WebInspector.settings.createSetting(this.name + "PanelSplitHorizontally", false);
     129    this._splitDirectionSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
     130
     131    this._splitSidebarSetting = WebInspector.settings.createSetting(this.name + "PanelSplitSidebar", false);
     132    this._splitSidebarSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
     133
     134    this._arrangeSidebarPanes();
    138135
    139136    this.sidebarPanes.callstack.registerShortcuts(this.registerShortcuts.bind(this));
    … …  
    11261123
    11271124        if (WebInspector.inspectorView.currentPanel() === this)
    1128             this.sidebarPaneView.populateContextMenu(contextMenu);
     1125            this._populateContextMenuForSidebar(contextMenu);
    11291126    },
    11301127
    … …  
    11681165    {
    11691166        var contextMenu = new WebInspector.ContextMenu(event);
    1170         this.sidebarPaneView.populateContextMenu(contextMenu);
     1167        this._populateContextMenuForSidebar(contextMenu);
    11711168        contextMenu.show();
     1169    },
     1170
     1171    _sidebarContextMenuEventFired: function(event)
     1172    {
     1173        var contextMenu = new WebInspector.ContextMenu(event);
     1174        this._populateContextMenuForSidebar(contextMenu);
     1175        contextMenu.show();
     1176    },
     1177
     1178    _populateContextMenuForSidebar: function(contextMenu)
     1179    {
     1180        if (!WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled())
     1181            return;
     1182
     1183        function toggleSetting(setting)
     1184        {
     1185            setting.set(!setting.get());
     1186        }
     1187        contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split horizontally" : "Split Horizontally"), toggleSetting.bind(this, this._splitDirectionSetting), this._splitDirectionSetting.get());
     1188
     1189        if (!this.splitView.isVertical())
     1190            contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split sidebar" : "Split Sidebar"), toggleSetting.bind(this, this._splitSidebarSetting), this._splitSidebarSetting.get());
     1191    },
     1192
     1193    _arrangeSidebarPanes: function()
     1194    {
     1195        if (this.sidebarPaneView)
     1196            this.sidebarPaneView.detach();
     1197
     1198        var vertical = !WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled() || !this._splitDirectionSetting.get();
     1199        this.splitView.setVertical(vertical);
     1200
     1201        if (vertical) {
     1202            this.sidebarPaneView = new WebInspector.SidebarPaneStack();
     1203            for (var pane in this.sidebarPanes)
     1204                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
     1205        } else if (!this._splitSidebarSetting.get()) {
     1206            this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
     1207            for (var pane in this.sidebarPanes)
     1208                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
     1209        } else {
     1210            this.sidebarPaneView = new WebInspector.SplitView(true, this.name + "PanelSplitSidebarRatio", 0.5);
     1211
     1212            var group1 = new WebInspector.SidebarPaneStack();
     1213            group1.show(this.sidebarPaneView.firstElement());
     1214            group1.addPane(this.sidebarPanes.watchExpressions);
     1215            group1.addPane(this.sidebarPanes.callstack);
     1216            group1.addPane(this.sidebarPanes.scopechain);
     1217
     1218            var group2 = new WebInspector.SidebarTabbedPane();
     1219            group2.show(this.sidebarPaneView.secondElement());
     1220            group2.addPane(this.sidebarPanes.jsBreakpoints);
     1221            group2.addPane(this.sidebarPanes.domBreakpoints);
     1222            group2.addPane(this.sidebarPanes.xhrBreakpoints);
     1223            group2.addPane(this.sidebarPanes.eventListenerBreakpoints);
     1224        }
     1225
     1226        this.sidebarPaneView.element.id = "scripts-debug-sidebar-contents";
     1227        this.sidebarPaneView.show(this.splitView.sidebarElement);
     1228
     1229        this.sidebarPanes.scopechain.expand();
     1230        this.sidebarPanes.jsBreakpoints.expand();
     1231        this.sidebarPanes.callstack.expand();
     1232
     1233        if (WebInspector.settings.watchExpressions.get().length > 0)
     1234            this.sidebarPanes.watchExpressions.expand();
    11721235    },
    11731236

  • trunk/Source/WebCore/inspector/front-end/SidebarPane.js

    r142231 r143006  
    4444
    4545    this._expandCallback = null;
    46     this._showCallback = null;
     46}
     47
     48WebInspector.SidebarPane.EventTypes = {
     49    wasShown: "wasShown"
    4750}
    4851
    … …  
    6265    },
    6366
    64     expanded: function()
    65     {
    66         return this._expanded;
    67     },
    68 
    6967    expand: function()
    7068    {
    71         this._expanded = true;
    7269        this.prepareContent(this.onContentReady.bind(this));
    73     },
    74 
    75     collapse: function()
    76     {
    77         this._expanded = false;
    7870    },
    7971
    … …  
    8274        if (this._expandCallback)
    8375            this._expandCallback();
     76        else
     77            this._expandPending = true;
    8478    },
    8579
    … …  
    9084    {
    9185        this._expandCallback = callback;
    92     },
    93 
    94     /**
    95      * @param {function()} callback
    96      */
    97     setShowCallback: function(callback)
    98     {
    99         this._showCallback = callback;
     86        if (this._expandPending) {
     87            delete this._expandPending;
     88            this._expandCallback();
     89        }
    10090    },
    10191
    … …  
    10393    {
    10494        WebInspector.View.prototype.wasShown.call(this);
    105         if (this._showCallback)
    106             this._showCallback();
     95        this.dispatchEventToListeners(WebInspector.SidebarPane.EventTypes.wasShown);
    10796    },
    10897
    10998    __proto__: WebInspector.View.prototype
     99}
     100
     101/**
     102 * @constructor
     103 * @param {Element} container
     104 * @param {WebInspector.SidebarPane} pane
     105 */
     106WebInspector.SidebarPaneTitle = function(container, pane)
     107{
     108    this._pane = pane;
     109
     110    this.element = container.createChild("div", "pane-title");
     111    this.element.textContent = pane.title();
     112    this.element.tabIndex = 0;
     113    this.element.addEventListener("click", this._toggleExpanded.bind(this), false);
     114    this.element.addEventListener("keydown", this._onTitleKeyDown.bind(this), false);
     115    this.element.appendChild(this._pane.titleElement);
     116
     117    this._pane._setExpandCallback(this._expand.bind(this));
     118}
     119
     120WebInspector.SidebarPaneTitle.prototype = {
     121
     122    _expand: function()
     123    {
     124        this.element.addStyleClass("expanded");
     125        this._pane.show(this.element.parentNode, this.element.nextSibling);
     126    },
     127
     128    _collapse: function()
     129    {
     130        this.element.removeStyleClass("expanded");
     131        if (this._pane.element.parentNode == this.element.parentNode)
     132            this._pane.detach();
     133    },
     134
     135    _toggleExpanded: function()
     136    {
     137        if (this.element.hasStyleClass("expanded"))
     138            this._collapse();
     139        else
     140            this._pane.expand();
     141    },
     142
     143    /**
     144     * @param {Event} event
     145     */
     146    _onTitleKeyDown: function(event)
     147    {
     148        if (isEnterKey(event) || event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
     149            this._toggleExpanded();
     150    }
    110151}
    111152
    … …  
    118159    WebInspector.View.call(this);
    119160    this.element.className = "sidebar-pane-stack fill";
    120 
    121     this._titles = [];
    122     this._panes = [];
    123161}
    124162
    … …  
    129167    addPane: function(pane)
    130168    {
    131         var index = this._panes.length;
    132         this._panes.push(pane);
    133 
    134         var title = this.element.createChild("div", "pane-title");
    135         title.textContent = pane.title();
    136         title.tabIndex = 0;
    137         title.addEventListener("click", this._togglePane.bind(this, index), false);
    138         title.addEventListener("keydown", this._onTitleKeyDown.bind(this, index), false);
    139         this._titles.push(title);
    140 
    141         pane.titleElement.removeSelf();
    142         title.appendChild(pane.titleElement);
    143 
    144         pane._setExpandCallback(this._onPaneExpanded.bind(this, index));
    145         this._setExpanded(index, pane.expanded());
    146     },
    147 
    148     activePaneId: function()
    149     {
    150         return this._activePaneIndex;
    151     },
    152 
    153     /**
    154      * @param {number} index
    155      */
    156     setActivePaneId: function(index)
    157     {
    158         this._panes[index].expand();
    159     },
    160 
    161     /**
    162      * @param {number} index
    163      */
    164     _isExpanded: function(index)
    165     {
    166         var title = this._titles[index];
    167         return title.hasStyleClass("expanded");
    168     },
    169 
    170     /**
    171      * @param {number} index
    172      * @param {boolean} on
    173      */
    174     _setExpanded: function(index, on)
    175     {
    176         if (on)
    177             this._panes[index].expand();
    178         else
    179             this._collapsePane(index);
    180     },
    181 
    182     /**
    183      * @param {number} index
    184      */
    185     _onPaneExpanded: function(index)
    186     {
    187         this._activePaneIndex = index;
    188         var pane = this._panes[index];
    189         var title = this._titles[index];
    190         title.addStyleClass("expanded");
    191         pane.show(this.element, title.nextSibling);
    192     },
    193 
    194     /**
    195      * @param {number} index
    196      */
    197     _collapsePane: function(index)
    198     {
    199         var pane = this._panes[index];
    200         var title = this._titles[index];
    201         title.removeStyleClass("expanded");
    202         pane.collapse();
    203         if (pane.element.parentNode == this.element)
    204             pane.detach();
    205     },
    206 
    207     /**
    208      * @param {number} index
    209      * @private
    210      */
    211     _togglePane: function(index)
    212     {
    213         this._setExpanded(index, !this._isExpanded(index));
    214     },
    215    
    216     /**
    217      * @param {number} index
    218      * @param {Event} event
    219      * @private
    220      */
    221     _onTitleKeyDown: function(index, event)
    222     {
    223         if (isEnterKey(event) || event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
    224             this._togglePane(index);
     169        new WebInspector.SidebarPaneTitle(this.element, pane);
    225170    },
    226171
    … …  
    236181    WebInspector.TabbedPane.call(this);
    237182    this.element.addStyleClass("sidebar-tabbed-pane");
    238 
    239     this._panes = [];
    240183}
    241184
    … …  
    246189    addPane: function(pane)
    247190    {
    248         var index = this._panes.length;
    249         this._panes.push(pane);
    250         this.appendTab(index.toString(), pane.title(), pane);
     191        var title = pane.title();
     192        this.appendTab(title, title, pane);
     193        pane.element.appendChild(pane.titleElement);
     194        pane._setExpandCallback(this.selectTab.bind(this, title));
    251195
    252         pane.titleElement.removeSelf();
    253         pane.element.appendChild(pane.titleElement);
    254 
    255         pane._setExpandCallback(this.setActivePaneId.bind(this, index));
    256     },
    257 
    258     activePaneId: function()
    259     {
    260         return this.selectedTabId;
    261     },
    262 
    263     /**
    264      * @param {number} index
    265      */
    266     setActivePaneId: function(index)
    267     {
    268         this.selectTab(index.toString());
    269196    },
    270197
    271198    __proto__: WebInspector.TabbedPane.prototype
    272199}
    273 
    274 /**
    275  * @constructor
    276  * @extends {WebInspector.View}
    277  */
    278 WebInspector.SidebarPaneGroup = function()
    279 {
    280     WebInspector.View.call(this);
    281     this.element.className = "fill";
    282 
    283     this._panes = [];
    284 }
    285 
    286 WebInspector.SidebarPaneGroup.prototype = {
    287     /**
    288      * @param {boolean} stacked
    289      */
    290     setStacked: function(stacked)
    291     {
    292         if (this._stacked === stacked)
    293             return;
    294 
    295         this._stacked = stacked;
    296 
    297         var activePaneId;
    298         if (this._currentView) {
    299             activePaneId = this._currentView.activePaneId();
    300             this._currentView.detach();
    301         }
    302 
    303         if (this._stacked)
    304             this._currentView = new WebInspector.SidebarPaneStack();
    305         else
    306             this._currentView = new WebInspector.SidebarTabbedPane();
    307 
    308         for (var i = 0; i < this._panes.length; i++)
    309             this._currentView.addPane(this._panes[i]);
    310 
    311         this._currentView.show(this.element);
    312 
    313         if (typeof activePaneId !== "undefined")
    314             this._currentView.setActivePaneId(activePaneId);
    315     },
    316 
    317     /**
    318      * @param {WebInspector.SidebarPane} pane
    319      */
    320     addPane: function(pane)
    321     {
    322         this._panes.push(pane);
    323         if (this._currentView)
    324             this._currentView.addPane(pane);
    325     },
    326 
    327     /**
    328      * @param {WebInspector.Panel} panel
    329      */
    330     attachToPanel: function(panel)
    331     {
    332         this._sidebarView = panel.splitView;
    333 
    334         this._sidebarView.sidebarElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
    335 
    336         var splitDirectionSettingName = panel.name + "PanelSplitHorizontally";
    337         if (!WebInspector.settings[splitDirectionSettingName])
    338             WebInspector.settings[splitDirectionSettingName] = WebInspector.settings.createSetting(splitDirectionSettingName, false);
    339         this._splitDirectionSetting = WebInspector.settings[splitDirectionSettingName];
    340         this._splitDirectionSetting.addChangeListener(this._onSplitDirectionSettingChanged.bind(this));
    341 
    342         this._updateSplitDirection();
    343 
    344         this.show(this._sidebarView.sidebarElement);
    345     },
    346 
    347     populateContextMenu: function(contextMenu)
    348     {
    349         if (!WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled())
    350             return;
    351 
    352         function toggleSplitDirection()
    353         {
    354             this._splitDirectionSetting.set(!this._splitDirectionSetting.get());
    355         }
    356         contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split horizontally" : "Split Horizontally"), toggleSplitDirection.bind(this), this._splitDirectionSetting.get());
    357     },
    358 
    359     _contextMenuEventFired: function(event)
    360     {
    361         var contextMenu = new WebInspector.ContextMenu(event);
    362         this.populateContextMenu(contextMenu);
    363         contextMenu.show();
    364     },
    365 
    366     _updateSplitDirection: function()
    367     {
    368         var vertical = !WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled() || !this._splitDirectionSetting.get();
    369         this._sidebarView.setVertical(vertical);
    370         this.setStacked(vertical);
    371     },
    372 
    373     _onSplitDirectionSettingChanged: function()
    374     {
    375         // Cannot call _updateSplitDirection directly because View.prototype.show() does not work properly from inside notifications.
    376         setTimeout(this._updateSplitDirection.bind(this), 0);
    377     },
    378 
    379     __proto__: WebInspector.View.prototype
    380 }
    381 

  • trunk/Source/WebCore/inspector/front-end/SidebarView.js

    r142738 r143006  
    6262
    6363WebInspector.SidebarView.prototype = {
    64     /**
    65      * @return {Element}
    66      */
    67     get mainElement()
    68     {
    69         return this.isSidebarSecond() ? this.firstElement() : this.secondElement();
    70     },
    71 
    72     /**
    73      * @return {Element}
    74      */
    75     get sidebarElement()
    76     {
    77         return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
    78     },
    79 
    8064    /**
    8165     * @param {number} width

  • trunk/Source/WebCore/inspector/front-end/SplitView.js

    r142745 r143006  
    5959    this._sidebarSizeSettingName = sidebarSizeSettingName;
    6060
    61     this._secondIsSidebar = true;
     61    this.setSecondIsSidebar(true);
    6262
    6363    this._innerSetVertical(isVertical);
    … …  
    119119    {
    120120        return this._secondElement;
     121    },
     122
     123    /**
     124     * @return {Element}
     125     */
     126    get mainElement()
     127    {
     128        return this.isSidebarSecond() ? this.firstElement() : this.secondElement();
     129    },
     130
     131    /**
     132     * @return {Element}
     133     */
     134    get sidebarElement()
     135    {
     136        return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
    121137    },
    122138
Note: See TracChangeset for help on using the changeset viewer.