src/third_party/WebKit/Source/devtools/front_end/View.js

   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.className = "view";
  35     this.element.__view = this;
  36     this._visible = true;
  37     this._isRoot = false;
  38     this._isShowing = false;
  39     this._children = [];
  40     this._hideOnDetach = false;
  41     this._cssFiles = [];
  42     this._notificationDepth = 0;
  43 }
  44
  45 WebInspector.View._cssFileToVisibleViewCount = {};
  46 WebInspector.View._cssFileToStyleElement = {};
  47 WebInspector.View._cssUnloadTimeout = 2000;
  48
  49 WebInspector.View.prototype = {
  50     markAsRoot: function()
  51     {
  52         WebInspector.View._assert(!this.element.parentElement, "Attempt to mark as root attached node");
  53         this._isRoot = true;
  54     },
  55
  56     makeLayoutBoundary: function()
  57     {
  58         this._isLayoutBoundary = true;
  59     },
  60
  61     /**
  62      * @return {?WebInspector.View}
  63      */
  64     parentView: function()
  65     {
  66         return this._parentView;
  67     },
  68
  69     /**
  70      * @return {boolean}
  71      */
  72     isShowing: function()
  73     {
  74         return this._isShowing;
  75     },
  76
  77     setHideOnDetach: function()
  78     {
  79         this._hideOnDetach = true;
  80     },
  81
  82     /**
  83      * @return {boolean}
  84      */
  85     _inNotification: function()
  86     {
  87         return !!this._notificationDepth || (this._parentView && this._parentView._inNotification());
  88     },
  89
  90     _parentIsShowing: function()
  91     {
  92         if (this._isRoot)
  93             return true;
  94         return this._parentView && this._parentView.isShowing();
  95     },
  96
  97     /**
  98      * @param {function(this:WebInspector.View)} method
  99      */
 100     _callOnVisibleChildren: function(method)
 101     {
 102         var copy = this._children.slice();
 103         for (var i = 0; i < copy.length; ++i) {
 104             if (copy[i]._parentView === this && copy[i]._visible)
 105                 method.call(copy[i]);
 106         }
 107     },
 108
 109     _processWillShow: function()
 110     {
 111         this._loadCSSIfNeeded();
 112         this._callOnVisibleChildren(this._processWillShow);
 113         this._isShowing = true;
 114     },
 115
 116     _processWasShown: function()
 117     {
 118         if (this._inNotification())
 119             return;
 120         this.restoreScrollPositions();
 121         this._notify(this.wasShown);
 122         this._notify(this.onResize);
 123         this._callOnVisibleChildren(this._processWasShown);
 124     },
 125
 126     _processWillHide: function()
 127     {
 128         if (this._inNotification())
 129             return;
 130         this.storeScrollPositions();
 131
 132         this._callOnVisibleChildren(this._processWillHide);
 133         this._notify(this.willHide);
 134         this._isShowing = false;
 135     },
 136
 137     _processWasHidden: function()
 138     {
 139         this._disableCSSIfNeeded();
 140         this._callOnVisibleChildren(this._processWasHidden);
 141     },
 142
 143     _processOnResize: function()
 144     {
 145         if (this._inNotification())
 146             return;
 147         if (!this.isShowing())
 148             return;
 149         this._notify(this.onResize);
 150         this._callOnVisibleChildren(this._processOnResize);
 151     },
 152
 153     _processDiscardCachedSize: function()
 154     {
 155         if (this._isLayoutBoundary) {
 156             this.element.style.removeProperty("width");
 157             this.element.style.removeProperty("height");
 158         }
 159         this._callOnVisibleChildren(this._processDiscardCachedSize);
 160     },
 161
 162     _cacheSize: function()
 163     {
 164         this._prepareCacheSize();
 165         this._applyCacheSize();
 166     },
 167
 168     _prepareCacheSize: function()
 169     {
 170         if (this._isLayoutBoundary) {
 171             this._cachedOffsetWidth = this.element.offsetWidth;
 172             this._cachedOffsetHeight = this.element.offsetHeight;
 173         }
 174         this._callOnVisibleChildren(this._prepareCacheSize);
 175     },
 176
 177     _applyCacheSize: function()
 178     {
 179         if (this._isLayoutBoundary) {
 180             this.element.style.setProperty("width", this._cachedOffsetWidth + "px");
 181             this.element.style.setProperty("height", this._cachedOffsetHeight + "px");
 182             delete this._cachedOffsetWidth;
 183             delete this._cachedOffsetHeight;
 184         }
 185         this._callOnVisibleChildren(this._applyCacheSize);
 186     },
 187
 188     /**
 189      * @param {function(this:WebInspector.View)} notification
 190      */
 191     _notify: function(notification)
 192     {
 193         ++this._notificationDepth;
 194         try {
 195             notification.call(this);
 196         } finally {
 197             --this._notificationDepth;
 198         }
 199     },
 200
 201     wasShown: function()
 202     {
 203     },
 204
 205     willHide: function()
 206     {
 207     },
 208
 209     onResize: function()
 210     {
 211     },
 212
 213     /**
 214      * @param {?Element} parentElement
 215      * @param {!Element=} insertBefore
 216      */
 217     show: function(parentElement, insertBefore)
 218     {
 219         WebInspector.View._assert(parentElement, "Attempt to attach view with no parent element");
 220
 221         // Update view hierarchy
 222         if (this.element.parentElement !== parentElement) {
 223             if (this.element.parentElement)
 224                 this.detach();
 225
 226             var currentParent = parentElement;
 227             while (currentParent && !currentParent.__view)
 228                 currentParent = currentParent.parentElement;
 229
 230             if (currentParent) {
 231                 this._parentView = currentParent.__view;
 232                 this._parentView._children.push(this);
 233                 this._isRoot = false;
 234             } else
 235                 WebInspector.View._assert(this._isRoot, "Attempt to attach view to orphan node");
 236         } else if (this._visible) {
 237             return;
 238         }
 239
 240         this._visible = true;
 241
 242         if (this._parentIsShowing())
 243             this._processWillShow();
 244
 245         this.element.classList.add("visible");
 246
 247         // Reparent
 248         if (this.element.parentElement !== parentElement) {
 249             WebInspector.View._incrementViewCounter(parentElement, this.element);
 250             if (insertBefore)
 251                 WebInspector.View._originalInsertBefore.call(parentElement, this.element, insertBefore);
 252             else
 253                 WebInspector.View._originalAppendChild.call(parentElement, this.element);
 254         }
 255
 256         if (this._parentIsShowing()) {
 257             this._processWasShown();
 258             this._cacheSize();
 259         }
 260     },
 261
 262     /**
 263      * @param {boolean=} overrideHideOnDetach
 264      */
 265     detach: function(overrideHideOnDetach)
 266     {
 267         var parentElement = this.element.parentElement;
 268         if (!parentElement)
 269             return;
 270
 271         if (this._parentIsShowing()) {
 272             this._processDiscardCachedSize();
 273             this._processWillHide();
 274         }
 275
 276         if (this._hideOnDetach && !overrideHideOnDetach) {
 277             this.element.classList.remove("visible");
 278             this._visible = false;
 279             if (this._parentIsShowing())
 280                 this._processWasHidden();
 281             return;
 282         }
 283
 284         // Force legal removal
 285         WebInspector.View._decrementViewCounter(parentElement, this.element);
 286         WebInspector.View._originalRemoveChild.call(parentElement, this.element);
 287
 288         this._visible = false;
 289         if (this._parentIsShowing())
 290             this._processWasHidden();
 291
 292         // Update view hierarchy
 293         if (this._parentView) {
 294             var childIndex = this._parentView._children.indexOf(this);
 295             WebInspector.View._assert(childIndex >= 0, "Attempt to remove non-child view");
 296             this._parentView._children.splice(childIndex, 1);
 297             this._parentView = null;
 298         } else
 299             WebInspector.View._assert(this._isRoot, "Removing non-root view from DOM");
 300     },
 301
 302     detachChildViews: function()
 303     {
 304         var children = this._children.slice();
 305         for (var i = 0; i < children.length; ++i)
 306             children[i].detach();
 307     },
 308
 309     /**
 310      * @return {!Array.<!Element>}
 311      */
 312     elementsToRestoreScrollPositionsFor: function()
 313     {
 314         return [this.element];
 315     },
 316
 317     storeScrollPositions: function()
 318     {
 319         var elements = this.elementsToRestoreScrollPositionsFor();
 320         for (var i = 0; i < elements.length; ++i) {
 321             var container = elements[i];
 322             container._scrollTop = container.scrollTop;
 323             container._scrollLeft = container.scrollLeft;
 324         }
 325     },
 326
 327     restoreScrollPositions: function()
 328     {
 329         var elements = this.elementsToRestoreScrollPositionsFor();
 330         for (var i = 0; i < elements.length; ++i) {
 331             var container = elements[i];
 332             if (container._scrollTop)
 333                 container.scrollTop = container._scrollTop;
 334             if (container._scrollLeft)
 335                 container.scrollLeft = container._scrollLeft;
 336         }
 337     },
 338
 339     /**
 340      * @return {boolean}
 341      */
 342     canHighlightPosition: function()
 343     {
 344         return false;
 345     },
 346
 347     /**
 348      * @param {number} line
 349      * @param {number=} column
 350      */
 351     highlightPosition: function(line, column)
 352     {
 353     },
 354
 355     doResize: function()
 356     {
 357         if (!this.isShowing())
 358             return;
 359         this._processDiscardCachedSize();
 360         // No matter what notification we are in, dispatching onResize is not needed.
 361         if (!this._inNotification())
 362             this._callOnVisibleChildren(this._processOnResize);
 363         this._cacheSize();
 364     },
 365
 366     registerRequiredCSS: function(cssFile)
 367     {
 368         if (window.flattenImports)
 369             cssFile = cssFile.split("/").reverse()[0];
 370         this._cssFiles.push(cssFile);
 371     },
 372
 373     _loadCSSIfNeeded: function()
 374     {
 375         for (var i = 0; i < this._cssFiles.length; ++i) {
 376             var cssFile = this._cssFiles[i];
 377
 378             var viewsWithCSSFile = WebInspector.View._cssFileToVisibleViewCount[cssFile];
 379             WebInspector.View._cssFileToVisibleViewCount[cssFile] = (viewsWithCSSFile || 0) + 1;
 380             if (!viewsWithCSSFile)
 381                 this._doLoadCSS(cssFile);
 382         }
 383     },
 384
 385     _doLoadCSS: function(cssFile)
 386     {
 387         var styleElement = WebInspector.View._cssFileToStyleElement[cssFile];
 388         if (styleElement) {
 389             styleElement.disabled = false;
 390             return;
 391         }
 392
 393         if (window.debugCSS) { /* debugging support */
 394             styleElement = document.createElement("link");
 395             styleElement.rel = "stylesheet";
 396             styleElement.type = "text/css";
 397             styleElement.href = cssFile;
 398         } else {
 399             var xhr = new XMLHttpRequest();
 400             xhr.open("GET", cssFile, false);
 401             xhr.send(null);
 402
 403             styleElement = document.createElement("style");
 404             styleElement.type = "text/css";
 405             styleElement.textContent = xhr.responseText + this._buildSourceURL(cssFile);
 406         }
 407         document.head.insertBefore(styleElement, document.head.firstChild);
 408
 409         WebInspector.View._cssFileToStyleElement[cssFile] = styleElement;
 410     },
 411
 412     _buildSourceURL: function(cssFile)
 413     {
 414         return "\n/*# sourceURL=" + WebInspector.ParsedURL.completeURL(window.location.href, cssFile) + " */";
 415     },
 416
 417     _disableCSSIfNeeded: function()
 418     {
 419         var scheduleUnload = !!WebInspector.View._cssUnloadTimer;
 420
 421         for (var i = 0; i < this._cssFiles.length; ++i) {
 422             var cssFile = this._cssFiles[i];
 423
 424             if (!--WebInspector.View._cssFileToVisibleViewCount[cssFile])
 425                 scheduleUnload = true;
 426         }
 427
 428         function doUnloadCSS()
 429         {
 430             delete WebInspector.View._cssUnloadTimer;
 431
 432             for (cssFile in WebInspector.View._cssFileToVisibleViewCount) {
 433                 if (WebInspector.View._cssFileToVisibleViewCount.hasOwnProperty(cssFile)
 434                     && !WebInspector.View._cssFileToVisibleViewCount[cssFile])
 435                     WebInspector.View._cssFileToStyleElement[cssFile].disabled = true;
 436             }
 437         }
 438
 439         if (scheduleUnload) {
 440             if (WebInspector.View._cssUnloadTimer)
 441                 clearTimeout(WebInspector.View._cssUnloadTimer);
 442
 443             WebInspector.View._cssUnloadTimer = setTimeout(doUnloadCSS, WebInspector.View._cssUnloadTimeout)
 444         }
 445     },
 446
 447     printViewHierarchy: function()
 448     {
 449         var lines = [];
 450         this._collectViewHierarchy("", lines);
 451         console.log(lines.join("\n"));
 452     },
 453
 454     _collectViewHierarchy: function(prefix, lines)
 455     {
 456         lines.push(prefix + "[" + this.element.className + "]" + (this._children.length ? " {" : ""));
 457
 458         for (var i = 0; i < this._children.length; ++i)
 459             this._children[i]._collectViewHierarchy(prefix + "    ", lines);
 460
 461         if (this._children.length)
 462             lines.push(prefix + "}");
 463     },
 464
 465     /**
 466      * @return {!Element}
 467      */
 468     defaultFocusedElement: function()
 469     {
 470         return this._defaultFocusedElement || this.element;
 471     },
 472
 473     /**
 474      * @param {!Element} element
 475      */
 476     setDefaultFocusedElement: function(element)
 477     {
 478         this._defaultFocusedElement = element;
 479     },
 480
 481     focus: function()
 482     {
 483         var element = this.defaultFocusedElement();
 484         if (!element || element.isAncestor(document.activeElement))
 485             return;
 486
 487         WebInspector.setCurrentFocusElement(element);
 488     },
 489
 490     /**
 491      * @return {!Size}
 492      */
 493     measurePreferredSize: function()
 494     {
 495         this._loadCSSIfNeeded();
 496         WebInspector.View._originalAppendChild.call(document.body, this.element);
 497         this.element.positionAt(0, 0);
 498         var result = new Size(this.element.offsetWidth, this.element.offsetHeight);
 499         this.element.positionAt(undefined, undefined);
 500         WebInspector.View._originalRemoveChild.call(document.body, this.element);
 501         this._disableCSSIfNeeded();
 502         return result;
 503     },
 504
 505     __proto__: WebInspector.Object.prototype
 506 }
 507
 508 WebInspector.View._originalAppendChild = Element.prototype.appendChild;
 509 WebInspector.View._originalInsertBefore = Element.prototype.insertBefore;
 510 WebInspector.View._originalRemoveChild = Element.prototype.removeChild;
 511 WebInspector.View._originalRemoveChildren = Element.prototype.removeChildren;
 512
 513 WebInspector.View._incrementViewCounter = function(parentElement, childElement)
 514 {
 515     var count = (childElement.__viewCounter || 0) + (childElement.__view ? 1 : 0);
 516     if (!count)
 517         return;
 518
 519     while (parentElement) {
 520         parentElement.__viewCounter = (parentElement.__viewCounter || 0) + count;
 521         parentElement = parentElement.parentElement;
 522     }
 523 }
 524
 525 WebInspector.View._decrementViewCounter = function(parentElement, childElement)
 526 {
 527     var count = (childElement.__viewCounter || 0) + (childElement.__view ? 1 : 0);
 528     if (!count)
 529         return;
 530
 531     while (parentElement) {
 532         parentElement.__viewCounter -= count;
 533         parentElement = parentElement.parentElement;
 534     }
 535 }
 536
 537 WebInspector.View._assert = function(condition, message)
 538 {
 539     if (!condition) {
 540         console.trace();
 541         throw new Error(message);
 542     }
 543 }
 544
 545 /**
 546  * @constructor
 547  * @extends {WebInspector.View}
 548  * @param {function()} resizeCallback
 549  */
 550 WebInspector.ViewWithResizeCallback = function(resizeCallback)
 551 {
 552     WebInspector.View.call(this);
 553     this._resizeCallback = resizeCallback;
 554 }
 555
 556 WebInspector.ViewWithResizeCallback.prototype = {
 557     onResize: function()
 558     {
 559         this._resizeCallback();
 560     },
 561
 562     __proto__: WebInspector.View.prototype
 563 }
 564
 565 Element.prototype.appendChild = function(child)
 566 {
 567     WebInspector.View._assert(!child.__view || child.parentElement === this, "Attempt to add view via regular DOM operation.");
 568     return WebInspector.View._originalAppendChild.call(this, child);
 569 }
 570
 571 Element.prototype.insertBefore = function(child, anchor)
 572 {
 573     WebInspector.View._assert(!child.__view || child.parentElement === this, "Attempt to add view via regular DOM operation.");
 574     return WebInspector.View._originalInsertBefore.call(this, child, anchor);
 575 }
 576
 577
 578 Element.prototype.removeChild = function(child)
 579 {
 580     WebInspector.View._assert(!child.__viewCounter && !child.__view, "Attempt to remove element containing view via regular DOM operation");
 581     return WebInspector.View._originalRemoveChild.call(this, child);
 582 }
 583
 584 Element.prototype.removeChildren = function()
 585 {
 586     WebInspector.View._assert(!this.__viewCounter, "Attempt to remove element containing view via regular DOM operation");
 587     WebInspector.View._originalRemoveChildren.call(this);
 588 }