third_party/WebKit/Source/devtools/front_end/ui_lazy/OverviewGrid.js

   1 /*
   2  * Copyright (C) 2013 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @param {string} prefix
  34  */
  35 WebInspector.OverviewGrid = function(prefix)
  36 {
  37     this.element = createElement("div");
  38     this.element.id = prefix + "-overview-container";
  39
  40     this._grid = new WebInspector.TimelineGrid();
  41     this._grid.element.id = prefix + "-overview-grid";
  42     this._grid.setScrollTop(0);
  43
  44     this.element.appendChild(this._grid.element);
  45
  46     this._window = new WebInspector.OverviewGrid.Window(this.element, this._grid.dividersLabelBarElement);
  47 }
  48
  49 WebInspector.OverviewGrid.prototype = {
  50     /**
  51      * @return {number}
  52      */
  53     clientWidth: function()
  54     {
  55         return this.element.clientWidth;
  56     },
  57
  58     /**
  59      * @param {!WebInspector.TimelineGrid.Calculator} calculator
  60      */
  61     updateDividers: function(calculator)
  62     {
  63         this._grid.updateDividers(calculator);
  64     },
  65
  66     /**
  67      * @param {!Array.<!Element>} dividers
  68      */
  69     addEventDividers: function(dividers)
  70     {
  71         this._grid.addEventDividers(dividers);
  72     },
  73
  74     removeEventDividers: function()
  75     {
  76         this._grid.removeEventDividers();
  77     },
  78
  79     reset: function()
  80     {
  81         this._window.reset();
  82     },
  83
  84     /**
  85      * @return {number}
  86      */
  87     windowLeft: function()
  88     {
  89         return this._window.windowLeft;
  90     },
  91
  92     /**
  93      * @return {number}
  94      */
  95     windowRight: function()
  96     {
  97         return this._window.windowRight;
  98     },
  99
 100     /**
 101      * @param {number} left
 102      * @param {number} right
 103      */
 104     setWindow: function(left, right)
 105     {
 106         this._window._setWindow(left, right);
 107     },
 108
 109     /**
 110      * @param {string} eventType
 111      * @param {function(!WebInspector.Event)} listener
 112      * @param {!Object=} thisObject
 113      */
 114     addEventListener: function(eventType, listener, thisObject)
 115     {
 116         this._window.addEventListener(eventType, listener, thisObject);
 117     },
 118
 119     /**
 120      * @param {number} zoomFactor
 121      * @param {number} referencePoint
 122      */
 123     zoom: function(zoomFactor, referencePoint)
 124     {
 125         this._window._zoom(zoomFactor, referencePoint);
 126     },
 127
 128     /**
 129      * @param {boolean} enabled
 130      */
 131     setResizeEnabled: function(enabled)
 132     {
 133         this._window.setEnabled(enabled);
 134     }
 135 }
 136
 137
 138 WebInspector.OverviewGrid.MinSelectableSize = 14;
 139
 140 WebInspector.OverviewGrid.WindowScrollSpeedFactor = .3;
 141
 142 WebInspector.OverviewGrid.ResizerOffset = 3.5; // half pixel because offset values are not rounded but ceiled
 143
 144 /**
 145  * @constructor
 146  * @extends {WebInspector.Object}
 147  * @param {!Element} parentElement
 148  * @param {!Element=} dividersLabelBarElement
 149  */
 150 WebInspector.OverviewGrid.Window = function(parentElement, dividersLabelBarElement)
 151 {
 152     this._parentElement = parentElement;
 153
 154     WebInspector.installDragHandle(this._parentElement, this._startWindowSelectorDragging.bind(this), this._windowSelectorDragging.bind(this), this._endWindowSelectorDragging.bind(this), "text", null);
 155     if (dividersLabelBarElement)
 156         WebInspector.installDragHandle(dividersLabelBarElement, this._startWindowDragging.bind(this), this._windowDragging.bind(this), null, "-webkit-grabbing", "-webkit-grab");
 157
 158     this.windowLeft = 0.0;
 159     this.windowRight = 1.0;
 160
 161     this._parentElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), true);
 162     this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
 163
 164     this._overviewWindowElement = parentElement.createChild("div", "overview-grid-window");
 165     this._overviewWindowElement.appendChild(WebInspector.Widget.createStyleElement("ui_lazy/overviewGrid.css"));
 166     this._overviewWindowBordersElement = parentElement.createChild("div", "overview-grid-window-rulers");
 167     parentElement.createChild("div", "overview-grid-dividers-background");
 168
 169     this._leftResizeElement = parentElement.createChild("div", "overview-grid-window-resizer");
 170     this._leftResizeElement.style.left = 0;
 171     WebInspector.installDragHandle(this._leftResizeElement, this._resizerElementStartDragging.bind(this), this._leftResizeElementDragging.bind(this), null, "ew-resize");
 172
 173     this._rightResizeElement = parentElement.createChild("div", "overview-grid-window-resizer overview-grid-window-resizer-right");
 174     this._rightResizeElement.style.right = 0;
 175     WebInspector.installDragHandle(this._rightResizeElement, this._resizerElementStartDragging.bind(this), this._rightResizeElementDragging.bind(this), null, "ew-resize");
 176     this.setEnabled(true);
 177 }
 178
 179 WebInspector.OverviewGrid.Events = {
 180     WindowChanged: "WindowChanged",
 181     Click: "Click"
 182 }
 183
 184 WebInspector.OverviewGrid.Window.prototype = {
 185     reset: function()
 186     {
 187         this.windowLeft = 0.0;
 188         this.windowRight = 1.0;
 189
 190         this._overviewWindowElement.style.left = "0%";
 191         this._overviewWindowElement.style.width = "100%";
 192         this._overviewWindowBordersElement.style.left = "0%";
 193         this._overviewWindowBordersElement.style.right = "0%";
 194         this._leftResizeElement.style.left = "0%";
 195         this._rightResizeElement.style.left = "100%";
 196         this.setEnabled(true);
 197     },
 198
 199     /**
 200      * @param {boolean} enabled
 201      */
 202     setEnabled: function(enabled)
 203     {
 204         this._enabled = enabled;
 205     },
 206
 207     /**
 208      * @param {!Event} event
 209      */
 210     _resizerElementStartDragging: function(event)
 211     {
 212         if (!this._enabled)
 213             return false;
 214         this._resizerParentOffsetLeft = event.pageX - event.offsetX - event.target.offsetLeft;
 215         event.preventDefault();
 216         return true;
 217     },
 218
 219     /**
 220      * @param {!Event} event
 221      */
 222     _leftResizeElementDragging: function(event)
 223     {
 224         this._resizeWindowLeft(event.pageX - this._resizerParentOffsetLeft);
 225         event.preventDefault();
 226     },
 227
 228     /**
 229      * @param {!Event} event
 230      */
 231     _rightResizeElementDragging: function(event)
 232     {
 233         this._resizeWindowRight(event.pageX - this._resizerParentOffsetLeft);
 234         event.preventDefault();
 235     },
 236
 237     /**
 238      * @param {!Event} event
 239      * @return {boolean}
 240      */
 241     _startWindowSelectorDragging: function(event)
 242     {
 243         if (!this._enabled)
 244             return false;
 245         this._offsetLeft = this._parentElement.totalOffsetLeft();
 246         var position = event.x - this._offsetLeft;
 247         this._overviewWindowSelector = new WebInspector.OverviewGrid.WindowSelector(this._parentElement, position);
 248         return true;
 249     },
 250
 251     /**
 252      * @param {!Event} event
 253      */
 254     _windowSelectorDragging: function(event)
 255     {
 256         this._overviewWindowSelector._updatePosition(event.x - this._offsetLeft);
 257         event.preventDefault();
 258     },
 259
 260     /**
 261      * @param {!Event} event
 262      */
 263     _endWindowSelectorDragging: function(event)
 264     {
 265         var window = this._overviewWindowSelector._close(event.x - this._offsetLeft);
 266         delete this._overviewWindowSelector;
 267         var clickThreshold = 3;
 268         if (window.end - window.start < clickThreshold) {
 269             if (this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.Click, event))
 270                 return;
 271             var middle = window.end;
 272             window.start = Math.max(0, middle - WebInspector.OverviewGrid.MinSelectableSize / 2);
 273             window.end = Math.min(this._parentElement.clientWidth, middle + WebInspector.OverviewGrid.MinSelectableSize / 2);
 274         } else if (window.end - window.start < WebInspector.OverviewGrid.MinSelectableSize) {
 275             if (this._parentElement.clientWidth - window.end > WebInspector.OverviewGrid.MinSelectableSize)
 276                 window.end = window.start + WebInspector.OverviewGrid.MinSelectableSize;
 277             else
 278                 window.start = window.end - WebInspector.OverviewGrid.MinSelectableSize;
 279         }
 280         this._setWindowPosition(window.start, window.end);
 281     },
 282
 283     /**
 284      * @param {!Event} event
 285      * @return {boolean}
 286      */
 287     _startWindowDragging: function(event)
 288     {
 289         this._dragStartPoint = event.pageX;
 290         this._dragStartLeft = this.windowLeft;
 291         this._dragStartRight = this.windowRight;
 292         return true;
 293     },
 294
 295     /**
 296      * @param {!Event} event
 297      */
 298     _windowDragging: function(event)
 299     {
 300         event.preventDefault();
 301         var delta = (event.pageX - this._dragStartPoint) / this._parentElement.clientWidth;
 302         if (this._dragStartLeft + delta < 0)
 303             delta = -this._dragStartLeft;
 304
 305         if (this._dragStartRight + delta > 1)
 306             delta = 1 - this._dragStartRight;
 307
 308         this._setWindow(this._dragStartLeft + delta, this._dragStartRight + delta);
 309     },
 310
 311     /**
 312      * @param {number} start
 313      */
 314     _resizeWindowLeft: function(start)
 315     {
 316         // Glue to edge.
 317         if (start < 10)
 318             start = 0;
 319         else if (start > this._rightResizeElement.offsetLeft -  4)
 320             start = this._rightResizeElement.offsetLeft - 4;
 321         this._setWindowPosition(start, null);
 322     },
 323
 324     /**
 325      * @param {number} end
 326      */
 327     _resizeWindowRight: function(end)
 328     {
 329         // Glue to edge.
 330         if (end > this._parentElement.clientWidth - 10)
 331             end = this._parentElement.clientWidth;
 332         else if (end < this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.MinSelectableSize)
 333             end = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.MinSelectableSize;
 334         this._setWindowPosition(null, end);
 335     },
 336
 337     _resizeWindowMaximum: function()
 338     {
 339         this._setWindowPosition(0, this._parentElement.clientWidth);
 340     },
 341
 342     /**
 343      * @param {number} windowLeft
 344      * @param {number} windowRight
 345      */
 346     _setWindow: function(windowLeft, windowRight)
 347     {
 348         var left = windowLeft;
 349         var right = windowRight;
 350         var width = windowRight - windowLeft;
 351
 352         // We allow actual time window to be arbitrarily small but don't want the UI window to be too small.
 353         var widthInPixels = width * this._parentElement.clientWidth;
 354         var minWidthInPixels = WebInspector.OverviewGrid.MinSelectableSize / 2;
 355         if (widthInPixels < minWidthInPixels) {
 356             var factor = minWidthInPixels / widthInPixels;
 357             left = ((windowRight + windowLeft) - width * factor) / 2;
 358             right = ((windowRight + windowLeft) + width * factor) / 2;
 359         }
 360
 361         this.windowLeft = windowLeft;
 362         this._leftResizeElement.style.left = left * 100 + "%";
 363         this.windowRight = windowRight;
 364         this._rightResizeElement.style.left = right * 100 + "%";
 365
 366         this._overviewWindowElement.style.left = left * 100 + "%";
 367         this._overviewWindowBordersElement.style.left = left * 100 + "%";
 368         this._overviewWindowElement.style.width = (right - left) * 100 + "%";
 369         this._overviewWindowBordersElement.style.right = (1 - right) * 100 + "%";
 370
 371         this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged);
 372     },
 373
 374     /**
 375      * @param {?number} start
 376      * @param {?number} end
 377      */
 378     _setWindowPosition: function(start, end)
 379     {
 380         var clientWidth = this._parentElement.clientWidth;
 381         var windowLeft = typeof start === "number" ? start / clientWidth : this.windowLeft;
 382         var windowRight = typeof end === "number" ? end / clientWidth : this.windowRight;
 383         this._setWindow(windowLeft, windowRight);
 384     },
 385
 386     /**
 387      * @param {!Event} event
 388      */
 389     _onMouseWheel: function(event)
 390     {
 391         if (!this._enabled)
 392             return;
 393         if (typeof event.wheelDeltaY === "number" && event.wheelDeltaY) {
 394             const zoomFactor = 1.1;
 395             const mouseWheelZoomSpeed = 1 / 120;
 396
 397             var reference = event.offsetX / event.target.clientWidth;
 398             this._zoom(Math.pow(zoomFactor, -event.wheelDeltaY * mouseWheelZoomSpeed), reference);
 399         }
 400         if (typeof event.wheelDeltaX === "number" && event.wheelDeltaX) {
 401             var offset = Math.round(event.wheelDeltaX * WebInspector.OverviewGrid.WindowScrollSpeedFactor);
 402             var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
 403             var windowRight = this._rightResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
 404
 405             if (windowLeft - offset < 0)
 406                 offset = windowLeft;
 407
 408             if (windowRight - offset > this._parentElement.clientWidth)
 409                 offset = windowRight - this._parentElement.clientWidth;
 410
 411             this._setWindowPosition(windowLeft - offset, windowRight - offset);
 412
 413             event.preventDefault();
 414         }
 415     },
 416
 417     /**
 418      * @param {number} factor
 419      * @param {number} reference
 420      */
 421     _zoom: function(factor, reference)
 422     {
 423         var left = this.windowLeft;
 424         var right = this.windowRight;
 425         var windowSize = right - left;
 426         var newWindowSize = factor * windowSize;
 427         if (newWindowSize > 1) {
 428             newWindowSize = 1;
 429             factor = newWindowSize / windowSize;
 430         }
 431         left = reference + (left - reference) * factor;
 432         left = Number.constrain(left, 0, 1 - newWindowSize);
 433
 434         right = reference + (right - reference) * factor;
 435         right = Number.constrain(right, newWindowSize, 1);
 436         this._setWindow(left, right);
 437     },
 438
 439     __proto__: WebInspector.Object.prototype
 440 }
 441
 442 /**
 443  * @constructor
 444  */
 445 WebInspector.OverviewGrid.WindowSelector = function(parent, position)
 446 {
 447     this._startPosition = position;
 448     this._width = parent.offsetWidth;
 449     this._windowSelector = createElement("div");
 450     this._windowSelector.className = "overview-grid-window-selector";
 451     this._windowSelector.style.left = this._startPosition + "px";
 452     this._windowSelector.style.right = this._width - this._startPosition + "px";
 453     parent.appendChild(this._windowSelector);
 454 }
 455
 456 WebInspector.OverviewGrid.WindowSelector.prototype = {
 457     _close: function(position)
 458     {
 459         position = Math.max(0, Math.min(position, this._width));
 460         this._windowSelector.remove();
 461         return this._startPosition < position ? {start: this._startPosition, end: position} : {start: position, end: this._startPosition};
 462     },
 463
 464     _updatePosition: function(position)
 465     {
 466         position = Math.max(0, Math.min(position, this._width));
 467         if (position < this._startPosition) {
 468             this._windowSelector.style.left = position + "px";
 469             this._windowSelector.style.right = this._width - this._startPosition + "px";
 470         } else {
 471             this._windowSelector.style.left = this._startPosition + "px";
 472             this._windowSelector.style.right = this._width - position + "px";
 473         }
 474     }
 475 }