Changeset 95536 in webkit


Ignore:
Timestamp:
Sep 20, 2011 6:51:06 AM (13 years ago)
Author:
pfeldman@chromium.org
Message:

Source/WebCore: 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):

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:
Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r95535 r95536  
     12011-09-15  Pavel Feldman  <pfeldman@google.com>
     2
     3        Web Inspector: refactor ConsoleView, Drawer, ConsolePanel trio.
     4        https://bugs.webkit.org/show_bug.cgi?id=68155
     5
     6        Reviewed by Tony Gentilcore.
     7
     8        * inspector/console/console-dir.html:
     9
    1102011-09-19  Pavel Feldman  <pfeldman@google.com>
    211

  • trunk/LayoutTests/inspector/console/console-dir.html

    r82713 r95536  
    3333    function dumpConsoleMessages()
    3434    {
    35         InspectorTest.addResult(InspectorTest.textContentWithLineBreaks(document.getElementById("console-messages")));
     35        InspectorTest.addResult(InspectorTest.textContentWithLineBreaks(WebInspector.consoleView.messagesElement));
    3636        InspectorTest.completeTest();
    3737    }

  • trunk/Source/WebCore/ChangeLog

    r95535 r95536  
     12011-09-15  Pavel Feldman  <pfeldman@google.com>
     2
     3        Web Inspector: refactor ConsoleView, Drawer, ConsolePanel trio. Remove animation
     4        from drawer -> panel transition.
     5        https://bugs.webkit.org/show_bug.cgi?id=68155
     6
     7        ConsoleView, ConsolePanel and Drawer are all Views with custom show/hide implementations
     8        and weird DOM element containment. As a result, we have a number of cases when switching
     9        console from full panel to drawer mode and back result in UI glitches.
     10        For the sake of code clarity and no glitches, I'd like to sacrifice the "grow into full
     11        screen" console animation.
     12
     13        Reviewed by Tony Gentilcore.
     14
     15        * inspector/front-end/ConsoleModel.js:
     16        (WebInspector.ConsoleModel):
     17        * inspector/front-end/ConsolePanel.js:
     18        (WebInspector.ConsolePanel):
     19        (WebInspector.ConsolePanel.prototype.get statusBarItems):
     20        (WebInspector.ConsolePanel.prototype.show):
     21        (WebInspector.ConsolePanel.prototype.hide):
     22        * inspector/front-end/ConsoleView.js:
     23        (WebInspector.ConsoleView):
     24        (WebInspector.ConsoleView.createFilterElement):
     25        (WebInspector.ConsoleView.get this):
     26        (WebInspector.ConsoleView.prototype.get statusBarItems):
     27        (WebInspector.ConsoleView.prototype.wasShown):
     28        * inspector/front-end/Drawer.js:
     29        (WebInspector.Drawer):
     30        (WebInspector.Drawer.prototype.get visible):
     31        (WebInspector.Drawer.prototype._constrainHeight):
     32        (WebInspector.Drawer.prototype.show.animationFinished):
     33        (WebInspector.Drawer.prototype.show):
     34        (WebInspector.Drawer.prototype.hide):
     35        (WebInspector.Drawer.prototype.resize):
     36        (WebInspector.Drawer.prototype._animationDuration):
     37        * inspector/front-end/inspector.html:
     38        * inspector/front-end/inspector.js:
     39        (WebInspector._createGlobalStatusBarItems):
     40        (WebInspector._toggleConsoleButtonClicked):
     41        (WebInspector.set attached):
     42        (WebInspector.windowResize):
     43        (WebInspector.documentKeyDown):
     44
    1452011-09-19  Pavel Feldman  <pfeldman@google.com>
    246

  • trunk/Source/WebCore/inspector/front-end/ConsoleModel.js

    r95282 r95536  
    3232 * @constructor
    3333 */
    34 WebInspector.ConsoleModel = function(drawer)
     34WebInspector.ConsoleModel = function()
    3535{
    3636    this.messages = [];

  • trunk/Source/WebCore/inspector/front-end/ConsolePanel.js

    r93769 r95536  
    3232    WebInspector.consoleView.addEventListener(WebInspector.ConsoleView.Events.EntryAdded, this._consoleMessageAdded, this);
    3333    WebInspector.consoleView.addEventListener(WebInspector.ConsoleView.Events.ConsoleCleared, this._consoleCleared, this);
     34    this._view = WebInspector.consoleView;
    3435}
    3536
    … …  
    4041    },
    4142
     43    get statusBarItems()
     44    {
     45        return this._view.statusBarItems;
     46    },
     47
    4248    show: function()
    4349    {
     50        if (WebInspector.drawer.visible) {
     51            WebInspector.drawer.hide(true);
     52            this._drawerWasVisible = true;
     53        }
    4454        WebInspector.Panel.prototype.show.call(this);
    4555
    46         this._previousConsoleState = WebInspector.drawer.state;
    47         WebInspector.drawer.enterPanelMode();
    48         WebInspector.showConsole();
    49 
    50         // Move the scope bar to the top of the messages, like the resources filter.
    51         var scopeBar = document.getElementById("console-filter");
    52         var consoleMessages = document.getElementById("console-messages");
    53 
    54         scopeBar.parentNode.removeChild(scopeBar);
    55         document.getElementById("console-view").insertBefore(scopeBar, consoleMessages);
    56 
    57         // Update styles, and give console-messages a top margin so it doesn't overwrite the scope bar.
    58         scopeBar.addStyleClass("console-filter-top");
    59         scopeBar.removeStyleClass("status-bar-item");
    60 
    61         consoleMessages.addStyleClass("console-filter-top");
     56        this.addChildView(this._view);
     57        this._view.show();
    6258    },
    6359
    … …  
    6561    {
    6662        WebInspector.Panel.prototype.hide.call(this);
    67 
    68         if (this._previousConsoleState === WebInspector.Drawer.State.Hidden)
    69             WebInspector.drawer.immediatelyExitPanelMode();
    70         else
    71             WebInspector.drawer.exitPanelMode();
    72         delete this._previousConsoleState;
    73 
    74         // Move the scope bar back to the bottom bar, next to Clear Console.
    75         var scopeBar = document.getElementById("console-filter");
    76 
    77         scopeBar.parentNode.removeChild(scopeBar);
    78         document.getElementById("other-drawer-status-bar-items").appendChild(scopeBar);
    79 
    80         // Update styles, and remove the top margin on console-messages.
    81         scopeBar.removeStyleClass("console-filter-top");
    82         scopeBar.addStyleClass("status-bar-item");
    83 
    84         document.getElementById("console-messages").removeStyleClass("console-filter-top");
     63        this.removeChildView(this._view);
     64        if (this._drawerWasVisible) {
     65            WebInspector.drawer.show(this._view, true);
     66            delete this._drawerWasVisible;
     67        }
    8568    },
    8669

  • trunk/Source/WebCore/inspector/front-end/ConsoleView.js

    r94758 r95536  
    3030const ExpressionStopCharacters = " =:[({;,!+-*/&|^<>";
    3131
    32 WebInspector.ConsoleView = function(drawer)
     32WebInspector.ConsoleView = function()
    3333{
    34     WebInspector.View.call(this, document.getElementById("console-view"));
     34    WebInspector.View.call(this);
     35    this.element.id = "console-view";
    3536
    3637    this.messages = [];
    37     this.drawer = drawer;
    38 
    39     this.clearButton = document.getElementById("clear-console-status-bar-item");
    40     this.clearButton.title = WebInspector.UIString("Clear console log.");
    41     this.clearButton.addEventListener("click", this._requestClearMessages.bind(this), false);
    42 
    43     this._contextSelectElement = document.getElementById("console-context");
     38
     39    this._clearConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Clear console log."), "clear-status-bar-item");
     40    this._clearConsoleButton.addEventListener("click", this._requestClearMessages.bind(this), false);
     41
     42    this._contextSelectElement = document.createElement("select");
     43    this._contextSelectElement.id = "console-context";
     44    this._contextSelectElement.className = "status-bar-item";
     45
    4446    if (WebInspector.WorkerManager.isWorkerFrontend())
    4547        this._contextSelectElement.addStyleClass("hidden");
    4648
    47     this.messagesElement = document.getElementById("console-messages");
     49    this.messagesElement = document.createElement("div");
     50    this.messagesElement.id = "console-messages";
     51    this.messagesElement.className = "monospace";
    4852    this.messagesElement.addEventListener("click", this._messagesClicked.bind(this), true);
    49 
    50     this.promptElement = document.getElementById("console-prompt");
     53    this.element.appendChild(this.messagesElement);
     54
     55    this.promptElement = document.createElement("div");
     56    this.promptElement.id = "console-prompt";
    5157    this.promptElement.className = "source-code";
     58    this.promptElement.spellcheck = false;
    5259    this.promptElement.addEventListener("keydown", this._promptKeyDown.bind(this), true);
     60    this.messagesElement.appendChild(this.promptElement);
     61    this.messagesElement.appendChild(document.createElement("br"));
     62
    5363    this.prompt = new WebInspector.TextPrompt(this.promptElement, this.completions.bind(this), ExpressionStopCharacters + ".");
    5464    this.prompt.history = WebInspector.settings.consoleHistory.get();
    … …  
    5868    this.currentGroup = this.topGroup;
    5969
    60     this.toggleConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show console."), "console-status-bar-item");
    61     this.toggleConsoleButton.addEventListener("click", this._toggleConsoleButtonClicked.bind(this), false);
    62 
    63     // Will hold the list of filter elements
    64     this.filterBarElement = document.getElementById("console-filter");
     70    this._filterBarElement = document.createElement("div");
     71    this._filterBarElement.id = "console-filter";
     72    this._filterBarElement.className = "scope-bar status-bar-item";
    6573
    6674    function createDividerElement() {
    6775        var dividerElement = document.createElement("div");
    6876        dividerElement.addStyleClass("scope-bar-divider");
    69         this.filterBarElement.appendChild(dividerElement);
     77        this._filterBarElement.appendChild(dividerElement);
    7078    }
    7179
    … …  
    7886        categoryElement.textContent = label;
    7987
    80         this.filterBarElement.appendChild(categoryElement);
     88        this._filterBarElement.appendChild(categoryElement);
    8189
    8290        return categoryElement;
    … …  
    113121
    114122WebInspector.ConsoleView.prototype = {
     123    get statusBarItems()
     124    {
     125        return [this._clearConsoleButton.element, this._contextSelectElement, this._filterBarElement];
     126    },
     127
    115128    addContext: function(context)
    116129    {
    … …  
    212225    },
    213226
    214     _toggleConsoleButtonClicked: function()
    215     {
    216         this.drawer.visibleView = this;
    217     },
    218 
    219     populateStatusBar: function(statusBarElement)
    220     {
    221         statusBarElement.appendChild(this.clearButton);
    222         statusBarElement.appendChild(this.filterBarElement);
    223     },
    224 
    225     show: function()
    226     {
    227         this.toggleConsoleButton.toggled = true;
    228         this.toggleConsoleButton.title = WebInspector.UIString("Hide console.");
     227    wasShown: function()
     228    {
    229229        if (!this.prompt.isCaretInsidePrompt())
    230230            this.prompt.moveCaretToEndOfPrompt();
    … …  
    234234    {
    235235        WebInspector.currentFocusElement = this.promptElement;
    236     },
    237 
    238     hide: function()
    239     {
    240         this.toggleConsoleButton.toggled = false;
    241         this.toggleConsoleButton.title = WebInspector.UIString("Show console.");
    242236    },
    243237

  • trunk/Source/WebCore/inspector/front-end/Drawer.js

    r95287 r95536  
    3030WebInspector.Drawer = function()
    3131{
    32     WebInspector.View.call(this, document.getElementById("drawer"));
    33 
     32    this.element = document.getElementById("drawer");
    3433    this._savedHeight = 200; // Default.
    35     this.state = WebInspector.Drawer.State.Hidden;
    36     this.fullPanel = false;
    37 
    3834    this._mainElement = document.getElementById("main");
    3935    this._toolbarElement = document.getElementById("toolbar");
    4036    this._mainStatusBar = document.getElementById("main-status-bar");
    4137    this._mainStatusBar.addEventListener("mousedown", this._startStatusBarDragging.bind(this), true);
    42     this._viewStatusBar = document.getElementById("other-drawer-status-bar-items");
    4338    this._counters = document.getElementById("counters");
    44     this._drawerStatusBar = document.getElementById("drawer-status-bar");
     39    this._drawerStatusBar = document.createElement("div");
     40    this._drawerStatusBar.id = "drawer-status-bar";
     41    this._drawerStatusBar.className = "status-bar";
     42    this.element.appendChild(this._drawerStatusBar);
     43
     44    this._viewStatusBar = document.createElement("div");
     45    this._drawerStatusBar.appendChild(this._viewStatusBar);
    4546}
    4647
    4748WebInspector.Drawer.prototype = {
    48     get visibleView()
    49     {
    50         return this._visibleView;
    51     },
    52 
    53     set visibleView(x)
    54     {
    55         if (this._visibleView === x) {
    56             if (this.visible && this.fullPanel)
    57                 return;
    58             this.visible = !this.visible;
    59             return;
    60         }
    61 
    62         var firstTime = !this._visibleView;
    63         if (this._visibleView)
    64             this.removeChildView(this._visibleView);
    65         this._visibleView = x;
    66         this.addChildView(x);
    67 
    68         if (x && !firstTime) {
    69             this._safelyRemoveChildren();
    70             this._viewStatusBar.removeChildren(); // optimize this? call old.detach()
    71             x.populateStatusBar(this._viewStatusBar);
    72             x.show();
    73             this.visible = true;
    74         }
    75     },
    76 
    77     get savedHeight()
    78     {
    79         var height = this._savedHeight || this.element.offsetHeight;
     49    get visible()
     50    {
     51        return !!this._view;
     52    },
     53
     54    _constrainHeight: function(height)
     55    {
    8056        return Number.constrain(height, Preferences.minConsoleHeight, window.innerHeight - this._mainElement.totalOffsetTop() - Preferences.minConsoleHeight);
    8157    },
    8258
    83     showView: function(view)
    84     {
    85         if (!this.visible || this.visibleView !== view)
    86             this.visibleView = view;
    87     },
    88 
    89     show: function()
    90     {
    91         if (this._animating || this.visible)
    92             return;
    93 
    94         if (this.visibleView)
    95             this.visibleView.show();
    96 
    97         WebInspector.View.prototype.show.call(this);
    98 
    99         this._animating = true;
     59    show: function(view, immediately)
     60    {
     61        var drawerWasVisible = this.visible;
     62
     63        this.immediatelyFinishAnimation();
     64        if (this._view)
     65            this.element.removeChild(this._view.element);
     66
     67        this._view = view;
     68        this._view.show(this.element);
     69
     70        var statusBarItems = this._view.statusBarItems || [];
     71        for (var i = 0; i < statusBarItems.length; ++i)
     72            this._viewStatusBar.appendChild(statusBarItems[i]);
     73
     74        if (drawerWasVisible)
     75            return;
    10076
    10177        document.body.addStyleClass("drawer-visible");
    10278
    10379        var anchoredItems = document.getElementById("anchored-status-bar-items");
    104         var height = (this.fullPanel ? window.innerHeight - this._toolbarElement.offsetHeight : this.savedHeight);
     80        var height = this._constrainHeight(this._savedHeight || this.element.offsetHeight);
    10581        var animations = [
    10682            {element: this.element, end: {height: height}},
    … …  
    125101            if ("updateStatusBarItems" in WebInspector.currentPanel())
    126102                WebInspector.currentPanel().updateStatusBarItems();
    127             if (this.visibleView.afterShow)
    128                 this.visibleView.afterShow();
    129             delete this._animating;
     103            if (this._view && this._view.afterShow)
     104                this._view.afterShow();
    130105            delete this._currentAnimation;
    131             this.state = (this.fullPanel ? WebInspector.Drawer.State.Full : WebInspector.Drawer.State.Variable);
    132106            if (this._currentPanelCounters)
    133107                this._currentPanelCounters.removeAttribute("style");
    … …  
    135109
    136110        this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
    137     },
    138 
    139     hide: function()
    140     {
    141         if (this._animating || !this.visible)
    142             return;
    143 
    144         WebInspector.View.prototype.hide.call(this);
    145 
    146         if (this.visibleView)
    147             this.visibleView.hide();
    148 
    149         this._animating = true;
    150 
    151         if (!this.fullPanel)
    152             this._savedHeight = this.element.offsetHeight;
     111        if (immediately)
     112            this._currentAnimation.forceComplete();
     113    },
     114
     115    hide: function(immediately)
     116    {
     117        this.immediatelyFinishAnimation();
     118        if (!this.visible)
     119            return;
     120
     121        this._savedHeight = this.element.offsetHeight;
     122
     123        this.element.removeChild(this._view.element);
     124        delete this._view;
    153125
    154126        if (this.element === WebInspector.currentFocusElement || this.element.isAncestor(WebInspector.currentFocusElement))
    … …  
    191163
    192164            document.body.removeStyleClass("drawer-visible");
    193             delete this._animating;
    194165            delete this._currentAnimation;
    195             this.state = WebInspector.Drawer.State.Hidden;
    196166        }
    197167
    198168        this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
    199     },
    200 
    201     onResize: function()
    202     {
    203         if (this.state === WebInspector.Drawer.State.Hidden)
    204             return;
    205 
    206         var height;
    207         if (this.state === WebInspector.Drawer.State.Variable) {
    208             height = parseInt(this.element.style.height);
    209             height = Number.constrain(height, Preferences.minConsoleHeight, window.innerHeight - this._mainElement.totalOffsetTop() - Preferences.minConsoleHeight);
    210         } else
    211             height = window.innerHeight - this._toolbarElement.offsetHeight;
    212 
     169        if (immediately)
     170            this._currentAnimation.forceComplete();
     171    },
     172
     173    resize: function()
     174    {
     175        if (!this.visible)
     176            return;
     177
     178        var height = this._constrainHeight(parseInt(this.element.style.height));
    213179        this._mainElement.style.bottom = height + "px";
    214180        this.element.style.height = height + "px";
    215     },
    216 
    217     enterPanelMode: function()
    218     {
    219         this._cancelAnimationIfNeeded();
    220         this.fullPanel = true;
    221         this.updateHeight();
    222     },
    223 
    224     exitPanelMode: function()
    225     {
    226         this._cancelAnimationIfNeeded();
    227         this.fullPanel = false;
    228         this.updateHeight();
    229     },
    230 
    231     updateHeight: function()
    232     {
    233         if (this.visible) {
    234             if (this.fullPanel) {
    235                 this._savedHeight = this.element.offsetHeight;
    236                 var height = window.innerHeight - this._toolbarElement.offsetHeight;
    237                 this._animateDrawerHeight(height, WebInspector.Drawer.State.Full);
    238             } else {
    239                 // If this animation gets cancelled, we want the state of the drawer to be Variable,
    240                 // so that the new animation can't do an immediate transition between Hidden/Full states.
    241                 this.state = WebInspector.Drawer.State.Variable;
    242                 var height = this.savedHeight;
    243                 this._animateDrawerHeight(height, WebInspector.Drawer.State.Variable);
    244             }
    245         }
    246     },
    247 
    248     immediatelyExitPanelMode: function()
    249     {
    250         this.visible = false;
    251         this.fullPanel = false;
     181        this._view.doResize();
    252182    },
    253183
    … …  
    274204    },
    275205
    276     _cancelAnimationIfNeeded: function()
    277     {
    278         if (this._animating) {
    279             if (this._currentAnimation)
    280                 this._currentAnimation.cancel();
    281             delete this._animating;
    282             delete this._currentAnimation;
    283         }
    284     },
    285 
    286     _animateDrawerHeight: function(height, finalState)
    287     {
    288         this._animating = true;
    289         var animations = [
    290             {element: this.element, end: {height: height}},
    291             {element: this._mainElement, end: {bottom: height}}
    292         ];
    293 
    294         function animationFinished()
    295         {
    296             WebInspector.currentPanel().doResize();
    297             delete this._animating;
    298             delete this._currentAnimation;
    299             this.state = finalState;
    300         }
    301 
    302         this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
    303     },
    304 
    305206    _animationDuration: function()
    306207    {
    307         // Immediate if going between Hidden and Full in full panel mode
    308         if (this.fullPanel && (this.state === WebInspector.Drawer.State.Hidden || this.state === WebInspector.Drawer.State.Full))
    309             return 0;
    310 
    311208        return (window.event && window.event.shiftKey ? 2000 : 250);
    312209    },
    … …  
    361258    }
    362259}
    363 
    364 WebInspector.Drawer.prototype.__proto__ = WebInspector.View.prototype;
    365 
    366 WebInspector.Drawer.State = {
    367     Hidden: 0,
    368     Variable: 1,
    369     Full: 2
    370 };

  • trunk/Source/WebCore/inspector/front-end/inspector.html

    r95289 r95536  
    194194        <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>
    195195    </div>
    196     <div id="drawer">
    197         <div id="console-view"><div id="console-messages" class="monospace"><div id="console-prompt" spellcheck="false"><br></div></div></div>
    198         <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>
    199     </div>
     196    <div id="drawer"></div>
    200197</body>
    201198</html>

  • trunk/Source/WebCore/inspector/front-end/inspector.js

    r95287 r95536  
    145145            }
    146146        }
     147
     148        this._toggleConsoleButton.disabled = this._currentPanel === WebInspector.panels.console;
    147149    },
    148150
    … …  
    184186        var anchoredStatusBar = document.getElementById("anchored-status-bar-items");
    185187        anchoredStatusBar.appendChild(this._dockToggleButton.element);
    186         anchoredStatusBar.appendChild(this.consoleView.toggleConsoleButton.element);
     188
     189        this._toggleConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show console."), "console-status-bar-item");
     190        this._toggleConsoleButton.addEventListener("click", this._toggleConsoleButtonClicked.bind(this), false);
     191        anchoredStatusBar.appendChild(this._toggleConsoleButton.element);
     192
    187193        if (this.panels.elements)
    188194            anchoredStatusBar.appendChild(this.panels.elements.nodeSearchButton.element);
    189 
    190195        anchoredStatusBar.appendChild(this._settingsButton.element);
    191196    },
    … …  
    207212    },
    208213
     214    _toggleConsoleButtonClicked: function()
     215    {
     216        if (this._toggleConsoleButton.disabled)
     217            return;
     218
     219        this._toggleConsoleButton.toggled = !this._toggleConsoleButton.toggled;
     220
     221        if (this._toggleConsoleButton.toggled) {
     222            this._toggleConsoleButton.title = WebInspector.UIString("Hide console.");
     223            this.drawer.show(this.consoleView);
     224        } else {
     225            this._toggleConsoleButton.title = WebInspector.UIString("Show console.");
     226            this.drawer.hide();
     227        }
     228    },
     229
    209230    _toggleSettings: function()
    210231    {
    … …  
    287308
    288309        if (WebInspector.drawer)
    289             WebInspector.drawer.updateHeight();
     310            WebInspector.drawer.resize();
    290311    },
    291312
    … …  
    496517
    497518    this.drawer = new WebInspector.Drawer();
    498     this.consoleView = new WebInspector.ConsoleView(this.drawer);
    499     this.drawer.visibleView = this.consoleView;
     519    this.consoleView = new WebInspector.ConsoleView();
    500520
    501521    this.networkManager = new WebInspector.NetworkManager();
    … …  
    608628    if (this.currentPanel())
    609629        this.currentPanel().doResize();
    610     this.drawer.doResize();
     630    this.drawer.resize();
    611631    this.toolbar.resize();
    612632}
    … …  
    794814        case "U+001B": // Escape key
    795815            event.preventDefault();
    796             if (this.drawer.fullPanel)
    797                 return;
    798 
    799             this.drawer.visible = !this.drawer.visible;
     816            this._toggleConsoleButtonClicked();
    800817            break;
    801818
Note: See TracChangeset for help on using the changeset viewer.