Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (183337 => 183338)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-04-26 01:25:22 UTC (rev 183338)
@@ -1,5 +1,72 @@
2015-04-25 Timothy Hatcher <[email protected]>
+ Web Inspector: New Toolbar UI for tabs
+ https://bugs.webkit.org/show_bug.cgi?id=144185
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Base/ImageUtilities.js:
+ * UserInterface/Base/Main.js:
+ (WebInspector.loaded):
+ (WebInspector.contentLoaded):
+ (WebInspector.updateDockedState):
+ (WebInspector._captureDidStart):
+ (WebInspector._debuggerDidPause):
+ (WebInspector._debuggerDidResume):
+ (WebInspector._mainFrameDidChange):
+ (WebInspector._mainResourceDidChange):
+ (WebInspector._windowKeyDown):
+ (WebInspector._windowKeyUp):
+ (WebInspector._pageHidden):
+ (WebInspector._undock):
+ (WebInspector._dockBottom):
+ (WebInspector._dockRight):
+ (WebInspector._updateDockNavigationItems):
+ (WebInspector._domNodeWasInspected):
+ (WebInspector._inspectModeStateChanged):
+ (WebInspector._toggleInspectMode):
+ (WebInspector._downloadWebArchive):
+ (WebInspector._reloadPageClicked):
+ (WebInspector._updateDownloadToolbarButton):
+ (WebInspector.archiveMainFrame):
+ (WebInspector.canArchiveMainFrame):
+ * UserInterface/Images/Crosshair.svg:
+ * UserInterface/Images/DockBottom.svg:
+ * UserInterface/Images/DockRight.svg:
+ * UserInterface/Images/DownloadArrow.svg:
+ * UserInterface/Images/ReloadToolbar.svg: Added.
+ * UserInterface/Images/Undock.svg:
+ * UserInterface/Views/ActivateButtonToolbarItem.js:
+ (WebInspector.ActivateButtonToolbarItem):
+ (WebInspector.ActivateButtonToolbarItem.prototype.set label):
+ * UserInterface/Views/ButtonToolbarItem.css:
+ (.toolbar .item.button):
+ (body.window-inactive .toolbar .item.button):
+ (.toolbar.small-size .item.button > .glyph):
+ * UserInterface/Views/ButtonToolbarItem.js:
+ (WebInspector.ButtonToolbarItem):
+ (WebInspector.ButtonToolbarItem.prototype.set label):
+ * UserInterface/Views/DashboardContainerView.css:
+ (.toolbar .dashboard-container):
+ * UserInterface/Views/Main.css:
+ (body.docked.bottom):
+ * UserInterface/Views/Toolbar.css:
+ (.toolbar):
+ (body.mac-platform:not(.legacy, .docked) .toolbar):
+ (.toolbar .control-section):
+ (.toolbar .item-section):
+ (.toolbar .item-section.left):
+ (.toolbar .item-section.center-left):
+ (.toolbar .item-section.center-right):
+ (.toolbar .item-section.right):
+ * UserInterface/Views/Toolbar.js:
+ (WebInspector.Toolbar):
+ (WebInspector.Toolbar.prototype.customUpdateLayout.isOverflowingToolbar):
+ (WebInspector.Toolbar.prototype.customUpdateLayout):
+ (WebInspector.Toolbar.prototype.addToolbarItem):
+
+2015-04-25 Timothy Hatcher <[email protected]>
+
Web Inspector: Add NavigationBar to the details sidebar
https://bugs.webkit.org/show_bug.cgi?id=144191
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js 2015-04-26 01:25:22 UTC (rev 183338)
@@ -28,7 +28,7 @@
// Use as a default where an image version is not otherwise specified.
// Bump the base version when making changes that affect the result image.
-const baseDefaultImageVersion = 5;
+const baseDefaultImageVersion = 6;
const defaultImageVersion = baseDefaultImageVersion + 0.01 * WebInspector.Platform.version.base + 0.0001 * WebInspector.Platform.version.release;
try {
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-04-26 01:25:22 UTC (rev 183338)
@@ -137,20 +137,9 @@
document.addEventListener("DOMContentLoaded", this.contentLoaded.bind(this));
// Create settings.
- this._toolbarDockedRightDisplayModeSetting = new WebInspector.Setting("toolbar-docked-right-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
- this._toolbarDockedRightSizeModeSetting = new WebInspector.Setting("toolbar-docked-right-size-mode",WebInspector.Toolbar.SizeMode.Normal);
-
- this._toolbarDockedBottomDisplayModeSetting = new WebInspector.Setting("toolbar-docked-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
- this._toolbarDockedBottomSizeModeSetting = new WebInspector.Setting("toolbar-docked-size-mode",WebInspector.Toolbar.SizeMode.Small);
-
- this._toolbarUndockedDisplayModeSetting = new WebInspector.Setting("toolbar-undocked-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
- this._toolbarUndockedSizeModeSetting = new WebInspector.Setting("toolbar-undocked-size-mode",WebInspector.Toolbar.SizeMode.Normal);
-
this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
- this._dockButtonToggledSetting = new WebInspector.Setting("dock-button-toggled", false);
-
this._openTabsSetting = new WebInspector.Setting("open-tabs", ["elements", "resources", "timeline", "debugger", "console"]);
this._selectedTabIndexSetting = new WebInspector.Setting("selected-tab-index", 0);
@@ -203,9 +192,9 @@
document.body.classList.add(this.debuggableType);
// Create the user interface elements.
- this.toolbar = new WebInspector.Toolbar(document.getElementById("toolbar"));
- this.toolbar.addEventListener(WebInspector.Toolbar.Event.DisplayModeDidChange, this._toolbarDisplayModeDidChange, this);
- this.toolbar.addEventListener(WebInspector.Toolbar.Event.SizeModeDidChange, this._toolbarSizeModeDidChange, this);
+ this.toolbar = new WebInspector.Toolbar(document.getElementById("toolbar"), null, true);
+ this.toolbar.displayMode = WebInspector.Toolbar.DisplayMode.IconOnly;
+ this.toolbar.sizeMode = WebInspector.Toolbar.SizeMode.Small;
this.tabBar = new WebInspector.TabBar(document.getElementById("tab-bar"));
@@ -259,20 +248,57 @@
this.stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this.debuggerStepInto.bind(this));
this.stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this.debuggerStepOut.bind(this));
- this.undockButtonNavigationItem = new WebInspector.ToggleControlToolbarItem("undock", WebInspector.UIString("Detach into separate window"), "", platformImagePath("Undock.svg"), "", 16, 14);
- this.undockButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
+ this._closeToolbarButton = new WebInspector.ControlToolbarItem("dock-close", WebInspector.UIString("Close"), platformImagePath("Close.svg"), 16, 14);
+ this._closeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.close, this);
- this.closeButtonNavigationItem = new WebInspector.ControlToolbarItem("dock-close", WebInspector.UIString("Close"), platformImagePath("Close.svg"), 16, 14);
- this.closeButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.close, this);
+ this._undockToolbarButton = new WebInspector.ButtonToolbarItem("undock", WebInspector.UIString("Detach into separate window"), null, "Images/Undock.svg");
+ this._undockToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
- this.toolbar.addToolbarItem(this.closeButtonNavigationItem, WebInspector.Toolbar.Section.Control);
- this.toolbar.addToolbarItem(this.undockButtonNavigationItem, WebInspector.Toolbar.Section.Control);
+ this._dockRightToolbarButton = new WebInspector.ButtonToolbarItem("dock-right", WebInspector.UIString("Dock to right of window"), null, "Images/DockRight.svg");
+ this._dockRightToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._dockRight, this);
- this.dashboardContainer = new WebInspector.DashboardContainerView;
- this.dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
+ this._dockBottomToolbarButton = new WebInspector.ButtonToolbarItem("dock-bottom", WebInspector.UIString("Dock to bottom of window"), null, "Images/DockBottom.svg");
+ this._dockBottomToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._dockBottom, this);
- this.toolbar.addToolbarItem(this.dashboardContainer.toolbarItem, WebInspector.Toolbar.Section.Center);
+ var toolTip;
+ if (WebInspector.debuggableType === WebInspector.DebuggableType._javascript_)
+ toolTip = WebInspector.UIString("Restart (%s)").format(this._reloadPageKeyboardShortcut.displayName);
+ else
+ toolTip = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(this._reloadPageKeyboardShortcut.displayName, this._reloadPageIgnoringCacheKeyboardShortcut.displayName);
+ this._reloadToolbarButton = new WebInspector.ButtonToolbarItem("reload", toolTip, null, "Images/ReloadToolbar.svg");
+ this._reloadToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._reloadPageClicked, this);
+
+ this._downloadToolbarButton = new WebInspector.ButtonToolbarItem("download", WebInspector.UIString("Download Web Archive"), null, "Images/DownloadArrow.svg");
+ this._downloadToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._downloadWebArchive, this);
+
+ this._updateDownloadToolbarButton();
+
+ // The toolbar button for node inspection.
+ if (this.debuggableType === WebInspector.DebuggableType.Web) {
+ var toolTip = WebInspector.UIString("Enable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
+ var activatedToolTip = WebInspector.UIString("Disable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
+ this._inspectModeToolbarButton = new WebInspector.ActivateButtonToolbarItem("inspect", toolTip, activatedToolTip, null, "Images/Crosshair.svg");
+ this._inspectModeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleInspectMode, this);
+ }
+
+ this._dashboardContainer = new WebInspector.DashboardContainerView;
+ this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
+
+ this.toolbar.addToolbarItem(this._closeToolbarButton, WebInspector.Toolbar.Section.Control);
+
+ this.toolbar.addToolbarItem(this._undockToolbarButton, WebInspector.Toolbar.Section.Left);
+ this.toolbar.addToolbarItem(this._dockRightToolbarButton, WebInspector.Toolbar.Section.Left);
+ this.toolbar.addToolbarItem(this._dockBottomToolbarButton, WebInspector.Toolbar.Section.Left);
+
+ this.toolbar.addToolbarItem(this._reloadToolbarButton, WebInspector.Toolbar.Section.CenterLeft);
+ this.toolbar.addToolbarItem(this._downloadToolbarButton, WebInspector.Toolbar.Section.CenterLeft);
+
+ this.toolbar.addToolbarItem(this._dashboardContainer.toolbarItem, WebInspector.Toolbar.Section.Center);
+
+ if (this._inspectModeToolbarButton)
+ this.toolbar.addToolbarItem(this._inspectModeToolbarButton, WebInspector.Toolbar.Section.CenterRight);
+
this.resourceDetailsSidebarPanel = new WebInspector.ResourceDetailsSidebarPanel;
this.domNodeDetailsSidebarPanel = new WebInspector.DOMNodeDetailsSidebarPanel;
this.cssStyleDetailsSidebarPanel = new WebInspector.CSSStyleDetailsSidebarPanel;
@@ -427,26 +453,15 @@
if (side === "bottom") {
document.body.classList.add("docked", "bottom");
document.body.classList.remove("window-inactive", "right");
-
- this.toolbar.displayMode = this._toolbarDockedBottomDisplayModeSetting.value;
- this.toolbar.sizeMode = this._toolbarDockedBottomSizeModeSetting.value;
} else if (side === "right") {
document.body.classList.add("docked", "right");
document.body.classList.remove("window-inactive", "bottom");
-
- this.toolbar.displayMode = this._toolbarDockedRightDisplayModeSetting.value;
- this.toolbar.sizeMode = this._toolbarDockedRightSizeModeSetting.value;
- } else {
+ } else
document.body.classList.remove("docked", "right", "bottom");
- this.toolbar.displayMode = this._toolbarUndockedDisplayModeSetting.value;
- this.toolbar.sizeMode = this._toolbarUndockedSizeModeSetting.value;
- }
-
this._ignoreToolbarModeDidChangeEvents = false;
this._updateDockNavigationItems();
- this._updateToolbarHeight();
};
WebInspector.handlePossibleLinkClick = function(event, frame, alwaysOpenExternally)
@@ -906,21 +921,21 @@
WebInspector._captureDidStart = function(event)
{
- this.dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.replay);
+ this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.replay);
};
WebInspector._debuggerDidPause = function(event)
{
this.showDebuggerTab();
- this.dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
+ this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
InspectorFrontendHost.bringToFront();
};
WebInspector._debuggerDidResume = function(event)
{
- this.dashboardContainer.closeDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
+ this._dashboardContainer.closeDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
};
WebInspector._frameWasAdded = function(event)
@@ -937,6 +952,8 @@
WebInspector._mainFrameDidChange = function(event)
{
+ this._updateDownloadToolbarButton();
+
this.updateWindowTitle();
};
@@ -947,6 +964,8 @@
this._inProvisionalLoad = false;
+ this._updateDownloadToolbarButton();
+
this.updateWindowTitle();
};
@@ -995,17 +1014,11 @@
WebInspector._windowKeyDown = function(event)
{
this._updateModifierKeys(event);
-
- var opposite = !this._dockButtonToggledSetting.value;
- this.undockButtonNavigationItem.toggled = (event.altKey && !event.metaKey && !event.shiftKey) ? opposite : !opposite;
};
WebInspector._windowKeyUp = function(event)
{
this._updateModifierKeys(event);
-
- var opposite = !this._dockButtonToggledSetting.value;
- this.undockButtonNavigationItem.toggled = (event.altKey && !event.metaKey && !event.shiftKey) ? opposite : !opposite;
};
WebInspector._mouseMoved = function(event)
@@ -1019,31 +1032,30 @@
WebInspector._pageHidden = function(event)
{
+ // FIXME: Save inspector state.
};
WebInspector._undock = function(event)
{
- this._dockButtonToggledSetting.value = this.undockButtonNavigationItem.toggled;
+ InspectorFrontendHost.requestSetDockSide("undocked");
+};
- if (this.undockButtonNavigationItem.toggled)
- InspectorFrontendHost.requestSetDockSide(this._dockSide === "bottom" ? "right" : "bottom");
- else
- InspectorFrontendHost.requestSetDockSide("undocked");
+WebInspector._dockBottom = function(event)
+{
+ InspectorFrontendHost.requestSetDockSide("bottom");
};
+WebInspector._dockRight = function(event)
+{
+ InspectorFrontendHost.requestSetDockSide("right");
+};
+
WebInspector._updateDockNavigationItems = function()
{
- // The close and undock buttons are only available when docked.
- var docked = this.docked;
- this.closeButtonNavigationItem.hidden = !docked;
- this.undockButtonNavigationItem.hidden = !docked;
-
- if (docked) {
- this.undockButtonNavigationItem.alternateImage = this._dockSide === "bottom" ? platformImagePath("DockRight.svg") : platformImagePath("DockBottom.svg");
- this.undockButtonNavigationItem.alternateToolTip = this._dockSide === "bottom" ? WebInspector.UIString("Dock to right of window") : WebInspector.UIString("Dock to bottom of window");
- }
-
- this.undockButtonNavigationItem.toggled = this._dockButtonToggledSetting.value;
+ this._closeToolbarButton.hidden = !this.docked;
+ this._undockToolbarButton.hidden = this._dockSide === "undocked";
+ this._dockBottomToolbarButton.hidden = this._dockSide === "bottom";
+ this._dockRightToolbarButton.hidden = this._dockSide === "right";
};
WebInspector._tabBrowserSizeDidChange = function()
@@ -1069,36 +1081,6 @@
InspectorFrontendHost.setToolbarHeight(this.toolbar.element.offsetHeight);
};
-WebInspector._toolbarDisplayModeDidChange = function(event)
-{
- if (this._ignoreToolbarModeDidChangeEvents)
- return;
-
- if (this._dockSide === "bottom")
- this._toolbarDockedBottomDisplayModeSetting.value = this.toolbar.displayMode;
- else if (this._dockSide === "right")
- this._toolbarDockedRightDisplayModeSetting.value = this.toolbar.displayMode;
- else
- this._toolbarUndockedDisplayModeSetting.value = this.toolbar.displayMode;
-
- this._updateToolbarHeight();
-};
-
-WebInspector._toolbarSizeModeDidChange = function(event)
-{
- if (this._ignoreToolbarModeDidChangeEvents)
- return;
-
- if (this._dockSide === "bottom")
- this._toolbarDockedBottomSizeModeSetting.value = this.toolbar.sizeMode;
- else if (this._dockSide === "right")
- this._toolbarDockedRightSizeModeSetting.value = this.toolbar.sizeMode;
- else
- this._toolbarUndockedSizeModeSetting.value = this.toolbar.sizeMode;
-
- this._updateToolbarHeight();
-};
-
WebInspector._tabBrowserSelectedTabContentViewDidChange = function(event)
{
if (this.tabBar.selectedTabBarItem)
@@ -1311,33 +1293,59 @@
WebInspector._domNodeWasInspected = function(event)
{
- WebInspector.domTreeManager.highlightDOMNodeForTwoSeconds(event.data.node.id);
+ this.domTreeManager.highlightDOMNodeForTwoSeconds(event.data.node.id);
InspectorFrontendHost.bringToFront();
- this.showMainFrameDOMTree(event.data.node);
+ this.showMainFrameDOMTree(event.data.node, true);
};
WebInspector._inspectModeStateChanged = function(event)
{
-// this._inspectModeToolbarButton.activated = WebInspector.domTreeManager.inspectModeEnabled;
+ this._inspectModeToolbarButton.activated = this.domTreeManager.inspectModeEnabled;
};
WebInspector._toggleInspectMode = function(event)
{
- WebInspector.domTreeManager.inspectModeEnabled = !WebInspector.domTreeManager.inspectModeEnabled;
+ this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
};
+WebInspector._downloadWebArchive = function(event)
+{
+ this.archiveMainFrame();
+};
+
WebInspector._reloadPage = function(event)
{
PageAgent.reload();
};
+WebInspector._reloadPageClicked = function(event)
+{
+ // Ignore cache when the shift key is pressed.
+ PageAgent.reload(window.event ? window.event.shiftKey : false);
+};
+
WebInspector._reloadPageIgnoringCache = function(event)
{
PageAgent.reload(true);
};
+WebInspector._updateDownloadToolbarButton = function()
+{
+ if (!PageAgent.archive || this.debuggableType !== WebInspector.DebuggableType.Web) {
+ this._downloadToolbarButton.hidden = true;
+ return;
+ }
+
+ if (this._downloadingPage) {
+ this._downloadToolbarButton.enabled = false;
+ return;
+ }
+
+ this._downloadToolbarButton.enabled = this.canArchiveMainFrame();
+};
+
WebInspector._toggleInspectMode = function(event)
{
this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
@@ -1770,16 +1778,20 @@
WebInspector.archiveMainFrame = function()
{
- this.notifications.dispatchEventToListeners(WebInspector.Notification.PageArchiveStarted, event);
+ this._downloadingPage = true;
+ this._updateDownloadToolbarButton();
PageAgent.archive(function(error, data) {
- this.notifications.dispatchEventToListeners(WebInspector.Notification.PageArchiveEnded, event);
+ this._downloadingPage = false;
+ this._updateDownloadToolbarButton();
+
if (error)
return;
var mainFrame = WebInspector.frameResourceManager.mainFrame;
var archiveName = mainFrame.mainResource.urlComponents.host || mainFrame.mainResource.displayName || "Archive";
var url = "" + encodeURI(archiveName) + ".webarchive";
+
InspectorFrontendHost.save(url, data, true, true);
}.bind(this));
};
@@ -1789,6 +1801,9 @@
if (!PageAgent.archive || this.debuggableType !== WebInspector.DebuggableType.Web)
return false;
+ if (!WebInspector.frameResourceManager.mainFrame || !WebInspector.frameResourceManager.mainFrame.mainResource)
+ return;
+
return WebInspector.Resource.typeFromMIMEType(WebInspector.frameResourceManager.mainFrame.mainResource.mimeType) === WebInspector.Resource.Type.Document;
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/Crosshair.svg (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Crosshair.svg 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Crosshair.svg 2015-04-26 01:25:22 UTC (rev 183338)
@@ -1,5 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <path d="M 9 11.875 C 10.40625 11.511719 11.511719 10.40625 11.875 9 L 9.734375 9 C 9.902344 8.707031 10 8.363281 10 8 C 10 7.636719 9.902344 7.292969 9.734375 7 L 11.875 7 C 11.511719 5.59375 10.40625 4.488281 9 4.125 L 9 6.265625 C 8.707031 6.097656 8.363281 6 8 6 C 7.636719 6 7.292969 6.097656 7 6.265625 L 7 4.125 C 5.59375 4.488281 4.488281 5.59375 4.125 7 L 6.265625 7 C 6.097656 7.292969 6 7.636719 6 8 C 6 8.363281 6.097656 8.707031 6.265625 9 L 4.125 9 C 4.488281 10.40625 5.59375 11.511719 7 11.875 L 7 9.734375 C 7.292969 9.902344 7.636719 10 8 10 C 8.363281 10 8.707031 9.902344 9 9.734375 Z M 7 13.410156 C 4.765625 13 3 11.234375 2.589844 9 L 1 9 L 1 7 L 2.589844 7 C 3 4.765625 4.765625 3 7 2.589844 L 7 1 L 9 1 L 9 2.589844 C 11.234375 3 13 4.765625 13.410156 7 L 15 7 L 15 9 L 13.410156 9 C 13 11.234375 11.234375 13 9 13.410156 L 9 15 L 7 15 Z"/>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <circle class="stroked" fill="none" stroke="black" cx="8" cy="8" r="6"/>
+ <path class="stroked" fill="none" stroke="black" d="M 8 0 L 8 6.5"/>
+ <path class="stroked" fill="none" stroke="black" d="M 0 8 L 6.5 8"/>
+ <path class="stroked" fill="none" stroke="black" d="M 8 9.5 L 8 16"/>
+ <path class="stroked" fill="none" stroke="black" d="M 9.5 8 L 16 8"/>
</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/DockBottom.svg (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Images/DockBottom.svg 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/DockBottom.svg 2015-04-26 01:25:22 UTC (rev 183338)
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2014 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
- <rect fill="none" stroke="black" x="1.5" y="2.5" width="10" height="10" rx="1"/>
- <rect fill="black" x="3" y="8" width="7" height="3"/>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect class="stroked" fill="none" stroke="black" x="0.5" y="1.5" width="15" height="13"/>
+ <path class="stroked" fill="none" stroke="black" d="M 1 9.5 L 15 9.5 L 1 9.5 Z"/>
</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/DockRight.svg (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Images/DockRight.svg 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/DockRight.svg 2015-04-26 01:25:22 UTC (rev 183338)
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2014 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
- <rect fill="none" stroke="black" x="1.5" y="2.5" width="10" height="10" rx="1"/>
- <rect fill="black" x="7" y="4" width="3" height="7"/>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect class="stroked" fill="none" stroke="black" x="0.5" y="1.5" width="15" height="13"/>
+ <path class="stroked" fill="none" stroke="black" d="M 9.5 2 L 9.5 14 L 9.5 2 Z"/>
</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/DownloadArrow.svg (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Images/DownloadArrow.svg 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/DownloadArrow.svg 2015-04-26 01:25:22 UTC (rev 183338)
@@ -1,10 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2014 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <g fill="none" stroke-linecap="square" stroke="black">
- <circle class="stroked" cx="7.5" cy="8.5" r="6"/>
- <path class="stroked" d="M 10.5 8.5 L 7.5 11.5"/>
- <path class="stroked" d="M 4.5 8.5 L 7.5 11.5"/>
- <path class="stroked" d="M 7.5 3 L 7.5 10.5"/>
- </g>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path class="stroked" fill="none" stroke="black" d="M 8.5 15 C 12.3659934 15 15.5 11.8659934 15.5 8 C 15.5 4.13400656 12.3659934 1 8.5 1 C 4.63400656 1 1.5 4.13400656 1.5 8 C 1.5 11.8659934 4.63400656 15 8.5 15 Z"/>
+ <path class="stroked" fill="none" stroke="black" d="M 8.5 1.5 L 8.5 11"/>
+ <path class="stroked" fill="none" stroke="black" d="M 5 8 L 8.5 11.5 L 12 8"/>
</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/ReloadToolbar.svg (0 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Images/ReloadToolbar.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ReloadToolbar.svg 2015-04-26 01:25:22 UTC (rev 183338)
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <clipPath id="1">
+ <path d="M 6 16 L 0 16 L 0 2 L 7 2 L 7 9 L 14 9 L 14 16 L 6 16 Z"/>
+ </clipPath>
+ <path clip-path="url(#1)" class="stroked" fill="none" stroke="black" d="M 7.5 15 C 10.8137087 15 13.5 12.3137087 13.5 9 C 13.5 5.68629134 10.8137087 3 7.5 3 C 4.18629134 3 1.5 5.68629134 1.5 9 C 1.5 12.3137087 4.18629134 15 7.5 15 Z"/>
+ <path class="filled" fill="black" d="M 7 0 L 7 6.5 L 12.5 3.5 L 7 0 Z"/>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/Undock.svg (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Undock.svg 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Undock.svg 2015-04-26 01:25:22 UTC (rev 183338)
@@ -1,9 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2014 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
- <clipPath id="1">
- <path d="M 0 3.5 L 0 10 L 3 10 L 3 5 L 10 5 L 10 2 L 0 2 L 0 3.5 Z"/>
- </clipPath>
- <rect fill="none" stroke="black" x="4.5" y="6.5" width="9" height="7" rx="1"/>
- <rect fill="none" stroke="black" clip-path="url(#1)" x="0.5" y="2.5" width="9" height="7" rx="1"/>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect class="stroked" fill="none" stroke="black" x="4.5" y="5.5" width="11" height="9"/>
+ <path class="stroked" fill="none" stroke="black" d="M 3 10.5 L 0.5 10.5 L 0.5 1.5 L 11.5 1.5 L 11.5 4"/>
</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js 2015-04-26 01:25:22 UTC (rev 183338)
@@ -27,13 +27,13 @@
{
WebInspector.ActivateButtonNavigationItem.call(this, identifier, defaultToolTip, activatedToolTip, image, 32, 32, suppressEmboss, role);
- console.assert(label);
+ if (typeof label === "string") {
+ this._labelElement = document.createElement("div");
+ this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
+ this._element.appendChild(this._labelElement);
- this._labelElement = document.createElement("div");
- this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
- this._element.appendChild(this._labelElement);
-
- this.label = label;
+ this.label = label;
+ }
};
WebInspector.ActivateButtonToolbarItem.prototype = {
@@ -49,7 +49,7 @@
set label(newLabel)
{
console.assert(newLabel);
- if (!newLabel)
+ if (!newLabel || !this._labelElement)
return;
this._labelElement.textContent = newLabel;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css 2015-04-26 01:25:22 UTC (rev 183338)
@@ -27,9 +27,25 @@
align-items: center;
justify-content: center;
- padding: 0 6px;
+ border-radius: 4px;
+ background-color: rgb(252, 252, 252);
+
+ border: 1px solid transparent;
+ border-top-color: white;
+
+ box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0;
+
+ margin: 4px;
+
+ padding: 0 10px;
}
+body.window-inactive .toolbar .item.button {
+ border: 1px solid rgb(220, 220, 220);
+ background-color: rgb(246, 246, 246);
+ box-shadow: none;
+}
+
.toolbar.icon-and-label-vertical .item.button {
flex-direction: column;
}
@@ -49,8 +65,8 @@
}
.toolbar.small-size .item.button > .glyph {
- width: 24px;
- height: 24px;
+ width: 16px;
+ height: 16px;
}
.toolbar.label-only .item.button > .glyph {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js 2015-04-26 01:25:22 UTC (rev 183338)
@@ -25,15 +25,15 @@
WebInspector.ButtonToolbarItem = function(identifier, toolTip, label, image, suppressEmboss, role)
{
- WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, 32, 32, suppressEmboss, role);
+ WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, 16, 16, suppressEmboss, role);
- console.assert(label);
+ if (typeof label === "string") {
+ this._labelElement = document.createElement("div");
+ this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
+ this._element.appendChild(this._labelElement);
- this._labelElement = document.createElement("div");
- this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
- this._element.appendChild(this._labelElement);
-
- this.label = label;
+ this.label = label;
+ }
};
WebInspector.ButtonToolbarItem.LabelStyleClassName = "label";
@@ -51,7 +51,7 @@
set label(newLabel)
{
console.assert(newLabel);
- if (!newLabel)
+ if (!newLabel || !this._labelElement)
return;
this._labelElement.textContent = newLabel;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2015-04-26 01:25:22 UTC (rev 183338)
@@ -36,7 +36,7 @@
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0;
- margin: 4px 10px;
+ margin: 4px;
overflow: hidden;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2015-04-26 01:25:22 UTC (rev 183338)
@@ -62,7 +62,7 @@
}
body.docked.bottom {
- border-top: 1px solid rgb(179, 179, 179);
+ border-top: 1px solid rgb(200, 200, 200);
}
body.docked.right {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css 2015-04-26 01:25:22 UTC (rev 183338)
@@ -29,11 +29,14 @@
white-space: nowrap;
overflow: hidden;
- border-bottom: 1px solid rgb(179, 179, 179);
- background-image: linear-gradient(to bottom, rgb(232, 232, 232), rgb(209, 209, 209));
+ background-image: linear-gradient(to bottom, rgb(237, 237, 237), rgb(222, 222, 222));
box-shadow: inset rgba(255, 255, 255, 0.5) 0 1px 1px;
outline: none;
+
+ padding-top: 3px;
+ padding-bottom: 3px;
+ height: 36px;
}
body.window-inactive .toolbar {
@@ -41,42 +44,8 @@
background-color: rgb(246, 246, 246);
}
-.toolbar.icon-and-label-vertical {
- height: 56px;
-}
-
-.toolbar.icon-and-label-vertical.small-size {
- height: 48px;
-}
-
-.toolbar.icon-and-label-horizontal,
-.toolbar.icon-only {
- height: 40px;
-}
-
-.toolbar.icon-and-label-horizontal.small-size,
-.toolbar.icon-only.small-size,
-.toolbar.label-only {
- height: 32px;
-}
-
body.mac-platform:not(.legacy, .docked) .toolbar {
- padding-top: 22px;
-}
-
-body.mac-platform:not(.legacy, .docked) .toolbar.icon-and-label-vertical {
- height: 78px;
-}
-
-body.mac-platform:not(.legacy, .docked) .toolbar.icon-and-label-vertical.small-size {
- height: 70px;
-}
-
-body.mac-platform:not(.legacy, .docked) .toolbar:matches(.icon-and-label-horizontal, .icon-only) {
- height: 62px;
-}
-
-body.mac-platform:not(.legacy, .docked) .toolbar:matches(.icon-and-label-horizontal.small-size, .icon-only.small-size, .label-only) {
+ padding-top: 21px;
height: 54px;
}
@@ -113,7 +82,7 @@
justify-content: center;
padding-left: 6px;
- padding-right: 6px;
+ padding-right: 2px;
min-width: -webkit-min-content;
}
@@ -124,27 +93,28 @@
.toolbar .item-section {
display: flex;
+ flex: 1;
min-width: -webkit-min-content;
}
-.toolbar .item-section:not(.center) {
- flex: 1;
+.toolbar .item-section.left {
+ justify-content: flex-start;
}
-.toolbar .item-section.left {
+.toolbar .item-section.center-left {
justify-content: flex-start;
- margin-right: 12px;
}
+.toolbar .item-section.center-right {
+ justify-content: flex-end;
+}
+
.toolbar .item-section.center {
- flex: 2;
justify-content: center;
}
.toolbar .item-section.right {
justify-content: flex-end;
- margin-left: 12px;
- margin-right: 12px;
}
.toolbar .item {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js (183337 => 183338)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js 2015-04-26 01:24:40 UTC (rev 183337)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js 2015-04-26 01:25:22 UTC (rev 183338)
@@ -23,7 +23,7 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.Toolbar = function(element, navigationItems) {
+WebInspector.Toolbar = function(element, navigationItems, dontAllowModeChanges) {
WebInspector.NavigationBar.call(this, element, navigationItems, "toolbar");
this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
@@ -35,19 +35,26 @@
this._leftSectionElement = document.createElement("div");
this._leftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.LeftItemSectionStyleClassName;
- this._leftSectionElement.setAttribute("role", "tablist");
this._element.appendChild(this._leftSectionElement);
+ this._centerLeftSectionElement = document.createElement("div");
+ this._centerLeftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterLeftItemSectionStyleClassName;
+ this._element.appendChild(this._centerLeftSectionElement);
+
this._centerSectionElement = document.createElement("div");
this._centerSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterItemSectionStyleClassName;
this._element.appendChild(this._centerSectionElement);
+ this._centerRightSectionElement = document.createElement("div");
+ this._centerRightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterRightItemSectionStyleClassName;
+ this._element.appendChild(this._centerRightSectionElement);
+
this._rightSectionElement = document.createElement("div");
this._rightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.RightItemSectionStyleClassName;
- this._rightSectionElement.setAttribute("role", "tablist");
this._element.appendChild(this._rightSectionElement);
- this._element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
+ if (!dontAllowModeChanges)
+ this._element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
};
// FIXME: Move to a WebInspector.Object subclass and we can remove this.
@@ -57,9 +64,10 @@
WebInspector.Toolbar.ControlSectionStyleClassName = "control-section";
WebInspector.Toolbar.ItemSectionStyleClassName = "item-section";
WebInspector.Toolbar.LeftItemSectionStyleClassName = "left";
+WebInspector.Toolbar.CenterLeftItemSectionStyleClassName = "center-left";
WebInspector.Toolbar.CenterItemSectionStyleClassName = "center";
+WebInspector.Toolbar.CenterRightItemSectionStyleClassName = "center-right";
WebInspector.Toolbar.RightItemSectionStyleClassName = "right";
-WebInspector.Toolbar.TotalSectionMargins = 12 * 3;
WebInspector.Toolbar.Event = {
DisplayModeDidChange: "toolbar-display-mode-did-change",
@@ -69,7 +77,9 @@
WebInspector.Toolbar.Section = {
Control: "control",
Left: "left",
+ CenterLeft: "center-left",
Center: "center",
+ CenterRight: "center-right",
Right: "right"
};
@@ -161,16 +171,15 @@
function isOverflowingToolbar()
{
- var controlSectionWidth = this._controlSectionElement.offsetWidth;
- var leftSectionWidth = this._leftSectionElement.offsetWidth;
- var rightSectionWidth = this._rightSectionElement.offsetWidth;
- var centerSectionWidth = this._centerSectionElement.offsetWidth;
+ var controlSectionWidth = this._controlSectionElement.getBoundingClientRect().width;
+ var leftSectionWidth = this._leftSectionElement.getBoundingClientRect().width;
+ var centerLeftSectionWidth = this._centerLeftSectionElement.getBoundingClientRect().width;
+ var centerSectionWidth = this._centerSectionElement.getBoundingClientRect().width;
+ var centerRightSectionWidth = this._centerRightSectionElement.getBoundingClientRect().width;
+ var rightSectionWidth = this._rightSectionElement.getBoundingClientRect().width;
- // Add one to the actual toolbar width to allow some slop. This wasn't needed when sub-pixel layout was on,
- // but that was disabled in: http://webkit.org/b/149209
- var toolbarWidth = this.element.offsetWidth + 1;
-
- return controlSectionWidth + leftSectionWidth + centerSectionWidth + rightSectionWidth + WebInspector.Toolbar.TotalSectionMargins > toolbarWidth;
+ var toolbarWidth = Math.round(this.element.getBoundingClientRect().width);
+ return Math.round(controlSectionWidth + leftSectionWidth + centerLeftSectionWidth + centerSectionWidth + centerRightSectionWidth + rightSectionWidth) > toolbarWidth;
}
// Only the horizontal display mode supports collapsing labels.
@@ -199,11 +208,19 @@
sectionElement = this._leftSectionElement;
break;
+ case WebInspector.Toolbar.Section.CenterLeft:
+ sectionElement = this._centerLeftSectionElement;
+ break;
+
default:
case WebInspector.Toolbar.Section.Center:
sectionElement = this._centerSectionElement;
break;
+ case WebInspector.Toolbar.Section.CenterRight:
+ sectionElement = this._centerRightSectionElement;
+ break;
+
case WebInspector.Toolbar.Section.Right:
sectionElement = this._rightSectionElement;
break;
