Web Inspector: Create a container class for SidebarPane instances
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Feb 2013 18:19:31 +0000 (18:19 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Feb 2013 18:19:31 +0000 (18:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=108183

Source/WebCore:

Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-02-04
Reviewed by Pavel Feldman.

SidebarPaneStack is responsible for pane title bar and expand/collapse behavior (previously handled by SidebarPane).
SidebarPanes are inserted into DOM lazily and can belong to more than one container.
SidebarPane is ready to be displayed in other types of containers (such as tabbed pane as requested in https://bugs.webkit.org/show_bug.cgi?id=107552).
There should be no visible changes except for one: DOM breakpoint pane expand/collapse state is no longer
shared between Elements and Sources sidebars.

* inspector/front-end/AuditResultView.js:
(WebInspector.AuditResultView):
* inspector/front-end/BreakpointsSidebarPane.js:
(WebInspector.JavaScriptBreakpointsSidebarPane.prototype._addBreakpoint):
(WebInspector.XHRBreakpointsSidebarPane.prototype.highlightBreakpoint):
(WebInspector.EventListenerBreakpointsSidebarPane.prototype.highlightBreakpoint):
* inspector/front-end/DOMBreakpointsSidebarPane.js:
(WebInspector.DOMBreakpointsSidebarPane.prototype.highlightBreakpoint):
* inspector/front-end/ElementsPanel.js:
(WebInspector.ElementsPanel):
(WebInspector.ElementsPanel.prototype.wasShown):
(WebInspector.ElementsPanel.prototype.updateStyles):
(WebInspector.ElementsPanel.prototype.updateMetrics):
(WebInspector.ElementsPanel.prototype.updateProperties):
(WebInspector.ElementsPanel.prototype.updateEventListeners):
* inspector/front-end/ExtensionPanel.js:
(WebInspector.ExtensionSidebarPane):
* inspector/front-end/ExtensionServer.js:
(WebInspector.ExtensionServer.prototype._onCreateSidebarPane):
* inspector/front-end/ScriptsPanel.js:
(WebInspector.ScriptsPanel.prototype.wasShown):
* inspector/front-end/SidebarPane.js:
(WebInspector.SidebarPane):
(WebInspector.SidebarPane.prototype.title):
(WebInspector.SidebarPane.prototype.prepareContent):
(WebInspector.SidebarPane.prototype.expand):
(WebInspector.SidebarPane.prototype.onContentReady):
(WebInspector.SidebarPane.prototype.setExpandCallback):
(WebInspector.SidebarPane.prototype.setShowCallback):
(WebInspector.SidebarPane.prototype.wasShown):
(WebInspector.SidebarPaneStack):
(WebInspector.SidebarPaneStack.prototype.wasShown):
(WebInspector.SidebarPaneStack.prototype.addPane):
(WebInspector.SidebarPaneStack.prototype._addTitle):
(WebInspector.SidebarPaneStack.prototype._attachToPane):
(WebInspector.SidebarPaneStack.prototype._isExpanded):
(WebInspector.SidebarPaneStack.prototype._setExpanded):
(WebInspector.SidebarPaneStack.prototype._onPaneExpanded):
(WebInspector.SidebarPaneStack.prototype._collapsePane):
(WebInspector.SidebarPaneStack.prototype._togglePane):
(WebInspector.SidebarPaneStack.prototype._onTitleKeyDown):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane.prototype._refreshUpdate):
(WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
(WebInspector.StylesSidebarPane.prototype.set _createNewRule):
(WebInspector.ComputedStyleSidebarPane.prototype.prepareContent):
* inspector/front-end/WatchExpressionsSidebarPane.js:
(WebInspector.WatchExpressionsSidebarPane):
(WebInspector.WatchExpressionsSidebarPane.prototype.wasShown):
(WebInspector.WatchExpressionsSidebarPane.prototype.addExpression):
(WebInspector.WatchExpressionsSidebarPane.prototype._addButtonClicked):
* inspector/front-end/inspector.css:
(.pane-title + .pane-title, .pane:not(.visible) + .pane-title, .pane-title:first-of-type):
(.pane-title):
(.pane-title:active):
(.pane-title::before):
(.pane-title.expanded::before):
(.pane-title > select):
(.pane-title > select:hover):
(.pane-title > select:active):
(.pane-title > select.select-settings):
(.pane-title > select.select-filter):
(.pane-title > select > option, .pane-title > select > hr):
(.pane-title > .pane-title-button):
(.pane-title > .pane-title-button:hover):
(.pane-title > .pane-title-button:active, .pane-title > .pane-title-button.toggled):
(.pane-title > .pane-title-button.add):
(.pane-title > .pane-title-button.element-state):
(.pane-title > .pane-title-button.refresh):
(.pane.visible > .body):
(.pane.visible:nth-last-of-type(1)):
(.panel-enabler-view button:not(.status-bar-item), .pane-title-button, button.show-all-nodes):
(.panel-enabler-view button:active:not(.status-bar-item), .pane-title-button:active, button.show-all-nodes:active):
(body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane-title-button, .pane-title-button:disabled, body.inactive button.show-all-nodes):

LayoutTests:

Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-02-04
Reviewed by Pavel Feldman.

* http/tests/inspector/elements-test.js:
(initialize_ElementTest.stylesCallback):
(initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed):
* inspector/audits/audits-panel-functional-expected.txt:
* inspector/audits/audits-panel-noimages-functional-expected.txt:
* inspector/debugger/error-in-watch-expressions.html:
* inspector/debugger/properties-special.html:
* inspector/debugger/watch-expressions-panel-switch.html:
* inspector/debugger/watch-expressions-preserve-expansion.html:
* inspector/extensions/extensions-audits-api-expected.txt:
* inspector/extensions/extensions-audits-content-script-expected.txt:
* inspector/extensions/extensions-audits-expected.txt:
* inspector/extensions/extensions-events.html:
* inspector/extensions/extensions-sidebar.html:
* inspector/styles/lazy-computed-style.html:

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

26 files changed:
LayoutTests/ChangeLog
LayoutTests/http/tests/inspector/elements-test.js
LayoutTests/inspector/audits/audits-panel-functional-expected.txt
LayoutTests/inspector/audits/audits-panel-noimages-functional-expected.txt
LayoutTests/inspector/debugger/error-in-watch-expressions.html
LayoutTests/inspector/debugger/properties-special.html
LayoutTests/inspector/debugger/watch-expressions-panel-switch.html
LayoutTests/inspector/debugger/watch-expressions-preserve-expansion.html
LayoutTests/inspector/extensions/extensions-audits-api-expected.txt
LayoutTests/inspector/extensions/extensions-audits-content-script-expected.txt
LayoutTests/inspector/extensions/extensions-audits-expected.txt
LayoutTests/inspector/extensions/extensions-events.html
LayoutTests/inspector/extensions/extensions-sidebar.html
LayoutTests/inspector/styles/lazy-computed-style.html
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/AuditResultView.js
Source/WebCore/inspector/front-end/BreakpointsSidebarPane.js
Source/WebCore/inspector/front-end/DOMBreakpointsSidebarPane.js
Source/WebCore/inspector/front-end/ElementsPanel.js
Source/WebCore/inspector/front-end/ExtensionPanel.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/StylesSidebarPane.js
Source/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js
Source/WebCore/inspector/front-end/inspector.css

index a3d2b0c2e24352f9123019bb1d6d36a0523b800b..5e2231e96f904359a8d7479efabd8165174d8d30 100644 (file)
@@ -1,3 +1,27 @@
+2013-02-04  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Create a container class for SidebarPane instances
+        https://bugs.webkit.org/show_bug.cgi?id=108183
+
+
+        Reviewed by Pavel Feldman.
+
+        * http/tests/inspector/elements-test.js:
+        (initialize_ElementTest.stylesCallback):
+        (initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed):
+        * inspector/audits/audits-panel-functional-expected.txt:
+        * inspector/audits/audits-panel-noimages-functional-expected.txt:
+        * inspector/debugger/error-in-watch-expressions.html:
+        * inspector/debugger/properties-special.html:
+        * inspector/debugger/watch-expressions-panel-switch.html:
+        * inspector/debugger/watch-expressions-preserve-expansion.html:
+        * inspector/extensions/extensions-audits-api-expected.txt:
+        * inspector/extensions/extensions-audits-content-script-expected.txt:
+        * inspector/extensions/extensions-audits-expected.txt:
+        * inspector/extensions/extensions-events.html:
+        * inspector/extensions/extensions-sidebar.html:
+        * inspector/styles/lazy-computed-style.html:
+
 2013-02-04  Ádám Kallai  <kadam@inf.u-szeged.hu>
 
         [Qt][Wk2] Unreviewed gardnening. Skip failing tests.
index 8af3cc61520f523a03c06dd428882ab4cd18b008..61f66f93730425600868dc6661ef67543f6b76d2 100644 (file)
@@ -111,7 +111,7 @@ InspectorTest.selectNodeAndWaitForStylesWithComputed = function(idValue, callbac
 
     function stylesCallback(targetNode)
     {
-        InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "expand", callback);
+        InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "onContentReady", callback);
         WebInspector.panels.elements.sidebarPanes.computedStyle.expand();
     }
 
index 52f47c6af1a9348d86ecbc196c237bbc44beb46c..3f2cb67974d0449db5d1a4d540e6ab10162bb66a 100644 (file)
@@ -1,6 +1,6 @@
 Tests audit rules.     
 Page reloaded.
 Network Utilization
+ Network Utilization
     Combine external JavaScript (4)
      There are multiple resources served from same domain. Consider combining them into as few files as possible.
       4 JavaScript resources served from [domain].
@@ -8,7 +8,7 @@ Page reloaded.
      A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:
        foo1.jpg
        foo2.jpg
 Web Page Performance
+ Web Page Performance
     Optimize the order of styles and scripts (2)
      The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
        audits-style1.css
index 9dc7a15900edea77ac73d6d22b25104e57d1aca7..effc2a32ac2d84320772b7e39c77293428e86731 100644 (file)
@@ -1,10 +1,10 @@
 Tests audit rules on a page without images.
 Page reloaded.
 Network Utilization
+ Network Utilization
     Combine external JavaScript (4)
      There are multiple resources served from same domain. Consider combining them into as few files as possible.
       4 JavaScript resources served from [domain].
 Web Page Performance
+ Web Page Performance
     Optimize the order of styles and scripts (2)
      The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
        audits-style1.css
index a3f14f358f15a7a931084fa69dfbf3fe6200f40c..d8fd861b6636fcd1e90400f42564ecca78ef88c8 100644 (file)
@@ -10,7 +10,10 @@ var test = function()
     // We need to initialize scripts panel so that watch expressions section is created.
     WebInspector.showPanel("scripts");
 
-    var watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
+    var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
+    watchExpressionsPane.expand();
+
+    var watchExpressionsSection = watchExpressionsPane.section;
     watchExpressionsSection.watchExpressions = [];
     watchExpressionsSection.watchExpressions.push("#$%");
     watchExpressionsSection.update();
index bad36ec482babfce7de8b2e9c348987e16aac8e7..cda83da17fd266d1fc0813eb4c71125f00da7b27 100644 (file)
@@ -23,7 +23,10 @@ var test = function()
         // We need to initialize scripts panel so that watch expressions section is created.
         WebInspector.showPanel("scripts");
 
-        watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
+        var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
+        watchExpressionsPane.expand();
+
+        watchExpressionsSection = watchExpressionsPane.section;
         watchExpressionsSection.watchExpressions = [];
         watchExpressionsSection.watchExpressions.push("Object(true)");
         watchExpressionsSection.watchExpressions.push("(function(a,b) { return a + b; })");
index 473c341589b79a907fe9b519af5b3078836c9fdb..7fd5fd2ee0610e9efc657e973dd5d160c5f83de7 100644 (file)
@@ -23,7 +23,10 @@ var test = function()
         // We need to initialize scripts panel so that watch expressions section is created.
         WebInspector.showPanel("scripts");
 
-        watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
+        var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
+        watchExpressionsPane.expand();
+
+        watchExpressionsSection = watchExpressionsPane.section;
         watchExpressionsSection.watchExpressions = [];
         watchExpressionsSection.watchExpressions.push("window.document");
         watchExpressionsSection.watchExpressions.push("windowa.document");
index 7735567991bf89a58df38bd2f8b12b1a9caafe05..224bbccc73b70541ad39b3565b300aa43433b258 100644 (file)
@@ -24,7 +24,10 @@ var test = function()
 
     function step1()
     {
-        watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
+        var watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
+        watchExpressionsPane.expand();
+
+        watchExpressionsSection = watchExpressionsPane.section;
         watchExpressionsSection.watchExpressions = [];
         watchExpressionsSection.watchExpressions.push("globalObject");
         watchExpressionsSection.watchExpressions.push("windowAlias");
index 8529f85d5491616d770f6ea4ebbb613d70ece2bc..f5deeafcc4ecbc0508fbb0c0684ae94c609b3ab2 100644 (file)
@@ -36,6 +36,6 @@ category.onAuditStarted fired, results dump follows:
     }
     expanded : false
 }
 Extension audits
+ Extension audits
 All tests done.
 
index 15aad13b6aa4dffc836383216030bc1d0e7e9df0..f85829e82834a0b91d7d8c37047cec4552c400fe 100644 (file)
@@ -3,7 +3,7 @@ Tests audit formatters performing evals on content scripts in WebInspector Exten
  Started extension.
 Running tests...
 RUNNING TEST: extension_testAudits
 Extension audits
+ Extension audits
     Rule with details subtree (1)
       Test Formatters
            main world object
index d334ea3022171d45ee837da4b74c9e89782eabc8..13611348baa4301369c9ae1cc8a394db537aeaae 100644 (file)
@@ -5,7 +5,7 @@ Running tests...
 RUNNING TEST: extension_testAudits
 Progress: 50%
 Progress: 75%
 Extension audits
+ Extension audits
     Failed rule (42)
      this rule always fails
     Rule with details subtree (1)
@@ -43,7 +43,7 @@ Progress: 75%
          extensions-audits.html:20
     Passed rule
      this rule always passes ok
 Extension audits that fail
+ Extension audits that fail
 category.onAuditStarted fired
 failedCategory.onAuditStarted fired, throwing exception
 All tests done.
index 0c2d90aa3b4ff2250b7b39d8c2995df987a3fc67..d6aedf232ede04943dff2985a011c691b5131ffb 100644 (file)
@@ -4,6 +4,30 @@
 <script src="../../http/tests/inspector/extensions-test.js"></script>
 <script type="text/javascript">
 
+function initialize_extensionsSidebarTest()
+{
+    InspectorTest.expandSidebar = function(callback)
+    {
+        var sidebar = InspectorTest._extensionSidebar();
+        InspectorTest.runAfterPendingDispatches(function() {
+            sidebar.expand();
+            callback();
+        });
+    }
+
+    InspectorTest._extensionSidebar = function()
+    {
+        var sidebarPanes = WebInspector.panel("elements").sidebarPanes;
+        // the sidebar of interest is presumed to always be last.
+        return sidebarPanes[Object.keys(sidebarPanes).pop()];
+    }
+}
+
+function extension_expandSidebar(callback)
+{
+    evaluateOnFrontend("InspectorTest.expandSidebar(reply);", callback);
+}
+
 function extension_testOnSelectionChanged(nextTest)
 {
     function onSelectionChanged()
@@ -105,7 +129,7 @@ function extension_testViewShowHide(nextTest)
         addListener(sidebar, "sidebar", "onShown");
         sidebar.setPage(basePath + "extension-sidebar.html");
     }
-    extension_showPanel("elements");
+    extension_showPanel("elements", extension_expandSidebar);
     var basePath = location.pathname.replace(/\/[^/]*$/, "/");
     function onSidebarCreated(sidebarPane)
     {
index 2d5495d1d165c7c78acd3bb69fe6e585e1b3de04..00e7256d8d9bf59c8926e1d64ccfba0ba16a5d70 100644 (file)
@@ -8,14 +8,28 @@ function initialize_extensionsSidebarTest()
 {
     InspectorTest.dumpSidebarContent = function(callback)
     {
-        var sidebarPanes = WebInspector.panel("elements").sidebarPanes;
-        // the sidebar of interest is presumed to always be last.
-        var sidebar = sidebarPanes[Object.keys(sidebarPanes).pop()];
+        var sidebar = InspectorTest._extensionSidebar();
         InspectorTest.runAfterPendingDispatches(function() {
             InspectorTest.addResult("Sidebar content: " + sidebar.bodyElement.textContent);
             callback();
         });
     }
+
+    InspectorTest.expandSidebar = function(callback)
+    {
+        var sidebar = InspectorTest._extensionSidebar();
+        InspectorTest.runAfterPendingDispatches(function() {
+            sidebar.expand();
+            callback();
+        });
+    }
+
+    InspectorTest._extensionSidebar = function()
+    {
+        var sidebarPanes = WebInspector.panel("elements").sidebarPanes;
+        // the sidebar of interest is presumed to always be last.
+        return sidebarPanes[Object.keys(sidebarPanes).pop()];
+    }
 }
 
 function extension_testSidebarSetPage(nextTest)
@@ -32,7 +46,7 @@ function extension_testSidebarSetPage(nextTest)
         sidebar.onShown.addListener(onShown);
         var basePath = location.pathname.replace(/\/[^/]*$/, "/");
         sidebar.setPage(basePath + "extension-sidebar.html");
-        extension_showPanel("elements");
+        extension_showPanel("elements", extension_expandSidebar);
     }
     webInspector.panels.elements.createSidebarPane("Test Sidebar", onSidebarCreated);
 }
