Web Inspector: Layer summary should be bottom sticky
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 7 Nov 2014 23:37:38 +0000 (23:37 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 7 Nov 2014 23:37:38 +0000 (23:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=138518

Reviewed by Timothy Hatcher.

Previously only NavigationSidebars had a content view. Now, give all
Sidebars a contentElement section for content.

Update all Details Sidebars to append content to the contentElement
instead of directly to the element. Only two Details sidebars append
to the element:

  - CSSStyleDetailsSidebarPanel for the navigation bar at the top
  - LayerTreeDetailsSidebarPanel for the summary view at the bottom

Take this opportunity to fix up some naming and styles as well.

* UserInterface/Views/SidebarPanel.js:
(WebInspector.SidebarPanel):
(WebInspector.SidebarPanel.prototype.get contentElement):
Give every SidebarPanel a content element.

* UserInterface/Views/DetailsSidebarPanel.css: Removed.
(.sidebar > .panel > .content):
* UserInterface/Views/SidebarPanel.css: Added.
(.sidebar > .panel > .content):
And give that content element a default style.

* UserInterface/Views/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content):
* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel):
(WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
(WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
(WebInspector.NavigationSidebarPanel.prototype.get contentElement): Deleted.
Navigation sidebar panels now use the parent's contentElement.
Also, carry over their default styles, overriding the base.

* UserInterface/Views/LayerTreeDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js.
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildBottomBar):
Rename LayerTreeSidebarPanel to make it clear this is a DetailsSidebarPanel.
Add the "bottom bar" to the root element, and sections to the contentElement.

* UserInterface/Views/LayerTreeDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css.
(.sidebar > .layer-tree.panel > .content):
(body.mac-platform.legacy .sidebar > .layer-tree.panel > .content):
Style the bottom bar to pin it to the bottom of the sidebar panel.

(WebInspector.CSSStyleDetailsSidebarPanel):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
Add the navigation bar to the root element, and sections to the contentElement.

* UserInterface/Base/Main.js:
(WebInspector.contentLoaded):
* UserInterface/Main.html:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
Update for new names.

* UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
(WebInspector.ApplicationCacheDetailsSidebarPanel):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
* UserInterface/Views/DOMDetailsSidebarPanel.js:
(WebInspector.DOMDetailsSidebarPanel):
* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
(WebInspector.DOMNodeDetailsSidebarPanel):
* UserInterface/Views/DetailsSidebarPanel.js:
(WebInspector.DetailsSidebarPanel):
* UserInterface/Views/ProbeDetailsSidebarPanel.js:
* UserInterface/Views/ResourceDetailsSidebarPanel.js:
(WebInspector.ResourceDetailsSidebarPanel):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.delayedWork):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
All details sidebar panels now use the contentElement instead of element for content.

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

19 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css [moved from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css with 68% similarity]
Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js [moved from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js with 96% similarity]
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css [moved from Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.css with 92% similarity]
Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js
Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj
Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters

index 91c0682..4b657d9 100644 (file)
@@ -1,3 +1,87 @@
+2014-11-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Layer summary should be bottom sticky
+        https://bugs.webkit.org/show_bug.cgi?id=138518
+
+        Reviewed by Timothy Hatcher.
+
+        Previously only NavigationSidebars had a content view. Now, give all
+        Sidebars a contentElement section for content.
+
+        Update all Details Sidebars to append content to the contentElement
+        instead of directly to the element. Only two Details sidebars append
+        to the element:
+
+          - CSSStyleDetailsSidebarPanel for the navigation bar at the top
+          - LayerTreeDetailsSidebarPanel for the summary view at the bottom
+
+        Take this opportunity to fix up some naming and styles as well.
+
+        * UserInterface/Views/SidebarPanel.js:
+        (WebInspector.SidebarPanel):
+        (WebInspector.SidebarPanel.prototype.get contentElement):
+        Give every SidebarPanel a content element.
+
+        * UserInterface/Views/DetailsSidebarPanel.css: Removed.
+        (.sidebar > .panel > .content):
+        * UserInterface/Views/SidebarPanel.css: Added.
+        (.sidebar > .panel > .content):
+        And give that content element a default style.
+
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .content):
+        * UserInterface/Views/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel):
+        (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
+        (WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
+        (WebInspector.NavigationSidebarPanel.prototype.get contentElement): Deleted.
+        Navigation sidebar panels now use the parent's contentElement.
+        Also, carry over their default styles, overriding the base.
+
+        * UserInterface/Views/LayerTreeDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js.
+        (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
+        (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):
+        (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildBottomBar):
+        Rename LayerTreeSidebarPanel to make it clear this is a DetailsSidebarPanel.
+        Add the "bottom bar" to the root element, and sections to the contentElement.
+
+        * UserInterface/Views/LayerTreeDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css.
+        (.sidebar > .layer-tree.panel > .content):
+        (body.mac-platform.legacy .sidebar > .layer-tree.panel > .content):
+        Style the bottom bar to pin it to the bottom of the sidebar panel.
+
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
+        Add the navigation bar to the root element, and sections to the contentElement.
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.contentLoaded):
+        * UserInterface/Main.html:
+        * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
+        * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
+        Update for new names.
+
+        * UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel):
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+        * UserInterface/Views/DOMDetailsSidebarPanel.js:
+        (WebInspector.DOMDetailsSidebarPanel):
+        * UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+        * UserInterface/Views/DetailsSidebarPanel.js:
+        (WebInspector.DetailsSidebarPanel):
+        * UserInterface/Views/ProbeDetailsSidebarPanel.js:
+        * UserInterface/Views/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.delayedWork):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
+        All details sidebar panels now use the contentElement instead of element for content.
+
 2014-11-07  Timothy Hatcher  <timothy@apple.com>
 
         Web Inspector: Cursor and scroll view jumps around when modifying styles
