Changeset 200962 in webkit

Timestamp:

May 16, 2016, 1:19:24 PM (9 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: Contents of Duration column are covered by always on (legacy) scroll bars
​https://bugs.webkit.org/show_bug.cgi?id=157590

Reviewed by Timothy Hatcher.

Set the right padding of the DataGrid header to match the scrollbar width.

• UserInterface/Views/DataGrid.css:

(.data-grid .data-container):
(.data-grid.inline .data-container):
Don't show scrollbars for inline data grids.

(.data-grid > .header-wrapper):
(.data-grid.no-header > .header-wrapper > table.header):
(.data-grid.no-header > table.header): Deleted.
(.data-grid th): Deleted.

• UserInterface/Views/DataGrid.js:

(WebInspector.DataGrid):
We can't add padding-rigth to a table. Wrap the table in div.header-wrapper.

(WebInspector.DataGrid.prototype._updateScrollbarPadding):
(WebInspector.DataGrid.prototype.layout):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/DataGrid.css (modified) (3 diffs)
• UserInterface/Views/DataGrid.js (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-05-16  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Contents of Duration column are covered by always on (legacy) scroll bars
+        https://bugs.webkit.org/show_bug.cgi?id=157590
+
+        Reviewed by Timothy Hatcher.
+
+        Set the right padding of the DataGrid header to match the scrollbar width.
+
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid .data-container):
+        (.data-grid.inline .data-container):
+        Don't show scrollbars for inline data grids.
+
+        (.data-grid > .header-wrapper):
+        (.data-grid.no-header > .header-wrapper > table.header):
+        (.data-grid.no-header > table.header): Deleted.
+        (.data-grid th): Deleted.
+        * UserInterface/Views/DataGrid.js:
+        (WebInspector.DataGrid):
+        We can't add padding-rigth to a table. Wrap the table in div.header-wrapper.
+
+        (WebInspector.DataGrid.prototype._updateScrollbarPadding):
+        (WebInspector.DataGrid.prototype.layout):
+
 2016-05-16  Nikita Vasilyev  <nvasilyev@apple.com>
 

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

@@ -51 +51 @@
     right: 0;
     overflow-x: hidden;
-    overflow-y: overlay;
+    overflow-y: scroll;
 }
 
 .data-grid.inline .data-container {
     position: static;
+    overflow-y: auto;
 }
 
@@ -62 +63 @@
 }
 
-.data-grid.no-header > table.header {
+.data-grid > .header-wrapper {
+    border-bottom: 0.5px solid var(--border-color);
+}
+
+.data-grid.no-header > .header-wrapper > table.header {
     display: none;
 }
@@ -75 +80 @@
 
     background-color: white;
-
-    border-bottom: 0.5px solid var(--border-color);
 
     font-weight: normal;

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

@@ -53 +53 @@
         this.resizers = [];
         this._columnWidthsInitialized = false;
+        this._scrollbarWidth = 0;
 
         this._cachedScrollTop = NaN;
@@ -68 +69 @@
         this.element.copyHandler = this;
 
+        this._headerWrapperElement = document.createElement("div");
+        this._headerWrapperElement.classList.add("header-wrapper");
+
         this._headerTableElement = document.createElement("table");
         this._headerTableElement.className = "header";
+        this._headerWrapperElement.appendChild(this._headerTableElement);
+
         this._headerTableColumnGroupElement = this._headerTableElement.createChild("colgroup");
         this._headerTableBodyElement = this._headerTableElement.createChild("tbody");
@@ -110 +116 @@
         this._fillerRowElement = this.dataTableBodyElement.createChild("tr", "filler");
 
-        this.element.appendChild(this._headerTableElement);
+        this.element.appendChild(this._headerWrapperElement);
         this.element.appendChild(this._scrollContainerElement);
 
@@ -120 +126 @@
                 this.insertColumn(columnIdentifier, columnsData[columnIdentifier]);
         }
+
+        this._updateScrollbarPadding();
+    }
+
+    _updateScrollbarPadding()
+    {
+        if (this._inline)
+            return;
+
+        let scrollbarWidth = this._scrollContainerElement.offsetWidth - this._scrollContainerElement.scrollWidth;
+        if (this._scrollbarWidth === scrollbarWidth)
+            return;
+
+        this._headerWrapperElement.style.paddingRight = scrollbarWidth + "px";
+        this._scrollbarWidth = scrollbarWidth;
     }
 
@@ -807 +828 @@
             this._positionResizerElements();
             this._positionHeaderViews();
+            this._updateScrollbarPadding();
 
             this._cachedScrollTop = NaN;