@@ -42,6 +56,11 @@ function extension_dumpSidebarContent(nextTest)
     evaluateOnFrontend("InspectorTest.dumpSidebarContent(reply);", nextTest);
 }
 
+function extension_expandSidebar(callback)
+{
+    evaluateOnFrontend("InspectorTest.expandSidebar(reply);", callback);
+}
+
 function extension_testSidebarSetObject(nextTest)
 {
     function onSidebarCreated(sidebar)
@@ -105,7 +124,7 @@ function extension_testSidebarPageReplacedWithObject(nextTest)
          sidebar = aSidebar;
          sidebar.onShown.addListener(onShown);
          sidebar.setPage(basePath + "extension-sidebar.html");
-         extension_showPanel("elements");
+         extension_showPanel("elements", extension_expandSidebar);
      }
      var didSetObject = false;
      function onShown(frame)
index ce4d4f82c8f6963fd2ed8d2e3c35a3e2897703e4..8ab0d2953ea2e87e669934eba440141cea0f8893 100644 (file)
@@ -29,7 +29,7 @@ function test()
     {
         InspectorTest.addResult("==== All styles (should be no computed) ====");
         InspectorTest.dumpSelectedElementStyles(false, false);
-        InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "expand", step2);
+        InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "onContentReady", step2);
         WebInspector.panels.elements.sidebarPanes.computedStyle.expand();
     }
 
