Title: [200718] trunk/Source/WebInspectorUI
Revision
200718
Author
nvasil...@apple.com
Date
2016-05-11 17:47:07 -0700 (Wed, 11 May 2016)

Log 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.

* UserInterface/Views/DataGrid.css:
(.data-grid .data-container):
Always show vertical scrollbars.

(.data-grid > .header-wrapper):
(.data-grid > .header-wrapper::-webkit-scrollbar):
Show invisible scrollbar for DataGrid's header to align the header table with the content.

(.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):
`overflow-y: scroll` doesn't work on a table element. Wrap table in a div.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (200717 => 200718)


--- trunk/Source/WebInspectorUI/ChangeLog	2016-05-12 00:31:49 UTC (rev 200717)
+++ trunk/Source/WebInspectorUI/ChangeLog	2016-05-12 00:47:07 UTC (rev 200718)
@@ -1,3 +1,25 @@
+2016-05-11  Nikita Vasilyev  <nvasil...@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.
+
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid .data-container):
+        Always show vertical scrollbars.
+
+        (.data-grid > .header-wrapper):
+        (.data-grid > .header-wrapper::-webkit-scrollbar):
+        Show invisible scrollbar for DataGrid's header to align the header table with the content.
+
+        (.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):
+        `overflow-y: scroll` doesn't work on a table element. Wrap table in a div.
+
 2016-05-11  Matt Baker  <mattba...@apple.com>
 
         Web Inspector: Make it possible to do special styling on selected TimelineOverviewGraphs

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (200717 => 200718)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css	2016-05-12 00:31:49 UTC (rev 200717)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css	2016-05-12 00:47:07 UTC (rev 200718)
@@ -50,7 +50,7 @@
     left: 0;
     right: 0;
     overflow-x: hidden;
-    overflow-y: overlay;
+    overflow-y: scroll;
 }
 
 .data-grid.inline .data-container {
@@ -61,7 +61,16 @@
     border: 0.5px solid var(--border-color);
 }
 
-.data-grid.no-header > table.header {
+.data-grid > .header-wrapper {
+    border-bottom: 0.5px solid var(--border-color);
+    overflow-y: scroll;
+}
+
+.data-grid > .header-wrapper::-webkit-scrollbar {
+    -webkit-appearance: none;
+}
+
+.data-grid.no-header > .header-wrapper > table.header {
     display: none;
 }
 
@@ -75,8 +84,6 @@
 
     background-color: white;
 
-    border-bottom: 0.5px solid var(--border-color);
-
     font-weight: normal;
 
     height: 22px;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (200717 => 200718)


--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js	2016-05-12 00:31:49 UTC (rev 200717)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js	2016-05-12 00:47:07 UTC (rev 200718)
@@ -61,8 +61,13 @@
         this.element.addEventListener("keydown", this._keyDown.bind(this), false);
         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");
         this._headerTableRowElement = this._headerTableBodyElement.createChild("tr");
@@ -103,7 +108,7 @@
 
         this._fillerRowElement = this.dataTableBodyElement.createChild("tr", "filler");
 
-        this.element.appendChild(this._headerTableElement);
+        this.element.appendChild(this._headerWrapperElement);
         this.element.appendChild(this._scrollContainerElement);
 
         if (preferredColumnOrder) {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to