Web Inspector: Added an option to split Elements and Sources sidebars in two panes.
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Feb 2013 17:05:09 +0000 (17:05 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Feb 2013 17:05:09 +0000 (17:05 +0000)
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@143006 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/DOMBreakpointsSidebarPane.js
Source/WebCore/inspector/front-end/ElementsPanel.js
Source/WebCore/inspector/front-end/ExtensionServer.js
Source/WebCore/inspector/front-end/ScriptsPanel.js
Source/WebCore/inspector/front-end/SidebarPane.js
Source/WebCore/inspector/front-end/SidebarView.js
Source/WebCore/inspector/front-end/SplitView.js

index 240bd2ab10049b5f53467d10dca57621924ef2ce..021700d7372f84e2e400378687a1bd8af4d47647 100644 (file)
@@ -1,3 +1,55 @@
+2013-02-15  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Added an option to split Elements and Sources sidebars in two panes.
+        https://bugs.webkit.org/show_bug.cgi?id=109298.
+
+        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):
+
 2013-02-15  Vsevolod Vlasov  <vsevik@chromium.org>
 
         Web Inspector: Several consecutive Backspace or Delete strikes should not be marked as undoable state.
index 7501429578511a4a87338a486f06a40665d5c84c..53b620fc8a2211a0fcc2c06930a2bb2bb1de9eb6 100644 (file)
@@ -366,21 +366,11 @@ WebInspector.DOMBreakpointsSidebarPane.Proxy = function(pane, panel)
 }
 
 WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
-    expanded: function()
-    {
-        return this._wrappedPane.expanded();
-    },
-
     expand: function()
     {
         this._wrappedPane.expand();
     },
 
-    collapse: function()
-    {
-        this._wrappedPane.collapse();
-    },
-
     onContentReady: function()
     {
         if (!this._panel.isShowing())
@@ -398,11 +388,8 @@ WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
 
     _reattachBody: function()
     {
-        if (this.bodyElement.parentNode == this.element)
-            return;
-
-        this.bodyElement.removeSelf();
-        this.element.appendChild(this.bodyElement);
+        if (this.bodyElement.parentNode !== this.element)
+            this.element.appendChild(this.bodyElement);
     },
 
     __proto__: WebInspector.SidebarPane.prototype
index df792837030ee7e4c6232959b72cc4b2164a6f4c..66f73131147bf7ca5d0c190644f5e9965349748f 100644 (file)
@@ -66,6 +66,7 @@ WebInspector.ElementsPanel = function()
     WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
     this.contentElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
+    this.splitView.sidebarElement.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
 
     this.treeOutline = new WebInspector.ElementsTreeOutline(true, true, false, this._populateContextMenu.bind(this), this._setPseudoClassForNodeId.bind(this));
     this.treeOutline.wireToDomAgent();
@@ -85,21 +86,22 @@ WebInspector.ElementsPanel = function()
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
     this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
 
-    this.sidebarPanes.styles.setShowCallback(this.updateStyles.bind(this, false));
-    this.sidebarPanes.metrics.setShowCallback(this.updateMetrics.bind(this));
-    this.sidebarPanes.properties.setShowCallback(this.updateProperties.bind(this));
-    this.sidebarPanes.eventListeners.setShowCallback(this.updateEventListeners.bind(this));
+    this.sidebarPanes.styles.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateStyles.bind(this, false));
+    this.sidebarPanes.metrics.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateMetrics.bind(this));
+    this.sidebarPanes.properties.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateProperties.bind(this));
+    this.sidebarPanes.eventListeners.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateEventListeners.bind(this));
 
     this.sidebarPanes.styles.addEventListener("style edited", this._stylesPaneEdited, this);
     this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this);
     this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
 
-    this.sidebarPaneView = new WebInspector.SidebarPaneGroup();
-    for (var pane in this.sidebarPanes)
-        this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
-    this.sidebarPaneView.attachToPanel(this);
+    this._splitDirectionSetting = WebInspector.settings.createSetting(this.name + "PanelSplitHorizontally", false);
+    this._splitDirectionSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
 
-    this.sidebarPanes.styles.expand();
+    this._splitSidebarSetting = WebInspector.settings.createSetting(this.name + "PanelSplitSidebar", false);
+    this._splitSidebarSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
+
+    this._arrangeSidebarPanes();
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(0);
@@ -350,7 +352,7 @@ WebInspector.ElementsPanel.prototype = {
         contextMenu.appendSeparator();
         contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Word wrap" : "Word Wrap"), toggleWordWrap.bind(this), WebInspector.settings.domWordWrap.get());
 
-        this.sidebarPaneView.populateContextMenu(contextMenu);
+        this._populateContextMenuForSidebar(contextMenu);
 
         contextMenu.show();
     },
