Web Inspector: Combine style-related panes into a single tab when Elements panel...

https://bugs.webkit.org/show_bug.cgi?id=111550
Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-03-06
Reviewed by Pavel Feldman.

Grouping the Elements sidebar panes into two tabbed panes proved to be
confusing and inconvenient. Put all the Elements sidebar panes into a single tabbed pane.
Combined Styles, Computed Style and Metrics into a single pane.

* inspector/front-end/ElementsPanel.js:
(WebInspector.ElementsPanel.prototype._splitVertically):
(WebInspector.ElementsPanel.prototype.addExtensionSidebarPane):
* inspector/front-end/elementsPanel.css:
(.sidebar-pane.composite):
(.sidebar-pane.composite > .body):
(.sidebar-pane.composite .metrics):
(.sidebar-pane.composite .sidebar-pane-toolbar):
(.sidebar-pane.composite .sidebar-pane-toolbar > .sidebar-pane-subtitle):
(.sidebar-pane.composite .styles-section.read-only):

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

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 22b26dc..aec544c 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,24 @@
+2013-03-06  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Combine style-related panes into a single tab when Elements panel is split horizontally.
+        https://bugs.webkit.org/show_bug.cgi?id=111550
+        Reviewed by Pavel Feldman.
+
+        Grouping the Elements sidebar panes into two tabbed panes proved to be
+        confusing and inconvenient. Put all the Elements sidebar panes into a single tabbed pane.
+        Combined Styles, Computed Style and Metrics into a single pane.
+
+        * inspector/front-end/ElementsPanel.js:
+        (WebInspector.ElementsPanel.prototype._splitVertically):
+        (WebInspector.ElementsPanel.prototype.addExtensionSidebarPane):
+        * inspector/front-end/elementsPanel.css:
+        (.sidebar-pane.composite):
+        (.sidebar-pane.composite > .body):
+        (.sidebar-pane.composite .metrics):
+        (.sidebar-pane.composite .sidebar-pane-toolbar):
+        (.sidebar-pane.composite .sidebar-pane-toolbar > .sidebar-pane-subtitle):
+        (.sidebar-pane.composite .styles-section.read-only):
+

 2013-03-05  Yury Semikhatsky  <yurys@chromium.org>
 
         Web Inspector: support stable remote object ids
 2013-03-05  Yury Semikhatsky  <yurys@chromium.org>
 
         Web Inspector: support stable remote object ids

diff --git a/Source/WebCore/inspector/front-end/ElementsPanel.js b/Source/WebCore/inspector/front-end/ElementsPanel.js
index 428c7a4..578a00f 100644 (file)
--- a/Source/WebCore/inspector/front-end/ElementsPanel.js
+++ b/Source/WebCore/inspector/front-end/ElementsPanel.js
@@ -1119,21 +1119,24 @@ WebInspector.ElementsPanel.prototype = {
             for (var pane in this.sidebarPanes)
                 this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
         } else {
             for (var pane in this.sidebarPanes)
                 this.sidebarPaneView.addPane(this.sidebarPanes[pane]);
         } else {

-            this.sidebarPaneView = new WebInspector.SplitView(true, this.name + "PanelSplitSidebarRatio", 0.5);
+            this.sidebarPaneView = new WebInspector.SidebarTabbedPane();

 
 

-            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 compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
+            compositePane.element.addStyleClass("composite");
+            compositePane.element.addStyleClass("fill");

 
 

-            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);
+            var splitView = new WebInspector.SplitView(true, "StylesPaneSplitRatio", 0.5);
+            splitView.show(compositePane.bodyElement);
+            this.sidebarPanes.styles.show(splitView.firstElement());

 
 

-            this.sidebarPaneView.extensionPaneContainer = group2;
+            this.sidebarPanes.metrics.show(splitView.secondElement());
+            splitView.secondElement().appendChild(this.sidebarPanes.computedStyle.titleElement);
+            this.sidebarPanes.computedStyle.show(splitView.secondElement());
+
+            this.sidebarPaneView.addPane(compositePane);
+            this.sidebarPaneView.addPane(this.sidebarPanes.properties);
+            this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);
+            this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);

         }
         this.sidebarPaneView.show(this.splitView.sidebarElement);
         this.sidebarPanes.styles.expand();
         }
         this.sidebarPaneView.show(this.splitView.sidebarElement);
         this.sidebarPanes.styles.expand();


@@ -1146,8 +1149,7 @@ WebInspector.ElementsPanel.prototype = {
     addExtensionSidebarPane: function(id, pane)
     {
         this.sidebarPanes[id] = pane;
     addExtensionSidebarPane: function(id, pane)
     {
         this.sidebarPanes[id] = pane;

-        var container = this.sidebarPaneView.extensionPaneContainer || this.sidebarPaneView;
-        container.addPane(pane);
+        this.sidebarPaneView.addPane(pane);

     },
 
     __proto__: WebInspector.Panel.prototype
     },
 
     __proto__: WebInspector.Panel.prototype

diff --git a/Source/WebCore/inspector/front-end/elementsPanel.css b/Source/WebCore/inspector/front-end/elementsPanel.css
index 9dd1d78..01afc74 100644 (file)
--- a/Source/WebCore/inspector/front-end/elementsPanel.css
+++ b/Source/WebCore/inspector/front-end/elementsPanel.css
@@ -516,3 +516,36 @@
     -webkit-user-select: text;
     -webkit-user-drag: auto;
 }
     -webkit-user-select: text;
     -webkit-user-drag: auto;
 }

+
+
+.sidebar-pane.composite {
+    overflow: hidden;
+    position: absolute;
+}
+
+.sidebar-pane.composite > .body {
+    height: 100%;
+}
+
+.sidebar-pane.composite .metrics {
+    border-bottom: 1px solid rgb(64%, 64%, 64%);
+    height: 206px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-align: center;
+    -webkit-box-pack: center;
+}
+
+.sidebar-pane.composite .sidebar-pane-toolbar {
+    margin-top: 4px;
+    margin-bottom: -4px;
+    position: relative;
+}
+
+.sidebar-pane.composite .sidebar-pane-toolbar > .sidebar-pane-subtitle {
+    left: 8px;
+}
+
+.sidebar-pane.composite .styles-section.read-only {
+    background-color: inherit;
+}