index 8db00d24c06ab5817dc8824c6232227b6a312f76..629b1e79b7a7e0f4174f89cb5b0c76a58b1b9a6d 100644 (file)
@@ -1,3 +1,91 @@
+2013-02-04  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Create a container class for SidebarPane instances
+        https://bugs.webkit.org/show_bug.cgi?id=108183
+
+        Reviewed by Pavel Feldman.
+
+        SidebarPaneStack is responsible for pane title bar and expand/collapse behavior (previously handled by SidebarPane).
+        SidebarPanes are inserted into DOM lazily and can belong to more than one container.
+        SidebarPane is ready to be displayed in other types of containers (such as tabbed pane as requested in https://bugs.webkit.org/show_bug.cgi?id=107552).
+        There should be no visible changes except for one: DOM breakpoint pane expand/collapse state is no longer
+        shared between Elements and Sources sidebars.
+
+        * inspector/front-end/AuditResultView.js:
+        (WebInspector.AuditResultView):
+        * inspector/front-end/BreakpointsSidebarPane.js:
+        (WebInspector.JavaScriptBreakpointsSidebarPane.prototype._addBreakpoint):
+        (WebInspector.XHRBreakpointsSidebarPane.prototype.highlightBreakpoint):
+        (WebInspector.EventListenerBreakpointsSidebarPane.prototype.highlightBreakpoint):
+        * inspector/front-end/DOMBreakpointsSidebarPane.js:
+        (WebInspector.DOMBreakpointsSidebarPane.prototype.highlightBreakpoint):
+        * inspector/front-end/ElementsPanel.js:
+        (WebInspector.ElementsPanel):
+        (WebInspector.ElementsPanel.prototype.wasShown):
+        (WebInspector.ElementsPanel.prototype.updateStyles):
+        (WebInspector.ElementsPanel.prototype.updateMetrics):
+        (WebInspector.ElementsPanel.prototype.updateProperties):
+        (WebInspector.ElementsPanel.prototype.updateEventListeners):
+        * inspector/front-end/ExtensionPanel.js:
+        (WebInspector.ExtensionSidebarPane):
+        * inspector/front-end/ExtensionServer.js:
+        (WebInspector.ExtensionServer.prototype._onCreateSidebarPane):
+        * inspector/front-end/ScriptsPanel.js:
+        (WebInspector.ScriptsPanel.prototype.wasShown):
+        * inspector/front-end/SidebarPane.js:
+        (WebInspector.SidebarPane):
+        (WebInspector.SidebarPane.prototype.title):
+        (WebInspector.SidebarPane.prototype.prepareContent):
+        (WebInspector.SidebarPane.prototype.expand):
+        (WebInspector.SidebarPane.prototype.onContentReady):
+        (WebInspector.SidebarPane.prototype.setExpandCallback):
+        (WebInspector.SidebarPane.prototype.setShowCallback):
+        (WebInspector.SidebarPane.prototype.wasShown):
+        (WebInspector.SidebarPaneStack):
+        (WebInspector.SidebarPaneStack.prototype.wasShown):
+        (WebInspector.SidebarPaneStack.prototype.addPane):
+        (WebInspector.SidebarPaneStack.prototype._addTitle):
+        (WebInspector.SidebarPaneStack.prototype._attachToPane):
+        (WebInspector.SidebarPaneStack.prototype._isExpanded):
+        (WebInspector.SidebarPaneStack.prototype._setExpanded):
+        (WebInspector.SidebarPaneStack.prototype._onPaneExpanded):
+        (WebInspector.SidebarPaneStack.prototype._collapsePane):
+        (WebInspector.SidebarPaneStack.prototype._togglePane):
+        (WebInspector.SidebarPaneStack.prototype._onTitleKeyDown):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylesSidebarPane.prototype._refreshUpdate):
+        (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
+        (WebInspector.StylesSidebarPane.prototype.set _createNewRule):
+        (WebInspector.ComputedStyleSidebarPane.prototype.prepareContent):
+        * inspector/front-end/WatchExpressionsSidebarPane.js:
+        (WebInspector.WatchExpressionsSidebarPane):
+        (WebInspector.WatchExpressionsSidebarPane.prototype.wasShown):
+        (WebInspector.WatchExpressionsSidebarPane.prototype.addExpression):
+        (WebInspector.WatchExpressionsSidebarPane.prototype._addButtonClicked):
+        * inspector/front-end/inspector.css:
+        (.pane-title + .pane-title, .pane:not(.visible) + .pane-title, .pane-title:first-of-type):
+        (.pane-title):
+        (.pane-title:active):
+        (.pane-title::before):
+        (.pane-title.expanded::before):
+        (.pane-title > select):
+        (.pane-title > select:hover):
+        (.pane-title > select:active):
+        (.pane-title > select.select-settings):
+        (.pane-title > select.select-filter):
+        (.pane-title > select > option, .pane-title > select > hr):
+        (.pane-title > .pane-title-button):
+        (.pane-title > .pane-title-button:hover):
+        (.pane-title > .pane-title-button:active, .pane-title > .pane-title-button.toggled):
+        (.pane-title > .pane-title-button.add):
+        (.pane-title > .pane-title-button.element-state):
+        (.pane-title > .pane-title-button.refresh):
+        (.pane.visible > .body):
+        (.pane.visible:nth-last-of-type(1)):
+        (.panel-enabler-view button:not(.status-bar-item), .pane-title-button, button.show-all-nodes):
+        (.panel-enabler-view button:active:not(.status-bar-item), .pane-title-button:active, button.show-all-nodes:active):
+        (body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane-title-button, .pane-title-button:disabled, body.inactive button.show-all-nodes):
+
 2013-02-01  Emil A Eklund  <eae@chromium.org>
 
         Remove duplicate code in RenderBoxModelObject::computedCSSPadding*
index f280ef643329f14a16b5e43886b29846fd71215d..44f378c2a0f090fb19fba8a32182edc321c1d798 100644 (file)
 
 /**
  * @constructor
- * @extends {WebInspector.View}
+ * @extends {WebInspector.SidebarPaneStack}
  * @param {!Array.<!WebInspector.AuditCategoryResult>} categoryResults
  */
 WebInspector.AuditResultView = function(categoryResults)
 {
-    WebInspector.View.call(this);
-    this.element.className = "audit-result-view";
+    WebInspector.SidebarPaneStack.call(this);
+    this.element.addStyleClass("audit-result-view");
 
     function categorySorter(a, b) {
         return (a.title || "").localeCompare(b.title || "");
     }
     categoryResults.sort(categorySorter);
     for (var i = 0; i < categoryResults.length; ++i)
-        new WebInspector.AuditCategoryResultPane(categoryResults[i]).show(this.element);
+        this.addPane(new WebInspector.AuditCategoryResultPane(categoryResults[i]));
 }
 
 WebInspector.AuditResultView.prototype = {
-    __proto__: WebInspector.View.prototype
+    __proto__: WebInspector.SidebarPaneStack.prototype
 }
 
 /**
index f20ab5d935aa4ff61658dd82bb5a2ec2d8df1c0b..aa47783dae62246d0847e34784551c76aaf39e7d 100644 (file)
@@ -130,8 +130,7 @@ WebInspector.JavaScriptBreakpointsSidebarPane.prototype = {
         breakpointItem.checkbox = checkbox;
         this._items.put(breakpoint, breakpointItem);
 
-        if (!this.expanded)
-            this.expanded = true;
+        this.expand();
     },
 
     /**
@@ -305,7 +304,7 @@ WebInspector.XHRBreakpointsSidebarPane.prototype = {
         if (event)
             event.consume();
 
-        this.expanded = true;
+        this.expand();
 
         var inputElementContainer = document.createElement("p");
         inputElementContainer.className = "breakpoint-condition";
@@ -438,7 +437,7 @@ WebInspector.XHRBreakpointsSidebarPane.prototype = {
         var element = this._breakpointElements[url];
         if (!element)
             return;
-        this.expanded = true;
+        this.expand();
         element.addStyleClass("breakpoint-hit");
         this._highlightedElement = element;
     },
@@ -636,7 +635,7 @@ WebInspector.EventListenerBreakpointsSidebarPane.prototype = {
         var breakpointItem = this._breakpointItems[eventName];
         if (!breakpointItem)
             return;
-        this.expanded = true;
+        this.expand();
         breakpointItem.parent.element.expand();
         breakpointItem.element.listItemElement.addStyleClass("breakpoint-hit");
         this._highlightedElement = breakpointItem.element.listItemElement;
index adbb47cedee40a56ccfa72dc52756087e88cd323..ad05aa87f947eae6b40ff9852707811daf1c8644 100644 (file)
@@ -262,7 +262,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         var element = this._breakpointElements[breakpointId];
         if (!element)
             return;
-        this.expanded = true;
+        this.expand();
         element.addStyleClass("breakpoint-hit");
         this._highlightedElement = element;
     },
index 6d27065541a9cb9d75c0d2e0ccfffad3818e10f2..db43f86714abdcf250791b40b8982166acd9ee6e 100644 (file)
@@ -86,19 +86,21 @@ WebInspector.ElementsPanel = function()
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane;
     this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
 
-    this.sidebarPanes.styles.onexpand = this.updateStyles.bind(this);
-    this.sidebarPanes.metrics.onexpand = this.updateMetrics.bind(this);
-    this.sidebarPanes.properties.onexpand = this.updateProperties.bind(this);
-    this.sidebarPanes.eventListeners.onexpand = this.updateEventListeners.bind(this);
+    this.sidebarPanes.styles.setShowCallback(this.updateStyles.bind(this));
+    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.expanded = true;
+    this.sidebarPanes.styles.expand();
 
     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.SidebarPaneStack();
     for (var pane in this.sidebarPanes)
-        this.sidebarPanes[pane].show(this.sidebarElement);
+        this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
+    this.sidebarPaneView.show(this.sidebarElement);
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(0);
@@ -143,8 +145,6 @@ WebInspector.ElementsPanel.prototype = {
 
         if (!this.treeOutline.rootDOMNode)
             WebInspector.domAgent.requestDocument();
-
-        this.sidebarPanes.domBreakpoints.show(this.sidebarElement, this.sidebarPanes.eventListeners.element);
     },
 
     willHide: function()
@@ -973,7 +973,7 @@ WebInspector.ElementsPanel.prototype = {
     {
         var stylesSidebarPane = this.sidebarPanes.styles;
         var computedStylePane = this.sidebarPanes.computedStyle;
-        if ((!stylesSidebarPane.expanded && !computedStylePane.expanded) || !stylesSidebarPane.needsUpdate)
+        if ((!stylesSidebarPane.isShowing() && !computedStylePane.isShowing()) || !stylesSidebarPane.needsUpdate)
             return;
 
         stylesSidebarPane.update(this.selectedDOMNode(), forceUpdate);
@@ -983,7 +983,7 @@ WebInspector.ElementsPanel.prototype = {
     updateMetrics: function()
     {
         var metricsSidebarPane = this.sidebarPanes.metrics;
-        if (!metricsSidebarPane.expanded || !metricsSidebarPane.needsUpdate)
+        if (!metricsSidebarPane.isShowing() || !metricsSidebarPane.needsUpdate)
             return;
 
         metricsSidebarPane.update(this.selectedDOMNode());
@@ -993,7 +993,7 @@ WebInspector.ElementsPanel.prototype = {
     updateProperties: function()
     {
         var propertiesSidebarPane = this.sidebarPanes.properties;
-        if (!propertiesSidebarPane.expanded || !propertiesSidebarPane.needsUpdate)
+        if (!propertiesSidebarPane.isShowing() || !propertiesSidebarPane.needsUpdate)
             return;
 
         propertiesSidebarPane.update(this.selectedDOMNode());
@@ -1003,7 +1003,7 @@ WebInspector.ElementsPanel.prototype = {
     updateEventListeners: function()
     {
         var eventListenersSidebarPane = this.sidebarPanes.eventListeners;
-        if (!eventListenersSidebarPane.expanded || !eventListenersSidebarPane.needsUpdate)
+        if (!eventListenersSidebarPane.isShowing() || !eventListenersSidebarPane.needsUpdate)
             return;
 
         eventListenersSidebarPane.update(this.selectedDOMNode());
index 043bcc16244faa2a815ef0a0e5a31fcbaa98a2cc..09a4d6b1957d06ac559870bbdceb56d25386cb50 100644 (file)
@@ -140,6 +140,7 @@ WebInspector.ExtensionButton.prototype = {
 WebInspector.ExtensionSidebarPane = function(title, id)
 {
     WebInspector.SidebarPane.call(this, title);
+    this.setHideOnDetach();
     this._id = id;
 }
 
index 768b861a6d56e50736d0aa86b6dac4f71f331932..c1161be28d168d446183f751a5bc9e42229b964b 100644 (file)
@@ -231,13 +231,13 @@ WebInspector.ExtensionServer.prototype = {
         var panel = WebInspector.panel(message.panel);
         if (!panel)
             return this._status.E_NOTFOUND(message.panel);
-        if (!panel.sidebarElement || !panel.sidebarPanes)
+        if (!panel.sidebarPaneView || !panel.sidebarPanes)
             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;
-        sidebar.show(panel.sidebarElement);
+        panel.sidebarPaneView.addPane(sidebar);
 
         return this._status.OK();
     },
index 459734b7a730dc96a147c6b4e91ea8da85817dda..4b01ac63cfe3e184f64a118bf60153972941cf17 100644 (file)
@@ -122,20 +122,18 @@ WebInspector.ScriptsPanel = function(workspaceForTest)
         this.sidebarPanes.workerList = new WebInspector.WorkersSidebarPane(WebInspector.workerManager);
     }
 
-    this._debugSidebarContentsElement = document.createElement("div");
-    this._debugSidebarContentsElement.id = "scripts-debug-sidebar-contents";
-    this.sidebarElement.appendChild(this._debugSidebarContentsElement);
-
-    for (var pane in this.sidebarPanes) {
-        if (this.sidebarPanes[pane] === this.sidebarPanes.domBreakpoints)
-            continue;
-        this.sidebarPanes[pane].show(this._debugSidebarContentsElement);
-    }
+    this.sidebarPaneView = new WebInspector.SidebarPaneStack();
+    this.sidebarPaneView.element.id = "scripts-debug-sidebar-contents";
+    for (var pane in this.sidebarPanes)
+        this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
+    this.sidebarPaneView.show(this.sidebarElement);
 
-    this.sidebarPanes.callstack.expanded = true;
+    if (WebInspector.settings.watchExpressions.get().length > 0)
+        this.sidebarPanes.watchExpressions.expand();
 
-    this.sidebarPanes.scopechain.expanded = true;
-    this.sidebarPanes.jsBreakpoints.expanded = true;
+    this.sidebarPanes.callstack.expand();
+    this.sidebarPanes.scopechain.expand();
+    this.sidebarPanes.jsBreakpoints.expand();
 
     this.sidebarPanes.callstack.registerShortcuts(this.registerShortcuts.bind(this));
     this.registerShortcuts(WebInspector.ScriptsPanelDescriptor.ShortcutKeys.EvaluateSelectionInConsole, this._evaluateSelectionInConsole.bind(this));
@@ -215,8 +213,6 @@ WebInspector.ScriptsPanel.prototype = {
     wasShown: function()
     {
         WebInspector.Panel.prototype.wasShown.call(this);
-        this.sidebarPanes.domBreakpoints.show(this._debugSidebarContentsElement, this.sidebarPanes.xhrBreakpoints.element);
-
         this._navigatorController.wasShown();
     },
 
index ed3dba3c6de101444b5ba5acf55b4092e31f38cc..45a39a9be521f5b13a71eb90559decb5e142f7a9 100644 (file)
@@ -35,103 +35,193 @@ WebInspector.SidebarPane = function(title)
     WebInspector.View.call(this);
     this.element.className = "pane";
 
-    this.titleElement = document.createElement("div");
-    this.titleElement.className = "title";
-    this.titleElement.tabIndex = 0;
-    this.titleElement.addEventListener("click", this.toggleExpanded.bind(this), false);
-    this.titleElement.addEventListener("keydown", this._onTitleKeyDown.bind(this), false);
+    this.titleElement = document.createDocumentFragment();
+    this.bodyElement = this.element.createChild("div", "body");
 
-    this.bodyElement = document.createElement("div");
-    this.bodyElement.className = "body";
+    this._title = title;
 
-    this.element.appendChild(this.titleElement);
-    this.element.appendChild(this.bodyElement);
-
-    this.title = title;
-    this.growbarVisible = false;
-    this.expanded = false;
+    this._expandCallback = null;
+    this._showCallback = null;
 }
 
 WebInspector.SidebarPane.prototype = {
-    get title()
+    title: function()
     {
         return this._title;
     },
 
-    set title(x)
+    /**
+     * @param {function} callback
+     */
+    prepareContent: function(callback)
     {
-        if (this._title === x)
-            return;
-        this._title = x;
-        this.titleElement.textContent = x;
+        callback();
     },
 
-    get growbarVisible()
+    expand: function()
     {
-        return this._growbarVisible;
+        if (this._expandCallback)
+            this.prepareContent(this.onContentReady.bind(this));
+        else
+            this._expandPending = true;
     },
 
-    set growbarVisible(x)
+    onContentReady: function()
     {
-        if (this._growbarVisible === x)
-            return;
+        this._expandCallback();
+    },
 
-        this._growbarVisible = x;
+    /**
+     * @param {function} callback
+     * @return {boolean}
+     */
+    setExpandCallback: function(callback)
+    {
+        this._expandCallback = callback;
+        var pending = this._expandPending;
+        delete this._expandPending;
+        return pending;
+    },
 
-        if (x && !this._growbarElement) {
-            this._growbarElement = document.createElement("div");
-            this._growbarElement.className = "growbar";
-            this.element.appendChild(this._growbarElement);
-        } else if (!x && this._growbarElement) {
-            if (this._growbarElement.parentNode)
-                this._growbarElement.parentNode(this._growbarElement);
-            delete this._growbarElement;
-        }
+    /**
+     * @param {function} callback
+     */
+    setShowCallback: function(callback)
+    {
+        this._showCallback = callback;
     },
 
-    get expanded()
+    wasShown: function()
     {
-        return this._expanded;
+        WebInspector.View.prototype.wasShown.call(this);
+        if (this._showCallback)
+            this._showCallback();
     },
 
-    set expanded(x)
+    __proto__: WebInspector.View.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.View}
+ */
+WebInspector.SidebarPaneStack = function()
+{
+    WebInspector.View.call(this);
+    this.element.className = "sidebar-pane-stack fill";
+
+    this._titles = [];
+    this._panes = [];
+}
+
+WebInspector.SidebarPaneStack.prototype = {
+    wasShown: function()
     {
-        if (x)
-            this.expand();
-        else
-            this.collapse();
+        WebInspector.View.prototype.wasShown.call(this);
+        for (var i = 0; i < this._panes.length; i++)
+            this._attachToPane(i);
     },
 
-    expand: function()
+    /**
+     * @param {WebInspector.SidebarPane} pane
+     */
+    addPane: function(pane)
+    {
+        var index = this._panes.length; 
+        this._panes.push(pane);
+        this._addTitle(pane, index);
+        if (this.isShowing())
+            this._attachToPane(index);
+    },
+
+    /**
+     * @param {WebInspector.SidebarPane} pane
+     * @param {number} index
+     */
+    _addTitle: function(pane, index)
+    {
+        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);
+        title.appendChild(pane.titleElement);
+        this._titles.push(title);
+    },
+
+    /**
+     * @param {number} index
+     */
+    _attachToPane: function(index)
+    {
+        var pane = this._panes[index];
+        var title = this._titles[index];
+        var expandPending = pane.setExpandCallback(this._onPaneExpanded.bind(this, index));
+        this._setExpanded(index, this._isExpanded(index) || expandPending);
+    },
+
+    /**
+     * @param {number} index
+     */
+    _isExpanded: function(index)
     {
-        if (this._expanded)
-            return;
-        this._expanded = true;
-        this.element.addStyleClass("expanded");
-        this.onexpand();
+        var title = this._titles[index];
+        return title.hasStyleClass("expanded");
     },
 
