Home | History | Annotate | Download | only in front-end 
      1 /*
      2  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
      3  * Copyright (C) 2009 Joseph Pecoraro
      4  *
      5  * Redistribution and use in source and binary forms, with or without
      6  * modification, are permitted provided that the following conditions
      7  * are met:
      8  *
      9  * 1.  Redistributions of source code must retain the above copyright
     10  *     notice, this list of conditions and the following disclaimer.
     11  * 2.  Redistributions in binary form must reproduce the above copyright
     12  *     notice, this list of conditions and the following disclaimer in the
     13  *     documentation and/or other materials provided with the distribution.
     14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
     15  *     its contributors may be used to endorse or promote products derived
     16  *     from this software without specific prior written permission.
     17  *
     18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
     19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
     20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
     21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
     22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
     23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
     24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
     25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
     26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
     27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     28  */
     29 
     30 WebInspector.Drawer = function()
     31 {
     32     WebInspector.View.call(this, document.getElementById("drawer"));
     33 
     34     this._savedHeight = 200; // Default.
     35     this.state = WebInspector.Drawer.State.Hidden;
     36     this.fullPanel = false;
     37 
     38     this._mainElement = document.getElementById("main");
     39     this._toolbarElement = document.getElementById("toolbar");
     40     this._mainStatusBar = document.getElementById("main-status-bar");
     41     this._mainStatusBar.addEventListener("mousedown", this._startStatusBarDragging.bind(this), true);
     42     this._viewStatusBar = document.getElementById("other-drawer-status-bar-items");
     43     this._counters = document.getElementById("counters");
     44     this._drawerStatusBar = document.getElementById("drawer-status-bar");
     45 }
     46 
     47 WebInspector.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._visibleView.hide();
     65 
     66         this._visibleView = x;
     67 
     68         if (x && !firstTime) {
     69             this._safelyRemoveChildren();
     70             this._viewStatusBar.removeChildren(); // optimize this? call old.detach()
     71             x.attach(this.element, this._viewStatusBar);
     72             x.show();
     73             this.visible = true;
     74         }
     75     },
     76 
     77     get savedHeight()
     78     {
     79         var height = this._savedHeight || this.element.offsetHeight;
     80         return Number.constrain(height, Preferences.minConsoleHeight, window.innerHeight - this._mainElement.totalOffsetTop - Preferences.minConsoleHeight);
     81     },
     82 
     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;
    100 
    101         document.body.addStyleClass("drawer-visible");
    102 
    103         var anchoredItems = document.getElementById("anchored-status-bar-items");
    104         var height = (this.fullPanel ? window.innerHeight - this._toolbarElement.offsetHeight : this.savedHeight);
    105         var animations = [
    106             {element: this.element, end: {height: height}},
    107             {element: this._mainElement, end: {bottom: height}},
    108             {element: this._mainStatusBar, start: {"padding-left": anchoredItems.offsetWidth - 1}, end: {"padding-left": 0}},
    109             {element: this._viewStatusBar, start: {opacity: 0}, end: {opacity: 1}}
    110         ];
    111 
    112         this._drawerStatusBar.insertBefore(anchoredItems, this._drawerStatusBar.firstChild);
    113 
    114         if (this._currentPanelCounters) {
    115             var oldRight = this._drawerStatusBar.clientWidth - (this._counters.offsetLeft + this._currentPanelCounters.offsetWidth);
    116             var newRight = WebInspector.Panel.counterRightMargin;
    117             var rightPadding = (oldRight - newRight);
    118             animations.push({element: this._currentPanelCounters, start: {"padding-right": rightPadding}, end: {"padding-right": 0}});
    119             this._currentPanelCounters.parentNode.removeChild(this._currentPanelCounters);
    120             this._mainStatusBar.appendChild(this._currentPanelCounters);
    121         }
    122 
    123         function animationFinished()
    124         {
    125             if ("updateStatusBarItems" in WebInspector.currentPanel)
    126                 WebInspector.currentPanel.updateStatusBarItems();
    127             if (this.visibleView.afterShow)
    128                 this.visibleView.afterShow();
    129             delete this._animating;
    130             delete this._currentAnimation;
    131             this.state = (this.fullPanel ? WebInspector.Drawer.State.Full : WebInspector.Drawer.State.Variable);
    132             if (this._currentPanelCounters)
    133                 this._currentPanelCounters.removeAttribute("style");
    134         }
    135 
    136         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;
    153 
    154         if (this.element === WebInspector.currentFocusElement || this.element.isAncestor(WebInspector.currentFocusElement))
    155             WebInspector.currentFocusElement = WebInspector.previousFocusElement;
    156 
    157         var anchoredItems = document.getElementById("anchored-status-bar-items");
    158 
    159         // Temporarily set properties and classes to mimic the post-animation values so panels
    160         // like Elements in their updateStatusBarItems call will size things to fit the final location.
    161         this._mainStatusBar.style.setProperty("padding-left", (anchoredItems.offsetWidth - 1) + "px");
    162         document.body.removeStyleClass("drawer-visible");
    163         if ("updateStatusBarItems" in WebInspector.currentPanel)
    164             WebInspector.currentPanel.updateStatusBarItems();
    165         document.body.addStyleClass("drawer-visible");
    166 
    167         var animations = [
    168             {element: this._mainElement, end: {bottom: 0}},
    169             {element: this._mainStatusBar, start: {"padding-left": 0}, end: {"padding-left": anchoredItems.offsetWidth - 1}},
    170             {element: this._viewStatusBar, start: {opacity: 1}, end: {opacity: 0}}
    171         ];
    172 
    173         if (this._currentPanelCounters) {
    174             var newRight = this._drawerStatusBar.clientWidth - this._counters.offsetLeft;
    175             var oldRight = this._mainStatusBar.clientWidth - (this._currentPanelCounters.offsetLeft + this._currentPanelCounters.offsetWidth);
    176             var rightPadding = (newRight - oldRight);
    177             animations.push({element: this._currentPanelCounters, start: {"padding-right": 0}, end: {"padding-right": rightPadding}});
    178         }
    179 
    180         function animationFinished()
    181         {
    182             WebInspector.currentPanel.resize();
    183             this._mainStatusBar.insertBefore(anchoredItems, this._mainStatusBar.firstChild);
    184             this._mainStatusBar.style.removeProperty("padding-left");
    185 
    186             if (this._currentPanelCounters) {
    187                 this._currentPanelCounters.setAttribute("style", null);
    188                 this._currentPanelCounters.parentNode.removeChild(this._currentPanelCounters);
    189                 this._counters.insertBefore(this._currentPanelCounters, this._counters.firstChild);
    190             }
    191 
    192             document.body.removeStyleClass("drawer-visible");
    193             delete this._animating;
    194             delete this._currentAnimation;
    195             this.state = WebInspector.Drawer.State.Hidden;
    196         }
    197 
    198         this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
    199     },
    200 
    201     resize: 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 
    213         this._mainElement.style.bottom = height + "px";
    214         this.element.style.height = height + "px";
    215     },
    216 
    217     enterPanelMode: function()
    218     {
    219         this._cancelAnimationIfNeeded();
    220         this.fullPanel = true;
    221 
    222         if (this.visible) {
    223             this._savedHeight = this.element.offsetHeight;
    224             var height = window.innerHeight - this._toolbarElement.offsetHeight;
    225             this._animateDrawerHeight(height, WebInspector.Drawer.State.Full);
    226         }
    227     },
    228 
    229     exitPanelMode: function()
    230     {
    231         this._cancelAnimationIfNeeded();
    232         this.fullPanel = false;
    233 
    234         if (this.visible) {
    235             // If this animation gets cancelled, we want the state of the drawer to be Variable,
    236             // so that the new animation can't do an immediate transition between Hidden/Full states.
    237             this.state = WebInspector.Drawer.State.Variable;
    238             var height = this.savedHeight;
    239             this._animateDrawerHeight(height, WebInspector.Drawer.State.Variable);
    240         }
    241     },
    242 
    243     immediatelyExitPanelMode: function()
    244     {
    245         this.visible = false;
    246         this.fullPanel = false;
    247     },
    248 
    249     immediatelyFinishAnimation: function()
    250     {
    251         if (this._currentAnimation)
    252             this._currentAnimation.forceComplete();
    253     },
    254 
    255     set currentPanelCounters(x)
    256     {
    257         if (!x) {
    258             if (this._currentPanelCounters)
    259                 this._currentPanelCounters.parentElement.removeChild(this._currentPanelCounters);
    260             delete this._currentPanelCounters;
    261             return;
    262         }
    263 
    264         this._currentPanelCounters = x;
    265         if (this.visible)
    266             this._mainStatusBar.appendChild(x);
    267         else
    268             this._counters.insertBefore(x, this._counters.firstChild);
    269     },
    270 
    271     _cancelAnimationIfNeeded: function()
    272     {
    273         if (this._animating) {
    274             if (this._currentAnimation)
    275                 this._currentAnimation.cancel();
    276             delete this._animating;
    277             delete this._currentAnimation;
    278         }
    279     },
    280 
    281     _animateDrawerHeight: function(height, finalState)
    282     {
    283         this._animating = true;
    284         var animations = [
    285             {element: this.element, end: {height: height}},
    286             {element: this._mainElement, end: {bottom: height}}
    287         ];
    288 
    289         function animationFinished()
    290         {
    291             delete this._animating;
    292             delete this._currentAnimation;
    293             this.state = finalState;
    294         }
    295 
    296         this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(), animationFinished.bind(this));
    297     },
    298 
    299     _animationDuration: function()
    300     {
    301         // Immediate if going between Hidden and Full in full panel mode
    302         if (this.fullPanel && (this.state === WebInspector.Drawer.State.Hidden || this.state === WebInspector.Drawer.State.Full))
    303             return 0;
    304 
    305         return (window.event && window.event.shiftKey ? 2000 : 250);
    306     },
    307 
    308     _safelyRemoveChildren: function()
    309     {
    310         var child = this.element.firstChild;
    311         while (child) {
    312             if (child.id !== "drawer-status-bar") {
    313                 var moveTo = child.nextSibling;
    314                 this.element.removeChild(child);
    315                 child = moveTo;
    316             } else
    317                 child = child.nextSibling;
    318         }
    319     },
    320 
    321     _startStatusBarDragging: function(event)
    322     {
    323         if (!this.visible || event.target !== this._mainStatusBar)
    324             return;
    325 
    326         WebInspector.elementDragStart(this._mainStatusBar, this._statusBarDragging.bind(this), this._endStatusBarDragging.bind(this), event, "row-resize");
    327 
    328         this._statusBarDragOffset = event.pageY - this.element.totalOffsetTop;
    329 
    330         event.stopPropagation();
    331     },
    332 
    333     _statusBarDragging: function(event)
    334     {
    335         var height = window.innerHeight - event.pageY + this._statusBarDragOffset;
    336         height = Number.constrain(height, Preferences.minConsoleHeight, window.innerHeight - this._mainElement.totalOffsetTop - Preferences.minConsoleHeight);
    337 
    338         this._mainElement.style.bottom = height + "px";
    339         this.element.style.height = height + "px";
    340 
    341         event.preventDefault();
    342         event.stopPropagation();
    343     },
    344 
    345     _endStatusBarDragging: function(event)
    346     {
    347         WebInspector.elementDragEnd(event);
    348 
    349         this._savedHeight = this.element.offsetHeight;
    350         delete this._statusBarDragOffset;
    351 
    352         event.stopPropagation();
    353     }
    354 }
    355 
    356 WebInspector.Drawer.prototype.__proto__ = WebInspector.View.prototype;
    357 
    358 WebInspector.Drawer.State = {
    359     Hidden: 0,
    360     Variable: 1,
    361     Full: 2
    362 };
    363