Home | History | Annotate | Download | only in front_end
      1 /*
      2  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
      3  * Copyright (C) 2011 Google Inc. All Rights Reserved.
      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  * 1. Redistributions of source code must retain the above copyright
      9  *    notice, this list of conditions and the following disclaimer.
     10  * 2. Redistributions in binary form must reproduce the above copyright
     11  *    notice, this list of conditions and the following disclaimer in the
     12  *    documentation and/or other materials provided with the distribution.
     13  *
     14  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
     15  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
     16  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
     17  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
     18  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
     19  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
     20  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
     21  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
     22  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
     23  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
     24  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     25  */
     26 
     27 /**
     28  * @constructor
     29  * @extends {WebInspector.Object}
     30  */
     31 WebInspector.View = function()
     32 {
     33     this.element = document.createElement("div");
     34     this.element.__view = this;
     35     this._visible = true;
     36     this._isRoot = false;
     37     this._isShowing = false;
     38     this._children = [];
     39     this._hideOnDetach = false;
     40     this._cssFiles = [];
     41     this._notificationDepth = 0;
     42 }
     43 
     44 WebInspector.View._cssFileToVisibleViewCount = {};
     45 WebInspector.View._cssFileToStyleElement = {};
     46 WebInspector.View._cssUnloadTimeout = 2000;
     47 
     48 WebInspector.View.prototype = {
     49     /**
     50      * @return {?Element}
     51      */
     52     statusBarText: function()
     53     {
     54         return null;
     55     },
     56 
     57     markAsRoot: function()
     58     {
     59         WebInspector.View._assert(!this.element.parentElement, "Attempt to mark as root attached node");
     60         this._isRoot = true;
     61     },
     62 
     63     /**
     64      * @return {?WebInspector.View}
     65      */
     66     parentView: function()
     67     {
     68         return this._parentView;
     69     },
     70 
     71     isShowing: function()
     72     {
     73         return this._isShowing;
     74     },
     75 
     76     setHideOnDetach: function()
     77     {
     78         this._hideOnDetach = true;
     79     },
     80 
     81     /**
     82      * @return {boolean}
     83      */
     84     _inNotification: function()
     85     {
     86         return !!this._notificationDepth || (this._parentView && this._parentView._inNotification());
     87     },
     88 
     89     _parentIsShowing: function()
     90     {
     91         if (this._isRoot)
     92             return true;
     93         return this._parentView && this._parentView.isShowing();
     94     },
     95 
     96     /**
     97      * @param {function(this:WebInspector.View)} method
     98      */
     99     _callOnVisibleChildren: function(method)
    100     {
    101         var copy = this._children.slice();
    102         for (var i = 0; i < copy.length; ++i) {
    103             if (copy[i]._parentView === this && copy[i]._visible)
    104                 method.call(copy[i]);
    105         }
    106     },
    107 
    108     _processWillShow: function()
    109     {
    110         this._loadCSSIfNeeded();
    111         this._callOnVisibleChildren(this._processWillShow);
    112         this._isShowing = true;
    113     },
    114 
    115     _processWasShown: function()
    116     {
    117         if (this._inNotification())
    118             return;
    119         this.restoreScrollPositions();
    120         this._notify(this.wasShown);
    121         this._notify(this.onResize);
    122         this._callOnVisibleChildren(this._processWasShown);
    123     },
    124 
    125     _processWillHide: function()
    126     {
    127         if (this._inNotification())
    128             return;
    129         this.storeScrollPositions();
    130 
    131         this._callOnVisibleChildren(this._processWillHide);
    132         this._notify(this.willHide);
    133         this._isShowing = false;
    134     },
    135 
    136     _processWasHidden: function()
    137     {
    138         this._disableCSSIfNeeded();
    139         this._callOnVisibleChildren(this._processWasHidden);
    140     },
    141 
    142     _processOnResize: function()
    143     {
    144         if (this._inNotification())
    145             return;
    146         if (!this.isShowing())
    147             return;
    148         this._notify(this.onResize);
    149         this._callOnVisibleChildren(this._processOnResize);
    150     },
    151 
    152     /**
    153      * @param {function(this:WebInspector.View)} notification
    154      */
    155     _notify: function(notification)
    156     {
    157         ++this._notificationDepth;
    158         try {
    159             notification.call(this);
    160         } finally {
    161             --this._notificationDepth;
    162         }
    163     },
    164 
    165     wasShown: function()
    166     {
    167     },
    168 
    169     willHide: function()
    170     {
    171     },
    172 
    173     onResize: function()
    174     {
    175     },
    176 
    177     /**
    178      * @param {Element} parentElement
    179      * @param {Element=} insertBefore
    180      */
    181     show: function(parentElement, insertBefore)
    182     {
    183         WebInspector.View._assert(parentElement, "Attempt to attach view with no parent element");
    184 
    185         // Update view hierarchy
    186         if (this.element.parentElement !== parentElement) {
    187             if (this.element.parentElement)
    188                 this.detach();
    189 
    190             var currentParent = parentElement;
    191             while (currentParent && !currentParent.__view)
    192                 currentParent = currentParent.parentElement;
    193 
    194             if (currentParent) {
    195                 this._parentView = currentParent.__view;
    196                 this._parentView._children.push(this);
    197                 this._isRoot = false;
    198             } else
    199                 WebInspector.View._assert(this._isRoot, "Attempt to attach view to orphan node");
    200         } else if (this._visible)
    201             return;
    202 
    203         this._visible = true;
    204 
    205         if (this._parentIsShowing())
    206             this._processWillShow();
    207 
    208         this.element.addStyleClass("visible");
    209 
    210         // Reparent
    211         if (this.element.parentElement !== parentElement) {
    212             WebInspector.View._incrementViewCounter(parentElement, this.element);
    213             if (insertBefore)
    214                 WebInspector.View._originalInsertBefore.call(parentElement, this.element, insertBefore);
    215             else
    216                 WebInspector.View._originalAppendChild.call(parentElement, this.element);
    217         }
    218 
    219         if (this._parentIsShowing())
    220             this._processWasShown();
    221     },
    222 
    223     /**
    224      * @param {boolean=} overrideHideOnDetach
    225      */
    226     detach: function(overrideHideOnDetach)
    227     {
    228         var parentElement = this.element.parentElement;
    229         if (!parentElement)
    230             return;
    231 
    232         if (this._parentIsShowing())
    233             this._processWillHide();
    234 
    235         if (this._hideOnDetach && !overrideHideOnDetach) {
    236             this.element.removeStyleClass("visible");
    237             this._visible = false;
    238             if (this._parentIsShowing())
    239                 this._processWasHidden();
    240             return;
    241         }
    242 
    243         // Force legal removal
    244         WebInspector.View._decrementViewCounter(parentElement, this.element);
    245         WebInspector.View._originalRemoveChild.call(parentElement, this.element);
    246 
    247         this._visible = false;
    248         if (this._parentIsShowing())
    249             this._processWasHidden();
    250 
    251         // Update view hierarchy
    252         if (this._parentView) {
    253             var childIndex = this._parentView._children.indexOf(this);
    254             WebInspector.View._assert(childIndex >= 0, "Attempt to remove non-child view");
    255             this._parentView._children.splice(childIndex, 1);
    256             this._parentView = null;
    257         } else
    258             WebInspector.View._assert(this._isRoot, "Removing non-root view from DOM");
    259     },
    260 
    261     detachChildViews: function()
    262     {
    263         var children = this._children.slice();
    264         for (var i = 0; i < children.length; ++i)
    265             children[i].detach();
    266     },
    267 
    268     elementsToRestoreScrollPositionsFor: function()
    269     {
    270         return [this.element];
    271     },
    272 
    273     storeScrollPositions: function()
    274     {
    275         var elements = this.elementsToRestoreScrollPositionsFor();
    276         for (var i = 0; i < elements.length; ++i) {
    277             var container = elements[i];
    278             container._scrollTop = container.scrollTop;
    279             container._scrollLeft = container.scrollLeft;
    280         }
    281     },
    282 
    283     restoreScrollPositions: function()
    284     {
    285         var elements = this.elementsToRestoreScrollPositionsFor();
    286         for (var i = 0; i < elements.length; ++i) {
    287             var container = elements[i];
    288             if (container._scrollTop)
    289                 container.scrollTop = container._scrollTop;
    290             if (container._scrollLeft)
    291                 container.scrollLeft = container._scrollLeft;
    292         }
    293     },
    294 
    295     canHighlightPosition: function()
    296     {
    297         return false;
    298     },
    299 
    300     /**
    301      * @param {number} line
    302      * @param {number=} column
    303      */
    304     highlightPosition: function(line, column)
    305     {
    306     },
    307 
    308     doResize: function()
    309     {
    310         this._processOnResize();
    311     },
    312 
    313     registerRequiredCSS: function(cssFile)
    314     {
    315         if (window.flattenImports)
    316             cssFile = cssFile.split("/").reverse()[0];
    317         this._cssFiles.push(cssFile);
    318     },
    319 
    320     _loadCSSIfNeeded: function()
    321     {
    322         for (var i = 0; i < this._cssFiles.length; ++i) {
    323             var cssFile = this._cssFiles[i];
    324 
    325             var viewsWithCSSFile = WebInspector.View._cssFileToVisibleViewCount[cssFile];
    326             WebInspector.View._cssFileToVisibleViewCount[cssFile] = (viewsWithCSSFile || 0) + 1;
    327             if (!viewsWithCSSFile)
    328                 this._doLoadCSS(cssFile);
    329         }
    330     },
    331 
    332     _doLoadCSS: function(cssFile)
    333     {
    334         var styleElement = WebInspector.View._cssFileToStyleElement[cssFile];
    335         if (styleElement) {
    336             styleElement.disabled = false;
    337             return;
    338         }
    339 
    340         if (window.debugCSS) { /* debugging support */
    341             styleElement = document.createElement("link");
    342             styleElement.rel = "stylesheet";
    343             styleElement.type = "text/css";
    344             styleElement.href = cssFile;
    345         } else {
    346             var xhr = new XMLHttpRequest();
    347             xhr.open("GET", cssFile, false);
    348             xhr.send(null);
    349 
    350             styleElement = document.createElement("style");
    351             styleElement.type = "text/css";
    352             styleElement.textContent = xhr.responseText + this._buildSourceURL(cssFile);
    353         }
    354         document.head.insertBefore(styleElement, document.head.firstChild);
    355 
    356         WebInspector.View._cssFileToStyleElement[cssFile] = styleElement;
    357     },
    358 
    359     _buildSourceURL: function(cssFile)
    360     {
    361         return "\n/*# sourceURL=" + WebInspector.ParsedURL.completeURL(window.location.href, cssFile) + " */";
    362     },
    363 
    364     _disableCSSIfNeeded: function()
    365     {
    366         var scheduleUnload = !!WebInspector.View._cssUnloadTimer;
    367 
    368         for (var i = 0; i < this._cssFiles.length; ++i) {
    369             var cssFile = this._cssFiles[i];
    370 
    371             if (!--WebInspector.View._cssFileToVisibleViewCount[cssFile])
    372                 scheduleUnload = true;
    373         }
    374 
    375         function doUnloadCSS()
    376         {
    377             delete WebInspector.View._cssUnloadTimer;
    378 
    379             for (cssFile in WebInspector.View._cssFileToVisibleViewCount) {
    380                 if (WebInspector.View._cssFileToVisibleViewCount.hasOwnProperty(cssFile)
    381                     && !WebInspector.View._cssFileToVisibleViewCount[cssFile])
    382                     WebInspector.View._cssFileToStyleElement[cssFile].disabled = true;
    383             }
    384         }
    385 
    386         if (scheduleUnload) {
    387             if (WebInspector.View._cssUnloadTimer)
    388                 clearTimeout(WebInspector.View._cssUnloadTimer);
    389 
    390             WebInspector.View._cssUnloadTimer = setTimeout(doUnloadCSS, WebInspector.View._cssUnloadTimeout)
    391         }
    392     },
    393 
    394     printViewHierarchy: function()
    395     {
    396         var lines = [];
    397         this._collectViewHierarchy("", lines);
    398         console.log(lines.join("\n"));
    399     },
    400 
    401     _collectViewHierarchy: function(prefix, lines)
    402     {
    403         lines.push(prefix + "[" + this.element.className + "]" + (this._children.length ? " {" : ""));
    404 
    405         for (var i = 0; i < this._children.length; ++i)
    406             this._children[i]._collectViewHierarchy(prefix + "    ", lines);
    407 
    408         if (this._children.length)
    409             lines.push(prefix + "}");
    410     },
    411 
    412     /**
    413      * @return {Element}
    414      */
    415     defaultFocusedElement: function()
    416     {
    417         return this._defaultFocusedElement || this.element;
    418     },
    419 
    420     /**
    421      * @param {Element} element
    422      */
    423     setDefaultFocusedElement: function(element)
    424     {
    425         this._defaultFocusedElement = element;
    426     },
    427 
    428     focus: function()
    429     {
    430         var element = this.defaultFocusedElement();
    431         if (!element || element.isAncestor(document.activeElement))
    432             return;
    433 
    434         WebInspector.setCurrentFocusElement(element);
    435     },
    436 
    437     /**
    438      * @return {Size}
    439      */
    440     measurePreferredSize: function()
    441     {
    442         this._loadCSSIfNeeded();
    443         WebInspector.View._originalAppendChild.call(document.body, this.element);
    444         this.element.positionAt(0, 0);
    445         var result = new Size(this.element.offsetWidth, this.element.offsetHeight);
    446         this.element.positionAt(undefined, undefined);
    447         WebInspector.View._originalRemoveChild.call(document.body, this.element);
    448         this._disableCSSIfNeeded();
    449         return result;
    450     },
    451 
    452     __proto__: WebInspector.Object.prototype
    453 }
    454 
    455 WebInspector.View._originalAppendChild = Element.prototype.appendChild;
    456 WebInspector.View._originalInsertBefore = Element.prototype.insertBefore;
    457 WebInspector.View._originalRemoveChild = Element.prototype.removeChild;
    458 WebInspector.View._originalRemoveChildren = Element.prototype.removeChildren;
    459 
    460 WebInspector.View._incrementViewCounter = function(parentElement, childElement)
    461 {
    462     var count = (childElement.__viewCounter || 0) + (childElement.__view ? 1 : 0);
    463     if (!count)
    464         return;
    465 
    466     while (parentElement) {
    467         parentElement.__viewCounter = (parentElement.__viewCounter || 0) + count;
    468         parentElement = parentElement.parentElement;
    469     }
    470 }
    471 
    472 WebInspector.View._decrementViewCounter = function(parentElement, childElement)
    473 {
    474     var count = (childElement.__viewCounter || 0) + (childElement.__view ? 1 : 0);
    475     if (!count)
    476         return;
    477 
    478     while (parentElement) {
    479         parentElement.__viewCounter -= count;
    480         parentElement = parentElement.parentElement;
    481     }
    482 }
    483 
    484 WebInspector.View._assert = function(condition, message)
    485 {
    486     if (!condition) {
    487         console.trace();
    488         throw new Error(message);
    489     }
    490 }
    491 
    492 Element.prototype.appendChild = function(child)
    493 {
    494     WebInspector.View._assert(!child.__view, "Attempt to add view via regular DOM operation.");
    495     return WebInspector.View._originalAppendChild.call(this, child);
    496 }
    497 
    498 Element.prototype.insertBefore = function(child, anchor)
    499 {
    500     WebInspector.View._assert(!child.__view, "Attempt to add view via regular DOM operation.");
    501     return WebInspector.View._originalInsertBefore.call(this, child, anchor);
    502 }
    503 
    504 
    505 Element.prototype.removeChild = function(child)
    506 {
    507     WebInspector.View._assert(!child.__viewCounter && !child.__view, "Attempt to remove element containing view via regular DOM operation");
    508     return WebInspector.View._originalRemoveChild.call(this, child);
    509 }
    510 
    511 Element.prototype.removeChildren = function()
    512 {
    513     WebInspector.View._assert(!this.__viewCounter, "Attempt to remove element containing view via regular DOM operation");
    514     WebInspector.View._originalRemoveChildren.call(this);
    515 }
    516