-    onexpand: function()
+    /**
+     * @param {number} index
+     * @param {boolean} on
+     */
+    _setExpanded: function(index, on)
     {
+        if (on)
+            this._panes[index].prepareContent(this._onPaneExpanded.bind(this, index));
+        else
+            this._collapsePane(index);
     },
 
-    collapse: function()
+    /**
+     * @param {number} index
+     */
+    _onPaneExpanded: function(index)
     {
-        if (!this._expanded)
-            return;
-        this._expanded = false;
-        this.element.removeStyleClass("expanded");
+        var pane = this._panes[index];
+        var title = this._titles[index];
+        title.addStyleClass("expanded");
+        pane.show(this.element, title.nextSibling);
     },
 
-    toggleExpanded: function()
+    /**
+     * @param {number} index
+     */
+    _collapsePane: function(index)
     {
-        this.expanded = !this.expanded;
+        var pane = this._panes[index];
+        var title = this._titles[index];
+        title.removeStyleClass("expanded");
+        if (pane.element.parentNode == this.element)
+            pane.detach();
     },
 
-    _onTitleKeyDown: function(event)
+    /**
+     * @param {number} index
+     * @private
+     */
+    _togglePane: function(index)
+    {
+        this._setExpanded(index, !this._isExpanded(index));
+    },
+    
+    /**
+     * @param {number} index
+     * @param {Event} event
+     * @private
+     */
+    _onTitleKeyDown: function(index, event)
     {
         if (isEnterKey(event) || event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
-            this.toggleExpanded();
+            this._togglePane(index);
     },
 
     __proto__: WebInspector.View.prototype
index 7b0d24ac535fe2f5f4a943a93e0c5064b98e72df..db38c84aebac6ca3d9eb53f4258f7234278ff8d2 100644 (file)
@@ -239,7 +239,7 @@ WebInspector.StylesSidebarPane.prototype = {
                 userCallback();
         }
 
-        if (this._computedStylePane.expanded || forceFetchComputedStyle) {
+        if (this._computedStylePane.isShowing() || forceFetchComputedStyle) {
             this._refreshUpdateInProgress = true;
             WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
         } else {
@@ -302,7 +302,7 @@ WebInspector.StylesSidebarPane.prototype = {
             resultStyles.computedStyle = computedStyle;
         }
 
-        if (this._computedStylePane.expanded)
+        if (this._computedStylePane.isShowing())
             WebInspector.cssModel.getComputedStyleAsync(node.id, computedCallback.bind(this));
         WebInspector.cssModel.getInlineStylesAsync(node.id, inlineCallback.bind(this));
         WebInspector.cssModel.getMatchedStylesAsync(node.id, true, true, stylesCallback.bind(this));
@@ -671,7 +671,7 @@ WebInspector.StylesSidebarPane.prototype = {
     _createNewRule: function(event)
     {
         event.consume();
-        this.expanded = true;
+        this.expand();
         this.addBlankSection().startEditingSelector();
     },
 
@@ -800,15 +800,9 @@ WebInspector.ComputedStyleSidebarPane = function()
 
 WebInspector.ComputedStyleSidebarPane.prototype = {
 
-    // Overriding expand() rather than onexpand() to eliminate the visual slowness due to a possible backend trip.
-    expand: function()
+    prepareContent: function(callback)
     {
-        function callback()
-        {
-            WebInspector.SidebarPane.prototype.expand.call(this);
-        }
-
-        this._stylesSidebarPane._refreshUpdate(null, true, callback.bind(this));
+        this._stylesSidebarPane._refreshUpdate(null, true, callback);
     },
 
     __proto__: WebInspector.SidebarPane.prototype
index 34b969e247bbfb834ae37735ccb4018103a9f4bb..1a509868559200dd68cb673340a7a32a3c16cca9 100644 (file)
 WebInspector.WatchExpressionsSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Watch Expressions"));
-}
 
-WebInspector.WatchExpressionsSidebarPane.prototype = {
-    wasShown: function()
-    {
-        // Expand and update watches first time they are shown.
-        if (this.section) {
-            this._refreshExpressionsIfNeeded();
-            return;
-        }
+    this.section = new WebInspector.WatchExpressionsSection();
+    this.bodyElement.appendChild(this.section.element);
 
-        this.section = new WebInspector.WatchExpressionsSection();
-        this.bodyElement.appendChild(this.section.element);
+    var refreshButton = document.createElement("button");
+    refreshButton.className = "pane-title-button refresh";
+    refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
+    refreshButton.title = WebInspector.UIString("Refresh");
+    this.titleElement.appendChild(refreshButton);
 
-        var refreshButton = document.createElement("button");
-        refreshButton.className = "pane-title-button refresh";
-        refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
-        refreshButton.title = WebInspector.UIString("Refresh");
-        this.titleElement.appendChild(refreshButton);
+    var addButton = document.createElement("button");
+    addButton.className = "pane-title-button add";
+    addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
+    this.titleElement.appendChild(addButton);
+    addButton.title = WebInspector.UIString("Add watch expression");
 
-        var addButton = document.createElement("button");
-        addButton.className = "pane-title-button add";
-        addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
-        this.titleElement.appendChild(addButton);
-        addButton.title = WebInspector.UIString("Add watch expression");
-        this._requiresUpdate = true;
+    this._requiresUpdate = true;
+}
 
-        if (WebInspector.settings.watchExpressions.get().length > 0)
-            this.expanded = true;
+WebInspector.WatchExpressionsSidebarPane.prototype = {
+    wasShown: function()
+    {
+        this._refreshExpressionsIfNeeded();
     },
 
     reset: function()
@@ -80,7 +74,7 @@ WebInspector.WatchExpressionsSidebarPane.prototype = {
     addExpression: function(expression)
     {
         this.section.addExpression(expression);
-        this.expanded = true;
+        this.expand();
     },
 
     _refreshExpressionsIfNeeded: function()
@@ -95,7 +89,7 @@ WebInspector.WatchExpressionsSidebarPane.prototype = {
     _addButtonClicked: function(event)
     {
         event.consume();
-        this.expanded = true;
+        this.expand();
         this.section.addNewExpressionAndEdit();
     },
 
index ab84abe0113784898b074f557a4e15b8b633e123..bf4b0da47577347ae7281e310ce39be506158ea3 100644 (file)
@@ -1782,11 +1782,11 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     border: 1px solid rgba(64, 64, 64, 0.8);
 }
 
-.pane:not(.expanded) + .pane, .pane:first-of-type {
+.pane-title + .pane-title, .pane:not(.visible) + .pane-title, .pane-title:first-of-type {
     margin-top: -1px;
 }
 
-.pane > .title {
+.pane-title {
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
     height: 20px;
     padding: 0 5px;
@@ -1801,13 +1801,13 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     -webkit-background-clip: padding;
 }
 
-.pane > .title:active {
+.pane-title:active {
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(231, 231, 231)), color-stop(0.05, rgb(231, 231, 231)), color-stop(0.05, rgb(207, 207, 207)), to(rgb(186, 186, 186)));
     border-top: 1px solid rgb(178, 178, 178);
     border-bottom: 1px solid rgb(178, 178, 178);
 }
 
-.pane > .title::before {
+.pane-title::before {
     content: url(Images/disclosureTriangleSmallRightBlack.png);
     float: left;
     width: 11px;
@@ -1816,11 +1816,11 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     margin-top: 1px;
 }
 
-.pane.expanded > .title::before {
+.pane-title.expanded::before {
     content: url(Images/disclosureTriangleSmallDownBlack.png);
 }
 
-.pane > .title > select {
+.pane-title > select {
     float: right;
     width: 23px;
     height: 17px;
@@ -1834,27 +1834,27 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     -webkit-appearance: none;
 }
 
-.pane > .title > select:hover {
+.pane-title > select:hover {
     background-position: -23px 0px;
 }
 
-.pane > .title > select:active {
+.pane-title > select:active {
     background-position: -46px 0px;
 }
 
-.pane > .title > select.select-settings {
+.pane-title > select.select-settings {
     background-image: url(Images/paneSettingsButtons.png);
 }
 
-.pane > .title > select.select-filter {
+.pane-title > select.select-filter {
     background-image: url(Images/paneFilterButtons.png);
 }
 
-.pane > .title > select > option, .pane > .title > select > hr {
+.pane-title > select > option, .pane-title > select > hr {
     color: black;
 }
 
-.pane > .title > .pane-title-button {
+.pane-title > .pane-title-button {
     float: right;
     width: 23px;
     height: 17px;
@@ -1868,23 +1868,23 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     -webkit-appearance: none;
 }
 
-.pane > .title > .pane-title-button:hover {
+.pane-title > .pane-title-button:hover {
     background-position: -23px 0px;
 }
 
-.pane > .title > .pane-title-button:active, .pane > .title > .pane-title-button.toggled {
+.pane-title > .pane-title-button:active, .pane-title > .pane-title-button.toggled {
     background-position: -46px 0px;
 }
 
-.pane > .title > .pane-title-button.add {
+.pane-title > .pane-title-button.add {
     background-image: url(Images/paneAddButtons.png);
 }
 
-.pane > .title > .pane-title-button.element-state {
+.pane-title > .pane-title-button.element-state {
     background-image: url(Images/paneElementStateButtons.png);
 }
 
-.pane > .title > .pane-title-button.refresh {
+.pane-title > .pane-title-button.refresh {
     background-image: url(Images/paneRefreshButtons.png);
 }
 
@@ -1908,7 +1908,7 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     background-color: rgb(255, 255, 194);
 }
 
-.pane.expanded > .body, .pane.expanded > .growbar {
+.pane.visible > .body {
     display: block;
 }
 
@@ -1928,18 +1928,10 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     border: 1px solid rgb(66%, 66%, 66%);
 }
 
-.pane.expanded:nth-last-of-type(1) {
+.pane.visible:nth-last-of-type(1) {
     border-bottom: 1px solid rgb(189, 189, 189);
 }
 
-.pane > .growbar {
-    display: none;
-    background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
-    background-repeat: no-repeat, repeat-x;
-    background-position: center center, bottom;
-    height: 5px;
-}
-
 .sidebar-pane-subtitle {
     position: absolute;
     right: 0;
@@ -1969,7 +1961,7 @@ body.inactive .sidebar {
     background-color: rgb(232, 232, 232);
 }
 
-.panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
+.panel-enabler-view button:not(.status-bar-item), .pane-title-button, button.show-all-nodes {
     color: rgb(6, 6, 6);
     background-color: transparent;
     border: 1px solid rgb(165, 165, 165);
@@ -1986,17 +1978,12 @@ button.show-all-nodes {
     height: 20px;
 }
 
-.pane button {
-    margin: 6px 0 6px 3px;
-    padding: 2px 9px;
-}
-
-.panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
+.panel-enabler-view button:active:not(.status-bar-item), .pane-title-button:active, button.show-all-nodes:active {
     background-color: rgb(215, 215, 215);
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
 }
 
-body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes {
+body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane-title-button, .pane-title-button:disabled, body.inactive button.show-all-nodes {
     color: rgb(130, 130, 130);
     border-color: rgb(212, 212, 212);
     background-color: rgb(239, 239, 239);