| OLD | NEW |
|---|
| (Empty) |
| 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.setScrollAndDividerTop(0, 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 /** | |
| 80 * @param {?number} start | |
| 81 * @param {?number} end | |
| 82 */ | |
| 83 setWindowPosition: function(start, end) | |
| 84 { | |
| 85 this._window._setWindowPosition(start, end); | |
| 86 }, | |
| 87 | |
| 88 reset: function() | |
| 89 { | |
| 90 this._window.reset(); | |
| 91 }, | |
| 92 | |
| 93 /** | |
| 94 * @return {number} | |
| 95 */ | |
| 96 windowLeft: function() | |
| 97 { | |
| 98 return this._window.windowLeft; | |
| 99 }, | |
| 100 | |
| 101 /** | |
| 102 * @return {number} | |
| 103 */ | |
| 104 windowRight: function() | |
| 105 { | |
| 106 return this._window.windowRight; | |
| 107 }, | |
| 108 | |
| 109 /** | |
| 110 * @param {number} left | |
| 111 * @param {number} right | |
| 112 */ | |
| 113 setWindow: function(left, right) | |
| 114 { | |
| 115 this._window._setWindow(left, right); | |
| 116 }, | |
| 117 | |
| 118 /** | |
| 119 * @param {string} eventType | |
| 120 * @param {function(!WebInspector.Event)} listener | |
| 121 * @param {!Object=} thisObject | |
| 122 */ | |
| 123 addEventListener: function(eventType, listener, thisObject) | |
| 124 { | |
| 125 this._window.addEventListener(eventType, listener, thisObject); | |
| 126 }, | |
| 127 | |
| 128 /** | |
| 129 * @param {!number} zoomFactor | |
| 130 * @param {!number} referencePoint | |
| 131 */ | |
| 132 zoom: function(zoomFactor, referencePoint) | |
| 133 { | |
| 134 this._window._zoom(zoomFactor, referencePoint); | |
| 135 }, | |
| 136 | |
| 137 /** | |
| 138 * @param {boolean} enabled | |
| 139 */ | |
| 140 setResizeEnabled: function(enabled) | |
| 141 { | |
| 142 this._window._setEnabled(!!enabled); | |
| 143 } | |
| 144 } | |
| 145 | |
| 146 | |
| 147 WebInspector.OverviewGrid.MinSelectableSize = 14; | |
| 148 | |
| 149 WebInspector.OverviewGrid.WindowScrollSpeedFactor = .3; | |
| 150 | |
| 151 WebInspector.OverviewGrid.ResizerOffset = 3.5; // half pixel because offset valu
es are not rounded but ceiled | |
| 152 | |
| 153 /** | |
| 154 * @constructor | |
| 155 * @extends {WebInspector.Object} | |
| 156 * @param {!Element} parentElement | |
| 157 * @param {!Element=} dividersLabelBarElement | |
| 158 */ | |
| 159 WebInspector.OverviewGrid.Window = function(parentElement, dividersLabelBarEleme
nt) | |
| 160 { | |
| 161 this._parentElement = parentElement; | |
| 162 | |
| 163 WebInspector.installDragHandle(this._parentElement, this._startWindowSelecto
rDragging.bind(this), this._windowSelectorDragging.bind(this), this._endWindowSe
lectorDragging.bind(this), "ew-resize", null); | |
| 164 if (dividersLabelBarElement) | |
| 165 WebInspector.installDragHandle(dividersLabelBarElement, this._startWindo
wDragging.bind(this), this._windowDragging.bind(this), null, "move"); | |
| 166 | |
| 167 this.windowLeft = 0.0; | |
| 168 this.windowRight = 1.0; | |
| 169 | |
| 170 this._parentElement.addEventListener("mousewheel", this._onMouseWheel.bind(t
his), true); | |
| 171 this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.b
ind(this), true); | |
| 172 | |
| 173 this._overviewWindowElement = parentElement.createChild("div", "overview-gri
d-window"); | |
| 174 this._overviewWindowElement.appendChild(WebInspector.View.createStyleElement
("components/overviewGrid.css")); | |
| 175 this._overviewWindowBordersElement = parentElement.createChild("div", "overv
iew-grid-window-rulers"); | |
| 176 parentElement.createChild("div", "overview-grid-dividers-background"); | |
| 177 | |
| 178 this._leftResizeElement = parentElement.createChild("div", "overview-grid-wi
ndow-resizer"); | |
| 179 this._leftResizeElement.style.left = 0; | |
| 180 WebInspector.installDragHandle(this._leftResizeElement, this._resizerElement
StartDragging.bind(this), this._leftResizeElementDragging.bind(this), null, "ew-
resize"); | |
| 181 | |
| 182 this._rightResizeElement = parentElement.createChild("div", "overview-grid-w
indow-resizer overview-grid-window-resizer-right"); | |
| 183 this._rightResizeElement.style.right = 0; | |
| 184 WebInspector.installDragHandle(this._rightResizeElement, this._resizerElemen
tStartDragging.bind(this), this._rightResizeElementDragging.bind(this), null, "e
w-resize"); | |
| 185 this._setEnabled(true); | |
| 186 } | |
| 187 | |
| 188 WebInspector.OverviewGrid.Events = { | |
| 189 WindowChanged: "WindowChanged" | |
| 190 } | |
| 191 | |
| 192 WebInspector.OverviewGrid.Window.prototype = { | |
| 193 reset: function() | |
| 194 { | |
| 195 this.windowLeft = 0.0; | |
| 196 this.windowRight = 1.0; | |
| 197 | |
| 198 this._overviewWindowElement.style.left = "0%"; | |
| 199 this._overviewWindowElement.style.width = "100%"; | |
| 200 this._overviewWindowBordersElement.style.left = "0%"; | |
| 201 this._overviewWindowBordersElement.style.right = "0%"; | |
| 202 this._leftResizeElement.style.left = "0%"; | |
| 203 this._rightResizeElement.style.left = "100%"; | |
| 204 this._setEnabled(true); | |
| 205 }, | |
| 206 | |
| 207 /** | |
| 208 * @param {boolean} enabled | |
| 209 */ | |
| 210 _setEnabled: function(enabled) | |
| 211 { | |
| 212 enabled = !!enabled; | |
| 213 if (this._enabled === enabled) | |
| 214 return; | |
| 215 this._enabled = enabled; | |
| 216 }, | |
| 217 | |
| 218 /** | |
| 219 * @param {!Event} event | |
| 220 */ | |
| 221 _resizerElementStartDragging: function(event) | |
| 222 { | |
| 223 if (!this._enabled) | |
| 224 return false; | |
| 225 this._resizerParentOffsetLeft = event.pageX - event.offsetX - event.targ
et.offsetLeft; | |
| 226 event.preventDefault(); | |
| 227 return true; | |
| 228 }, | |
| 229 | |
| 230 /** | |
| 231 * @param {!Event} event | |
| 232 */ | |
| 233 _leftResizeElementDragging: function(event) | |
| 234 { | |
| 235 this._resizeWindowLeft(event.pageX - this._resizerParentOffsetLeft); | |
| 236 event.preventDefault(); | |
| 237 }, | |
| 238 | |
| 239 /** | |
| 240 * @param {!Event} event | |
| 241 */ | |
| 242 _rightResizeElementDragging: function(event) | |
| 243 { | |
| 244 this._resizeWindowRight(event.pageX - this._resizerParentOffsetLeft); | |
| 245 event.preventDefault(); | |
| 246 }, | |
| 247 | |
| 248 /** | |
| 249 * @param {!Event} event | |
| 250 * @return {boolean} | |
| 251 */ | |
| 252 _startWindowSelectorDragging: function(event) | |
| 253 { | |
| 254 if (!this._enabled) | |
| 255 return false; | |
| 256 this._offsetLeft = this._parentElement.totalOffsetLeft(); | |
| 257 var position = event.x - this._offsetLeft; | |
| 258 this._overviewWindowSelector = new WebInspector.OverviewGrid.WindowSelec
tor(this._parentElement, position); | |
| 259 return true; | |
| 260 }, | |
| 261 | |
| 262 /** | |
| 263 * @param {!Event} event | |
| 264 */ | |
| 265 _windowSelectorDragging: function(event) | |
| 266 { | |
| 267 this._overviewWindowSelector._updatePosition(event.x - this._offsetLeft)
; | |
| 268 event.preventDefault(); | |
| 269 }, | |
| 270 | |
| 271 /** | |
| 272 * @param {!Event} event | |
| 273 */ | |
| 274 _endWindowSelectorDragging: function(event) | |
| 275 { | |
| 276 var window = this._overviewWindowSelector._close(event.x - this._offsetL
eft); | |
| 277 delete this._overviewWindowSelector; | |
| 278 if (window.end === window.start) { // Click, not drag. | |
| 279 var middle = window.end; | |
| 280 window.start = Math.max(0, middle - WebInspector.OverviewGrid.MinSel
ectableSize / 2); | |
| 281 window.end = Math.min(this._parentElement.clientWidth, middle + WebI
nspector.OverviewGrid.MinSelectableSize / 2); | |
| 282 } else if (window.end - window.start < WebInspector.OverviewGrid.MinSele
ctableSize) { | |
| 283 if (this._parentElement.clientWidth - window.end > WebInspector.Over
viewGrid.MinSelectableSize) | |
| 284 window.end = window.start + WebInspector.OverviewGrid.MinSelecta
bleSize; | |
| 285 else | |
| 286 window.start = window.end - WebInspector.OverviewGrid.MinSelecta
bleSize; | |
| 287 } | |
| 288 this._setWindowPosition(window.start, window.end); | |
| 289 }, | |
| 290 | |
| 291 /** | |
| 292 * @param {!Event} event | |
| 293 * @return {boolean} | |
| 294 */ | |
| 295 _startWindowDragging: function(event) | |
| 296 { | |
| 297 this._dragStartPoint = event.pageX; | |
| 298 this._dragStartLeft = this.windowLeft; | |
| 299 this._dragStartRight = this.windowRight; | |
| 300 return true; | |
| 301 }, | |
| 302 | |
| 303 /** | |
| 304 * @param {!Event} event | |
| 305 */ | |
| 306 _windowDragging: function(event) | |
| 307 { | |
| 308 event.preventDefault(); | |
| 309 var delta = (event.pageX - this._dragStartPoint) / this._parentElement.c
lientWidth; | |
| 310 if (this._dragStartLeft + delta < 0) | |
| 311 delta = -this._dragStartLeft; | |
| 312 | |
| 313 if (this._dragStartRight + delta > 1) | |
| 314 delta = 1 - this._dragStartRight; | |
| 315 | |
| 316 this._setWindow(this._dragStartLeft + delta, this._dragStartRight + delt
a); | |
| 317 }, | |
| 318 | |
| 319 /** | |
| 320 * @param {number} start | |
| 321 */ | |
| 322 _resizeWindowLeft: function(start) | |
| 323 { | |
| 324 // Glue to edge. | |
| 325 if (start < 10) | |
| 326 start = 0; | |
| 327 else if (start > this._rightResizeElement.offsetLeft - 4) | |
| 328 start = this._rightResizeElement.offsetLeft - 4; | |
| 329 this._setWindowPosition(start, null); | |
| 330 }, | |
| 331 | |
| 332 /** | |
| 333 * @param {number} end | |
| 334 */ | |
| 335 _resizeWindowRight: function(end) | |
| 336 { | |
| 337 // Glue to edge. | |
| 338 if (end > this._parentElement.clientWidth - 10) | |
| 339 end = this._parentElement.clientWidth; | |
| 340 else if (end < this._leftResizeElement.offsetLeft + WebInspector.Overvie
wGrid.MinSelectableSize) | |
| 341 end = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid
.MinSelectableSize; | |
| 342 this._setWindowPosition(null, end); | |
| 343 }, | |
| 344 | |
| 345 _resizeWindowMaximum: function() | |
| 346 { | |
| 347 this._setWindowPosition(0, this._parentElement.clientWidth); | |
| 348 }, | |
| 349 | |
| 350 /** | |
| 351 * @param {number} windowLeft | |
| 352 * @param {number} windowRight | |
| 353 */ | |
| 354 _setWindow: function(windowLeft, windowRight) | |
| 355 { | |
| 356 var left = windowLeft; | |
| 357 var right = windowRight; | |
| 358 var width = windowRight - windowLeft; | |
| 359 | |
| 360 // We allow actual time window to be arbitrarily small but don't want th
e UI window to be too small. | |
| 361 var widthInPixels = width * this._parentElement.clientWidth; | |
| 362 var minWidthInPixels = WebInspector.OverviewGrid.MinSelectableSize / 2; | |
| 363 if (widthInPixels < minWidthInPixels) { | |
| 364 var factor = minWidthInPixels / widthInPixels; | |
| 365 left = ((windowRight + windowLeft) - width * factor) / 2; | |
| 366 right = ((windowRight + windowLeft) + width * factor) / 2; | |
| 367 } | |
| 368 | |
| 369 this.windowLeft = windowLeft; | |
| 370 this._leftResizeElement.style.left = left * 100 + "%"; | |
| 371 this.windowRight = windowRight; | |
| 372 this._rightResizeElement.style.left = right * 100 + "%"; | |
| 373 | |
| 374 this._overviewWindowElement.style.left = left * 100 + "%"; | |
| 375 this._overviewWindowBordersElement.style.left = left * 100 + "%"; | |
| 376 this._overviewWindowElement.style.width = (right - left) * 100 + "%"; | |
| 377 this._overviewWindowBordersElement.style.right = (1 - right) * 100 + "%"
; | |
| 378 | |
| 379 this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowCha
nged); | |
| 380 }, | |
| 381 | |
| 382 /** | |
| 383 * @param {?number} start | |
| 384 * @param {?number} end | |
| 385 */ | |
| 386 _setWindowPosition: function(start, end) | |
| 387 { | |
| 388 var clientWidth = this._parentElement.clientWidth; | |
| 389 var windowLeft = typeof start === "number" ? start / clientWidth : this.
windowLeft; | |
| 390 var windowRight = typeof end === "number" ? end / clientWidth : this.win
dowRight; | |
| 391 this._setWindow(windowLeft, windowRight); | |
| 392 }, | |
| 393 | |
| 394 /** | |
| 395 * @param {!Event} event | |
| 396 */ | |
| 397 _onMouseWheel: function(event) | |
| 398 { | |
| 399 if (!this._enabled) | |
| 400 return; | |
| 401 if (typeof event.wheelDeltaY === "number" && event.wheelDeltaY) { | |
| 402 const zoomFactor = 1.1; | |
| 403 const mouseWheelZoomSpeed = 1 / 120; | |
| 404 | |
| 405 var reference = event.offsetX / event.target.clientWidth; | |
| 406 this._zoom(Math.pow(zoomFactor, -event.wheelDeltaY * mouseWheelZoomS
peed), reference); | |
| 407 } | |
| 408 if (typeof event.wheelDeltaX === "number" && event.wheelDeltaX) { | |
| 409 var offset = Math.round(event.wheelDeltaX * WebInspector.OverviewGri
d.WindowScrollSpeedFactor); | |
| 410 var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.O
verviewGrid.ResizerOffset; | |
| 411 var windowRight = this._rightResizeElement.offsetLeft + WebInspector
.OverviewGrid.ResizerOffset; | |
| 412 | |
| 413 if (windowLeft - offset < 0) | |
| 414 offset = windowLeft; | |
| 415 | |
| 416 if (windowRight - offset > this._parentElement.clientWidth) | |
| 417 offset = windowRight - this._parentElement.clientWidth; | |
| 418 | |
| 419 this._setWindowPosition(windowLeft - offset, windowRight - offset); | |
| 420 | |
| 421 event.preventDefault(); | |
| 422 } | |
| 423 }, | |
| 424 | |
| 425 /** | |
| 426 * @param {number} factor | |
| 427 * @param {number} reference | |
| 428 */ | |
| 429 _zoom: function(factor, reference) | |
| 430 { | |
| 431 var left = this.windowLeft; | |
| 432 var right = this.windowRight; | |
| 433 var windowSize = right - left; | |
| 434 var newWindowSize = factor * windowSize; | |
| 435 if (newWindowSize > 1) { | |
| 436 newWindowSize = 1; | |
| 437 factor = newWindowSize / windowSize; | |
| 438 } | |
| 439 left = reference + (left - reference) * factor; | |
| 440 left = Number.constrain(left, 0, 1 - newWindowSize); | |
| 441 | |
| 442 right = reference + (right - reference) * factor; | |
| 443 right = Number.constrain(right, newWindowSize, 1); | |
| 444 this._setWindow(left, right); | |
| 445 }, | |
| 446 | |
| 447 __proto__: WebInspector.Object.prototype | |
| 448 } | |
| 449 | |
| 450 /** | |
| 451 * @constructor | |
| 452 */ | |
| 453 WebInspector.OverviewGrid.WindowSelector = function(parent, position) | |
| 454 { | |
| 455 this._startPosition = position; | |
| 456 this._width = parent.offsetWidth; | |
| 457 this._windowSelector = createElement("div"); | |
| 458 this._windowSelector.className = "overview-grid-window-selector"; | |
| 459 this._windowSelector.style.left = this._startPosition + "px"; | |
| 460 this._windowSelector.style.right = this._width - this._startPosition + "px"; | |
| 461 parent.appendChild(this._windowSelector); | |
| 462 } | |
| 463 | |
| 464 WebInspector.OverviewGrid.WindowSelector.prototype = { | |
| 465 _close: function(position) | |
| 466 { | |
| 467 position = Math.max(0, Math.min(position, this._width)); | |
| 468 this._windowSelector.remove(); | |
| 469 return this._startPosition < position ? {start: this._startPosition, end
: position} : {start: position, end: this._startPosition}; | |
| 470 }, | |
| 471 | |
| 472 _updatePosition: function(position) | |
| 473 { | |
| 474 position = Math.max(0, Math.min(position, this._width)); | |
| 475 if (position < this._startPosition) { | |
| 476 this._windowSelector.style.left = position + "px"; | |
| 477 this._windowSelector.style.right = this._width - this._startPosition
+ "px"; | |
| 478 } else { | |
| 479 this._windowSelector.style.left = this._startPosition + "px"; | |
| 480 this._windowSelector.style.right = this._width - position + "px"; | |
| 481 } | |
| 482 } | |
| 483 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 714423005:
DevTools: move front-end files from components to ui. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk