Source/WebCore: Web Inspector: refactor ConsoleView, Drawer, ConsolePanel trio. Remov...
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Sep 2011 13:51:06 +0000 (13:51 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Sep 2011 13:51:06 +0000 (13:51 +0000)
from drawer -> panel transition.
https://bugs.webkit.org/show_bug.cgi?id=68155

ConsoleView, ConsolePanel and Drawer are all Views with custom show/hide implementations
and weird DOM element containment. As a result, we have a number of cases when switching
console from full panel to drawer mode and back result in UI glitches.
For the sake of code clarity and no glitches, I'd like to sacrifice the "grow into full
screen" console animation.

Reviewed by Tony Gentilcore.

* inspector/front-end/ConsoleModel.js:
(WebInspector.ConsoleModel):
* inspector/front-end/ConsolePanel.js:
(WebInspector.ConsolePanel):
(WebInspector.ConsolePanel.prototype.get statusBarItems):
(WebInspector.ConsolePanel.prototype.show):
(WebInspector.ConsolePanel.prototype.hide):
* inspector/front-end/ConsoleView.js:
(WebInspector.ConsoleView):
(WebInspector.ConsoleView.createFilterElement):
(WebInspector.ConsoleView.get this):
(WebInspector.ConsoleView.prototype.get statusBarItems):
(WebInspector.ConsoleView.prototype.wasShown):
* inspector/front-end/Drawer.js:
(WebInspector.Drawer):
(WebInspector.Drawer.prototype.get visible):
(WebInspector.Drawer.prototype._constrainHeight):
(WebInspector.Drawer.prototype.show.animationFinished):
(WebInspector.Drawer.prototype.show):
(WebInspector.Drawer.prototype.hide):
(WebInspector.Drawer.prototype.resize):
(WebInspector.Drawer.prototype._animationDuration):
* inspector/front-end/inspector.html:
* inspector/front-end/inspector.js:
(WebInspector._createGlobalStatusBarItems):
(WebInspector._toggleConsoleButtonClicked):
(WebInspector.set attached):
(WebInspector.windowResize):
(WebInspector.documentKeyDown):

LayoutTests: Web Inspector: refactor ConsoleView, Drawer, ConsolePanel trio.
https://bugs.webkit.org/show_bug.cgi?id=68155

Reviewed by Tony Gentilcore.

* inspector/console/console-dir.html:

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

LayoutTests/ChangeLog
LayoutTests/inspector/console/console-dir.html
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/ConsoleModel.js
Source/WebCore/inspector/front-end/ConsolePanel.js
Source/WebCore/inspector/front-end/ConsoleView.js
Source/WebCore/inspector/front-end/Drawer.js
Source/WebCore/inspector/front-end/inspector.html
Source/WebCore/inspector/front-end/inspector.js

index 9122e05..5731231 100644 (file)
@@ -1,3 +1,12 @@
+2011-09-15  Pavel Feldman  <pfeldman@google.com>
+
+        Web Inspector: refactor ConsoleView, Drawer, ConsolePanel trio.
+        https://bugs.webkit.org/show_bug.cgi?id=68155
+
+        Reviewed by Tony Gentilcore.
+
+        * inspector/console/console-dir.html:
+
 2011-09-19  Pavel Feldman  <pfeldman@google.com>
 
         Web Inspector: streamline Console's MessageType and MessageSource semantics.
index c0cf343..5ac1afe 100644 (file)
@@ -32,7 +32,7 @@ function test()
 
     function dumpConsoleMessages()
     {
-        InspectorTest.addResult(InspectorTest.textContentWithLineBreaks(document.getElementById("console-messages")));
+        InspectorTest.addResult(InspectorTest.textContentWithLineBreaks(WebInspector.consoleView.messagesElement));
         InspectorTest.completeTest();
     }
 }
index 54f5cac..229241c 100644 (file)
@@ -1,3 +1,47 @@
+2011-09-15  Pavel Feldman  <pfeldman@google.com>
+
+        Web Inspector: refactor ConsoleView, Drawer, ConsolePanel trio. Remove animation
+        from drawer -> panel transition.
+        https://bugs.webkit.org/show_bug.cgi?id=68155
+
+        ConsoleView, ConsolePanel and Drawer are all Views with custom show/hide implementations
+        and weird DOM element containment. As a result, we have a number of cases when switching
+        console from full panel to drawer mode and back result in UI glitches.
+        For the sake of code clarity and no glitches, I'd like to sacrifice the "grow into full
+        screen" console animation.
+
+        Reviewed by Tony Gentilcore.
+
+        * inspector/front-end/ConsoleModel.js:
+        (WebInspector.ConsoleModel):
+        * inspector/front-end/ConsolePanel.js:
+        (WebInspector.ConsolePanel):
+        (WebInspector.ConsolePanel.prototype.get statusBarItems):
+        (WebInspector.ConsolePanel.prototype.show):
+        (WebInspector.ConsolePanel.prototype.hide):
+        * inspector/front-end/ConsoleView.js:
+        (WebInspector.ConsoleView):
+        (WebInspector.ConsoleView.createFilterElement):
+        (WebInspector.ConsoleView.get this):
+        (WebInspector.ConsoleView.prototype.get statusBarItems):
+        (WebInspector.ConsoleView.prototype.wasShown):
+        * inspector/front-end/Drawer.js:
+        (WebInspector.Drawer):
+        (WebInspector.Drawer.prototype.get visible):
+        (WebInspector.Drawer.prototype._constrainHeight):
+        (WebInspector.Drawer.prototype.show.animationFinished):
+        (WebInspector.Drawer.prototype.show):
+        (WebInspector.Drawer.prototype.hide):
+        (WebInspector.Drawer.prototype.resize):
+        (WebInspector.Drawer.prototype._animationDuration):
+        * inspector/front-end/inspector.html:
+        * inspector/front-end/inspector.js:
+        (WebInspector._createGlobalStatusBarItems):
+        (WebInspector._toggleConsoleButtonClicked):
+        (WebInspector.set attached):
+        (WebInspector.windowResize):
+        (WebInspector.documentKeyDown):
+
 2011-09-19  Pavel Feldman  <pfeldman@google.com>
 
         Web Inspector: streamline Console's MessageType and MessageSource semantics.
index 0783a7d..7aba778 100644 (file)
@@ -31,7 +31,7 @@
 /**
  * @constructor
  */
-WebInspector.ConsoleModel = function(drawer)
+WebInspector.ConsoleModel = function()
 {
     this.messages = [];
     this.warnings = 0;
index d2e73cd..4ac9538 100644 (file)
@@ -31,6 +31,7 @@ WebInspector.ConsolePanel = function()
     WebInspector.Panel.call(this, "console");
     WebInspector.consoleView.addEventListener(WebInspector.ConsoleView.Events.EntryAdded, this._consoleMessageAdded, this);
     WebInspector.consoleView.addEventListener(WebInspector.ConsoleView.Events.ConsoleCleared, this._consoleCleared, this);
+    this._view = WebInspector.consoleView;
 }
 
 WebInspector.ConsolePanel.prototype = {
@@ -39,49 +40,31 @@ WebInspector.ConsolePanel.prototype = {
         return WebInspector.UIString("Console");
     },
 
+    get statusBarItems()
+    {
+        return this._view.statusBarItems;
+    },
+
     show: function()
     {
+        if (WebInspector.drawer.visible) {
+            WebInspector.drawer.hide(true);
+            this._drawerWasVisible = true;
+        }
         WebInspector.Panel.prototype.show.call(this);
 
-        this._previousConsoleState = WebInspector.drawer.state;
-        WebInspector.drawer.enterPanelMode();
-        WebInspector.showConsole();
-
-        // Move the scope bar to the top of the messages, like the resources filter.
-        var scopeBar = document.getElementById("console-filter");
-        var consoleMessages = document.getElementById("console-messages");
-
-        scopeBar.parentNode.removeChild(scopeBar);
-        document.getElementById("console-view").insertBefore(scopeBar, consoleMessages);
-
-        // Update styles, and give console-messages a top margin so it doesn't overwrite the scope bar.
-        scopeBar.addStyleClass("console-filter-top");
-        scopeBar.removeStyleClass("status-bar-item");
-
-        consoleMessages.addStyleClass("console-filter-top");
+        this.addChildView(this._view);
+        this._view.show();
     },
 
     hide: function()
     {
         WebInspector.Panel.prototype.hide.call(this);
-
-        if (this._previousConsoleState === WebInspector.Drawer.State.Hidden)
-            WebInspector.drawer.immediatelyExitPanelMode();
-        else
-            WebInspector.drawer.exitPanelMode();
-        delete this._previousConsoleState;
-
-        // Move the scope bar back to the bottom bar, next to Clear Console.
-        var scopeBar = document.getElementById("console-filter");
-
-        scopeBar.parentNode.removeChild(scopeBar);
-        document.getElementById("other-drawer-status-bar-items").appendChild(scopeBar);
-
-        // Update styles, and remove the top margin on console-messages.
-        scopeBar.removeStyleClass("console-filter-top");
-        scopeBar.addStyleClass("status-bar-item");
-
-        document.getElementById("console-messages").removeStyleClass("console-filter-top");
+        this.removeChildView(this._view);
+        if (this._drawerWasVisible) {
+            WebInspector.drawer.show(this._view, true);
+            delete this._drawerWasVisible;
+        }
     },
 
     searchCanceled: function()
index 5fd3d8f..6173ce9 100644 (file)
 
 const ExpressionStopCharacters = " =:[({;,!+-*/&|^<>";
 
-WebInspector.ConsoleView = function(drawer)
+WebInspector.ConsoleView = function()
 {
-    WebInspector.View.call(this, document.getElementById("console-view"));
+    WebInspector.View.call(this);
+    this.element.id = "console-view";
 
     this.messages = [];
-    this.drawer = drawer;
 
-    this.clearButton = document.getElementById("clear-console-status-bar-item");
-    this.clearButton.title = WebInspector.UIString("Clear console log.");
-    this.clearButton.addEventListener("click", this._requestClearMessages.bind(this), false);
+    this._clearConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Clear console log."), "clear-status-bar-item");
+    this._clearConsoleButton.addEventListener("click", this._requestClearMessages.bind(this), false);
+
+    this._contextSelectElement = document.createElement("select");
+    this._contextSelectElement.id = "console-context";
+    this._contextSelectElement.className = "status-bar-item";
 
-    this._contextSelectElement = document.getElementById("console-context");
     if (WebInspector.WorkerManager.isWorkerFrontend())
         this._contextSelectElement.addStyleClass("hidden");
 
-    this.messagesElement = document.getElementById("console-messages");
+    this.messagesElement = document.createElement("div");
+    this.messagesElement.id = "console-messages";
+    this.messagesElement.className = "monospace";
     this.messagesElement.addEventListener("click", this._messagesClicked.bind(this), true);
+    this.element.appendChild(this.messagesElement);
 
-    this.promptElement = document.getElementById("console-prompt");
+    this.promptElement = document.createElement("div");
+    this.promptElement.id = "console-prompt";
     this.promptElement.className = "source-code";
+    this.promptElement.spellcheck = false;
     this.promptElement.addEventListener("keydown", this._promptKeyDown.bind(this), true);
+    this.messagesElement.appendChild(this.promptElement);
+    this.messagesElement.appendChild(document.createElement("br"));
+
     this.prompt = new WebInspector.TextPrompt(this.promptElement, this.completions.bind(this), ExpressionStopCharacters + ".");
     this.prompt.history = WebInspector.settings.consoleHistory.get();
 
@@ -57,16 +67,14 @@ WebInspector.ConsoleView = function(drawer)
     this.messagesElement.insertBefore(this.topGroup.element, this.promptElement);
     this.currentGroup = this.topGroup;
 
-    this.toggleConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show console."), "console-status-bar-item");
-    this.toggleConsoleButton.addEventListener("click", this._toggleConsoleButtonClicked.bind(this), false);
-
-    // Will hold the list of filter elements
-    this.filterBarElement = document.getElementById("console-filter");
+    this._filterBarElement = document.createElement("div");
+    this._filterBarElement.id = "console-filter";
+    this._filterBarElement.className = "scope-bar status-bar-item";
 
     function createDividerElement() {
         var dividerElement = document.createElement("div");
         dividerElement.addStyleClass("scope-bar-divider");
-        this.filterBarElement.appendChild(dividerElement);
+        this._filterBarElement.appendChild(dividerElement);
     }
 
     var updateFilterHandler = this._updateFilter.bind(this);
@@ -77,7 +85,7 @@ WebInspector.ConsoleView = function(drawer)
         categoryElement.addEventListener("click", updateFilterHandler, false);
         categoryElement.textContent = label;
 
-        this.filterBarElement.appendChild(categoryElement);
+        this._filterBarElement.appendChild(categoryElement);
 
         return categoryElement;
     }
@@ -112,6 +120,11 @@ WebInspector.ConsoleView.Events = {
 }
 
 WebInspector.ConsoleView.prototype = {
+    get statusBarItems()
+    {
+        return [this._clearConsoleButton.element, this._contextSelectElement, this._filterBarElement];
+    },
+
     addContext: function(context)
     {
         var option = document.createElement("option");
@@ -211,21 +224,8 @@ WebInspector.ConsoleView.prototype = {
         }
     },
 
-    _toggleConsoleButtonClicked: function()
+    wasShown: function()
     {
-        this.drawer.visibleView = this;
-    },
-
-    populateStatusBar: function(statusBarElement)
-    {
-        statusBarElement.appendChild(this.clearButton);
-        statusBarElement.appendChild(this.filterBarElement);
-    },
-
-    show: function()
-    {
-        this.toggleConsoleButton.toggled = true;
-        this.toggleConsoleButton.title = WebInspector.UIString("Hide console.");
         if (!this.prompt.isCaretInsidePrompt())
             this.prompt.moveCaretToEndOfPrompt();
     },
@@ -235,12 +235,6 @@ WebInspector.ConsoleView.prototype = {
         WebInspector.currentFocusElement = this.promptElement;
     },
 
-    hide: function()
-    {
-        this.toggleConsoleButton.toggled = false;
-        this.toggleConsoleButton.title = WebInspector.UIString("Show console.");
-    },
-
     _isScrollIntoViewScheduled: function()
     {
         return !!this._scrollIntoViewTimer;
index f5362fd..8d3baef 100644 (file)
 
 WebInspector.Drawer = function()
 {
-    WebInspector.View.call(this, document.getElementById("drawer"));
-
+    this.element = document.getElementById("drawer");
     this._savedHeight = 200; // Default.
-    this.state = WebInspector.Drawer.State.Hidden;
-    this.fullPanel = false;
-
     this._mainElement = document.getElementById("main");
     this._toolbarElement = document.getElementById("toolbar");
     this._mainStatusBar = document.getElementById("main-status-bar");
     this._mainStatusBar.addEventListener("mousedown", this._startStatusBarDragging.bind(this), true);
-    this._viewStatusBar = document.getElementById("other-drawer-status-bar-items");
     this._counters = document.getElementById("counters");
-    this._drawerStatusBar = document.getElementById("drawer-status-bar");
+    this._drawerStatusBar = document.createElement("div");
+    this._drawerStatusBar.id = "drawer-status-bar";
+    this._drawerStatusBar.className = "status-bar";
+    this.element.appendChild(this._drawerStatusBar);
+
+    this._viewStatusBar = document.createElement("div");
+    this._drawerStatusBar.appendChild(this._viewStatusBar);
 }
 
 WebInspector.Drawer.prototype = {
-    get visibleView()
+    get visible()
     {
-        return this._visibleView;
-    },
-
-    set visibleView(x)
-    {
-        if (this._visibleView === x) {
-            if (this.visible && this.fullPanel)
-                return;
-            this.visible = !this.visible;
-            return;
-        }
-
-        var firstTime = !this._visibleView;
-        if (this._visibleView)
-            this.removeChildView(this._visibleView);
-        this._visibleView = x;
-        this.addChildView(x);
-
-        if (x && !firstTime) {
-            this._safelyRemoveChildren();
-            this._viewStatusBar.removeChildren(); // optimize this? call old.detach()
-            x.populateStatusBar(this._viewStatusBar);
-            x.show();
-            this.visible = true;
-        }
+        return !!this._view;
     },
 
-    get savedHeight()
+    _constrainHeight: function(height)
     {
-        var height = this._savedHeight || this.element.offsetHeight;
         return Number.constrain(height, Preferences.minConsoleHeight, window.innerHeight - this._mainElement.totalOffsetTop() - Preferences.minConsoleHeight);
     },
 
-    showView: function(view)
+    show: function(view, immediately)
     {
-        if (!this.visible || this.visibleView !== view)
-            this.visibleView = view;
-    },
+        var drawerWasVisible = this.visible;
 
-    show: function()
-    {
-        if (this._animating || this.visible)
-            return;
+        this.immediatelyFinishAnimation();
+        if (this._view)
+            this.element.removeChild(this._view.element);
 
-        if (this.visibleView)
-            this.visibleView.show();
+        this._view = view;
+        this._view.show(this.element);
 
-        WebInspector.View.prototype.show.call(this);
+        var statusBarItems = this._view.statusBarItems || [];
+        for (var i = 0; i < statusBarItems.length; ++i)
+            this._viewStatusBar.appendChild(statusBarItems[i]);
 
-        this._animating = true;
+        if (drawerWasVisible)
+            return;
 
         document.body.addStyleClass("drawer-visible");
 
         var anchoredItems = document.getElementById("anchored-status-bar-items");
-        var height = (this.fullPanel ? window.innerHeight - this._toolbarElement.offsetHeight : this.savedHeight);
+        var height = this._constrainHeight(this._savedHeight || this.element.offsetHeight);
         var animations = [
             {element: this.element, end: {height: height}},
             {element: this._mainElement, end: {bottom: height}},
@@ -124,32 +100,28 @@ WebInspector.Drawer.prototype = {
         {
             if ("updateStatusBarItems" in WebInspector.currentPanel())
                 WebInspector.currentPanel().updateStatusBarItems();
-            if (this.visibleView.afterShow)
-                this.visibleView.afterShow();
-            delete this._animating;
+            if (this._view && this._view.afterShow)
+                this._view.afterShow();
             delete this._currentAnimation;
-            this.state = (this.fullPanel ? WebInspector.Drawer.State.Full : WebInspector.Drawer.State.Variable);
             if (this._currentPanelCounters)
                 this._currentPanelCounters.removeAttribute("style");
         }
 
         this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
+        if (immediately)
+            this._currentAnimation.forceComplete();
     },
 
-    hide: function()
+    hide: function(immediately)
     {
-        if (this._animating || !this.visible)
+        this.immediatelyFinishAnimation();
+        if (!this.visible)
             return;
 
-        WebInspector.View.prototype.hide.call(this);
-
-        if (this.visibleView)
-            this.visibleView.hide();
-
-        this._animating = true;
+        this._savedHeight = this.element.offsetHeight;
 
-        if (!this.fullPanel)
-            this._savedHeight = this.element.offsetHeight;
+        this.element.removeChild(this._view.element);
+        delete this._view;
 
         if (this.element === WebInspector.currentFocusElement || this.element.isAncestor(WebInspector.currentFocusElement))
             WebInspector.currentFocusElement = WebInspector.previousFocusElement;
@@ -190,65 +162,23 @@ WebInspector.Drawer.prototype = {
             }
 
             document.body.removeStyleClass("drawer-visible");
-            delete this._animating;
             delete this._currentAnimation;
-            this.state = WebInspector.Drawer.State.Hidden;
         }
 
         this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
+        if (immediately)
+            this._currentAnimation.forceComplete();
     },
 
-    onResize: function()
+    resize: function()
     {
-        if (this.state === WebInspector.Drawer.State.Hidden)
+        if (!this.visible)
             return;
 
-        var height;
-        if (this.state === WebInspector.Drawer.State.Variable) {
-            height = parseInt(this.element.style.height);
-            height = Number.constrain(height, Preferences.minConsoleHeight, window.innerHeight - this._mainElement.totalOffsetTop() - Preferences.minConsoleHeight);
-        } else
-            height = window.innerHeight - this._toolbarElement.offsetHeight;
-
+        var height = this._constrainHeight(parseInt(this.element.style.height));
         this._mainElement.style.bottom = height + "px";
         this.element.style.height = height + "px";
-    },
-
-    enterPanelMode: function()
-    {
-        this._cancelAnimationIfNeeded();
-        this.fullPanel = true;
-        this.updateHeight();
-    },
-
-    exitPanelMode: function()
-    {
-        this._cancelAnimationIfNeeded();
-        this.fullPanel = false;
-        this.updateHeight();
-    },
-
-    updateHeight: function()
-    {
-        if (this.visible) {
-            if (this.fullPanel) {
-                this._savedHeight = this.element.offsetHeight;
-                var height = window.innerHeight - this._toolbarElement.offsetHeight;
-                this._animateDrawerHeight(height, WebInspector.Drawer.State.Full);
-            } else {
-                // If this animation gets cancelled, we want the state of the drawer to be Variable,
-                // so that the new animation can't do an immediate transition between Hidden/Full states.
-                this.state = WebInspector.Drawer.State.Variable;
-                var height = this.savedHeight;
-                this._animateDrawerHeight(height, WebInspector.Drawer.State.Variable);
-            }
-        }
-    },
-
-    immediatelyExitPanelMode: function()
-    {
-        this.visible = false;
-        this.fullPanel = false;
+        this._view.doResize();
     },
 
     immediatelyFinishAnimation: function()
@@ -273,41 +203,8 @@ WebInspector.Drawer.prototype = {
             this._counters.insertBefore(x, this._counters.firstChild);
     },
 
-    _cancelAnimationIfNeeded: function()
-    {
-        if (this._animating) {
-            if (this._currentAnimation)
-                this._currentAnimation.cancel();
-            delete this._animating;
-            delete this._currentAnimation;
-        }
-    },
-
-    _animateDrawerHeight: function(height, finalState)
-    {
-        this._animating = true;
-        var animations = [
-            {element: this.element, end: {height: height}},
-            {element: this._mainElement, end: {bottom: height}}
-        ];
-
-        function animationFinished()
-        {
-            WebInspector.currentPanel().doResize();
-            delete this._animating;
-            delete this._currentAnimation;
-            this.state = finalState;
-        }
-
-        this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
-    },
-
     _animationDuration: function()
     {
-        // Immediate if going between Hidden and Full in full panel mode
-        if (this.fullPanel && (this.state === WebInspector.Drawer.State.Hidden || this.state === WebInspector.Drawer.State.Full))
-            return 0;
-
         return (window.event && window.event.shiftKey ? 2000 : 250);
     },
 
@@ -360,11 +257,3 @@ WebInspector.Drawer.prototype = {
         event.stopPropagation();
     }
 }
-
-WebInspector.Drawer.prototype.__proto__ = WebInspector.View.prototype;
-
-WebInspector.Drawer.State = {
-    Hidden: 0,
-    Variable: 1,
-    Full: 2
-};
index 5644aa4..ba12f6c 100644 (file)
@@ -193,9 +193,6 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
         <div id="main-panels" spellcheck="false"></div>
         <div id="main-status-bar" class="status-bar"><div id="anchored-status-bar-items"><div id="counters"><div id="error-warning-count" class="hidden"></div></div></div></div>
     </div>
-    <div id="drawer">
-        <div id="console-view"><div id="console-messages" class="monospace"><div id="console-prompt" spellcheck="false"><br></div></div></div>
-        <div id="drawer-status-bar" class="status-bar"><div id="other-drawer-status-bar-items"><button id="clear-console-status-bar-item" class="status-bar-item clear-status-bar-item"><div class="glyph"></div><div class="glyph shadow"></div></button><select id="console-context" class="status-bar-item"></select><div id="console-filter" class="scope-bar status-bar-item"></div></div></div>
-    </div>
+    <div id="drawer"></div>
 </body>
 </html>
index 490dad2..2fb58f1 100644 (file)
@@ -144,6 +144,8 @@ var WebInspector = {
                 WebInspector.userMetrics.panelShown(panelName);
             }
         }
+
+        this._toggleConsoleButton.disabled = this._currentPanel === WebInspector.panels.console;
     },
 
     _createPanels: function()
@@ -183,10 +185,13 @@ var WebInspector = {
 
         var anchoredStatusBar = document.getElementById("anchored-status-bar-items");
         anchoredStatusBar.appendChild(this._dockToggleButton.element);
-        anchoredStatusBar.appendChild(this.consoleView.toggleConsoleButton.element);
+
+        this._toggleConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show console."), "console-status-bar-item");
+        this._toggleConsoleButton.addEventListener("click", this._toggleConsoleButtonClicked.bind(this), false);
+        anchoredStatusBar.appendChild(this._toggleConsoleButton.element);
+
         if (this.panels.elements)
             anchoredStatusBar.appendChild(this.panels.elements.nodeSearchButton.element);
-
         anchoredStatusBar.appendChild(this._settingsButton.element);
     },
 
@@ -206,6 +211,22 @@ var WebInspector = {
         }
     },
 
+    _toggleConsoleButtonClicked: function()
+    {
+        if (this._toggleConsoleButton.disabled)
+            return;
+
+        this._toggleConsoleButton.toggled = !this._toggleConsoleButton.toggled;
+
+        if (this._toggleConsoleButton.toggled) {
+            this._toggleConsoleButton.title = WebInspector.UIString("Hide console.");
+            this.drawer.show(this.consoleView);
+        } else {
+            this._toggleConsoleButton.title = WebInspector.UIString("Show console.");
+            this.drawer.hide();
+        }
+    },
+
     _toggleSettings: function()
     {
         this._settingsButton.toggled = !this._settingsButton.toggled;
@@ -286,7 +307,7 @@ var WebInspector = {
             WebInspector.searchController.updateSearchLabel();
 
         if (WebInspector.drawer)
-            WebInspector.drawer.updateHeight();
+            WebInspector.drawer.resize();
     },
 
     _updateErrorAndWarningCounts: function()
@@ -495,8 +516,7 @@ WebInspector.doLoadedDone = function()
     this.console.addEventListener(WebInspector.ConsoleModel.Events.RepeatCountUpdated, this._updateErrorAndWarningCounts, this);
 
     this.drawer = new WebInspector.Drawer();
-    this.consoleView = new WebInspector.ConsoleView(this.drawer);
-    this.drawer.visibleView = this.consoleView;
+    this.consoleView = new WebInspector.ConsoleView();
 
     this.networkManager = new WebInspector.NetworkManager();
     this.resourceTreeModel = new WebInspector.ResourceTreeModel();
@@ -607,7 +627,7 @@ WebInspector.windowResize = function(event)
 {
     if (this.currentPanel())
         this.currentPanel().doResize();
-    this.drawer.doResize();
+    this.drawer.resize();
     this.toolbar.resize();
 }
 
@@ -793,10 +813,7 @@ WebInspector.documentKeyDown = function(event)
 
         case "U+001B": // Escape key
             event.preventDefault();
-            if (this.drawer.fullPanel)
-                return;
-
-            this.drawer.visible = !this.drawer.visible;
+            this._toggleConsoleButtonClicked();
             break;
 
         // Windows and Mac have two different definitions of [, so accept both.