Web Inspector: Add NavigationBar to the details sidebar
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 26 Apr 2015 01:24:40 +0000 (01:24 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 26 Apr 2015 01:24:40 +0000 (01:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=144191

Reviewed by Joseph Pecoraro.

* UserInterface/Base/Main.js:
(WebInspector.contentLoaded):

* UserInterface/Views/DetailsSidebarPanel.js:
(WebInspector.DetailsSidebarPanel):
(WebInspector.DetailsSidebarPanel.prototype.get navigationItem):

* UserInterface/Views/NavigationBar.js:
(WebInspector.NavigationBar.prototype.removeNavigationItem):
Remove unused index argument.

* UserInterface/Views/Sidebar.css:
(.sidebar > .navigation-bar):
(.sidebar.has-navigation-bar > .panel):

* UserInterface/Views/Sidebar.js:
(WebInspector.Sidebar):
(WebInspector.Sidebar.prototype.addSidebarPanel):
(WebInspector.Sidebar.prototype.removeSidebarPanel):
(WebInspector.Sidebar.prototype.set selectedSidebarPanel):
(WebInspector.Sidebar.prototype.get minimumWidth):
(WebInspector.Sidebar.prototype.set width):
(WebInspector.Sidebar.prototype.set collapsed):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/NavigationBar.js
Source/WebInspectorUI/UserInterface/Views/Sidebar.css
Source/WebInspectorUI/UserInterface/Views/Sidebar.js

index 15ad592..af6894a 100644 (file)
@@ -1,3 +1,34 @@
+2015-04-25  Timothy Hatcher  <timothy@apple.com>
+
+        Web Inspector: Add NavigationBar to the details sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=144191
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.contentLoaded):
+
+        * UserInterface/Views/DetailsSidebarPanel.js:
+        (WebInspector.DetailsSidebarPanel):
+        (WebInspector.DetailsSidebarPanel.prototype.get navigationItem):
+
+        * UserInterface/Views/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.removeNavigationItem):
+        Remove unused index argument.
+
+        * UserInterface/Views/Sidebar.css:
+        (.sidebar > .navigation-bar):
+        (.sidebar.has-navigation-bar > .panel):
+
+        * UserInterface/Views/Sidebar.js:
+        (WebInspector.Sidebar):
+        (WebInspector.Sidebar.prototype.addSidebarPanel):
+        (WebInspector.Sidebar.prototype.removeSidebarPanel):
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel):
+        (WebInspector.Sidebar.prototype.get minimumWidth):
+        (WebInspector.Sidebar.prototype.set width):
+        (WebInspector.Sidebar.prototype.set collapsed):
+
 2015-04-24  Timothy Hatcher  <timothy@apple.com>
 
         Web Inspector: Switch over to a tab based UI
index 454b8c7..8155f27 100644 (file)
@@ -228,7 +228,7 @@ WebInspector.contentLoaded = function()
     this.navigationSidebar = new WebInspector.Sidebar(document.getElementById("navigation-sidebar"), WebInspector.Sidebar.Sides.Left);
     this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
 
-    this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, null, null, WebInspector.UIString("Details"));
+    this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, null, null, WebInspector.UIString("Details"), true);
     this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
 
     this.navigationSidebarKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "0", this.toggleNavigationSidebar.bind(this));
index 712fcb4..4676a2b 100644 (file)
@@ -30,10 +30,17 @@ WebInspector.DetailsSidebarPanel = class DetailsSidebarPanel extends WebInspecto
         super(identifier, displayName, element);
 
         this.element.classList.add("details");
+
+        this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, displayName);
     }
 
     // Public
 
+    get navigationItem()
+    {
+        return this._navigationItem;
+    }
+
     inspect(objects)
     {
         // Implemented by subclasses.
index 2d85def..fd65995 100644 (file)
@@ -109,7 +109,7 @@ WebInspector.NavigationBar.prototype = {
         return navigationItem;
     },
 
-    removeNavigationItem: function(navigationItemOrIdentifierOrIndex, index)
+    removeNavigationItem: function(navigationItemOrIdentifierOrIndex)
     {
         var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
         if (!navigationItem)
index 70f3404..c836879 100644 (file)
@@ -42,6 +42,14 @@ body.mac-platform.legacy.window-inactive .sidebar {
     background-color: rgb(231, 231, 231);
 }
 
+.sidebar > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    align-content: center;
+}
+
 .sidebar > .panel {
     position: absolute;
     top: 0;
@@ -56,6 +64,10 @@ body.mac-platform.legacy.window-inactive .sidebar {
     z-index: 0; /* Workaround so that scroll bars appear above position:sticky section headers. */
 }
 
+.sidebar.has-navigation-bar > .panel {
+    top: 29px;
+}
+
 .sidebar > .panel.selected {
     display: block;
 }
index 396d8cb..e93f9e4 100644 (file)
@@ -25,7 +25,7 @@
 
 WebInspector.Sidebar = class Sidebar extends WebInspector.Object
 {
-    constructor(element, side, sidebarPanels, role, label)
+    constructor(element, side, sidebarPanels, role, label, hasNavigationBar)
     {
         super();
 
@@ -39,6 +39,14 @@ WebInspector.Sidebar = class Sidebar extends WebInspector.Object
         if (label)
             this._element.setAttribute("aria-label", label);
 
+        if (hasNavigationBar) {
+            this._element.classList.add("has-navigation-bar");
+
+            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._resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
         this._element.insertBefore(this._resizer.element, this._element.firstChild);
 
@@ -67,6 +75,11 @@ WebInspector.Sidebar = class Sidebar extends WebInspector.Object
         this._sidebarPanels.push(sidebarPanel);
         this._element.appendChild(sidebarPanel.element);
 
+        if (this._navigationBar) {
+            console.assert(sidebarPanel.navigationItem);
+            this._navigationBar.addNavigationItem(sidebarPanel.navigationItem);
+        }
+
         sidebarPanel.added();
 
         return sidebarPanel;
@@ -90,6 +103,11 @@ WebInspector.Sidebar = class Sidebar extends WebInspector.Object
         this._sidebarPanels.remove(sidebarPanel);
         this._element.removeChild(sidebarPanel.element);
 
+        if (this._navigationBar) {
+            console.assert(sidebarPanel.navigationItem);
+            this._navigationBar.removeNavigationItem(sidebarPanel.navigationItem);
+        }
+
         sidebarPanel.removed();
 
         return sidebarPanel;
@@ -119,6 +137,9 @@ WebInspector.Sidebar = class Sidebar extends WebInspector.Object
 
         this._selectedSidebarPanel = sidebarPanel || null;
 
+        if (this._navigationBar)
+            this._navigationBar.selectedNavigationItem = sidebarPanel ? sidebarPanel.navigationItem : null;
+
         if (this._selectedSidebarPanel) {
             this._selectedSidebarPanel.selected = true;
 
@@ -133,6 +154,8 @@ WebInspector.Sidebar = class Sidebar extends WebInspector.Object
 
     get minimumWidth()
     {
+        if (this._navigationBar)
+            return Math.max(WebInspector.Sidebar.AbsoluteMinimumWidth, this._navigationBar.minimumWidth);
         return WebInspector.Sidebar.AbsoluteMinimumWidth;
     }
 
@@ -157,6 +180,9 @@ WebInspector.Sidebar = class Sidebar extends WebInspector.Object
 
         this._element.style.width = newWidth + "px";
 
+        if (!this.collapsed && this._navigationBar)
+            this._navigationBar.updateLayout();
+
         if (!this.collapsed && this._selectedSidebarPanel)
             this._selectedSidebarPanel.widthDidChange();
 
@@ -175,9 +201,13 @@ WebInspector.Sidebar = class Sidebar extends WebInspector.Object
 
         if (flag)
             this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
-        else
+        else {
             this._element.classList.remove(WebInspector.Sidebar.CollapsedStyleClassName);
 
+            if (this._navigationBar)
+                this._navigationBar.updateLayout();
+        }
+
         if (this._selectedSidebarPanel) {
             if (this._selectedSidebarPanel.visible)
                 this._selectedSidebarPanel.shown();