index cc9f2c5..26720ce 100644 (file)
@@ -306,8 +306,8 @@ WebInspector.contentLoaded = function()
         this.domNodeDetailsSidebarPanel, this.cssStyleDetailsSidebarPanel, this.probeDetailsSidebarPanel];
 
     if (window.LayerTreeAgent) {
-        this.layerTreeSidebarPanel = new WebInspector.LayerTreeSidebarPanel;
-        this.detailsSidebarPanels.splice(this.detailsSidebarPanels.length - 1, 0, this.layerTreeSidebarPanel);
+        this.layerTreeDetailsSidebarPanel = new WebInspector.LayerTreeDetailsSidebarPanel;
+        this.detailsSidebarPanels.splice(this.detailsSidebarPanels.length - 1, 0, this.layerTreeDetailsSidebarPanel);
     }
 
     this.modifierKeys = {altKey: false, metaKey: false, shiftKey: false};
index 545b41d..73d0be6 100644 (file)
@@ -71,7 +71,6 @@
     <link rel="stylesheet" href="Views/DatabaseTableIcon.css">
     <link rel="stylesheet" href="Views/DebuggerSidebarPanel.css">
     <link rel="stylesheet" href="Views/DetailsSection.css">
-    <link rel="stylesheet" href="Views/DetailsSidebarPanel.css">
     <link rel="stylesheet" href="Views/DividerNavigationItem.css">
     <link rel="stylesheet" href="Views/Editing.css">
     <link rel="stylesheet" href="Views/EventListenerSectionGroup.css">
@@ -87,7 +86,7 @@
     <link rel="stylesheet" href="Views/ImageResourceContentView.css">
     <link rel="stylesheet" href="Views/IndeterminateProgressSpinner.css">
     <link rel="stylesheet" href="Views/IndexedDatabaseObjectStoreContentView.css">
-    <link rel="stylesheet" href="Views/LayerTreeSidebarPanel.css">
+    <link rel="stylesheet" href="Views/LayerTreeDetailsSidebarPanel.css">
     <link rel="stylesheet" href="Views/LayoutTimelineOverviewGraph.css">
     <link rel="stylesheet" href="Views/LayoutTimelineView.css">
     <link rel="stylesheet" href="Views/LogContentView.css">
     <link rel="stylesheet" href="Views/SearchIcons.css">
     <link rel="stylesheet" href="Views/Section.css">
     <link rel="stylesheet" href="Views/Sidebar.css">
+    <link rel="stylesheet" href="Views/SidebarPanel.css">
     <link rel="stylesheet" href="Views/Slider.css">
     <link rel="stylesheet" href="Views/SourceCodeTextEditor.css">
     <link rel="stylesheet" href="Views/StyleRuleIcons.css">
     <script src="Views/IndexedDatabaseObjectStoreTreeElement.js"></script>
     <script src="Views/IndexedDatabaseTreeElement.js"></script>
     <script src="Views/LayerTreeDataGridNode.js"></script>
-    <script src="Views/LayerTreeSidebarPanel.js"></script>
+    <script src="Views/LayerTreeDetailsSidebarPanel.js"></script>
     <script src="Views/LayoutTimelineDataGrid.js"></script>
     <script src="Views/LayoutTimelineDataGridNode.js"></script>
     <script src="Views/LayoutTimelineOverviewGraph.js"></script>
