Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (183334 => 183335)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-04-26 01:22:33 UTC (rev 183334)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-04-26 01:23:04 UTC (rev 183335)
@@ -1,3 +1,26 @@
+2015-04-24 Timothy Hatcher <[email protected]>
+
+ Web Inspector: Switch over to a tab based UI
+ https://bugs.webkit.org/show_bug.cgi?id=144154
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Base/Main.js:
+ (WebInspector.loaded):
+ (WebInspector.contentLoaded):
+ (WebInspector._tabContentViewForType):
+ (WebInspector._rememberOpenTabs):
+ (WebInspector._windowResized):
+ (WebInspector._tabBrowserSizeDidChange):
+ (WebInspector._quickConsoleDidResize):
+ (WebInspector._sidebarWidthDidChange):
+ (WebInspector._tabBrowserSelectedTabContentViewDidChange):
+ (WebInspector._inspectModeStateChanged):
+ (WebInspector._focusedContentView):
+ * UserInterface/Main.html:
+ * UserInterface/Views/Main.css:
+ (#tab-browser):
+
2015-04-23 Timothy Hatcher <[email protected]>
Web Inspector: Remove Main.js code we don't need for Tabs
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (183334 => 183335)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-04-26 01:22:33 UTC (rev 183334)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-04-26 01:23:04 UTC (rev 183335)
@@ -97,6 +97,7 @@
localizedStrings["Clear Timeline"] = "Clear Timeline";
localizedStrings["Clear log (%s or %s)"] = "Clear log (%s or %s)";
localizedStrings["Click Listener"] = "Click Listener";
+localizedStrings["Click to close this tab"] = "Click to close this tab";
localizedStrings["Click to open a colorpicker. Shift-click to change color format."] = "Click to open a colorpicker. Shift-click to change color format.";
localizedStrings["Clickable"] = "Clickable";
localizedStrings["Close"] = "Close";
@@ -113,9 +114,9 @@
localizedStrings["Conditional _expression_"] = "Conditional _expression_";
localizedStrings["Console"] = "Console";
localizedStrings["Console Profile Recorded"] = "Console Profile Recorded";
-localizedStrings["Console errors, click to show the Console"] = "Console errors, click to show the Console";
-localizedStrings["Console logs, click to show the Console"] = "Console logs, click to show the Console";
-localizedStrings["Console warnings, click to show the Console"] = "Console warnings, click to show the Console";
+localizedStrings["Console errors, click to show the Console tab"] = "Console errors, click to show the Console tab";
+localizedStrings["Console logs, click to show the Console tab"] = "Console logs, click to show the Console tab";
+localizedStrings["Console warnings, click to show the Console tab"] = "Console warnings, click to show the Console tab";
localizedStrings["Container Regions"] = "Container Regions";
localizedStrings["Content"] = "Content";
localizedStrings["Content Flow"] = "Content Flow";
@@ -128,6 +129,7 @@
localizedStrings["Copy Row"] = "Copy Row";
localizedStrings["Copy as HTML"] = "Copy as HTML";
localizedStrings["Could not fetch properties. Object may no longer exist."] = "Could not fetch properties. Object may no longer exist.";
+localizedStrings["Create a new tab"] = "Create a new tab";
localizedStrings["DOM Tree"] = "DOM Tree";
localizedStrings["Data"] = "Data";
localizedStrings["Data returned from the database is too large."] = "Data returned from the database is too large.";
@@ -148,7 +150,6 @@
localizedStrings["Disable Breakpoints"] = "Disable Breakpoints";
localizedStrings["Disable all breakpoints (%s)"] = "Disable all breakpoints (%s)";
localizedStrings["Disable paint flashing"] = "Disable paint flashing";
-localizedStrings["Disable point to inspect mode (%s)"] = "Disable point to inspect mode (%s)";
localizedStrings["Disabled"] = "Disabled";
localizedStrings["Dock to bottom of window"] = "Dock to bottom of window";
localizedStrings["Dock to right of window"] = "Dock to right of window";
@@ -158,7 +159,6 @@
localizedStrings["Documents"] = "Documents";
localizedStrings["Domain"] = "Domain";
localizedStrings["Done"] = "Done";
-localizedStrings["Download Web Archive"] = "Download Web Archive";
localizedStrings["Duration"] = "Duration";
localizedStrings["Dynamically calculated for the parent element"] = "Dynamically calculated for the parent element";
localizedStrings["Dynamically calculated for the selected element"] = "Dynamically calculated for the selected element";
@@ -195,11 +195,11 @@
localizedStrings["Element is masked and composited descendants"] = "Element is masked and composited descendants";
localizedStrings["Element is the root element"] = "Element is the root element";
localizedStrings["Element overlaps other compositing element"] = "Element overlaps other compositing element";
+localizedStrings["Elements"] = "Elements";
localizedStrings["Enable Breakpoint"] = "Enable Breakpoint";
localizedStrings["Enable Breakpoints"] = "Enable Breakpoints";
localizedStrings["Enable all breakpoints (%s)"] = "Enable all breakpoints (%s)";
localizedStrings["Enable paint flashing"] = "Enable paint flashing";
-localizedStrings["Enable point to inspect mode (%s)"] = "Enable point to inspect mode (%s)";
localizedStrings["Encoded"] = "Encoded";
localizedStrings["Encoding"] = "Encoding";
localizedStrings["End Capturing"] = "End Capturing";
@@ -245,12 +245,9 @@
localizedStrings["Height"] = "Height";
localizedStrings["Hide Replay Controls"] = "Hide Replay Controls";
localizedStrings["Hide compositing borders"] = "Hide compositing borders";
-localizedStrings["Hide console (%s)"] = "Hide console (%s)";
localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";
-localizedStrings["Hide the %s details sidebar"] = "Hide the %s details sidebar";
-localizedStrings["Hide the %s details sidebar (%s)"] = "Hide the %s details sidebar (%s)";
-localizedStrings["Hide the %s navigation sidebar"] = "Hide the %s navigation sidebar";
-localizedStrings["Hide the %s navigation sidebar (%s)"] = "Hide the %s navigation sidebar (%s)";
+localizedStrings["Hide the details sidebar (%s)"] = "Hide the details sidebar (%s)";
+localizedStrings["Hide the navigation sidebar (%s)"] = "Hide the navigation sidebar (%s)";
localizedStrings["Hide type information"] = "Hide type information";
localizedStrings["Host"] = "Host";
localizedStrings["Icon Only"] = "Icon Only";
@@ -269,7 +266,6 @@
localizedStrings["Inherited From: "] = "Inherited From: ";
localizedStrings["Initiator"] = "Initiator";
localizedStrings["Input: "] = "Input: ";
-localizedStrings["Inspect"] = "Inspect";
localizedStrings["Invalid"] = "Invalid";
localizedStrings["Invoke getter"] = "Invoke getter";
localizedStrings["_javascript_ & Events"] = "_javascript_ & Events";
@@ -382,7 +378,6 @@
localizedStrings["Refresh"] = "Refresh";
localizedStrings["Region Flow"] = "Region Flow";
localizedStrings["Region announced in its entirety."] = "Region announced in its entirety.";
-localizedStrings["Reload page (%s)\nReload ignoring cache (%s)"] = "Reload page (%s)\nReload ignoring cache (%s)";
localizedStrings["Removals"] = "Removals";
localizedStrings["Remove this breakpoint action"] = "Remove this breakpoint action";
localizedStrings["Rendering Frames"] = "Rendering Frames";
@@ -398,11 +393,10 @@
localizedStrings["Resources"] = "Resources";
localizedStrings["Response"] = "Response";
localizedStrings["Response Headers"] = "Response Headers";
-localizedStrings["Restart (%s)"] = "Restart (%s)";
localizedStrings["Return type for anonymous function"] = "Return type for anonymous function";
localizedStrings["Return type for function: %s"] = "Return type for function: %s";
localizedStrings["Reveal in DOM Tree"] = "Reveal in DOM Tree";
-localizedStrings["Reveal in Debugger Navigation Sidebar"] = "Reveal in Debugger Navigation Sidebar";
+localizedStrings["Reveal in Debugger Tab"] = "Reveal in Debugger Tab";
localizedStrings["Reveal in Original Resource"] = "Reveal in Original Resource";
localizedStrings["Role"] = "Role";
localizedStrings["Rules"] = "Rules";
@@ -427,24 +421,21 @@
localizedStrings["Session Storage"] = "Session Storage";
localizedStrings["Set to Automatically Continue"] = "Set to Automatically Continue";
localizedStrings["Setter"] = "Setter";
+localizedStrings["Settings"] = "Settings";
localizedStrings["Shadow Content"] = "Shadow Content";
localizedStrings["Shared Focus"] = "Shared Focus";
localizedStrings["Show All"] = "Show All";
localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
localizedStrings["Show Replay Controls"] = "Show Replay Controls";
localizedStrings["Show compositing borders"] = "Show compositing borders";
-localizedStrings["Show console (%s)"] = "Show console (%s)";
-localizedStrings["Show full-height console"] = "Show full-height console";
+localizedStrings["Show console tab"] = "Show console tab";
localizedStrings["Show only resources with breakpoints."] = "Show only resources with breakpoints.";
localizedStrings["Show only resources with issues."] = "Show only resources with issues.";
localizedStrings["Show resources with and without breakpoints."] = "Show resources with and without breakpoints.";
localizedStrings["Show resources with and without issues."] = "Show resources with and without issues.";
localizedStrings["Show shadow DOM nodes"] = "Show shadow DOM nodes";
-localizedStrings["Show split console"] = "Show split console";
-localizedStrings["Show the %s details sidebar"] = "Show the %s details sidebar";
-localizedStrings["Show the %s details sidebar (%s)"] = "Show the %s details sidebar (%s)";
-localizedStrings["Show the %s navigation sidebar"] = "Show the %s navigation sidebar";
-localizedStrings["Show the %s navigation sidebar (%s)"] = "Show the %s navigation sidebar (%s)";
+localizedStrings["Show the details sidebar (%s)"] = "Show the details sidebar (%s)";
+localizedStrings["Show the navigation sidebar (%s)"] = "Show the navigation sidebar (%s)";
localizedStrings["Show type information"] = "Show type information";
localizedStrings["Size"] = "Size";
localizedStrings["Small Icons"] = "Small Icons";
@@ -475,7 +466,6 @@
localizedStrings["Text Only"] = "Text Only";
localizedStrings["The %s \ntable is empty."] = "The %s \ntable is empty.";
localizedStrings["Time"] = "Time";
-localizedStrings["Time until the load event fired, click to show the Network Requests timeline"] = "Time until the load event fired, click to show the Network Requests timeline";
localizedStrings["Timeline Events"] = "Timeline Events";
localizedStrings["Timeline Recording %d"] = "Timeline Recording %d";
localizedStrings["Timelines"] = "Timelines";
@@ -486,8 +476,7 @@
localizedStrings["Timer Installed"] = "Timer Installed";
localizedStrings["Timer Removed"] = "Timer Removed";
localizedStrings["Total Time"] = "Total Time";
-localizedStrings["Total number of resources, click to show the Resources navigation sidebar"] = "Total number of resources, click to show the Resources navigation sidebar";
-localizedStrings["Total size of all resources, click to show the Network Requests timeline"] = "Total size of all resources, click to show the Network Requests timeline";
+localizedStrings["Total number of resources, click to show the Resources tab"] = "Total number of resources, click to show the Resources tab";
localizedStrings["Transfered"] = "Transfered";
localizedStrings["Triggered Breakpoint"] = "Triggered Breakpoint";
localizedStrings["Type"] = "Type";
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (183334 => 183335)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-04-26 01:22:33 UTC (rev 183334)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-04-26 01:23:04 UTC (rev 183335)
@@ -151,6 +151,9 @@
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);
+
this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", false);
this.showReplayInterfaceSetting = new WebInspector.Setting("show-web-replay", false);
@@ -204,6 +207,8 @@
this.toolbar.addEventListener(WebInspector.Toolbar.Event.DisplayModeDidChange, this._toolbarDisplayModeDidChange, this);
this.toolbar.addEventListener(WebInspector.Toolbar.Event.SizeModeDidChange, this._toolbarSizeModeDidChange, this);
+ this.tabBar = new WebInspector.TabBar(document.getElementById("tab-bar"));
+
var contentElement = document.getElementById("content");
contentElement.setAttribute("role", "main");
contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
@@ -287,6 +292,23 @@
this._updateDockNavigationItems();
this._updateToolbarHeight();
+ for (var tabType of this._openTabsSetting.value) {
+ var tabContentView = this._tabContentViewForType(tabType);
+ if (!tabContentView)
+ continue;
+ this.tabBrowser.addTabForContentView(tabContentView, true);
+ }
+
+ this.tabBar.selectedTabBarItem = this._selectedTabIndexSetting.value;
+
+ if (!this.tabBar.selectedTabBarItem)
+ this.tabBar.selectedTabBarItem = 0;
+
+ // Listen to the events after restoring the saved tabs to avoid recursion.
+ this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._rememberOpenTabs, this);
+ this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._rememberOpenTabs, this);
+ this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemsReordered, this._rememberOpenTabs, this);
+
// Signal that the frontend is now ready to receive messages.
InspectorFrontendAPI.loadCompleted();
@@ -304,6 +326,41 @@
this.runBootstrapOperations();
};
+WebInspector._tabContentViewForType = function(tabType)
+{
+ switch (tabType) {
+ case WebInspector.ElementsTabContentView.Type:
+ return new WebInspector.ElementsTabContentView;
+ case WebInspector.ResourcesTabContentView.Type:
+ return new WebInspector.ResourcesTabContentView;
+ case WebInspector.TimelineTabContentView.Type:
+ return new WebInspector.TimelineTabContentView;
+ case WebInspector.DebuggerTabContentView.Type:
+ return new WebInspector.DebuggerTabContentView;
+ case WebInspector.ConsoleTabContentView.Type:
+ return new WebInspector.ConsoleTabContentView;
+ default:
+ console.error("Unknown tab type", tabType);
+ }
+
+ return null;
+};
+
+WebInspector._rememberOpenTabs = function()
+{
+ var openTabs = [];
+
+ for (var tabBarItem of this.tabBar.tabBarItems) {
+ var tabContentView = tabBarItem.representedObject;
+ if (tabContentView instanceof WebInspector.SettingsTabContentView)
+ continue;
+ console.assert(tabContentView.type, "Tab type can't be null, undefined, or empty string", tabContentView.type, tabContentView);
+ openTabs.push(tabContentView.type);
+ }
+
+ this._openTabsSetting.value = openTabs;
+};
+
WebInspector.activateExtraDomains = function(domains)
{
this.hasExtraDomains = true;
@@ -922,8 +979,7 @@
WebInspector._windowResized = function(event)
{
this.toolbar.updateLayout();
-
- this._contentBrowserSizeDidChange(event);
+ this._tabBrowserSizeDidChange();
};
WebInspector._updateModifierKeys = function(event)
@@ -990,21 +1046,21 @@
this.undockButtonNavigationItem.toggled = this._dockButtonToggledSetting.value;
};
-WebInspector._contentBrowserSizeDidChange = function(event)
+WebInspector._tabBrowserSizeDidChange = function()
{
- this.contentBrowser.updateLayout();
+ this.tabBrowser.updateLayout();
this.splitContentBrowser.updateLayout();
this.quickConsole.updateLayout();
};
WebInspector._quickConsoleDidResize = function(event)
{
- this.contentBrowser.updateLayout();
+ this.tabBrowser.updateLayout();
};
WebInspector._sidebarWidthDidChange = function(event)
{
- this._contentBrowserSizeDidChange(event);
+ this._tabBrowserSizeDidChange();
};
WebInspector._updateToolbarHeight = function()
@@ -1043,6 +1099,18 @@
this._updateToolbarHeight();
};
+WebInspector._tabBrowserSelectedTabContentViewDidChange = function(event)
+{
+ if (this.tabBar.selectedTabBarItem)
+ this._selectedTabIndexSetting.value = this.tabBar.tabBarItems.indexOf(this.tabBar.selectedTabBarItem);
+
+ if (!this.doesCurrentTabSupportSplitContentBrowser())
+ this.hideSplitConsole();
+
+ if (!this.isShowingSplitConsole())
+ this.quickConsole.consoleLogVisibilityChanged(this.isShowingConsoleTab());
+};
+
WebInspector._initializeWebSocketIfNeeded = function()
{
if (!InspectorFrontendHost.initializeWebSocket)
@@ -1252,7 +1320,7 @@
WebInspector._inspectModeStateChanged = function(event)
{
- this._inspectModeToolbarButton.activated = WebInspector.domTreeManager.inspectModeEnabled;
+// this._inspectModeToolbarButton.activated = WebInspector.domTreeManager.inspectModeEnabled;
};
WebInspector._toggleInspectMode = function(event)
@@ -1282,8 +1350,8 @@
WebInspector._focusedContentView = function()
{
- if (this.contentBrowser.element.isSelfOrAncestor(this.currentFocusElement))
- return this.contentBrowser.currentContentView;
+ if (this.tabBrowser.element.isSelfOrAncestor(this.currentFocusElement))
+ return this.tabBrowser.selectedTabContentView;
if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement))
return this.splitContentBrowser.currentContentView;
return null;
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (183334 => 183335)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-04-26 01:22:33 UTC (rev 183334)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-04-26 01:23:04 UTC (rev 183335)
@@ -52,6 +52,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -64,14 +65,14 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
- <link rel="stylesheet" href=""
- <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -101,10 +102,10 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
- <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -133,6 +134,8 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -311,6 +314,9 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
+ <script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
@@ -323,19 +329,27 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
+ <script src=""
+ <script src=""
<script src=""
+ <script src=""
<script src=""
+ <script src=""
+ <script src=""
+ <script src=""
<script src=""
<script src=""
@@ -545,10 +559,11 @@
<body>
<div id="docked-resizer"></div>
<div id="toolbar"></div>
+<div id="tab-bar"></div>
<div id="main">
<div id="navigation-sidebar"></div>
<div id="content">
- <div id="content-browser"></div>
+ <div id="tab-browser"></div>
<div id="split-content-browser" class="hidden"></div>
<div id="quick-console"></div>
</div>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (183334 => 183335)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2015-04-26 01:22:33 UTC (rev 183334)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2015-04-26 01:23:04 UTC (rev 183335)
@@ -148,7 +148,7 @@
flex: 1;
}
-#content-browser {
+#tab-browser {
flex: 1;
}
