Web Inspector: no discoverable way to dismiss the split console
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 27 Jun 2017 21:01:54 +0000 (21:01 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 27 Jun 2017 21:01:54 +0000 (21:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=167034
<rdar://problem/30023436>

Reviewed by Devin Rousso.

This patch adds an Xcode-style toggle button to the left of the
split console navigation bar. Additionally, the split console code
has been broken out into it's own class to reduce the clutter in
Main.js/css, and simplify future console maintenance.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Base/Main.js:
(WebInspector.loaded):
Replace the "split" ContentBrowser with a new ConsoleDrawer class,
which encapsulates the drawer height setting and resize behavior.
(WebInspector.contentLoaded):
The console drawer manages its own height.

* UserInterface/Images/HideConsoleDrawer.svg: Added.
* UserInterface/Images/ShowConsoleDrawer.svg: Added.
Console drawer toggle button images. Styled after corresponding Xcode button.

* UserInterface/Main.html:

* UserInterface/Views/ConsoleDrawer.css: Added.
Moved old #split-content-browser styles over from Main.css.
(.console-drawer):
(.console-drawer > .navigation-bar):
(.console-drawer > .navigation-bar > .item.button:not(.clear-log)):
Make button spacing less cramped.
(.console-drawer > .navigation-bar > .item:not(.flexible-space)):
(.console-drawer > .navigation-bar > :matches(.item.button, .log-scope-bar)):
(.console-drawer > .navigation-bar > .item > .glyph,):

* UserInterface/Views/ConsoleDrawer.js: Added.
New class responsible for console drawer expand / collapse and resizer
dragging, which was previously part of Main.js. The console drawer toolbar
now has a toggle button, debugging controls, and a call frames path item.
The "Show Console Tab" button has been removed.

(WebInspector.ConsoleDrawer):
(WebInspector.ConsoleDrawer.prototype.get collapsed):
(WebInspector.ConsoleDrawer.prototype.set collapsed):
(WebInspector.ConsoleDrawer.prototype.get height):
(WebInspector.ConsoleDrawer.prototype.shown):
(WebInspector.ConsoleDrawer.prototype.layout):
(WebInspector.ConsoleDrawer.prototype._consoleResizerMouseDown.dockedResizerDrag):
(WebInspector.ConsoleDrawer.prototype._consoleResizerMouseDown.dockedResizerDragEnd):
(WebInspector.ConsoleDrawer.prototype._consoleResizerMouseDown):
(WebInspector.ConsoleDrawer.prototype._restoreDrawerHeight):
(WebInspector.ConsoleDrawer.prototype._updateDrawerHeight):
(WebInspector.ConsoleDrawer.prototype._selectedTabContentViewDidChange):
When switching to a tab that doesn't support showing the console drawer,
hide it without altering the collapsed state.

* UserInterface/Views/LogContentView.js:
(WebInspector.LogContentView.prototype.get navigationItems):

* UserInterface/Views/Main.css:
Renamed #split-content-browser to #console-drawer, and moved related
styles to ConsoleDrawer.css.

(#split-content-browser): Deleted.
(#split-content-browser > .navigation-bar): Deleted.
(#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider)): Deleted.
(#split-content-browser > .navigation-bar .item): Deleted.
(#split-content-browser > .navigation-bar .item:not(.flexible-space)): Deleted.
(#split-content-browser .hierarchical-path-component.log-icon .icon): Deleted.
(#split-content-browser .hierarchical-path-component.log-icon .title): Deleted.
(#split-content-browser .hierarchical-path-component.log-icon select): Deleted.
(#split-content-browser > .navigation-bar > :matches(.hierarchical-path, .log-scope-bar)): Deleted.
(#split-content-browser > .navigation-bar > .log-scope-bar > li): Deleted.

* UserInterface/Views/QuickConsole.js:
(WebInspector.QuickConsole):
(WebInspector.QuickConsole.prototype._toggleOrFocus):
(WebInspector.QuickConsole.prototype._updateStyles):
Update top border style in response to change in selected TabBrowser
tab or the console drawer collapsed state.

(WebInspector.QuickConsole.prototype.consoleLogVisibilityChanged): Deleted.
(WebInspector.QuickConsole.prototype.set keyboardShortcutDisabled): Deleted.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Images/HideConsoleDrawer.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/ShowConsoleDrawer.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.css [moved from Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js with 66% similarity]
Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/LogContentView.js
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/QuickConsole.js

index a76fe76..10003dc 100644 (file)
@@ -1,3 +1,90 @@
+2017-06-27  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: no discoverable way to dismiss the split console
+        https://bugs.webkit.org/show_bug.cgi?id=167034
+        <rdar://problem/30023436>
+
+        Reviewed by Devin Rousso.
+
+        This patch adds an Xcode-style toggle button to the left of the
+        split console navigation bar. Additionally, the split console code
+        has been broken out into it's own class to reduce the clutter in
+        Main.js/css, and simplify future console maintenance.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.loaded):
+        Replace the "split" ContentBrowser with a new ConsoleDrawer class,
+        which encapsulates the drawer height setting and resize behavior.
+        (WebInspector.contentLoaded):
+        The console drawer manages its own height.
+
+        * UserInterface/Images/HideConsoleDrawer.svg: Added.
+        * UserInterface/Images/ShowConsoleDrawer.svg: Added.
+        Console drawer toggle button images. Styled after corresponding Xcode button.
+
+        * UserInterface/Main.html:
+
+        * UserInterface/Views/ConsoleDrawer.css: Added.
+        Moved old #split-content-browser styles over from Main.css.
+        (.console-drawer):
+        (.console-drawer > .navigation-bar):
+        (.console-drawer > .navigation-bar > .item.button:not(.clear-log)):
+        Make button spacing less cramped.
+        (.console-drawer > .navigation-bar > .item:not(.flexible-space)):
+        (.console-drawer > .navigation-bar > :matches(.item.button, .log-scope-bar)):
+        (.console-drawer > .navigation-bar > .item > .glyph,):
+
+        * UserInterface/Views/ConsoleDrawer.js: Added.
+        New class responsible for console drawer expand / collapse and resizer
+        dragging, which was previously part of Main.js. The console drawer toolbar
+        now has a toggle button, debugging controls, and a call frames path item.
+        The "Show Console Tab" button has been removed.
+
+        (WebInspector.ConsoleDrawer):
+        (WebInspector.ConsoleDrawer.prototype.get collapsed):
+        (WebInspector.ConsoleDrawer.prototype.set collapsed):
+        (WebInspector.ConsoleDrawer.prototype.get height):
+        (WebInspector.ConsoleDrawer.prototype.shown):
+        (WebInspector.ConsoleDrawer.prototype.layout):
+        (WebInspector.ConsoleDrawer.prototype._consoleResizerMouseDown.dockedResizerDrag):
+        (WebInspector.ConsoleDrawer.prototype._consoleResizerMouseDown.dockedResizerDragEnd):
+        (WebInspector.ConsoleDrawer.prototype._consoleResizerMouseDown):
+        (WebInspector.ConsoleDrawer.prototype._restoreDrawerHeight):
+        (WebInspector.ConsoleDrawer.prototype._updateDrawerHeight):
+        (WebInspector.ConsoleDrawer.prototype._selectedTabContentViewDidChange):
+        When switching to a tab that doesn't support showing the console drawer,
+        hide it without altering the collapsed state.
+
+        * UserInterface/Views/LogContentView.js:
+        (WebInspector.LogContentView.prototype.get navigationItems):
+
+        * UserInterface/Views/Main.css:
+        Renamed #split-content-browser to #console-drawer, and moved related
+        styles to ConsoleDrawer.css.
+
+        (#split-content-browser): Deleted.
+        (#split-content-browser > .navigation-bar): Deleted.
+        (#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider)): Deleted.
+        (#split-content-browser > .navigation-bar .item): Deleted.
+        (#split-content-browser > .navigation-bar .item:not(.flexible-space)): Deleted.
+        (#split-content-browser .hierarchical-path-component.log-icon .icon): Deleted.
+        (#split-content-browser .hierarchical-path-component.log-icon .title): Deleted.
+        (#split-content-browser .hierarchical-path-component.log-icon select): Deleted.
+        (#split-content-browser > .navigation-bar > :matches(.hierarchical-path, .log-scope-bar)): Deleted.
+        (#split-content-browser > .navigation-bar > .log-scope-bar > li): Deleted.
+
+        * UserInterface/Views/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype._toggleOrFocus):
+        (WebInspector.QuickConsole.prototype._updateStyles):
+        Update top border style in response to change in selected TabBrowser
+        tab or the console drawer collapsed state.
+
+        (WebInspector.QuickConsole.prototype.consoleLogVisibilityChanged): Deleted.
+        (WebInspector.QuickConsole.prototype.set keyboardShortcutDisabled): Deleted.
+
 2017-06-24  Joseph Pecoraro  <pecoraro@apple.com>
 
         Remove Reflect.enumerate
index 2ad2d20..67bfbb2 100644 (file)
@@ -437,6 +437,7 @@ localizedStrings["HTTP"] = "HTTP";
 localizedStrings["Heading Level"] = "Heading Level";
 localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)";
 localizedStrings["Height"] = "Height";
+localizedStrings["Hide Console"] = "Hide Console";
 localizedStrings["Hide Grid"] = "Hide Grid";
 localizedStrings["Hide compositing borders"] = "Hide compositing borders";
 localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";
@@ -760,6 +761,7 @@ localizedStrings["Shortest property path to %s"] = "Shortest property path to %s
 localizedStrings["Show %d More"] = "Show %d More";
 localizedStrings["Show All"] = "Show All";
 localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
+localizedStrings["Show Console"] = "Show Console";
 localizedStrings["Show Console tab"] = "Show Console tab";
 localizedStrings["Show Contexts in Resources Tab"] = "Show Contexts in Resources Tab";
 localizedStrings["Show Grid"] = "Show Grid";
index b2b6887..a9f6b21 100644 (file)
@@ -167,7 +167,6 @@ WebInspector.loaded = function()
 
     // Create settings.
     this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
-    this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
 
     this._openTabsSetting = new WebInspector.Setting("open-tab-types", ["elements", "network", "resources", "timeline", "debugger", "storage", "console"]);
     this._selectedTabIndexSetting = new WebInspector.Setting("selected-tab-index", 0);
@@ -288,19 +287,16 @@ WebInspector.contentLoaded = function()
     this._contentElement.setAttribute("role", "main");
     this._contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
 
-    const disableBackForward = true;
-    const disableFindBanner = false;
-    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, disableBackForward, disableFindBanner);
-    this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
+    this.consoleDrawer = new WebInspector.ConsoleDrawer(document.getElementById("console-drawer"));
+    this.consoleDrawer.addEventListener(WebInspector.ConsoleDrawer.Event.CollapsedStateChanged, this._consoleDrawerCollapsedStateDidChange, this);
+    this.consoleDrawer.addEventListener(WebInspector.ConsoleDrawer.Event.Resized, this._consoleDrawerDidResize, this);
 
     this.clearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "K", this._clear.bind(this));
 
     this.quickConsole = new WebInspector.QuickConsole(document.getElementById("quick-console"));
-    this.quickConsole.addEventListener(WebInspector.QuickConsole.Event.DidResize, this._quickConsoleDidResize, this);
 
     this._consoleRepresentedObject = new WebInspector.LogObject;
-    this._consoleTreeElement = new WebInspector.LogTreeElement(this._consoleRepresentedObject);
-    this.consoleContentView = WebInspector.splitContentBrowser.contentViewForRepresentedObject(this._consoleRepresentedObject);
+    this.consoleContentView = this.consoleDrawer.contentViewForRepresentedObject(this._consoleRepresentedObject);
     this.consoleLogViewController = this.consoleContentView.logViewController;
     this.breakpointPopoverController = new WebInspector.BreakpointPopoverController;
 
@@ -503,8 +499,6 @@ WebInspector.contentLoaded = function()
     // and pending InspectorFrontendAPI commands to be sent.
     InspectorFrontendHost.loaded();
 
-    this._updateSplitConsoleHeight(this._splitConsoleHeightSetting.value);
-
     if (this._showingSplitConsoleSetting.value)
         this.showSplitConsole();
 
@@ -716,14 +710,6 @@ WebInspector.activateExtraDomains = function(domains)
     this._tryToRestorePendingTabs();
 };
 
-WebInspector.contentBrowserTreeElementForRepresentedObject = function(contentBrowser, representedObject)
-{
-    // The console does not have a sidebar, so return a tree element here so something is shown.
-    if (representedObject === this._consoleRepresentedObject)
-        return this._consoleTreeElement;
-    return null;
-};
-
 WebInspector.updateWindowTitle = function()
 {
     var mainFrame = this.frameResourceManager.mainFrame;
@@ -921,7 +907,7 @@ WebInspector.isConsoleFocused = function()
 
 WebInspector.isShowingSplitConsole = function()
 {
-    return !this.splitContentBrowser.element.classList.contains("hidden");
+    return !this.consoleDrawer.collapsed;
 };
 
 WebInspector.dockedConfigurationSupportsSplitContentBrowser = function()
@@ -955,22 +941,16 @@ WebInspector.showSplitConsole = function()
         return;
     }
 
-    this.splitContentBrowser.element.classList.remove("hidden");
-
-    this._showingSplitConsoleSetting.value = true;
+    this.consoleDrawer.collapsed = false;
 
-    if (this.splitContentBrowser.currentContentView !== this.consoleContentView) {
-        // Be sure to close the view in the tab content browser before showing it in the
-        // split content browser. We can only show a content view in one browser at a time.
-        if (this.consoleContentView.parentContainer)
-            this.consoleContentView.parentContainer.closeContentView(this.consoleContentView);
-        this.splitContentBrowser.showContentView(this.consoleContentView);
-    } else {
-        // This causes the view to know it was shown and focus the prompt.
-        this.splitContentBrowser.shown();
-    }
+    if (this.consoleDrawer.currentContentView === this.consoleContentView)
+        return;
 
-    this.quickConsole.consoleLogVisibilityChanged(true);
+    // Be sure to close the view in the tab content browser before showing it in the
+    // split content browser. We can only show a content view in one browser at a time.
+    if (this.consoleContentView.parentContainer)
+        this.consoleContentView.parentContainer.closeContentView(this.consoleContentView);
+    this.consoleDrawer.showContentView(this.consoleContentView);
 };
 
 WebInspector.hideSplitConsole = function()
@@ -978,14 +958,7 @@ WebInspector.hideSplitConsole = function()
     if (!this.isShowingSplitConsole())
         return;
 
-    this.splitContentBrowser.element.classList.add("hidden");
-
-    this._showingSplitConsoleSetting.value = false;
-
-    // This causes the view to know it was hidden.
-    this.splitContentBrowser.hidden();
-
-    this.quickConsole.consoleLogVisibilityChanged(false);
+    this.consoleDrawer.collapsed = true;
 };
 
 WebInspector.showConsoleTab = function(requestedScope)
@@ -1616,11 +1589,18 @@ WebInspector._updateDockNavigationItems = function()
 WebInspector._tabBrowserSizeDidChange = function()
 {
     this.tabBrowser.updateLayout(WebInspector.View.LayoutReason.Resize);
-    this.splitContentBrowser.updateLayout(WebInspector.View.LayoutReason.Resize);
+    this.consoleDrawer.updateLayout(WebInspector.View.LayoutReason.Resize);
     this.quickConsole.updateLayout(WebInspector.View.LayoutReason.Resize);
 };
 
-WebInspector._quickConsoleDidResize = function(event)
+WebInspector._consoleDrawerCollapsedStateDidChange = function(event)
+{
+    this._showingSplitConsoleSetting.value = WebInspector.isShowingSplitConsole();
+
+    WebInspector._consoleDrawerDidResize();
+};
+
+WebInspector._consoleDrawerDidResize = function(event)
 {
     this.tabBrowser.updateLayout(WebInspector.View.LayoutReason.Resize);
 };
@@ -1637,7 +1617,7 @@ WebInspector._setupViewHierarchy = function()
     rootView.addSubview(this.tabBar);
     rootView.addSubview(this.navigationSidebar);
     rootView.addSubview(this.tabBrowser);
-    rootView.addSubview(this.splitContentBrowser);
+    rootView.addSubview(this.consoleDrawer);
     rootView.addSubview(this.quickConsole);
     rootView.addSubview(this.detailsSidebar);
 };
@@ -1647,58 +1627,16 @@ WebInspector._tabBrowserSelectedTabContentViewDidChange = function(event)
     if (this.tabBar.selectedTabBarItem && this.tabBar.selectedTabBarItem.representedObject.constructor.shouldSaveTab())
         this._selectedTabIndexSetting.value = this.tabBar.tabBarItems.indexOf(this.tabBar.selectedTabBarItem);
 
-    if (!this.doesCurrentTabSupportSplitContentBrowser())
-        this.hideSplitConsole();
-
-    if (!this.isShowingSplitConsole())
-        this.quickConsole.consoleLogVisibilityChanged(this.isShowingConsoleTab());
-};
-
-WebInspector._updateSplitConsoleHeight = function(height)
-{
-    const minimumHeight = 64;
-    const maximumHeight = window.innerHeight * 0.55;
-
-    height = Math.max(minimumHeight, Math.min(height, maximumHeight));
-
-    this.splitContentBrowser.element.style.height = height + "px";
-};
-
-WebInspector._consoleResizerMouseDown = function(event)
-{
-    if (event.button !== 0 || event.ctrlKey)
-        return;
-
-    // Only start dragging if the target is one of the elements that we expect.
-    if (!event.target.classList.contains("navigation-bar") && !event.target.classList.contains("flexible-space"))
+    if (this.doesCurrentTabSupportSplitContentBrowser()) {
+        if (this._shouldRevealSpitConsoleIfSupported) {
+            this._shouldRevealSpitConsoleIfSupported = false;
+            this.showSplitConsole();
+        }
         return;
-
-    var resizerElement = event.target;
-    var mouseOffset = resizerElement.offsetHeight - (event.pageY - resizerElement.totalOffsetTop);
-
-    function dockedResizerDrag(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        var height = window.innerHeight - event.pageY - mouseOffset;
-
-        this._splitConsoleHeightSetting.value = height;
-
-        this._updateSplitConsoleHeight(height);
-
-        this.quickConsole.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
     }
 
-    function dockedResizerDragEnd(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        this.elementDragEnd(event);
-    }
-
-    this.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, "row-resize");
+    this._shouldRevealSpitConsoleIfSupported = this.isShowingSplitConsole();
+    this.hideSplitConsole();
 };
 
 WebInspector._toolbarMouseDown = function(event)
@@ -1957,9 +1895,9 @@ WebInspector._focusedContentBrowser = function()
         return null;
     }
 
-    if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement)
+    if (this.consoleDrawer.element.isSelfOrAncestor(this.currentFocusElement)
         || (WebInspector.isShowingSplitConsole() && this.quickConsole.element.isSelfOrAncestor(this.currentFocusElement)))
-        return this.splitContentBrowser;
+        return this.consoleDrawer;
 
     return null;
 };
@@ -1973,9 +1911,9 @@ WebInspector._focusedContentView = function()
         return tabContentView;
     }
 
-    if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement)
+    if (this.consoleDrawer.element.isSelfOrAncestor(this.currentFocusElement)
         || (WebInspector.isShowingSplitConsole() && this.quickConsole.element.isSelfOrAncestor(this.currentFocusElement)))
-        return this.splitContentBrowser.currentContentView;
+        return this.consoleDrawer.currentContentView;
 
     return null;
 };
diff --git a/Source/WebInspectorUI/UserInterface/Images/HideConsoleDrawer.svg b/Source/WebInspectorUI/UserInterface/Images/HideConsoleDrawer.svg
new file mode 100644 (file)
index 0000000..3dfc048
--- /dev/null
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+    <rect stroke="currentColor" fill="none" x="1.5" y="2.5" width="13" height="11"/>
+    <path fill="none" stroke="currentColor" d="M 4.5 6.5 L 8 10 L 11.5 6.5 Z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/ShowConsoleDrawer.svg b/Source/WebInspectorUI/UserInterface/Images/ShowConsoleDrawer.svg
new file mode 100644 (file)
index 0000000..a653f3e
--- /dev/null
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+    <rect stroke="currentColor" fill="none" x="1.5" y="2.5" width="13" height="11"/>
+    <path fill="none" stroke="currentColor" d="M 4.5 10 L 8 6.5 L 11.5 10 Z"/>
+</svg>
index b7e69ba..4c9038e 100644 (file)
@@ -56,6 +56,7 @@
     <link rel="stylesheet" href="Views/ColorWheel.css">
     <link rel="stylesheet" href="Views/CompletionSuggestionsView.css">
     <link rel="stylesheet" href="Views/ComputedStyleDetailsPanel.css">
+    <link rel="stylesheet" href="Views/ConsoleDrawer.css">
     <link rel="stylesheet" href="Views/ConsoleMessageView.css">
     <link rel="stylesheet" href="Views/ConsolePrompt.css">
     <link rel="stylesheet" href="Views/ContentBrowser.css">
 
     <script src="Views/ConsoleCommandView.js"></script>
     <script src="Views/ConsoleMessageView.js"></script>
+    <script src="Views/ContentBrowser.js"></script>
     <script src="Views/ContentView.js"></script>
     <script src="Views/DataGrid.js"></script>
     <script src="Views/DataGridNode.js"></script>
     <script src="Views/ColorWheel.js"></script>
     <script src="Views/CompletionSuggestionsView.js"></script>
     <script src="Views/ComputedStyleDetailsPanel.js"></script>
+    <script src="Views/ConsoleDrawer.js"></script>
     <script src="Views/ConsoleGroup.js"></script>
     <script src="Views/ConsolePrompt.js"></script>
     <script src="Views/ConsoleSession.js"></script>
-    <script src="Views/ContentBrowser.js"></script>
     <script src="Views/ContentFlowDOMTreeContentView.js"></script>
     <script src="Views/ContentFlowTreeElement.js"></script>
     <script src="Views/ContentViewContainer.js"></script>
     <script src="Views/LayoutTimelineView.js"></script>
     <script src="Views/LineChart.js"></script>
     <script src="Views/LogContentView.js"></script>
-    <script src="Views/LogTreeElement.js"></script>
     <script src="Views/MemoryCategoryView.js"></script>
     <script src="Views/MemoryTimelineOverviewGraph.js"></script>
     <script src="Views/MemoryTimelineView.js"></script>
     <div id="navigation-sidebar"></div>
     <div id="content">
         <div id="tab-browser"></div>
-        <div id="split-content-browser" class="hidden"></div>
+        <div id="console-drawer" class="hidden"></div>
         <div id="quick-console"></div>
     </div>
     <div id="details-sidebar"></div>
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.LogTreeElement = class LogTreeElement extends WebInspector.GeneralTreeElement
-{
-    constructor(representedObject)
-    {
-        console.assert(representedObject instanceof WebInspector.LogObject);
+.console-drawer {
+    border-top: 1px solid var(--border-color);
+}
 
-        super("log-icon", WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
+.console-drawer > .navigation-bar {
+    cursor: row-resize;
+    background-color: var(--panel-background-color);
+}
 
-        this._logObject = representedObject;
-    }
+.console-drawer > .navigation-bar > .item.button:not(.clear-log) {
+    width: 30px;
+}
 
-    // Public
+.console-drawer > .navigation-bar > .item:not(.flexible-space) {
+    cursor: default;
+}
 
-    get logObject()
-    {
-        return this._logObject;
-    }
-};
+.console-drawer > .navigation-bar > :matches(.item.button, .log-scope-bar) {
+    pointer-events: none;
+}
+
+.console-drawer > .navigation-bar > .item > .glyph,
+.console-drawer > .navigation-bar > .log-scope-bar > li {
+    pointer-events: all;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.js
new file mode 100644 (file)
index 0000000..58f207a
--- /dev/null
@@ -0,0 +1,170 @@
+/*
+ * Copyright (C) 2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleDrawer = class ConsoleDrawer extends WebInspector.ContentBrowser
+{
+    constructor(element)
+    {
+        const delegate = null;
+        const disableBackForward = true;
+        const disableFindBanner = false;
+        super(element, delegate, disableBackForward, disableFindBanner);
+
+        this.element.classList.add("console-drawer");
+
+        this._drawerHeightSetting = new WebInspector.Setting("console-drawer-height", 150);
+
+        this.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
+
+        this._toggleDrawerButton = new WebInspector.ToggleButtonNavigationItem("toggle-drawer", WebInspector.UIString("Hide Console"), WebInspector.UIString("Show Console"), "Images/HideConsoleDrawer.svg", "Images/ShowConsoleDrawer.svg");
+        this._toggleDrawerButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, () => { WebInspector.toggleSplitConsole(); });
+        this.navigationBar.insertNavigationItem(this._toggleDrawerButton, 0);
+
+        this.collapsed = true;
+
+        WebInspector.TabBrowser.addEventListener(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange, this._selectedTabContentViewDidChange, this);
+    }
+
+    // Public
+
+    get collapsed()
+    {
+        return this._collapsed;
+    }
+
+    set collapsed(flag)
+    {
+        if (flag === this._collapsed)
+            return;
+
+        this._collapsed = flag || false;
+        this._toggleDrawerButton.toggled = this._collapsed;
+
+        this.element.classList.toggle("hidden", this._collapsed);
+
+        if (this._collapsed)
+            this.hidden();
+        else
+            this.shown();
+
+        this.dispatchEventToListeners(WebInspector.ConsoleDrawer.Event.CollapsedStateChanged);
+    }
+
+    get height()
+    {
+        return this.element.offsetHeight;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._restoreDrawerHeight();
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (this._collapsed)
+            return;
+
+        if (this.layoutReason !== WebInspector.View.LayoutReason.Resize)
+            return;
+
+        super.layout();
+
+        let height = this.height;
+        this._restoreDrawerHeight();
+
+        if (height !== this.height)
+            this.dispatchEventToListeners(WebInspector.ConsoleDrawer.Event.Resized);
+    }
+
+    // Private
+
+    _consoleResizerMouseDown(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        // Only start dragging if the target is one of the elements that we expect.
+        if (event.target !== this.navigationBar.element && !event.target.classList.contains("flexible-space"))
+            return;
+
+        let resizerElement = event.target;
+        let mouseOffset = resizerElement.offsetHeight - (event.pageY - resizerElement.totalOffsetTop);
+
+        function dockedResizerDrag(event)
+        {
+            let height = window.innerHeight - event.pageY - mouseOffset;
+            this._drawerHeightSetting.value = height;
+            this._updateDrawerHeight(height);
+            this.collapsed = false;
+        }
+
+        function dockedResizerDragEnd(event)
+        {
+            if (event.button !== 0)
+                return;
+
+            WebInspector.elementDragEnd(event);
+        }
+
+        WebInspector.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, "row-resize");
+    }
+
+    _restoreDrawerHeight()
+    {
+        this._updateDrawerHeight(this._drawerHeightSetting.value);
+    }
+
+    _updateDrawerHeight(height)
+    {
+        const minimumHeight = 64;
+        const maximumHeight = this.element.parentNode.offsetHeight - 100;
+
+        height = Number.constrain(height, minimumHeight, maximumHeight);
+        if (height === this.element.style.height)
+            return;
+
+        this.element.style.height = height + "px";
+
+        this.dispatchEventToListeners(WebInspector.ConsoleDrawer.Event.Resized);
+    }
+
+    _selectedTabContentViewDidChange()
+    {
+        if (WebInspector.doesCurrentTabSupportSplitContentBrowser())
+            return;
+
+        this.element.classList.add("hidden");
+    }
+};
+
+WebInspector.ConsoleDrawer.Event = {
+    CollapsedStateChanged: "console-drawer-collapsed-state-changed",
+    Resized: "console-drawer-resized",
+};
index 0c74ceb..57de164 100644 (file)
@@ -100,12 +100,16 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
 
     get navigationItems()
     {
-        let navigationItems = [this._findBanner, this._scopeBar];
+        let navigationItems = [this._scopeBar];
         if (HeapAgent.gc)
             navigationItems.push(this._garbageCollectNavigationItem);
+
         navigationItems.push(this._clearLogNavigationItem);
+
         if (WebInspector.isShowingSplitConsole())
             navigationItems.push(this._showConsoleTabNavigationItem);
+        else if (WebInspector.isShowingConsoleTab())
+            navigationItems.unshift(this._findBanner);
         return navigationItems;
     }
 
index 76187cd..7a82af9 100644 (file)
@@ -159,50 +159,6 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
     flex: 1;
 }
 
-#split-content-browser {
-    border-top: 1px solid var(--border-color);
-}
-
-#split-content-browser > .navigation-bar {
-    cursor: row-resize;
-
-    background-color: var(--panel-background-color);
-}
-
-#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider) {
-    display: none;
-}
-
-#split-content-browser > .navigation-bar .item {
-    height: 100%;
-}
-
-#split-content-browser > .navigation-bar .item:not(.flexible-space) {
-    cursor: default;
-}
-
-#split-content-browser .hierarchical-path-component.log-icon .icon {
-    margin-left: 6px;
-    margin-right: 6px;
-    opacity: 0.7;
-}
-
-#split-content-browser .hierarchical-path-component.log-icon .title {
-    color: hsla(0, 0%, 0%, 0.75);
-}
-
-#split-content-browser .hierarchical-path-component.log-icon select {
-    display: none;
-}
-
-#split-content-browser > .navigation-bar > :matches(.hierarchical-path, .log-scope-bar) {
-    pointer-events: none;
-}
-
-#split-content-browser > .navigation-bar > .log-scope-bar > li {
-    pointer-events: all;
-}
-
 #details-sidebar {
     width: 300px;
     height: 100%;
index 35f07b5..382c7c1 100644 (file)
@@ -74,6 +74,10 @@ WebInspector.QuickConsole = class QuickConsole extends WebInspector.View
 
         WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetAdded, this._targetAdded, this);
         WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetRemoved, this._targetRemoved, this);
+
+        WebInspector.consoleDrawer.addEventListener(WebInspector.ConsoleDrawer.Event.CollapsedStateChanged, this._updateStyles, this);
+
+        WebInspector.TabBrowser.addEventListener(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange, this._updateStyles, this);
     }
 
     // Public
@@ -93,21 +97,6 @@ WebInspector.QuickConsole = class QuickConsole extends WebInspector.View
         WebInspector.runtimeManager.activeExecutionContext = executionContext;
     }
 
-    consoleLogVisibilityChanged(visible)
-    {
-        if (visible === this.element.classList.contains(WebInspector.QuickConsole.ShowingLogClassName))
-            return;
-
-        this.element.classList.toggle(WebInspector.QuickConsole.ShowingLogClassName, visible);
-
-        this.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
-    }
-
-    set keyboardShortcutDisabled(disabled)
-    {
-        this._toggleOrFocusKeyboardShortcut.disabled = disabled;
-    }
-
     // Protected
 
     layout()
@@ -346,14 +335,9 @@ WebInspector.QuickConsole = class QuickConsole extends WebInspector.View
         else if (!WebInspector.isEditingAnyField() && !WebInspector.isEventTargetAnEditableField(event))
             this.prompt.focus();
     }
-};
 
-WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
-
-WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
-WebInspector.QuickConsole.ToolbarPromptPadding = 4;
-WebInspector.QuickConsole.ToolbarTopBorder = 1;
-
-WebInspector.QuickConsole.Event = {
-    DidResize: "quick-console-did-resize"
+    _updateStyles()
+    {
+        this.element.classList.toggle("showing-log", WebInspector.isShowingConsoleTab() || WebInspector.isShowingSplitConsole());
+    }
 };