⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 181903 in webkit


Ignore:
Timestamp:
Mar 24, 2015, 1:41:47 PM (11 years ago)
Author:
Brian Burg
Message:

Web Inspector: unify resizer implementations used by DataGrid and Sidebar
​https://bugs.webkit.org/show_bug.cgi?id=142407

Reviewed by Timothy Hatcher.

Both of these implementations do the same thing slightly differently. Unify the code
and use the "glass pane" technique to preserve cursor while dragging over links or text.

This patch implements vertical and horizontal rule orientations. Further refactorings
to use this class may need to add "Indeterminate" orientation to support moving the inspector
window by its fake toolbar element.

  • UserInterface/Main.html:
  • UserInterface/Views/DataGrid.css:

(.data-grid .resizer):
(.data-grid-resizer): Deleted.

  • UserInterface/Views/DataGrid.js: Store Resizer instances rather than resizer elements.

Use symbols to secretly store neighbor column ids on the resizer objects. Stop using
WebInspector.elementDragStart, as I would like to deprecate it in favor of Resizer instances.

(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype._positionResizerElements):
(WebInspector.DataGrid.prototype.resizerDragStarted):
(WebInspector.DataGrid.prototype.resizerDragging):
(WebInspector.DataGrid.prototype.resizerDragEnded):
(WebInspector.DataGrid.prototype._startResizerDragging): Deleted.
(WebInspector.DataGrid.prototype._resizerDragging): Deleted.
(WebInspector.DataGrid.prototype._endResizerDragging): Deleted.

  • UserInterface/Views/Resizer.css:

(.resizer):
(.resizer.vertical-rule):
(.resizer.horizontal-rule):
(.glass-pane-for-drag):

  • UserInterface/Views/Resizer.js: Added.

(WebInspector.Resizer):
(WebInspector.Resizer.prototype.get element):
(WebInspector.Resizer.prototype.get orientation):
(WebInspector.Resizer.prototype.get initialPosition):
(WebInspector.Resizer.prototype._currentPosition):
(WebInspector.Resizer.prototype._resizerMouseDown):
(WebInspector.Resizer.prototype._resizerMouseMoved):
(WebInspector.Resizer.prototype._resizerMouseUp):

  • UserInterface/Views/Sidebar.css:

(.sidebar > .resizer): Deleted.

  • UserInterface/Views/Sidebar.js:

(WebInspector.Sidebar):
(WebInspector.Sidebar.prototype.resizerDragStarted):
(WebInspector.Sidebar.prototype.resizerDragging):
(WebInspector.Sidebar.prototype.resizerDragEnded):
(WebInspector.Sidebar.prototype._navigationItemSelected):
(WebInspector.Sidebar.prototype._resizerMouseDown): Deleted.
(WebInspector.Sidebar.prototype._resizerMouseMoved): Deleted.
(WebInspector.Sidebar.prototype._resizerMouseUp): Deleted.

