Changeset 58406 in webkit


Ignore:
Timestamp:
Apr 28, 2010 6:49:08 AM (14 years ago)
Author:
eric@webkit.org
Message:

2010-04-28 Ilya Tikhonovsky <​loislo@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: View frame selector for Timeline overview panel is redesigned a bit.
Now it is possible to adjust view frame by resizer bars and by click-n-drag in overview pane.
​https://bugs.webkit.org/show_bug.cgi?id=38251

  • inspector/front-end/TimelineOverviewPane.js: (WebInspector.TimelineOverviewPane): (WebInspector.TimelineOverviewPane.prototype.reset): (WebInspector.TimelineOverviewPane.prototype._dragWindow): (WebInspector.TimelineOverviewPane.prototype._windowSelectorDragging): (WebInspector.TimelineOverviewPane.prototype._endWindowSelectorDragging): (WebInspector.TimelineOverviewPane.prototype._resizeWindowLeft): (WebInspector.TimelineOverviewPane.prototype._resizeWindowRight): (WebInspector.TimelineOverviewPane.prototype._setWindowPosition): (WebInspector.TimelinePanel.WindowSelector): (WebInspector.TimelinePanel.WindowSelector.prototype._createSelectorElement): (WebInspector.TimelinePanel.WindowSelector.prototype._close): (WebInspector.TimelinePanel.WindowSelector.prototype._updatePosition):
  • inspector/front-end/inspector.css: (#timeline-overview-grid): (.timeline-window-selector): (#timeline-overview-window): (.timeline-overview-dividers-background): (.timeline-overview-window-rulers): (.timeline-window-resizer):
Location:
trunk/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r58404 r58406  
     12010-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
    1302010-04-28  Marcus Bulach  <bulach@chromium.org>
    231

  • trunk/WebCore/inspector/front-end/TimelineOverviewPane.js

    r58087 r58406  
    5555    this._overviewGrid.element.id = "timeline-overview-grid";
    5656    this._overviewGrid.itemsGraphsElement.id = "timeline-overview-graphs";
     57    this._overviewGrid.element.addEventListener("mousedown", this._dragWindow.bind(this), true);
    5758    this.element.appendChild(this._overviewGrid.element);
    5859
    … …  
    6869    this._overviewWindowElement = document.createElement("div");
    6970    this._overviewWindowElement.id = "timeline-overview-window";
    70     this._overviewWindowElement.addEventListener("mousedown", this._dragWindow.bind(this), false);
    7171    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);
    7280
    7381    this._leftResizeElement = document.createElement("div");
    … …  
    7583    this._leftResizeElement.style.left = 0;
    7684    this._overviewGrid.element.appendChild(this._leftResizeElement);
    77     this._leftResizeElement.addEventListener("mousedown", this._resizeWindow.bind(this, this._leftResizeElement), false);
    7885
    7986    this._rightResizeElement = document.createElement("div");
    … …  
    8188    this._rightResizeElement.style.right = 0;
    8289    this._overviewGrid.element.appendChild(this._rightResizeElement);
    83     this._rightResizeElement.addEventListener("mousedown", this._resizeWindow.bind(this, this._rightResizeElement), false);
    8490
    8591    this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
    … …  
    9298    this.windowRight = 1.0;
    9399}
     100
     101WebInspector.TimelineOverviewPane.minSelectableSize = 12;
    94102
    95103WebInspector.TimelineOverviewPane.prototype = {
    … …  
    197205        this._overviewWindowElement.style.left = "0%";
    198206        this._overviewWindowElement.style.width = "100%";
     207        this._overviewWindowBordersElement.style.left = "0%";
     208        this._overviewWindowBordersElement.style.right = "0%";
    199209        this._leftResizeElement.style.left = "0%";
    200210        this._rightResizeElement.style.left = "100%";
    … …  
    219229    _dragWindow: function(event)
    220230    {
    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);
    223267    },
    224268
    … …  
    249293        if (start < 10)
    250294            start = 0;
     295        else if (start > this._rightResizeElement.offsetLeft -  4)
     296            start = this._rightResizeElement.offsetLeft - 4;
    251297        this._setWindowPosition(start, null);
    252298    },
    … …  
    257303        if (end > this._overviewGrid.element.clientWidth - 10)
    258304            end = this._overviewGrid.element.clientWidth;
     305        else if (end < this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.minSelectableSize)
     306            end = this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.minSelectableSize;
    259307        this._setWindowPosition(null, end);
    260308    },
    … …  
    262310    _setWindowPosition: function(start, end)
    263311    {
     312        const rulerAdjustment = 1 / this._overviewGrid.element.clientWidth;
    264313        if (typeof start === "number") {
    265             if (start > this._rightResizeElement.offsetLeft - 4)
    266                 start = this._rightResizeElement.offsetLeft - 4;
    267 
    268314            this.windowLeft = start / this._overviewGrid.element.clientWidth;
    269315            this._leftResizeElement.style.left = this.windowLeft * 100 + "%";
    270316            this._overviewWindowElement.style.left = this.windowLeft * 100 + "%";
     317            this._overviewWindowBordersElement.style.left = (this.windowLeft - rulerAdjustment) * 100 + "%";
    271318        }
    272319        if (typeof end === "number") {
    273             if (end < this._leftResizeElement.offsetLeft + 12)
    274                 end = this._leftResizeElement.offsetLeft + 12;
    275 
    276320            this.windowRight = end / this._overviewGrid.element.clientWidth;
    277321            this._rightResizeElement.style.left = this.windowRight * 100 + "%";
    278322        }
    279323        this._overviewWindowElement.style.width = (this.windowRight - this.windowLeft) * 100 + "%";
     324        this._overviewWindowBordersElement.style.right = (1 - this.windowRight + 2 * rulerAdjustment) * 100 + "%";
    280325        this.dispatchEventToListeners("window changed");
    281326    },
    … …  
    409454    }
    410455}
     456
     457WebInspector.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
     468WebInspector.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  
    33883388    left: 200px;
    33893389    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;
    33913399}
    33923400
    … …  
    33973405    right: 0;
    33983406    top: 0;
    3399     bottom: 0;
     3407    bottom: 60px;
    34003408    z-index: 150;
    34013409}
    34023410
     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
    34033430.timeline-window-resizer {
    34043431    position: absolute;
    3405     top: 35px;
    3406     bottom: 15px;
     3432    top: 0px;
     3433    bottom: 60px;
    34073434    width: 5px;
    34083435    margin-left: -3px;
Note: See TracChangeset for help on using the changeset viewer.