@@ -1092,5 +1094,75 @@ WebInspector.ElementsPanel.prototype = {
         contextMenu.appendItem(WebInspector.UIString("Reveal in Elements Panel"), revealElement.bind(this));
     },
 
+    _sidebarContextMenuEventFired: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        this._populateContextMenuForSidebar(contextMenu);
+        contextMenu.show();
+    },
+
+    _populateContextMenuForSidebar: function(contextMenu)
+    {
+        if (!WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled())
+            return;
+
+        function toggleSetting(setting)
+        {
+            setting.set(!setting.get());
+        }
+        contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split horizontally" : "Split Horizontally"), toggleSetting.bind(this, this._splitDirectionSetting), this._splitDirectionSetting.get());
+
+        if (!this.splitView.isVertical())
+            contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split sidebar" : "Split Sidebar"), toggleSetting.bind(this, this._splitSidebarSetting), this._splitSidebarSetting.get());
+    },
+
+    _arrangeSidebarPanes: function()
+    {
+        if (this.sidebarPaneView)
+            this.sidebarPaneView.detach();
+
+        var vertical = !WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled() || !this._splitDirectionSetting.get();
+        this.splitView.setVertical(vertical);
+
+        if (vertical) {
+            this.sidebarPaneView = new WebInspector.SidebarPaneStack();
+            for (var pane in this.sidebarPanes)
+                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
+        } else if (!this._splitSidebarSetting.get()) {
+            this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
+            for (var pane in this.sidebarPanes)
+                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
+        } else {
+            this.sidebarPaneView = new WebInspector.SplitView(true, this.name + "PanelSplitSidebarRatio", 0.5);
+
+            var group1 = new WebInspector.SidebarTabbedPane();
+            group1.show(this.sidebarPaneView.firstElement());
+            group1.addPane(this.sidebarPanes.computedStyle);
+            group1.addPane(this.sidebarPanes.styles);
+            group1.addPane(this.sidebarPanes.metrics);
+
+            var group2 = new WebInspector.SidebarTabbedPane();
+            group2.show(this.sidebarPaneView.secondElement());
+            group2.addPane(this.sidebarPanes.properties);
+            group2.addPane(this.sidebarPanes.domBreakpoints);
+            group2.addPane(this.sidebarPanes.eventListeners);
+
+            this.sidebarPaneView.extensionPaneContainer = group2;
+        }
+        this.sidebarPaneView.show(this.splitView.sidebarElement);
+        this.sidebarPanes.styles.expand();
+    },
+
+    /**
+     * @param {string} id
+     * @param {WebInspector.SidebarPane} pane
+     */
+    addExtensionSidebarPane: function(id, pane)
+    {
+        this.sidebarPanes[id] = pane;
+        var container = this.sidebarPaneView.extensionPaneContainer || this.sidebarPaneView;
+        container.addPane(pane);
+    },
+
     __proto__: WebInspector.Panel.prototype
 }
index b5a42f178ed18caec342e81b0ceefbadbf2e304f..fd307fa95fc9cfc345ce74a31c0c9b73aa9ff43b 100644 (file)
@@ -231,13 +231,12 @@ WebInspector.ExtensionServer.prototype = {
         var panel = WebInspector.panel(message.panel);
         if (!panel)
             return this._status.E_NOTFOUND(message.panel);
-        if (!panel.sidebarPaneView || !panel.sidebarPanes)
+        if (!panel.addExtensionSidebarPane)
             return this._status.E_NOTSUPPORTED();
         var id = message.id;
         var sidebar = new WebInspector.ExtensionSidebarPane(message.title, message.id);
         this._clientObjects[id] = sidebar;
-        panel.sidebarPanes[id] = sidebar;
-        panel.sidebarPaneView.addPane(sidebar);
+        panel.addExtensionSidebarPane(id, sidebar);
 
         return this._status.OK();
     },
index 1a0ab54a4311217401ac9be7b8ec0f28832a96f4..7d024464fc7ce53685c2dd5a2b5126a273f264a4 100644 (file)
@@ -109,6 +109,8 @@ WebInspector.ScriptsPanel = function(workspaceForTest)
     this.splitView.mainElement.appendChild(this.debugSidebarResizeWidgetElement);
     this.splitView.mainElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
 