Location:
trunk/Source/WebInspectorUI
Files:
1 added
6 edited
1 copied

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r181872 r181903  
     12015-03-06  Brian J. Burg  <burg@cs.washington.edu>
     2
     3        Web Inspector: unify resizer implementations used by DataGrid and Sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=142407
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Both of these implementations do the same thing slightly differently. Unify the code
     9        and use the "glass pane" technique to preserve cursor while dragging over links or text.
     10
     11        This patch implements vertical and horizontal rule orientations. Further refactorings
     12        to use this class may need to add "Indeterminate" orientation to support moving the inspector
     13        window by its fake toolbar element.
     14
     15        * UserInterface/Main.html:
     16        * UserInterface/Views/DataGrid.css:
     17        (.data-grid .resizer):
     18        (.data-grid-resizer): Deleted.
     19        * UserInterface/Views/DataGrid.js: Store Resizer instances rather than resizer elements.
     20        Use symbols to secretly store neighbor column ids on the resizer objects. Stop using
     21        WebInspector.elementDragStart, as I would like to deprecate it in favor of Resizer instances.
     22
     23        (WebInspector.DataGrid):
     24        (WebInspector.DataGrid.prototype._positionResizerElements):
     25        (WebInspector.DataGrid.prototype.resizerDragStarted):
     26        (WebInspector.DataGrid.prototype.resizerDragging):
     27        (WebInspector.DataGrid.prototype.resizerDragEnded):
     28        (WebInspector.DataGrid.prototype._startResizerDragging): Deleted.
     29        (WebInspector.DataGrid.prototype._resizerDragging): Deleted.
     30        (WebInspector.DataGrid.prototype._endResizerDragging): Deleted.
     31        * UserInterface/Views/Resizer.css:
     32        (.resizer):
     33        (.resizer.vertical-rule):
     34        (.resizer.horizontal-rule):
     35        (.glass-pane-for-drag):
     36        * UserInterface/Views/Resizer.js: Added.
     37        (WebInspector.Resizer):
     38        (WebInspector.Resizer.prototype.get element):
     39        (WebInspector.Resizer.prototype.get orientation):
     40        (WebInspector.Resizer.prototype.get initialPosition):
     41        (WebInspector.Resizer.prototype._currentPosition):
     42        (WebInspector.Resizer.prototype._resizerMouseDown):
     43        (WebInspector.Resizer.prototype._resizerMouseMoved):
     44        (WebInspector.Resizer.prototype._resizerMouseUp):
     45        * UserInterface/Views/Sidebar.css:
     46        (.sidebar > .resizer): Deleted.
     47        * UserInterface/Views/Sidebar.js:
     48        (WebInspector.Sidebar):
     49        (WebInspector.Sidebar.prototype.resizerDragStarted):
     50        (WebInspector.Sidebar.prototype.resizerDragging):
     51        (WebInspector.Sidebar.prototype.resizerDragEnded):
     52        (WebInspector.Sidebar.prototype._navigationItemSelected):
     53        (WebInspector.Sidebar.prototype._resizerMouseDown): Deleted.
     54        (WebInspector.Sidebar.prototype._resizerMouseMoved): Deleted.
     55        (WebInspector.Sidebar.prototype._resizerMouseUp): Deleted.
     56
    1572015-03-17  Jono Wells  <jonowells@apple.com>
    258

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r181872 r181903  
    111111    <link rel="stylesheet" href="Views/RadioButtonNavigationItem.css">
    112112    <link rel="stylesheet" href="Views/ReplayDashboardView.css">
     113    <link rel="stylesheet" href="Views/Resizer.css">
    113114    <link rel="stylesheet" href="Views/ResourceIcons.css">
    114115    <link rel="stylesheet" href="Views/ResourceSidebarPanel.css">
    … …  
    446447    <script src="Views/RadioButtonNavigationItem.js"></script>
    447448    <script src="Views/ReplayDashboardView.js"></script>
     449    <script src="Views/Resizer.js"></script>
    448450    <script src="Views/ResourceClusterContentView.js"></script>
    449451    <script src="Views/ResourceDetailsSidebarPanel.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css

    r176494 r181903  
    303303}
    304304
    305 .data-grid-resizer {
    306     position: absolute;
    307     top: 0;
    308     bottom: 0;
    309     width: 5px;
     305.data-grid .resizer {
    310306    z-index: 500;
    311     cursor: col-resize;
    312 }
     307}

  • trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js

    r179493 r181903  
    4242    this.dataGrid = this;
    4343    this.indentWidth = 15;
    44     this.resizerElements = [];
     44    this.resizers = [];
    4545    this._columnWidthsInitialized = false;
    4646
    … …  
    112112    Descending: "data-grid-sort-order-descending"
    113113};
     114
     115WebInspector.DataGrid.PreviousColumnOrdinalSymbol = Symbol("previous-column-ordinal");
     116WebInspector.DataGrid.NextColumnOrdinalSymbol = Symbol("next-column-ordinal");
    114117
    115118WebInspector.DataGrid.SortColumnAscendingStyleClassName = "sort-ascending";
    … …  
    663666    {
    664667        var left = 0;
    665         var previousResizerElement = null;
     668        var previousResizer = null;
    666669
    667670        // Make n - 1 resizers for n columns.
    668671        for (var i = 0; i < this.orderedColumns.length - 1; ++i) {
    669             var resizerElement = this.resizerElements[i];
    670 
    671             if (!resizerElement) {
    672                 // This is the first call to updateWidth, so the resizers need
    673                 // to be created.
    674                 resizerElement = document.createElement("div");
    675                 resizerElement.classList.add("data-grid-resizer");
     672            // Create a new resizer if one does not exist for this column.
     673            if (i === this.resizers.length) {
     674                resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
     675                this.resizers[i] = resizer;
    676676                // This resizer is associated with the column to its right.
    677                 resizerElement.addEventListener("mousedown", this._startResizerDragging.bind(this), false);
    678                 this.element.appendChild(resizerElement);
    679                 this.resizerElements[i] = resizerElement;
     677                this.element.appendChild(resizer.element);
    680678            }
     679
     680            var resizer = this.resizers[i];
    681681
    682682            // Get the width of the cell in the first (and only) row of the
    … …  
    686686
    687687            if (this._isColumnVisible(this.orderedColumns[i])) {
    688                 resizerElement.style.removeProperty("display");
    689                 resizerElement.style.left = left + "px";
    690                 resizerElement.leftNeighboringColumnID = i;
    691                 if (previousResizerElement)
    692                     previousResizerElement.rightNeighboringColumnID = i;
    693                 previousResizerElement = resizerElement;
     688                resizer.element.style.removeProperty("display");
     689                resizer.element.style.left = left + "px";
     690                resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol] = i;
     691                if (previousResizer)
     692                    previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = i;
     693                previousResizer = resizer;
    694694            } else {
    695                 resizerElement.style.setProperty("display", "none");
    696                 resizerElement.leftNeighboringColumnID = 0;
    697                 resizerElement.rightNeighboringColumnID = 0;
     695                resizer.element.style.setProperty("display", "none");
     696                resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol] = 0;
     697                resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = 0;
    698698            }
    699699        }
    700         if (previousResizerElement)
    701             previousResizerElement.rightNeighboringColumnID = this.orderedColumns.length - 1;
     700        if (previousResizer)
     701            previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = this.orderedColumns.length - 1;
    702702    },
    703703
    … …  
    12431243    },
    12441244
    1245     _startResizerDragging: function(event)
    1246     {
    1247         if (event.button !== 0 || event.ctrlKey)
    1248             return;
    1249 
    1250         this._currentResizer = event.target;
    1251         if (!this._currentResizer.rightNeighboringColumnID)
    1252             return;
    1253 
    1254         WebInspector.elementDragStart(this._currentResizer, this._resizerDragging.bind(this),
    1255             this._endResizerDragging.bind(this), event, "col-resize");
    1256     },
    1257 
    1258     _resizerDragging: function(event)
    1259     {
    1260         if (event.button !== 0)
    1261             return;
    1262 
    1263         var resizer = this._currentResizer;
    1264         if (!resizer)
     1245    resizerDragStarted: function(resizer)
     1246    {
     1247        if (!resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol])
     1248            return true; // Abort the drag;
     1249
     1250        this._currentResizer = resizer;
     1251    },
     1252
     1253    resizerDragging: function(resizer, positionDelta)
     1254    {
     1255        console.assert(resizer === this._currentResizer, resizer, this._currentResizer);
     1256        if (resizer != this._currentResizer)
    12651257            return;
    12661258
    12671259        // Constrain the dragpoint to be within the containing div of the
    12681260        // datagrid.
    1269         var dragPoint = event.clientX - this.element.totalOffsetLeft;
     1261        var dragPoint = (resizer.initialPosition - positionDelta) - this.element.totalOffsetLeft;
    12701262        // Constrain the dragpoint to be within the space made up by the
    12711263        // column directly to the left and the column directly to the right.
    1272         var leftCellIndex = resizer.leftNeighboringColumnID;
    1273         var rightCellIndex = resizer.rightNeighboringColumnID;
     1264        var leftCellIndex = resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol];
     1265        var rightCellIndex = resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol];
    12741266        var firstRowCells = this._headerTableBodyElement.rows[0].cells;
    12751267        var leftEdgeOfPreviousColumn = 0;
    … …  
    12791271        // Differences for other resize methods
    12801272        if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.Last) {
    1281             rightCellIndex = this.resizerElements.length;
     1273            rightCellIndex = this.resizers.length;
    12821274        } else if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.First) {
    12831275            leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth;
    … …  
    12931285        dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
    12941286
    1295         resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
     1287        resizer.element.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
    12961288
    12971289        var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTableElement.offsetWidth) * 100) + "%";
    … …  
    13081300    },
    13091301
    1310     _endResizerDragging: function(event)
    1311     {
    1312         if (event.button !== 0)
    1313             return;
    1314 
    1315         WebInspector.elementDragEnd(event);
     1302    resizerDragEnded: function(resizer)
     1303    {
     1304        console.assert(resizer === this._currentResizer, resizer, this._currentResizer);
     1305        if (resizer != this._currentResizer)
     1306            return;
     1307
    13161308        this._currentResizer = null;
    13171309        this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);

  • trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css

    r181902 r181903  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2015 University of Washington.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .sidebar {
    27     position: relative;
    28 
    29     background-color: rgb(242, 242, 242);
     26.resizer {
     27    position: absolute;
     28    z-index: 1000;
    3029}
    3130
    32 body.mac-platform.legacy .sidebar {
    33     background-color: rgb(227, 231, 235);
    34 }
    35 
    36 .sidebar.collapsed {
    37     width: 0 !important;
    38     border: none !important;
    39 }
    40 
    41 body.mac-platform.legacy.window-inactive .sidebar {
    42     background-color: rgb(231, 231, 231);
    43 }
    44 
    45 .sidebar > .panel {
    46     position: absolute;
    47     top: 0;
    48     left: 0;
    49     right: 0;
    50     bottom: 0;
    51 
    52     display: none;
    53 
    54     overflow: hidden;
    55 
    56     z-index: 0; /* Workaround so that scroll bars appear above position:sticky section headers. */
    57 }
    58 
    59 .sidebar > .panel.selected {
    60     display: block;
    61 }
    62 
    63 .sidebar > .resizer {
    64     position: absolute;
     31.resizer.vertical-rule {
    6532    top: 0;
    6633    bottom: 0;
    6734    width: 5px;
    6835
    69     z-index: 100;
    70 
    7136    cursor: col-resize;
    7237}
    7338
    74 .sidebar.right > .resizer {
    75     left: -3px;
     39.resizer.horizontal-rule {
     40    left: 0;
     41    right: 0;
     42    height: 5px;
     43
     44    cursor: row-resize;
    7645}
    7746
    78 .sidebar.left > .resizer {
    79     right: -3px;
     47.glass-pane-for-drag {
     48    position: absolute;
     49    top: 0;
     50    bottom: 0;
     51    left: 0;
     52    right: 0;
     53
     54    opacity: 0;
     55    z-index: 1;
    8056}
    81 
    82 .sidebar.collapsed {
    83     display: none;
    84 }
    85 
    86 .sidebar.left {
    87     border-right: 1px solid rgb(179, 179, 179);
    88 }
    89 
    90 .sidebar.right {
    91     border-left: 1px solid rgb(179, 179, 179);
    92 }
    93 
    94 body.mac-platform.legacy .sidebar.right {
    95     background-color: rgb(231, 231, 231);
    96 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css

    r179889 r181903  
    6161}
    6262
    63 .sidebar > .resizer {
    64     position: absolute;
    65     top: 0;
    66     bottom: 0;
    67     width: 5px;
    68 
    69     z-index: 100;
    70 
    71     cursor: col-resize;
    72 }
    73 
    7463.sidebar.right > .resizer {
    7564    left: -3px;

  • trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js

    r181769 r181903  
    4040        this._element.setAttribute("aria-label", label);
    4141
    42     this._resizeElement = document.createElement("div");
    43     this._resizeElement.classList.add(WebInspector.Sidebar.ResizeElementStyleClassName);
    44     this._resizeElement.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
    45     this._element.insertBefore(this._resizeElement, this._element.firstChild);
     42    this._resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
     43    this._element.insertBefore(this._resizer.element, this._element.firstChild);
    4644
    4745    this._sidebarPanels = [];
    … …  
    5856WebInspector.Sidebar.StyleClassName = "sidebar";
    5957WebInspector.Sidebar.CollapsedStyleClassName = "collapsed";
    60 WebInspector.Sidebar.ResizeElementStyleClassName = "resizer";
    6158WebInspector.Sidebar.AbsoluteMinimumWidth = 200;
    6259
    … …  
    253250    },
    254251
    255     // Private
    256 
    257     _navigationItemSelected: function(event)
    258     {
    259         this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
    260     },
    261 
    262     _resizerMouseDown: function(event)
    263     {
    264         if (event.button !== 0 || event.ctrlKey)
    265             return;
    266 
    267         document.body.style.cursor = "col-resize";
    268 
    269         this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
    270         this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
    271 
     252    // Protected
     253
     254    resizerDragStarted: function(resizer)
     255    {
    272256        this._widthBeforeResize = this.width;
    273         this._resizerMouseDownX = event.pageX;
    274 
    275         // Register these listeners on the document so we can track the mouse if it leaves the resizer.
    276         document.addEventListener("mousemove", this._resizerMouseMovedEventListener, false);
    277         document.addEventListener("mouseup", this._resizerMouseUpEventListener, false);
    278 
    279         event.preventDefault();
    280         event.stopPropagation();
    281     },
    282 
    283     _resizerMouseMoved: function(event)
    284     {
    285         var deltaX = this._resizerMouseDownX - event.pageX;
    286 
     257    },
     258
     259    resizerDragging: function(resizer, positionDelta)
     260    {
    287261        if (this._side === WebInspector.Sidebar.Sides.Left)
    288             deltaX *= -1;
    289 
    290         var newWidth = deltaX + this._widthBeforeResize;
     262            positionDelta *= -1;
     263
     264        var newWidth = positionDelta + this._widthBeforeResize;
    291265        this.width = newWidth;
    292266        this.collapsed = (newWidth < (this.minimumWidth / 2));
    293 
    294         event.preventDefault();
    295         event.stopPropagation();
    296     },
    297 
    298     _resizerMouseUp: function(event)
    299     {
    300         if (event.button !== 0 || event.ctrlKey)
    301             return;
    302 
    303         document.body.style.removeProperty("cursor");
    304 
    305         document.removeEventListener("mousemove", this._resizerMouseMovedEventListener, false);
    306         document.removeEventListener("mouseup", this._resizerMouseUpEventListener, false);
    307 
    308         delete this._resizerMouseMovedEventListener;
    309         delete this._resizerMouseUpEventListener;
    310 
    311         event.preventDefault();
    312         event.stopPropagation();
     267    },
     268
     269    resizerDragEnded: function(resizer)
     270    {
     271        delete this._widthBeforeResize;
     272    },
     273
     274    // Private
     275
     276    _navigationItemSelected: function(event)
     277    {
     278        this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
    313279    }
    314280};
Note: See TracChangeset for help on using the changeset viewer.