index 5d39fdb..934d264 100644 (file)
@@ -23,7 +23,8 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.ApplicationCacheDetailsSidebarPanel = function() {
+WebInspector.ApplicationCacheDetailsSidebarPanel = function()
+{
     WebInspector.DetailsSidebarPanel.call(this, "application-cache-details", WebInspector.UIString("Storage"), WebInspector.UIString("Storage"), "Images/NavigationItemStorage.svg");
 
     this.element.classList.add(WebInspector.ApplicationCacheDetailsSidebarPanel.StyleClassName);
@@ -44,8 +45,8 @@ WebInspector.ApplicationCacheDetailsSidebarPanel = function() {
 
     this._statusSection = new WebInspector.DetailsSection("application-cache-status", WebInspector.UIString("Status"), [this._statusGroup]);
 
-    this.element.appendChild(this._locationSection.element);
-    this.element.appendChild(this._statusSection.element);
+    this.contentElement.appendChild(this._locationSection.element);
+    this.contentElement.appendChild(this._statusSection.element);
 
     WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, this._networkStateUpdated, this);
     WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._frameManifestStatusChanged, this);
@@ -65,6 +66,7 @@ WebInspector.ApplicationCacheDetailsSidebarPanel.Status = {
 
 WebInspector.ApplicationCacheDetailsSidebarPanel.prototype = {
     constructor: WebInspector.ApplicationCacheDetailsSidebarPanel,
+    __proto__: WebInspector.DetailsSidebarPanel.prototype,
 
     // Public
 
@@ -148,5 +150,3 @@ WebInspector.ApplicationCacheDetailsSidebarPanel.prototype = {
         this._statusRow.value = WebInspector.ApplicationCacheDetailsSidebarPanel.Status[this.applicationCacheFrame.status];
     }
 };
-
-WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
index c9fcb2f..0ea8f9c 100644 (file)
@@ -31,10 +31,7 @@ WebInspector.CSSStyleDetailsSidebarPanel = function()
 
     this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
     this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
-    this.element.appendChild(this._navigationBar.element);
-
-    this._contentElement = document.createElement("div");
-    this._contentElement.className = WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName;
+    this.element.insertBefore(this._navigationBar.element, this.contentElement);
 
     this._forcedPseudoClassCheckboxes = {};
 
@@ -68,11 +65,9 @@ WebInspector.CSSStyleDetailsSidebarPanel = function()
             groupElement.appendChild(labelElement);
         }, this);
 
-        this._contentElement.appendChild(this._forcedPseudoClassContainer);
+        this.contentElement.appendChild(this._forcedPseudoClassContainer);
     }
 
-    this.element.appendChild(this._contentElement);
-
     this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel;
     this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel;
     this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel;
@@ -89,13 +84,13 @@ WebInspector.CSSStyleDetailsSidebarPanel = function()
     this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
 };
 
-WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName = "content";
 WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesElementStyleClassName = "pseudo-classes";
 WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesGroupElementStyleClassName = "group";
 WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 38; // Default height of the forced pseudo classes container. Updated in widthDidChange.
 
 WebInspector.CSSStyleDetailsSidebarPanel.prototype = {
     constructor: WebInspector.CSSStyleDetailsSidebarPanel,
+    __proto__: WebInspector.DOMDetailsSidebarPanel.prototype,
 
     // Public
 
@@ -110,7 +105,7 @@ WebInspector.CSSStyleDetailsSidebarPanel.prototype = {
         if (!domNode)
             return;
 
-        this._contentElement.scrollTop = this._initialScrollOffset;
+        this.contentElement.scrollTop = this._initialScrollOffset;
 
         for (var i = 0; i < this._panels.length; ++i) {
             delete this._panels[i].element._savedScrollTop;
@@ -195,19 +190,19 @@ WebInspector.CSSStyleDetailsSidebarPanel.prototype = {
 
         if (this._selectedPanel) {
             this._selectedPanel.hidden();
-            this._selectedPanel.element._savedScrollTop = this._contentElement.scrollTop;
+            this._selectedPanel.element._savedScrollTop = this.contentElement.scrollTop;
             this._selectedPanel.element.remove();
         }
 
         this._selectedPanel = selectedPanel;
 
         if (this._selectedPanel) {
-            this._contentElement.appendChild(this._selectedPanel.element);
+            this.contentElement.appendChild(this._selectedPanel.element);
 
             if (typeof this._selectedPanel.element._savedScrollTop === "number")
-                this._contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
+                this.contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
             else
-                this._contentElement.scrollTop = this._initialScrollOffset;
+                this.contentElement.scrollTop = this._initialScrollOffset;
 
             this._selectedPanel.shown();
         }
@@ -236,5 +231,3 @@ WebInspector.CSSStyleDetailsSidebarPanel.prototype = {
         }
     }
 };
-
-WebInspector.CSSStyleDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
index 66d1d41..a018466 100644 (file)
@@ -23,7 +23,8 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.DOMDetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
+WebInspector.DOMDetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element)
+{
     WebInspector.DetailsSidebarPanel.call(this, identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element);
 
     this.element.addEventListener("click", this._mouseWasClicked.bind(this), true);
@@ -33,6 +34,7 @@ WebInspector.DOMDetailsSidebarPanel = function(identifier, displayName, singular
 
 WebInspector.DOMDetailsSidebarPanel.prototype = {
     constructor: WebInspector.DOMDetailsSidebarPanel,
+    __proto__: WebInspector.DetailsSidebarPanel.prototype,
 
     // Public
 
@@ -110,5 +112,3 @@ WebInspector.DOMDetailsSidebarPanel.prototype = {
         WebInspector.handlePossibleLinkClick(event, parentFrame);
     }
 };
-
-WebInspector.DOMDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
index 915fc43..759c2e0 100644 (file)
@@ -23,7 +23,8 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.DOMNodeDetailsSidebarPanel = function() {
+WebInspector.DOMNodeDetailsSidebarPanel = function()
+{
     WebInspector.DOMDetailsSidebarPanel.call(this, "dom-node-details", WebInspector.UIString("Node"), WebInspector.UIString("Node"), "Images/NavigationItemAngleBrackets.svg", "2");
 
     WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesChanged, this);
@@ -51,10 +52,10 @@ WebInspector.DOMNodeDetailsSidebarPanel = function() {
     this._eventListenersSectionGroup = new WebInspector.DetailsSectionGroup;
     var eventListenersSection = new WebInspector.DetailsSection("dom-node-event-listeners", WebInspector.UIString("Event Listeners"), [this._eventListenersSectionGroup]);    
 
-    this.element.appendChild(identitySection.element);
-    this.element.appendChild(attributesSection.element);
-    this.element.appendChild(propertiesSection.element);
-    this.element.appendChild(eventListenersSection.element);
+    this.contentElement.appendChild(identitySection.element);
+    this.contentElement.appendChild(attributesSection.element);
+    this.contentElement.appendChild(propertiesSection.element);
+    this.contentElement.appendChild(eventListenersSection.element);
 
     if (this._accessibilitySupported()) {
         this._accessibilityEmptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Accessibility Information"));
@@ -84,7 +85,7 @@ WebInspector.DOMNodeDetailsSidebarPanel = function() {
         this._accessibilityGroup = new WebInspector.DetailsSectionGroup([this._accessibilityEmptyRow]);
         var accessibilitySection = new WebInspector.DetailsSection("dom-node-accessibility", WebInspector.UIString("Accessibility"), [this._accessibilityGroup]);    
 
-        this.element.appendChild(accessibilitySection.element);
+        this.contentElement.appendChild(accessibilitySection.element);
     }
 };
 
@@ -93,6 +94,7 @@ WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName = "dom-node-de
 
 WebInspector.DOMNodeDetailsSidebarPanel.prototype = {
     constructor: WebInspector.DOMNodeDetailsSidebarPanel,
+    __proto__: WebInspector.DOMDetailsSidebarPanel.prototype,
 
     // Public
 
@@ -589,5 +591,3 @@ WebInspector.DOMNodeDetailsSidebarPanel.prototype = {
         return dataGrid;
     }
 };
-
-WebInspector.DOMNodeDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
index 70317e6..138e684 100644 (file)
@@ -23,7 +23,8 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.DetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
+WebInspector.DetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element)
+{
     if (keyboardShortcutKey)
         this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.Shift, keyboardShortcutKey, this.toggle.bind(this));
 
@@ -44,6 +45,7 @@ WebInspector.DetailsSidebarPanel.StyleClassName = "details";
 
 WebInspector.DetailsSidebarPanel.prototype = {
     constructor: WebInspector.DetailsSidebarPanel,
+    __proto__: WebInspector.SidebarPanel.prototype,
 
     // Public
 
@@ -76,5 +78,3 @@ WebInspector.DetailsSidebarPanel.prototype = {
         // Implemented by subclasses.
     }
 };
-
-WebInspector.DetailsSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.layer-tree.panel .data-grid {
+.sidebar > .panel.details.layer-tree > .content {
+    bottom: 28px;
+}
+
+body.mac-platform.legacy .sidebar > .panel.details.layer-tree > .content {
+    bottom: 22px;
+}
+
+.panel.details.layer-tree .data-grid {
     border-right: none;
     border-left: none;
     border-bottom: none;
 }
 
-.layer-tree.panel .name-column .icon {
+.panel.details.layer-tree .name-column .icon {
     content: url(../Images/DOMElement.svg);
 }
 
-.layer-tree.panel tr.reflection .name-column .icon {
+.panel.details.layer-tree tr.reflection .name-column .icon {
     content: url(../Images/Reflection.svg);
 }
 
-.layer-tree.panel tr.pseudo-element .name-column .icon {
+.panel.details.layer-tree tr.pseudo-element .name-column .icon {
     content: url(../Images/PseudoElement.svg);
 }
 
-.layer-tree.panel .name-column .pseudo-element,
-.layer-tree.panel .name-column .reflection {
+.panel.details.layer-tree .name-column .pseudo-element,
+.panel.details.layer-tree .name-column .reflection {
     color: rgb(128, 128, 128);
 }
 
-.layer-tree.panel tr.selected .name-column .pseudo-element,
-.layer-tree.panel tr.selected .name-column .reflection {
+.panel.details.layer-tree tr.selected .name-column .pseudo-element,
+.panel.details.layer-tree tr.selected .name-column .reflection {
     color: rgba(255, 255, 255, 0.75);
 }
 
-.layer-tree.panel .bottom-bar {
-    position: relative;
-    height: 28px;
+.panel.details.layer-tree .bottom-bar {
+    position: absolute;
     display: flex;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid rgb(179, 179, 179);
+    background-color: white;
 }
 
-body.mac-platform.legacy .layer-tree.panel .bottom-bar {
-    height: 22px;
+body.mac-platform.legacy .panel.details.layer-tree .bottom-bar {
+    height: 23px;
 }
 
-.layer-tree.panel .bottom-bar > div {
+.panel.details.layer-tree .bottom-bar > div {
     padding: 4px 6px;
 
     line-height: 20px;
@@ -74,12 +85,12 @@ body.mac-platform.legacy .layer-tree.panel .bottom-bar {
     flex: 1;
 }
 
-body.mac-platform.legacy .layer-tree.panel .bottom-bar > div {
+body.mac-platform.legacy .panel.details.layer-tree .bottom-bar > div {
     line-height: inherit;
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
 }
 
-.layer-tree.panel .layers-memory-label {
+.panel.details.layer-tree .layers-memory-label {
     justify-content: flex-end;
 }
 
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.LayerTreeSidebarPanel = function() {
+WebInspector.LayerTreeDetailsSidebarPanel = function()
+{
     WebInspector.DOMDetailsSidebarPanel.call(this, "layer-tree", WebInspector.UIString("Layers"), WebInspector.UIString("Layer"), "Images/NavigationItemLayers.svg", "3");
 
     this._dataGridNodesByLayerId = {};
 
-    this.element.classList.add(WebInspector.LayerTreeSidebarPanel.StyleClassName);
+    this.element.classList.add(WebInspector.LayerTreeDetailsSidebarPanel.StyleClassName);
 
     WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
 
@@ -39,10 +40,11 @@ WebInspector.LayerTreeSidebarPanel = function() {
     this._buildBottomBar();
 };
 
-WebInspector.LayerTreeSidebarPanel.StyleClassName = "layer-tree";
+WebInspector.LayerTreeDetailsSidebarPanel.StyleClassName = "layer-tree";
 
-WebInspector.LayerTreeSidebarPanel.prototype = {
-    constructor: WebInspector.LayerTreeSidebarPanel,
+WebInspector.LayerTreeDetailsSidebarPanel.prototype = {
+    constructor: WebInspector.LayerTreeDetailsSidebarPanel,
+    __proto__: WebInspector.DOMDetailsSidebarPanel.prototype,
 
     // DetailsSidebarPanel Overrides.
 
@@ -119,7 +121,7 @@ WebInspector.LayerTreeSidebarPanel.prototype = {
 
         this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
 
-        this.element.appendChild(this._layerInfoSection.element);
+        this.contentElement.appendChild(this._layerInfoSection.element);
     },
 
     _buildDataGridSection: function()
@@ -156,7 +158,7 @@ WebInspector.LayerTreeSidebarPanel.prototype = {
         var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
         var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
 
-        var element = this.element.appendChild(section.element);
+        var element = this.contentElement.appendChild(section.element);
         element.classList.add(section.identifier);
     },
 
@@ -439,5 +441,3 @@ WebInspector.LayerTreeSidebarPanel.prototype = {
             addReason(WebInspector.UIString("Element has “blend-mode” style"));
     }
 };
-
-WebInspector.LayerTreeSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
index d59d909..d5d3eeb 100644 (file)
  */
 
 .sidebar > .panel.navigation > .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
     bottom: 28px;
-
-    overflow-x: hidden;
-    overflow-y: auto;
 }
 
 body.mac-platform.legacy .sidebar > .panel.navigation > .content {
index ce3ad4f..10bf736 100644 (file)
@@ -23,7 +23,8 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label) {
+WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label)
+{
     if (keyboardShortcutKey)
         this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, keyboardShortcutKey, this.toggle.bind(this));
 
@@ -46,10 +47,7 @@ WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, k
 
     this._visibleContentTreeOutlines = new Set;
 
-    this._contentElement = document.createElement("div");
-    this._contentElement.className = WebInspector.NavigationSidebarPanel.ContentElementStyleClassName;
-    this._contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
-    this.element.appendChild(this._contentElement);
+    this.contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
 
     this._contentTreeOutline = this.createContentTreeOutline(true);
 
@@ -93,7 +91,6 @@ WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, k
 WebInspector.NavigationSidebarPanel.StyleClassName = "navigation";
 WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
 WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = "top";
-WebInspector.NavigationSidebarPanel.ContentElementStyleClassName = "content";
 WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName = "hidden";
 WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
 WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName = "hide-disclosure-buttons";
@@ -106,14 +103,10 @@ WebInspector.NavigationSidebarPanel.DisclosureTriangleSelectedCanvasIdentifierSu
 
 WebInspector.NavigationSidebarPanel.prototype = {
     constructor: WebInspector.NavigationSidebarPanel,
+    __proto__: WebInspector.SidebarPanel.prototype,
 
     // Public
 
-    get contentElement()
-    {
-        return this._contentElement;
-    },
-
     get contentTreeOutlineElement()
     {
         return this._contentTreeOutline.element;
@@ -173,7 +166,7 @@ WebInspector.NavigationSidebarPanel.prototype = {
         contentTreeOutlineElement.className = WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName;
         if (!dontHideByDefault)
             contentTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
-        this._contentElement.appendChild(contentTreeOutlineElement);
+        this.contentElement.appendChild(contentTreeOutlineElement);
 
         var contentTreeOutline = new TreeOutline(contentTreeOutlineElement);
         contentTreeOutline.allowsRepeatSelection = true;
@@ -441,8 +434,8 @@ WebInspector.NavigationSidebarPanel.prototype = {
     {
         delete this._updateContentOverflowShadowVisibilityIdentifier;
 
-        var scrollHeight = this._contentElement.scrollHeight;
-        var offsetHeight = this._contentElement.offsetHeight;
+        var scrollHeight = this.contentElement.scrollHeight;
+        var offsetHeight = this.contentElement.offsetHeight;
 
         if (scrollHeight < offsetHeight) {
             if (this._topOverflowShadowElement)
@@ -456,7 +449,7 @@ WebInspector.NavigationSidebarPanel.prototype = {
         else
             const edgeThreshold = 1;
 
-        var scrollTop = this._contentElement.scrollTop;
+        var scrollTop = this.contentElement.scrollTop;
 
         var topCoverage = Math.min(scrollTop, edgeThreshold);
         var bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));
@@ -733,5 +726,3 @@ WebInspector.NavigationSidebarPanel.prototype = {
         }
     }
 };
-
-WebInspector.NavigationSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
index cb4c135..a08f60f 100644 (file)
@@ -56,14 +56,14 @@ WebInspector.ProbeDetailsSidebarPanel.prototype = {
     {
         for (var probeSet of this._inspectedProbeSets) {
             var removedSection = this._probeSetSections.get(probeSet);
-            this.element.removeChild(removedSection.element);
+            this.contentElement.removeChild(removedSection.element);
         }
 
         this._inspectedProbeSets = newProbeSets;
 
         for (var probeSet of newProbeSets) {
             var shownSection = this._probeSetSections.get(probeSet);
-            this.element.appendChild(shownSection.element);
+            this.contentElement.appendChild(shownSection.element);
         }
     },
 
index 2205142..293c62f 100644 (file)
@@ -23,7 +23,8 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.ResourceDetailsSidebarPanel = function() {
+WebInspector.ResourceDetailsSidebarPanel = function()
+{
     WebInspector.DetailsSidebarPanel.call(this, "resource-details", WebInspector.UIString("Resource"), WebInspector.UIString("Resource"), "Images/NavigationItemFile.svg", "1");
 
     this.element.classList.add(WebInspector.ResourceDetailsSidebarPanel.StyleClassName);
@@ -99,17 +100,18 @@ WebInspector.ResourceDetailsSidebarPanel = function() {
     this._imageSizeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Image Size"));
     this._imageSizeSection.groups = [new WebInspector.DetailsSectionGroup([this._imageWidthRow, this._imageHeightRow])];
 
-    this.element.appendChild(this._typeSection.element);
-    this.element.appendChild(this._locationSection.element);
-    this.element.appendChild(this._requestAndResponseSection.element);
-    this.element.appendChild(this._requestHeadersSection.element);
-    this.element.appendChild(this._responseHeadersSection.element);
+    this.contentElement.appendChild(this._typeSection.element);
+    this.contentElement.appendChild(this._locationSection.element);
+    this.contentElement.appendChild(this._requestAndResponseSection.element);
+    this.contentElement.appendChild(this._requestHeadersSection.element);
+    this.contentElement.appendChild(this._responseHeadersSection.element);
 };
 
 WebInspector.ResourceDetailsSidebarPanel.StyleClassName = "resource";
 
 WebInspector.ResourceDetailsSidebarPanel.prototype = {
     constructor: WebInspector.ResourceDetailsSidebarPanel,
+    __proto__: WebInspector.DetailsSidebarPanel.prototype,
 
     // Public
 
@@ -227,7 +229,7 @@ WebInspector.ResourceDetailsSidebarPanel.prototype = {
 
         if (urlComponents.queryString) {
             // Ensure the "Query Parameters" section is displayed, right after the "Request & Response" section.
-            this.element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
+            this.contentElement.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
 
             this._queryParametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(urlComponents.queryString, true));
         } else {
@@ -385,12 +387,12 @@ WebInspector.ResourceDetailsSidebarPanel.prototype = {
         if (resource.type !== WebInspector.Resource.Type.Image || resource.failed) {
             var imageSectionElement = this._imageSizeSection.element;
             if (imageSectionElement.parentNode)
-                this.element.removeChild(imageSectionElement);
+                this.contentElement.removeChild(imageSectionElement);
             return;
         }
 
         // Ensure the section is displayed, right before the "Location" section.
-        this.element.insertBefore(this._imageSizeSection.element, this._locationSection.element);
+        this.contentElement.insertBefore(this._imageSizeSection.element, this._locationSection.element);
 
         // Get the metrics for this resource and fill in the metrics rows with that information.
         resource.getImageSize(function(size) {
@@ -419,7 +421,7 @@ WebInspector.ResourceDetailsSidebarPanel.prototype = {
         }
 
         // Ensure the section is displayed, right before the "Request Headers" section.
-        this.element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
+        this.contentElement.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
 
         var requestDataContentType = resource.requestDataContentType || "";
         if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i)) {
@@ -474,5 +476,3 @@ WebInspector.ResourceDetailsSidebarPanel.prototype = {
         this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup(rows)];
     }
 };
-
-WebInspector.ResourceDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
index fe8c6c0..f452aa2 100644 (file)
@@ -35,6 +35,7 @@ WebInspector.ScopeChainDetailsSidebarPanel = function()
 
 WebInspector.ScopeChainDetailsSidebarPanel.prototype = {
     constructor: WebInspector.ScopeChainDetailsSidebarPanel,
+    __proto__: WebInspector.DetailsSidebarPanel.prototype,
 
     // Public
 
@@ -161,9 +162,9 @@ WebInspector.ScopeChainDetailsSidebarPanel.prototype = {
             if (this.callFrame !== callFrame)
                 return;
 
-            this.element.removeChildren();
+            this.contentElement.removeChildren();
             for (var i = 0; i < detailsSections.length; ++i)
-                this.element.appendChild(detailsSections[i].element);
+                this.contentElement.appendChild(detailsSections[i].element);
         }
 
         // We need a timeout in place in case there are long running, pending backend dispatches. This can happen
@@ -176,5 +177,3 @@ WebInspector.ScopeChainDetailsSidebarPanel.prototype = {
         InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
     }
 };
-
-WebInspector.ScopeChainDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.details {
+.sidebar > .panel > .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
     overflow-x: hidden;
     overflow-y: auto;
 }
index 3e5d37c..26fab08 100644 (file)
@@ -23,7 +23,8 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label) {
+WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label)
+{
     WebInspector.Object.call(this);
 
     this._identifier = identifier;
@@ -39,13 +40,18 @@ WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideT
     this._element.setAttribute("role", role || "group");
     this._element.setAttribute("aria-label", label || displayName);
 
+    this._contentElement = document.createElement("div");
+    this._contentElement.className = WebInspector.SidebarPanel.ContentElementStyleClassName;
+    this._element.appendChild(this._contentElement);
 };
 
 WebInspector.SidebarPanel.StyleClassName = "panel";
 WebInspector.SidebarPanel.SelectedStyleClassName = "selected";
+WebInspector.SidebarPanel.ContentElementStyleClassName = "content";
 
 WebInspector.SidebarPanel.prototype = {
     constructor: WebInspector.SidebarPanel,
+    __proto__: WebInspector.Object.prototype,
 
     // Public
 
@@ -64,6 +70,11 @@ WebInspector.SidebarPanel.prototype = {
         return this._element;
     },
 
+    get contentElement()
+    {
+        return this._contentElement;
+    },
+
     get visible()
     {
         return this.selected && this._parentSidebar && !this._parentSidebar.collapsed;
@@ -152,5 +163,3 @@ WebInspector.SidebarPanel.prototype = {
         this._toolbarItem.activated = this.visible;
     }
 };
-
-WebInspector.SidebarPanel.prototype.__proto__ = WebInspector.Object.prototype;
index 445f69c..f4fa9f0 100644 (file)
     <None Include="..\UserInterface\DetailsSectionPropertiesRow.js" />
     <None Include="..\UserInterface\DetailsSectionRow.js" />
     <None Include="..\UserInterface\DetailsSectionSimpleRow.js" />
-    <None Include="..\UserInterface\DetailsSidebarPanel.css" />
     <None Include="..\UserInterface\DetailsSidebarPanel.js" />
     <None Include="..\UserInterface\DividerNavigationItem.css" />
     <None Include="..\UserInterface\DividerNavigationItem.js" />
     <None Include="..\UserInterface\LayerTreeDataGridNode.js" />
     <None Include="..\UserInterface\LayerTreeManager.js" />
     <None Include="..\UserInterface\LayerTreeObserver.js" />
-    <None Include="..\UserInterface\LayerTreeSidebarPanel.css" />
-    <None Include="..\UserInterface\LayerTreeSidebarPanel.js" />
+    <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.css" />
+    <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.js" />
     <None Include="..\UserInterface\LayoutTimelineDataGrid.js" />
     <None Include="..\UserInterface\LayoutTimelineDataGridNode.js" />
     <None Include="..\UserInterface\LayoutTimelineRecord.js" />
     <None Include="..\UserInterface\Setting.js" />
     <None Include="..\UserInterface\Sidebar.css" />
     <None Include="..\UserInterface\Sidebar.js" />
+    <None Include="..\UserInterface\SidebarPanel.css" />
     <None Include="..\UserInterface\SidebarPanel.js" />
     <None Include="..\UserInterface\SourceCode.js" />
     <None Include="..\UserInterface\SourceCodeLocation.js" />
index 97e1cd8..5795fd5 100644 (file)
     <None Include="..\UserInterface\DetailsSectionSimpleRow.js">
       <Filter>UserInterface</Filter>
     </None>
-    <None Include="..\UserInterface\DetailsSidebarPanel.css">
-      <Filter>UserInterface</Filter>
-    </None>
     <None Include="..\UserInterface\DetailsSidebarPanel.js">
       <Filter>UserInterface</Filter>
     </None>
     <None Include="..\UserInterface\LayerTreeObserver.js">
       <Filter>UserInterface</Filter>
     </None>
-    <None Include="..\UserInterface\LayerTreeSidebarPanel.css">
+    <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.css">
       <Filter>UserInterface</Filter>
     </None>
-    <None Include="..\UserInterface\LayerTreeSidebarPanel.js">
+    <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.js">
       <Filter>UserInterface</Filter>
     </None>
     <None Include="..\UserInterface\LayoutTimelineDataGrid.js">
     <None Include="..\UserInterface\Sidebar.js">
       <Filter>UserInterface</Filter>
     </None>
+    <None Include="..\UserInterface\SidebarPanel.css">
+      <Filter>UserInterface</Filter>
+    </None>
     <None Include="..\UserInterface\SidebarPanel.js">
       <Filter>UserInterface</Filter>
     </None>