Web Inspector: Use half-pixel borders for data grids

https://bugs.webkit.org/show_bug.cgi?id=154437 <rdar://problem/24736365> Reviewed by Timothy Hatcher. * UserInterface/Views/DataGrid.css: (.data-grid.inline): (.data-grid th): (.data-grid :matches(th, td):not(:last-child)): Half-pixel borders round to 1px on 1x (non-retina) screens since r192444. * UserInterface/Views/DataGrid.js: (WebInspector.DataGrid.prototype._positionResizerElements): Use getBoundingClientRect for better precision since it provides subpixel values. Canonical link: https://commits.webkit.org/173193@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@197659 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Mar 7, 2016 · 880dff8 · 880dff8
1 parent 249409e
commit 880dff8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,21 @@
+2016-03-06  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Use half-pixel borders for data grids
+        https://bugs.webkit.org/show_bug.cgi?id=154437
+        <rdar://problem/24736365>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid.inline):
+        (.data-grid th):
+        (.data-grid :matches(th, td):not(:last-child)):
+        Half-pixel borders round to 1px on 1x (non-retina) screens since r192444.
+
+        * UserInterface/Views/DataGrid.js:
+        (WebInspector.DataGrid.prototype._positionResizerElements):
+        Use getBoundingClientRect for better precision since it provides subpixel values.
+
 2016-03-05  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Have separate path component for Script Timeline content views

diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
@@ -58,7 +58,7 @@
 }
 
 .data-grid.inline {
-    border: 1px solid var(--border-color);
+    border: 0.5px solid var(--border-color);
 }
 
 .data-grid.no-header > table.header {
@@ -75,7 +75,7 @@
 
     background-color: white;
 
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 0.5px solid var(--border-color);
 
     font-weight: normal;
 
@@ -87,7 +87,7 @@
 }
 
 .data-grid :matches(th, td):not(:last-child) {
-    border-right: 1px solid var(--border-color);
+    border-right: 0.5px solid var(--border-color);
 }
 
 .data-grid th.sortable:active {

diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.js b/Source/WebInspectorUI/UserInterface/Views/DataGrid.js
@@ -699,7 +699,7 @@ WebInspector.DataGrid = class DataGrid extends WebInspector.View
             // Get the width of the cell in the first (and only) row of the
             // header table in order to determine the width of the column, since
             // it is not possible to query a column for its width.
-            left += this._headerTableBodyElement.rows[0].cells[i].offsetWidth;
+            left += this._headerTableBodyElement.rows[0].cells[i].getBoundingClientRect().width;
 
             if (this._isColumnVisible(this.orderedColumns[i])) {
                 resizer.element.style.removeProperty("display");