Changeset 58406 in webkit
- Timestamp:
- Apr 28, 2010 6:49:08 AM (14 years ago)
- Location:
- trunk/WebCore
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/WebCore/ChangeLog
r58404 r58406 1 2010-04-28 Ilya Tikhonovsky <loislo@chromium.org> 2 3 Reviewed by Yury Semikhatsky. 4 5 Web Inspector: View frame selector for Timeline overview panel is redesigned a bit. 6 Now it is possible to adjust view frame by resizer bars and by click-n-drag in overview pane. 7 https://bugs.webkit.org/show_bug.cgi?id=38251 8 9 * inspector/front-end/TimelineOverviewPane.js: 10 (WebInspector.TimelineOverviewPane): 11 (WebInspector.TimelineOverviewPane.prototype.reset): 12 (WebInspector.TimelineOverviewPane.prototype._dragWindow): 13 (WebInspector.TimelineOverviewPane.prototype._windowSelectorDragging): 14 (WebInspector.TimelineOverviewPane.prototype._endWindowSelectorDragging): 15 (WebInspector.TimelineOverviewPane.prototype._resizeWindowLeft): 16 (WebInspector.TimelineOverviewPane.prototype._resizeWindowRight): 17 (WebInspector.TimelineOverviewPane.prototype._setWindowPosition): 18 (WebInspector.TimelinePanel.WindowSelector): 19 (WebInspector.TimelinePanel.WindowSelector.prototype._createSelectorElement): 20 (WebInspector.TimelinePanel.WindowSelector.prototype._close): 21 (WebInspector.TimelinePanel.WindowSelector.prototype._updatePosition): 22 * inspector/front-end/inspector.css: 23 (#timeline-overview-grid): 24 (.timeline-window-selector): 25 (#timeline-overview-window): 26 (.timeline-overview-dividers-background): 27 (.timeline-overview-window-rulers): 28 (.timeline-window-resizer): 29 1 30 2010-04-28 Marcus Bulach <bulach@chromium.org> 2 31 -
trunk/WebCore/inspector/front-end/TimelineOverviewPane.js
r58087 r58406 55 55 this._overviewGrid.element.id = "timeline-overview-grid"; 56 56 this._overviewGrid.itemsGraphsElement.id = "timeline-overview-graphs"; 57 this._overviewGrid.element.addEventListener("mousedown", this._dragWindow.bind(this), true); 57 58 this.element.appendChild(this._overviewGrid.element); 58 59 … … 68 69 this._overviewWindowElement = document.createElement("div"); 69 70 this._overviewWindowElement.id = "timeline-overview-window"; 70 this._overviewWindowElement.addEventListener("mousedown", this._dragWindow.bind(this), false);71 71 this._overviewGrid.element.appendChild(this._overviewWindowElement); 72 73 this._overviewWindowBordersElement = document.createElement("div"); 74 this._overviewWindowBordersElement.className = "timeline-overview-window-rulers"; 75 this._overviewGrid.element.appendChild(this._overviewWindowBordersElement); 76 77 var overviewDividersBackground = document.createElement("div"); 78 overviewDividersBackground.className = "timeline-overview-dividers-background"; 79 this._overviewGrid.element.appendChild(overviewDividersBackground); 72 80 73 81 this._leftResizeElement = document.createElement("div"); … … 75 83 this._leftResizeElement.style.left = 0; 76 84 this._overviewGrid.element.appendChild(this._leftResizeElement); 77 this._leftResizeElement.addEventListener("mousedown", this._resizeWindow.bind(this, this._leftResizeElement), false);78 85 79 86 this._rightResizeElement = document.createElement("div"); … … 81 88 this._rightResizeElement.style.right = 0; 82 89 this._overviewGrid.element.appendChild(this._rightResizeElement); 83 this._rightResizeElement.addEventListener("mousedown", this._resizeWindow.bind(this, this._rightResizeElement), false);84 90 85 91 this._overviewCalculator = new WebInspector.TimelineOverviewCalculator(); … … 92 98 this.windowRight = 1.0; 93 99 } 100 101 WebInspector.TimelineOverviewPane.minSelectableSize = 12; 94 102 95 103 WebInspector.TimelineOverviewPane.prototype = { … … 197 205 this._overviewWindowElement.style.left = "0%"; 198 206 this._overviewWindowElement.style.width = "100%"; 207 this._overviewWindowBordersElement.style.left = "0%"; 208 this._overviewWindowBordersElement.style.right = "0%"; 199 209 this._leftResizeElement.style.left = "0%"; 200 210 this._rightResizeElement.style.left = "100%"; … … 219 229 _dragWindow: function(event) 220 230 { 221 WebInspector.elementDragStart(this._overviewWindowElement, this._windowDragging.bind(this, event.pageX, 222 this._leftResizeElement.offsetLeft, this._rightResizeElement.offsetLeft), this._endWindowDragging.bind(this), event, "ew-resize"); 231 var node = event.target; 232 while (node) { 233 if (node === this._overviewGrid._dividersLabelBarElement) { 234 WebInspector.elementDragStart(this._overviewWindowElement, this._windowDragging.bind(this, event.pageX, 235 this._leftResizeElement.offsetLeft, this._rightResizeElement.offsetLeft), this._endWindowDragging.bind(this), event, "ew-resize"); 236 break; 237 } else if (node === this._overviewGrid.element) { 238 var position = event.pageX - this._overviewGrid.element.offsetLeft; 239 this._overviewWindowSelector = new WebInspector.TimelinePanel.WindowSelector(this._overviewGrid.element, position, event); 240 WebInspector.elementDragStart(null, this._windowSelectorDragging.bind(this), this._endWindowSelectorDragging.bind(this), event, "col-resize"); 241 break; 242 } else if (node === this._leftResizeElement || node === this._rightResizeElement) { 243 this._resizeWindow(node, event); 244 break; 245 } 246 node = node.parentNode; 247 } 248 }, 249 250 _windowSelectorDragging: function(event) 251 { 252 this._overviewWindowSelector._updatePosition(event.pageX - this._overviewGrid.element.offsetLeft); 253 event.preventDefault(); 254 }, 255 256 _endWindowSelectorDragging: function(event) 257 { 258 WebInspector.elementDragEnd(event); 259 var window = this._overviewWindowSelector._close(event.pageX - this._overviewGrid.element.offsetLeft); 260 delete this._overviewWindowSelector; 261 if (window.end - window.start < WebInspector.TimelineOverviewPane.minSelectableSize) 262 if (this._overviewGrid.itemsGraphsElement.offsetWidth - window.end > WebInspector.TimelineOverviewPane.minSelectableSize) 263 window.end = window.start + WebInspector.TimelineOverviewPane.minSelectableSize; 264 else 265 window.start = window.end - WebInspector.TimelineOverviewPane.minSelectableSize; 266 this._setWindowPosition(window.start, window.end); 223 267 }, 224 268 … … 249 293 if (start < 10) 250 294 start = 0; 295 else if (start > this._rightResizeElement.offsetLeft - 4) 296 start = this._rightResizeElement.offsetLeft - 4; 251 297 this._setWindowPosition(start, null); 252 298 }, … … 257 303 if (end > this._overviewGrid.element.clientWidth - 10) 258 304 end = this._overviewGrid.element.clientWidth; 305 else if (end < this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.minSelectableSize) 306 end = this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.minSelectableSize; 259 307 this._setWindowPosition(null, end); 260 308 }, … … 262 310 _setWindowPosition: function(start, end) 263 311 { 312 const rulerAdjustment = 1 / this._overviewGrid.element.clientWidth; 264 313 if (typeof start === "number") { 265 if (start > this._rightResizeElement.offsetLeft - 4)266 start = this._rightResizeElement.offsetLeft - 4;267 268 314 this.windowLeft = start / this._overviewGrid.element.clientWidth; 269 315 this._leftResizeElement.style.left = this.windowLeft * 100 + "%"; 270 316 this._overviewWindowElement.style.left = this.windowLeft * 100 + "%"; 317 this._overviewWindowBordersElement.style.left = (this.windowLeft - rulerAdjustment) * 100 + "%"; 271 318 } 272 319 if (typeof end === "number") { 273 if (end < this._leftResizeElement.offsetLeft + 12)274 end = this._leftResizeElement.offsetLeft + 12;275 276 320 this.windowRight = end / this._overviewGrid.element.clientWidth; 277 321 this._rightResizeElement.style.left = this.windowRight * 100 + "%"; 278 322 } 279 323 this._overviewWindowElement.style.width = (this.windowRight - this.windowLeft) * 100 + "%"; 324 this._overviewWindowBordersElement.style.right = (1 - this.windowRight + 2 * rulerAdjustment) * 100 + "%"; 280 325 this.dispatchEventToListeners("window changed"); 281 326 }, … … 409 454 } 410 455 } 456 457 WebInspector.TimelinePanel.WindowSelector = function(parent, position, event) 458 { 459 this._startPosition = position; 460 this._width = parent.offsetWidth; 461 this._windowSelector = document.createElement("div"); 462 this._windowSelector.className = "timeline-window-selector"; 463 this._windowSelector.style.left = this._startPosition + "px"; 464 this._windowSelector.style.right = this._width - this._startPosition + + "px"; 465 parent.appendChild(this._windowSelector); 466 } 467 468 WebInspector.TimelinePanel.WindowSelector.prototype = { 469 _createSelectorElement: function(parent, left, width, height) 470 { 471 var selectorElement = document.createElement("div"); 472 selectorElement.className = "timeline-window-selector"; 473 selectorElement.style.left = left + "px"; 474 selectorElement.style.width = width + "px"; 475 selectorElement.style.top = "0px"; 476 selectorElement.style.height = height + "px"; 477 parent.appendChild(selectorElement); 478 return selectorElement; 479 }, 480 481 _close: function(position) 482 { 483 position = Math.max(0, Math.min(position, this._width)); 484 this._windowSelector.parentNode.removeChild(this._windowSelector); 485 return this._startPosition < position ? {start: this._startPosition, end: position} : {start: position, end: this._startPosition}; 486 }, 487 488 _updatePosition: function(position) 489 { 490 position = Math.max(0, Math.min(position, this._width)); 491 if (position < this._startPosition) { 492 this._windowSelector.style.left = position + "px"; 493 this._windowSelector.style.right = this._width - this._startPosition + "px"; 494 } else { 495 this._windowSelector.style.left = this._startPosition + "px"; 496 this._windowSelector.style.right = this._width - position + "px"; 497 } 498 } 499 } 500 -
trunk/WebCore/inspector/front-end/inspector.css
r58242 r58406 3388 3388 left: 200px; 3389 3389 right: 0px; 3390 background-color: rgb(224, 224, 224); 3390 background-color: rgb(255, 255, 255); 3391 } 3392 3393 .timeline-window-selector { 3394 position: absolute; 3395 top: 0; 3396 bottom: 0; 3397 background-color: rgba(125, 173, 217, 0.5); 3398 z-index: 250; 3391 3399 } 3392 3400 … … 3397 3405 right: 0; 3398 3406 top: 0; 3399 bottom: 0;3407 bottom: 60px; 3400 3408 z-index: 150; 3401 3409 } 3402 3410 3411 .timeline-overview-dividers-background { 3412 left: 0%; 3413 right: 0%; 3414 top: 0px; 3415 bottom: 60px; 3416 background-color: black; 3417 position: absolute; 3418 } 3419 3420 .timeline-overview-window-rulers { 3421 top: 0; 3422 bottom: 0; 3423 position: absolute; 3424 opacity: 0.2; 3425 border-right: 1px solid black; 3426 border-left: 1px solid black; 3427 z-index: 150; 3428 } 3429 3403 3430 .timeline-window-resizer { 3404 3431 position: absolute; 3405 top: 35px;3406 bottom: 15px;3432 top: 0px; 3433 bottom: 60px; 3407 3434 width: 5px; 3408 3435 margin-left: -3px;
Note: See TracChangeset
for help on using the changeset viewer.