Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (183336 => 183337)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-04-26 01:23:48 UTC (rev 183336)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-04-26 01:24:40 UTC (rev 183337)
@@ -1,3 +1,34 @@
+2015-04-25 Timothy Hatcher <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: Switch over to a tab based UI
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (183336 => 183337)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-04-26 01:23:48 UTC (rev 183336)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-04-26 01:24:40 UTC (rev 183337)
@@ -228,7 +228,7 @@
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));
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js (183336 => 183337)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js 2015-04-26 01:23:48 UTC (rev 183336)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js 2015-04-26 01:24:40 UTC (rev 183337)
@@ -30,10 +30,17 @@
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.
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js (183336 => 183337)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-04-26 01:23:48 UTC (rev 183336)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-04-26 01:24:40 UTC (rev 183337)
@@ -109,7 +109,7 @@
return navigationItem;
},
- removeNavigationItem: function(navigationItemOrIdentifierOrIndex, index)
+ removeNavigationItem: function(navigationItemOrIdentifierOrIndex)
{
var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
if (!navigationItem)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css (183336 => 183337)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css 2015-04-26 01:23:48 UTC (rev 183336)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css 2015-04-26 01:24:40 UTC (rev 183337)
@@ -42,6 +42,14 @@
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 @@
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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js (183336 => 183337)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2015-04-26 01:23:48 UTC (rev 183336)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2015-04-26 01:24:40 UTC (rev 183337)
@@ -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 @@
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 @@
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 @@
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 @@
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 @@
get minimumWidth()
{
+ if (this._navigationBar)
+ return Math.max(WebInspector.Sidebar.AbsoluteMinimumWidth, this._navigationBar.minimumWidth);
return WebInspector.Sidebar.AbsoluteMinimumWidth;
}
@@ -157,6 +180,9 @@
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 @@
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();