+    this.splitView.sidebarElement.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
+
     this.sidebarPanes = {};
     this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane();
     this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane();
@@ -123,18 +125,13 @@ WebInspector.ScriptsPanel = function(workspaceForTest)
         this.sidebarPanes.workerList = new WebInspector.WorkersSidebarPane(WebInspector.workerManager);
     }
 
-    this.sidebarPaneView = new WebInspector.SidebarPaneGroup();
-    this.sidebarPaneView.element.id = "scripts-debug-sidebar-contents";
-    for (var pane in this.sidebarPanes)
-        this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
-    this.sidebarPaneView.attachToPanel(this);
+    this._splitDirectionSetting = WebInspector.settings.createSetting(this.name + "PanelSplitHorizontally", false);
+    this._splitDirectionSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
 
-    this.sidebarPanes.callstack.expand();
-    this.sidebarPanes.scopechain.expand();
-    this.sidebarPanes.jsBreakpoints.expand();
+    this._splitSidebarSetting = WebInspector.settings.createSetting(this.name + "PanelSplitSidebar", false);
+    this._splitSidebarSetting.addChangeListener(this._arrangeSidebarPanes.bind(this));
 
-    if (WebInspector.settings.watchExpressions.get().length > 0)
-        this.sidebarPanes.watchExpressions.expand();
+    this._arrangeSidebarPanes();
 
     this.sidebarPanes.callstack.registerShortcuts(this.registerShortcuts.bind(this));
     this.registerShortcuts(WebInspector.ScriptsPanelDescriptor.ShortcutKeys.EvaluateSelectionInConsole, this._evaluateSelectionInConsole.bind(this));
@@ -1125,7 +1122,7 @@ WebInspector.ScriptsPanel.prototype = {
             contextMenu.appendApplicableItems(resource.request);
 
         if (WebInspector.inspectorView.currentPanel() === this)
-            this.sidebarPaneView.populateContextMenu(contextMenu);
+            this._populateContextMenuForSidebar(contextMenu);
     },
 
     /** 
@@ -1167,9 +1164,75 @@ WebInspector.ScriptsPanel.prototype = {
     _contextMenuEventFired: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
-        this.sidebarPaneView.populateContextMenu(contextMenu);
+        this._populateContextMenuForSidebar(contextMenu);
+        contextMenu.show();
+    },
+
+    _sidebarContextMenuEventFired: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        this._populateContextMenuForSidebar(contextMenu);
         contextMenu.show();
     },
 
+    _populateContextMenuForSidebar: function(contextMenu)
+    {
+        if (!WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled())
+            return;
+
+        function toggleSetting(setting)
+        {
+            setting.set(!setting.get());
+        }
+        contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split horizontally" : "Split Horizontally"), toggleSetting.bind(this, this._splitDirectionSetting), this._splitDirectionSetting.get());
+
+        if (!this.splitView.isVertical())
+            contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split sidebar" : "Split Sidebar"), toggleSetting.bind(this, this._splitSidebarSetting), this._splitSidebarSetting.get());
+    },
+
+    _arrangeSidebarPanes: function()
+    {
+        if (this.sidebarPaneView)
+            this.sidebarPaneView.detach();
+
+        var vertical = !WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled() || !this._splitDirectionSetting.get();
+        this.splitView.setVertical(vertical);
+
+        if (vertical) {
+            this.sidebarPaneView = new WebInspector.SidebarPaneStack();
+            for (var pane in this.sidebarPanes)
+                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
+        } else if (!this._splitSidebarSetting.get()) {
+            this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
+            for (var pane in this.sidebarPanes)
+                this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
+        } else {
+            this.sidebarPaneView = new WebInspector.SplitView(true, this.name + "PanelSplitSidebarRatio", 0.5);
+
+            var group1 = new WebInspector.SidebarPaneStack();
+            group1.show(this.sidebarPaneView.firstElement());
+            group1.addPane(this.sidebarPanes.watchExpressions);
+            group1.addPane(this.sidebarPanes.callstack);
+            group1.addPane(this.sidebarPanes.scopechain);
+
+            var group2 = new WebInspector.SidebarTabbedPane();
+            group2.show(this.sidebarPaneView.secondElement());
+            group2.addPane(this.sidebarPanes.jsBreakpoints);
+            group2.addPane(this.sidebarPanes.domBreakpoints);
+            group2.addPane(this.sidebarPanes.xhrBreakpoints);
+            group2.addPane(this.sidebarPanes.eventListenerBreakpoints);
+        }
+
+        this.sidebarPaneView.element.id = "scripts-debug-sidebar-contents";
+        this.sidebarPaneView.show(this.splitView.sidebarElement);
+
+        this.sidebarPanes.scopechain.expand();
+        this.sidebarPanes.jsBreakpoints.expand();
+        this.sidebarPanes.callstack.expand();
+
+        if (WebInspector.settings.watchExpressions.get().length > 0)
+            this.sidebarPanes.watchExpressions.expand();
+    },
+
     __proto__: WebInspector.Panel.prototype
 }
index 784c0e3702aaf412ac2f10ac64f79eff7691cc04..120840075bd16450ed3a1804613da6f9db259f79 100644 (file)
@@ -43,7 +43,10 @@ WebInspector.SidebarPane = function(title)
     this._title = title;
 
     this._expandCallback = null;
-    this._showCallback = null;
+}
+
+WebInspector.SidebarPane.EventTypes = {
+    wasShown: "wasShown"
 }
 
 WebInspector.SidebarPane.prototype = {
@@ -61,26 +64,17 @@ WebInspector.SidebarPane.prototype = {
             callback();
     },
 
-    expanded: function()
-    {
-        return this._expanded;
-    },
-
     expand: function()
     {
-        this._expanded = true;
         this.prepareContent(this.onContentReady.bind(this));
     },
 
-    collapse: function()
-    {
-        this._expanded = false;
-    },
-
     onContentReady: function()
     {
         if (this._expandCallback)
             this._expandCallback();
+        else
+            this._expandPending = true;
     },
 
     /**
@@ -89,21 +83,16 @@ WebInspector.SidebarPane.prototype = {
     _setExpandCallback: function(callback)
     {
         this._expandCallback = callback;
-    },
-
-    /**
-     * @param {function()} callback
-     */
-    setShowCallback: function(callback)
-    {
-        this._showCallback = callback;
+        if (this._expandPending) {
+            delete this._expandPending;
+            this._expandCallback();
+        }
     },
 
     wasShown: function()
     {
         WebInspector.View.prototype.wasShown.call(this);
-        if (this._showCallback)
-            this._showCallback();
+        this.dispatchEventToListeners(WebInspector.SidebarPane.EventTypes.wasShown);
     },
 
     __proto__: WebInspector.View.prototype
@@ -111,271 +100,100 @@ WebInspector.SidebarPane.prototype = {
 
 /**
  * @constructor
- * @extends {WebInspector.View}
+ * @param {Element} container
+ * @param {WebInspector.SidebarPane} pane
  */
-WebInspector.SidebarPaneStack = function()
+WebInspector.SidebarPaneTitle = function(container, pane)
 {
-    WebInspector.View.call(this);
-    this.element.className = "sidebar-pane-stack fill";
-
-    this._titles = [];
-    this._panes = [];
-}
-
-WebInspector.SidebarPaneStack.prototype = {
-    /**
-     * @param {WebInspector.SidebarPane} pane
-     */
-    addPane: function(pane)
-    {
-        var index = this._panes.length;
-        this._panes.push(pane);
+    this._pane = pane;
 
-        var title = this.element.createChild("div", "pane-title");
-        title.textContent = pane.title();
-        title.tabIndex = 0;
-        title.addEventListener("click", this._togglePane.bind(this, index), false);
-        title.addEventListener("keydown", this._onTitleKeyDown.bind(this, index), false);
-        this._titles.push(title);
+    this.element = container.createChild("div", "pane-title");
+    this.element.textContent = pane.title();
+    this.element.tabIndex = 0;
+    this.element.addEventListener("click", this._toggleExpanded.bind(this), false);
+    this.element.addEventListener("keydown", this._onTitleKeyDown.bind(this), false);
+    this.element.appendChild(this._pane.titleElement);
 
-        pane.titleElement.removeSelf();
-        title.appendChild(pane.titleElement);
+    this._pane._setExpandCallback(this._expand.bind(this));
+}
 
-        pane._setExpandCallback(this._onPaneExpanded.bind(this, index));
-        this._setExpanded(index, pane.expanded());
-    },
+WebInspector.SidebarPaneTitle.prototype = {
 
-    activePaneId: function()
+    _expand: function()
     {
-        return this._activePaneIndex;
+        this.element.addStyleClass("expanded");
+        this._pane.show(this.element.parentNode, this.element.nextSibling);
     },
 
-    /**
-     * @param {number} index
-     */
-    setActivePaneId: function(index)
-    {
-        this._panes[index].expand();
-    },
-
-    /**
-     * @param {number} index
-     */
-    _isExpanded: function(index)
+    _collapse: function()
     {
-        var title = this._titles[index];
-        return title.hasStyleClass("expanded");
+        this.element.removeStyleClass("expanded");
+        if (this._pane.element.parentNode == this.element.parentNode)
+            this._pane.detach();
     },
 
-    /**
-     * @param {number} index
-     * @param {boolean} on
-     */
-    _setExpanded: function(index, on)
+    _toggleExpanded: function()
     {
-        if (on)
-            this._panes[index].expand();
+        if (this.element.hasStyleClass("expanded"))
+            this._collapse();
         else
-            this._collapsePane(index);
-    },
-
-    /**
-     * @param {number} index
-     */
-    _onPaneExpanded: function(index)
-    {
-        this._activePaneIndex = index;
-        var pane = this._panes[index];
-        var title = this._titles[index];
-        title.addStyleClass("expanded");
-        pane.show(this.element, title.nextSibling);
-    },
-
-    /**
-     * @param {number} index
-     */
-    _collapsePane: function(index)
-    {
-        var pane = this._panes[index];
-        var title = this._titles[index];
-        title.removeStyleClass("expanded");
-        pane.collapse();
-        if (pane.element.parentNode == this.element)
-            pane.detach();
+            this._pane.expand();
     },
 
     /**
-     * @param {number} index
-     * @private
-     */
-    _togglePane: function(index)
-    {
-        this._setExpanded(index, !this._isExpanded(index));
-    },
-    
-    /**
-     * @param {number} index
      * @param {Event} event
-     * @private
      */
-    _onTitleKeyDown: function(index, event)
+    _onTitleKeyDown: function(event)
     {
         if (isEnterKey(event) || event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
-            this._togglePane(index);
-    },
-
-    __proto__: WebInspector.View.prototype
+            this._toggleExpanded();
+    }
 }
 
 /**
  * @constructor
- * @extends {WebInspector.TabbedPane}
+ * @extends {WebInspector.View}
  */
-WebInspector.SidebarTabbedPane = function()
+WebInspector.SidebarPaneStack = function()
 {
-    WebInspector.TabbedPane.call(this);
-    this.element.addStyleClass("sidebar-tabbed-pane");
-
-    this._panes = [];
+    WebInspector.View.call(this);
+    this.element.className = "sidebar-pane-stack fill";
 }
 
-WebInspector.SidebarTabbedPane.prototype = {
+WebInspector.SidebarPaneStack.prototype = {
     /**
      * @param {WebInspector.SidebarPane} pane
      */
     addPane: function(pane)
     {
-        var index = this._panes.length;
-        this._panes.push(pane);
-        this.appendTab(index.toString(), pane.title(), pane);
-
-        pane.titleElement.removeSelf();
-        pane.element.appendChild(pane.titleElement);
-
-        pane._setExpandCallback(this.setActivePaneId.bind(this, index));
-    },
-
-    activePaneId: function()
-    {
-        return this.selectedTabId;
-    },
-
-    /**
-     * @param {number} index
-     */
-    setActivePaneId: function(index)
-    {
-        this.selectTab(index.toString());
+        new WebInspector.SidebarPaneTitle(this.element, pane);
     },
 
-    __proto__: WebInspector.TabbedPane.prototype
+    __proto__: WebInspector.View.prototype
 }
 
 /**
  * @constructor
- * @extends {WebInspector.View}
+ * @extends {WebInspector.TabbedPane}
  */
-WebInspector.SidebarPaneGroup = function()
+WebInspector.SidebarTabbedPane = function()
 {
-    WebInspector.View.call(this);
-    this.element.className = "fill";
-
-    this._panes = [];
+    WebInspector.TabbedPane.call(this);
+    this.element.addStyleClass("sidebar-tabbed-pane");
 }
 
-WebInspector.SidebarPaneGroup.prototype = {
-    /**
-     * @param {boolean} stacked
-     */
-    setStacked: function(stacked)
-    {
-        if (this._stacked === stacked)
-            return;
-
-        this._stacked = stacked;
-
-        var activePaneId;
-        if (this._currentView) {
-            activePaneId = this._currentView.activePaneId();
-            this._currentView.detach();
-        }
-
-        if (this._stacked)
-            this._currentView = new WebInspector.SidebarPaneStack();
-        else
-            this._currentView = new WebInspector.SidebarTabbedPane();
-
-        for (var i = 0; i < this._panes.length; i++)
-            this._currentView.addPane(this._panes[i]);
-
-        this._currentView.show(this.element);
-
-        if (typeof activePaneId !== "undefined")
-            this._currentView.setActivePaneId(activePaneId);
-    },
-
+WebInspector.SidebarTabbedPane.prototype = {
     /**
      * @param {WebInspector.SidebarPane} pane
      */
     addPane: function(pane)
     {
-        this._panes.push(pane);
-        if (this._currentView)
-            this._currentView.addPane(pane);
-    },
-
-    /**
-     * @param {WebInspector.Panel} panel
-     */
-    attachToPanel: function(panel)
-    {
-        this._sidebarView = panel.splitView;
-
-        this._sidebarView.sidebarElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
-
-        var splitDirectionSettingName = panel.name + "PanelSplitHorizontally";
-        if (!WebInspector.settings[splitDirectionSettingName])
-            WebInspector.settings[splitDirectionSettingName] = WebInspector.settings.createSetting(splitDirectionSettingName, false);
-        this._splitDirectionSetting = WebInspector.settings[splitDirectionSettingName];
-        this._splitDirectionSetting.addChangeListener(this._onSplitDirectionSettingChanged.bind(this));
-
-        this._updateSplitDirection();
-
-        this.show(this._sidebarView.sidebarElement);
-    },
-
-    populateContextMenu: function(contextMenu)
-    {
-        if (!WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled())
-            return;
-
-        function toggleSplitDirection()
-        {
-            this._splitDirectionSetting.set(!this._splitDirectionSetting.get());
-        }
-        contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Split horizontally" : "Split Horizontally"), toggleSplitDirection.bind(this), this._splitDirectionSetting.get());
-    },
-
-    _contextMenuEventFired: function(event)
-    {
-        var contextMenu = new WebInspector.ContextMenu(event);
-        this.populateContextMenu(contextMenu);
-        contextMenu.show();
-    },
-
-    _updateSplitDirection: function()
-    {
-        var vertical = !WebInspector.experimentsSettings.horizontalPanelSplit.isEnabled() || !this._splitDirectionSetting.get();
-        this._sidebarView.setVertical(vertical);
-        this.setStacked(vertical);
-    },
+        var title = pane.title();
+        this.appendTab(title, title, pane);
+        pane.element.appendChild(pane.titleElement);
+        pane._setExpandCallback(this.selectTab.bind(this, title));
 
-    _onSplitDirectionSettingChanged: function()
-    {
-        // Cannot call _updateSplitDirection directly because View.prototype.show() does not work properly from inside notifications.
-        setTimeout(this._updateSplitDirection.bind(this), 0);
     },
 
-    __proto__: WebInspector.View.prototype
+    __proto__: WebInspector.TabbedPane.prototype
 }
-
index d54e02f5bfc44c869664d87431180565aacf20c7..f206bf622e241437b7089cbfbff3c33ab58625aa 100644 (file)
@@ -61,22 +61,6 @@ WebInspector.SidebarView.SidebarPosition = {
 }
 
 WebInspector.SidebarView.prototype = {
-    /**
-     * @return {Element}
-     */
-    get mainElement()
-    {
-        return this.isSidebarSecond() ? this.firstElement() : this.secondElement();
-    },
-
-    /**
-     * @return {Element}
-     */
-    get sidebarElement()
-    {
-        return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
-    },
-
     /**
      * @param {number} width
      */
index 36625cd9f30a93dc43496c9f6e1e03f4176e825e..55c40f452d35f4408b01f582ce06e9f4bae2d01f 100644 (file)
@@ -58,7 +58,7 @@ WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSid
     
     this._sidebarSizeSettingName = sidebarSizeSettingName;
 
-    this._secondIsSidebar = true;
+    this.setSecondIsSidebar(true);
 
     this._innerSetVertical(isVertical);
 }
@@ -120,6 +120,22 @@ WebInspector.SplitView.prototype = {
         return this._secondElement;
     },
 
+    /**
+     * @return {Element}
+     */
+    get mainElement()
+    {
+        return this.isSidebarSecond() ? this.firstElement() : this.secondElement();
+    },
+
+    /**
+     * @return {Element}
+     */
+    get sidebarElement()
+    {
+        return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
+    },
+
     /**
      * @return {boolean}
      */