<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[213622] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/213622">213622</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-03-08 19:44:17 -0800 (Wed, 08 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: RTL: table header columns and cells don't line up, dragging seems backwards
https://bugs.webkit.org/show_bug.cgi?id=168289
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2017-03-08
Reviewed by Brian Burg.
Changed the algorithm used to position columns when in RTL to use right offsets instead of
left offsets. This also applies to the resizer elements between columns.
* UserInterface/Views/DataGrid.css:
(.data-grid):
(.data-grid th):
(body[dir=ltr] .data-grid :matches(th, td):not(:last-child)):
(body[dir=rtl] .data-grid :matches(th, td):not(:last-child)):
(.data-grid th:matches(.sort-ascending, .sort-descending)):
(body[dir=ltr] .data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)):
(body[dir=rtl] .data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)):
(.data-grid .right div):
(body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child):
(body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child):
(.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after):
(body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after):
(body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after):
(.data-grid th.sort-ascending > div:first-child::after):
(.data-grid th.sort-descending > div:first-child::after):
(.data-grid tr.parent td.disclosure::before):
(body[dir=ltr] .data-grid tr.parent td.disclosure::before):
(body[dir=rtl] .data-grid tr.parent td.disclosure::before):
(.data-grid td .icon):
(body[dir=ltr] .data-grid td .icon):
(body[dir=rtl] .data-grid td .icon):
(.data-grid td .go-to-arrow):
(body[dir=ltr] .data-grid td .go-to-arrow):
(body[dir=rtl] .data-grid td .go-to-arrow):
(.data-grid .resizer):
(body[dir=ltr] .data-grid .resizer):
(body[dir=rtl] .data-grid .resizer):
(.data-grid table:matches(.header, .data)):
(body[dir=ltr] .data-grid table:matches(.header, .data)):
(body[dir=rtl] .data-grid table:matches(.header, .data)):
(body[dir=ltr] .data-grid :matches(th, td):first-child):
(body[dir=rtl] .data-grid :matches(th, td):first-child):
(@media (-webkit-min-device-pixel-ratio: 2)):
(.data-grid :matches(th, td):not(:last-child)): Deleted.
(.data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)): Deleted.
(.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child): Deleted.
(.data-grid table.header, .data-grid table.data): Deleted.
* UserInterface/Views/DataGrid.js:
(WebInspector.DataGrid.prototype._positionResizerElements):
(WebInspector.DataGrid.prototype._positionHeaderViews):
(WebInspector.DataGrid.prototype.resizerDragging):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (213621 => 213622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2017-03-09 03:35:13 UTC (rev 213621)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-03-09 03:44:17 UTC (rev 213622)
</span><span class="lines">@@ -1,3 +1,57 @@
</span><ins>+2017-03-08 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: RTL: table header columns and cells don't line up, dragging seems backwards
+ https://bugs.webkit.org/show_bug.cgi?id=168289
+
+ Reviewed by Brian Burg.
+
+ Changed the algorithm used to position columns when in RTL to use right offsets instead of
+ left offsets. This also applies to the resizer elements between columns.
+
+ * UserInterface/Views/DataGrid.css:
+ (.data-grid):
+ (.data-grid th):
+ (body[dir=ltr] .data-grid :matches(th, td):not(:last-child)):
+ (body[dir=rtl] .data-grid :matches(th, td):not(:last-child)):
+ (.data-grid th:matches(.sort-ascending, .sort-descending)):
+ (body[dir=ltr] .data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)):
+ (body[dir=rtl] .data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)):
+ (.data-grid .right div):
+ (body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child):
+ (body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child):
+ (.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after):
+ (body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after):
+ (body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after):
+ (.data-grid th.sort-ascending > div:first-child::after):
+ (.data-grid th.sort-descending > div:first-child::after):
+ (.data-grid tr.parent td.disclosure::before):
+ (body[dir=ltr] .data-grid tr.parent td.disclosure::before):
+ (body[dir=rtl] .data-grid tr.parent td.disclosure::before):
+ (.data-grid td .icon):
+ (body[dir=ltr] .data-grid td .icon):
+ (body[dir=rtl] .data-grid td .icon):
+ (.data-grid td .go-to-arrow):
+ (body[dir=ltr] .data-grid td .go-to-arrow):
+ (body[dir=rtl] .data-grid td .go-to-arrow):
+ (.data-grid .resizer):
+ (body[dir=ltr] .data-grid .resizer):
+ (body[dir=rtl] .data-grid .resizer):
+ (.data-grid table:matches(.header, .data)):
+ (body[dir=ltr] .data-grid table:matches(.header, .data)):
+ (body[dir=rtl] .data-grid table:matches(.header, .data)):
+ (body[dir=ltr] .data-grid :matches(th, td):first-child):
+ (body[dir=rtl] .data-grid :matches(th, td):first-child):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+ (.data-grid :matches(th, td):not(:last-child)): Deleted.
+ (.data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)): Deleted.
+ (.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child): Deleted.
+ (.data-grid table.header, .data-grid table.data): Deleted.
+
+ * UserInterface/Views/DataGrid.js:
+ (WebInspector.DataGrid.prototype._positionResizerElements):
+ (WebInspector.DataGrid.prototype._positionHeaderViews):
+ (WebInspector.DataGrid.prototype.resizerDragging):
+
</ins><span class="cx"> 2017-03-08 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Should be able to see where Resources came from (Memory Cache, Disk Cache)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (213621 => 213622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2017-03-09 03:35:13 UTC (rev 213621)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2017-03-09 03:44:17 UTC (rev 213622)
</span><span class="lines">@@ -26,6 +26,9 @@
</span><span class="cx"> .data-grid {
</span><span class="cx"> position: relative;
</span><span class="cx"> outline: none;
</span><ins>+
+ --data-grid-column-border-start: 1px solid transparent;
+ --data-grid-column-border-end: 0.5px solid var(--border-color);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid .highlight {
</span><span class="lines">@@ -75,24 +78,24 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid th {
</span><del>- text-align: left;
</del><ins>+ height: 22px;
+ padding: 0 6px;
+ text-align: start;
</ins><span class="cx"> vertical-align: middle;
</span><del>-
- background-color: white;
-
</del><span class="cx"> font-weight: normal;
</span><del>-
- height: 22px;
- padding: 0 6px;
-
</del><span class="cx"> white-space: nowrap;
</span><ins>+ background-color: white;
</ins><span class="cx"> overflow: hidden;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid :matches(th, td):not(:last-child) {
- border-right: 0.5px solid var(--border-color);
</del><ins>+body[dir=ltr] .data-grid :matches(th, td):not(:last-child) {
+ border-right: var(--data-grid-column-border-end);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=rtl] .data-grid :matches(th, td):not(:last-child) {
+ border-left: var(--data-grid-column-border-end);
+}
+
</ins><span class="cx"> .data-grid th.sortable:active {
</span><span class="cx"> background-color: hsl(0, 0%, 70%);
</span><span class="cx"> }
</span><span class="lines">@@ -99,6 +102,8 @@
</span><span class="cx">
</span><span class="cx"> .data-grid th:matches(.sort-ascending, .sort-descending) {
</span><span class="cx"> background-color: hsl(0, 0%, 90%);
</span><ins>+
+ --data-grid-sort-div-first-child-padding-end: 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid tr.filler {
</span><span class="lines">@@ -177,10 +182,14 @@
</span><span class="cx"> font-variant-numeric: tabular-nums;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child) {
</del><ins>+body[dir=ltr] .data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child) {
</ins><span class="cx"> border-right-color: hsl(210, 100%, 40%);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=rtl] .data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child) {
+ border-left-color: hsl(210, 100%, 40%);
+}
+
</ins><span class="cx"> .data-grid :matches(th, td) > div {
</span><span class="cx"> white-space: nowrap;
</span><span class="cx"> text-overflow: ellipsis;
</span><span class="lines">@@ -192,7 +201,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid .right div {
</span><del>- text-align: right;
</del><ins>+ text-align: end;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid th.sortable div {
</span><span class="lines">@@ -199,46 +208,41 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
- padding-right: 12px;
</del><ins>+body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
+ padding-right: var(--data-grid-sort-div-first-child-padding-end);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid th.sort-ascending > div:first-child::after {
</del><ins>+body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
+ padding-left: var(--data-grid-sort-div-first-child-padding-end);
+}
+
+.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 1px;
</span><span class="cx"> bottom: 0;
</span><del>- right: 0;
-
</del><ins>+ width: 9px;
+ height: 8px;
</ins><span class="cx"> margin-bottom: auto;
</span><span class="cx"> margin-top: auto;
</span><del>-
- width: 9px;
- height: 8px;
-
</del><span class="cx"> content: "";
</span><del>-
- background-image: url(../Images/SortIndicatorArrows.svg#up-arrow-normal);
</del><span class="cx"> background-size: 9px 8px;
</span><span class="cx"> background-repeat: no-repeat;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid th.sort-descending > div:first-child::after {
- position: absolute;
- top: 1px;
- bottom: 0;
</del><ins>+body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
</ins><span class="cx"> right: 0;
</span><ins>+}
</ins><span class="cx">
</span><del>- margin-bottom: auto;
- margin-top: auto;
</del><ins>+body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
+ left: 0;
+}
</ins><span class="cx">
</span><del>- width: 9px;
- height: 8px;
</del><ins>+.data-grid th.sort-ascending > div:first-child::after {
+ background-image: url(../Images/SortIndicatorArrows.svg#up-arrow-normal);
+}
</ins><span class="cx">
</span><del>- content: "";
-
</del><ins>+.data-grid th.sort-descending > div:first-child::after {
</ins><span class="cx"> background-image: url(../Images/SortIndicatorArrows.svg#down-arrow-normal);
</span><del>- background-size: 9px 8px;
- background-repeat: no-repeat;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid button {
</span><span class="lines">@@ -246,19 +250,23 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid tr.parent td.disclosure::before {
</span><del>- float: left;
-
</del><ins>+ width: 13px;
+ height: 100%;
</ins><span class="cx"> content: "";
</span><del>-
</del><span class="cx"> background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
</span><span class="cx"> background-position-y: center;
</span><span class="cx"> background-size: 13px 13px;
</span><span class="cx"> background-repeat: no-repeat;
</span><ins>+}
</ins><span class="cx">
</span><del>- width: 13px;
- height: 100%;
</del><ins>+body[dir=ltr] .data-grid tr.parent td.disclosure::before {
+ float: left;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=rtl] .data-grid tr.parent td.disclosure::before {
+ float: right;
+}
+
</ins><span class="cx"> .data-grid tr.parent.expanded td.disclosure::before {
</span><span class="cx"> background-image: url(../Images/DisclosureTriangles.svg#open-normal);
</span><span class="cx"> }
</span><span class="lines">@@ -307,22 +315,37 @@
</span><span class="cx">
</span><span class="cx"> .data-grid td .icon {
</span><span class="cx"> display: inline-block;
</span><del>- vertical-align: top;
-
</del><span class="cx"> width: 16px;
</span><span class="cx"> height: 16px;
</span><ins>+ vertical-align: top;
</ins><span class="cx">
</span><del>- margin-right: 2px;
</del><ins>+ --data-grid-icon-margin-end: 2px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=ltr] .data-grid td .icon {
+ margin-right: var(--data-grid-icon-margin-end);
+}
+
+body[dir=rtl] .data-grid td .icon {
+ margin-left: var(--data-grid-icon-margin-end);
+}
+
</ins><span class="cx"> .data-grid td .go-to-arrow {
</span><del>- float: right;
-
</del><span class="cx"> display: none;
</span><span class="cx">
</span><del>- margin-left: 2px;
</del><ins>+ --data-grid-go-to-arrow-margin-start: 2px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=ltr] .data-grid td .go-to-arrow {
+ float: right;
+ margin-left: var(--data-grid-go-to-arrow-margin-start);
+}
+
+body[dir=rtl] .data-grid td .go-to-arrow {
+ float: left;
+ margin-right: var(--data-grid-go-to-arrow-margin-start);
+}
+
</ins><span class="cx"> .data-grid tr:matches(.selected, :hover) .go-to-arrow {
</span><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="lines">@@ -329,25 +352,46 @@
</span><span class="cx">
</span><span class="cx"> .data-grid .resizer {
</span><span class="cx"> z-index: var(--z-index-resizer);
</span><del>- transform: translateX(-2.5px);
</del><ins>+
+ --data-grid-resizer-translateX: -2.5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid table.header,
-.data-grid table.data {
- /* Hide right border from first hidden columns. */
</del><ins>+body[dir=ltr] .data-grid .resizer {
+ transform: translateX(var(--data-grid-resizer-translateX));
+}
+
+body[dir=rtl] .data-grid .resizer {
+ transform: translateX(calc(-1 * var(--data-grid-resizer-translateX)));
+}
+
+.data-grid table:matches(.header, .data) {
+ /* Hide starting border from first hidden columns. */
</ins><span class="cx"> width: calc(100% + 1px);
</span><del>- margin-left: -1px;
</del><ins>+
+ --data-grid-table-margin-start: -1px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid :matches(th, td):first-child {
- border-left: 1px solid transparent;
</del><ins>+body[dir=ltr] .data-grid table:matches(.header, .data) {
+ margin-left: var(--data-grid-table-margin-start);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=rtl] .data-grid table:matches(.header, .data) {
+ margin-right: var(--data-grid-table-margin-start);
+}
+
+body[dir=ltr] .data-grid :matches(th, td):first-child {
+ border-left: var(--data-grid-column-border-start);
+}
+
+body[dir=rtl] .data-grid :matches(th, td):first-child {
+ border-right: var(--data-grid-column-border-start);
+}
+
</ins><span class="cx"> @media (-webkit-min-device-pixel-ratio: 2) {
</span><del>- .data-grid table.header,
- .data-grid table.data {
</del><ins>+ .data-grid table:matches(.header, .data) {
</ins><span class="cx"> width: calc(100% + 0.5px);
</span><del>- margin-left: -0.5px;
</del><ins>+
+ --data-grid-table-margin-start: -0.5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid :matches(th, td):first-child {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (213621 => 213622)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2017-03-09 03:35:13 UTC (rev 213621)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2017-03-09 03:44:17 UTC (rev 213622)
</span><span class="lines">@@ -950,13 +950,13 @@
</span><span class="cx">
</span><span class="cx"> _positionResizerElements()
</span><span class="cx"> {
</span><del>- var left = 0;
</del><ins>+ let leadingOffset = 0;
</ins><span class="cx"> var previousResizer = null;
</span><span class="cx">
</span><span class="cx"> // Make n - 1 resizers for n columns.
</span><span class="cx"> var numResizers = this.orderedColumns.length - 1;
</span><span class="cx">
</span><del>- // Calculate left offsets.
</del><ins>+ // Calculate leading offsets.
</ins><span class="cx"> // Get the width of the cell in the first (and only) row of the
</span><span class="cx"> // header table in order to determine the width of the column, since
</span><span class="cx"> // it is not possible to query a column for its width.
</span><span class="lines">@@ -963,11 +963,11 @@
</span><span class="cx"> var cells = this._headerTableBodyElement.rows[0].cells;
</span><span class="cx"> var columnWidths = [];
</span><span class="cx"> for (var i = 0; i < numResizers; ++i) {
</span><del>- left += cells[i].getBoundingClientRect().width;
- columnWidths.push(left);
</del><ins>+ leadingOffset += cells[i].getBoundingClientRect().width;
+ columnWidths.push(leadingOffset);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- // Apply left offsets.
</del><ins>+ // Apply leading offsets.
</ins><span class="cx"> for (var i = 0; i < numResizers; ++i) {
</span><span class="cx"> // Create a new resizer if one does not exist for this column.
</span><span class="cx"> // This resizer is associated with the column to its right.
</span><span class="lines">@@ -977,11 +977,11 @@
</span><span class="cx"> this.element.appendChild(resizer.element);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- left = columnWidths[i];
</del><ins>+ leadingOffset = columnWidths[i];
</ins><span class="cx">
</span><span class="cx"> if (this._isColumnVisible(this.orderedColumns[i])) {
</span><span class="cx"> resizer.element.style.removeProperty("display");
</span><del>- resizer.element.style.left = left + "px";
</del><ins>+ resizer.element.style.setProperty(WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL ? "right" : "left", `${leadingOffset}px`);
</ins><span class="cx"> resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol] = i;
</span><span class="cx"> if (previousResizer)
</span><span class="cx"> previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = i;
</span><span class="lines">@@ -998,12 +998,12 @@
</span><span class="cx">
</span><span class="cx"> _positionHeaderViews()
</span><span class="cx"> {
</span><del>- let left = 0;
</del><ins>+ let leadingOffset = 0;
</ins><span class="cx"> let headerViews = [];
</span><del>- let lefts = [];
</del><ins>+ let offsets = [];
</ins><span class="cx"> let columnWidths = [];
</span><span class="cx">
</span><del>- // Calculate left offsets and widths.
</del><ins>+ // Calculate leading offsets and widths.
</ins><span class="cx"> for (let columnIdentifier of this.orderedColumns) {
</span><span class="cx"> let column = this.columns.get(columnIdentifier);
</span><span class="cx"> console.assert(column, "Missing column data for header cell with columnIdentifier " + columnIdentifier);
</span><span class="lines">@@ -1014,17 +1014,17 @@
</span><span class="cx"> let headerView = column["headerView"];
</span><span class="cx"> if (headerView) {
</span><span class="cx"> headerViews.push(headerView);
</span><del>- lefts.push(left);
</del><ins>+ offsets.push(leadingOffset);
</ins><span class="cx"> columnWidths.push(columnWidth);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- left += columnWidth;
</del><ins>+ leadingOffset += columnWidth;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- // Apply left offsets and widths.
</del><ins>+ // Apply leading offsets and widths.
</ins><span class="cx"> for (let i = 0; i < headerViews.length; ++i) {
</span><span class="cx"> let headerView = headerViews[i];
</span><del>- headerView.element.style.left = lefts[i] + "px";
</del><ins>+ headerView.element.style.setProperty(WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL ? "right" : "left", `${offsets[i]}px`);
</ins><span class="cx"> headerView.element.style.width = columnWidths[i] + "px";
</span><span class="cx"> headerView.updateLayout(WebInspector.View.LayoutReason.Resize);
</span><span class="cx"> }
</span><span class="lines">@@ -1791,41 +1791,49 @@
</span><span class="cx"> if (resizer !== this._currentResizer)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- // Constrain the dragpoint to be within the containing div of the
- // datagrid.
- var dragPoint = (resizer.initialPosition - positionDelta) - this.element.totalOffsetLeft;
</del><ins>+ let isRTL = WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL;
+ if (isRTL)
+ positionDelta *= -1;
+
+ // Constrain the dragpoint to be within the containing div of the datagrid.
+ let dragPoint = 0;
+ if (isRTL)
+ dragPoint += this.element.totalOffsetRight - resizer.initialPosition - positionDelta;
+ else
+ dragPoint += resizer.initialPosition - this.element.totalOffsetLeft - positionDelta;
+
</ins><span class="cx"> // Constrain the dragpoint to be within the space made up by the
</span><span class="cx"> // column directly to the left and the column directly to the right.
</span><span class="cx"> var leftColumnIndex = resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol];
</span><span class="cx"> var rightColumnIndex = resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol];
</span><span class="cx"> var firstRowCells = this._headerTableBodyElement.rows[0].cells;
</span><del>- var leftEdgeOfPreviousColumn = 0;
- for (var i = 0; i < leftColumnIndex; i++)
- leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
</del><ins>+ let leadingEdgeOfPreviousColumn = 0;
+ for (let i = 0; i < leftColumnIndex; ++i)
+ leadingEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
</ins><span class="cx">
</span><span class="cx"> // Differences for other resize methods
</span><span class="cx"> if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.Last) {
</span><span class="cx"> rightColumnIndex = this.resizers.length;
</span><span class="cx"> } else if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.First) {
</span><del>- leftEdgeOfPreviousColumn += firstRowCells[leftColumnIndex].offsetWidth - firstRowCells[0].offsetWidth;
</del><ins>+ leadingEdgeOfPreviousColumn += firstRowCells[leftColumnIndex].offsetWidth - firstRowCells[0].offsetWidth;
</ins><span class="cx"> leftColumnIndex = 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftColumnIndex].offsetWidth + firstRowCells[rightColumnIndex].offsetWidth;
</del><ins>+ let trailingEdgeOfNextColumn = leadingEdgeOfPreviousColumn + firstRowCells[leftColumnIndex].offsetWidth + firstRowCells[rightColumnIndex].offsetWidth;
</ins><span class="cx">
</span><span class="cx"> // Give each column some padding so that they don't disappear.
</span><del>- var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding;
- var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding;
</del><ins>+ let leftMinimum = leadingEdgeOfPreviousColumn + this.ColumnResizePadding;
+ let rightMaximum = trailingEdgeOfNextColumn - this.ColumnResizePadding;
</ins><span class="cx">
</span><span class="cx"> dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
</span><span class="cx">
</span><del>- resizer.element.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
</del><ins>+ resizer.element.style.setProperty(isRTL ? "right" : "left", `${dragPoint - this.CenterResizerOverBorderAdjustment}px`);
</ins><span class="cx">
</span><del>- var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTableElement.offsetWidth) * 100) + "%";
</del><ins>+ let percentLeftColumn = (((dragPoint - leadingEdgeOfPreviousColumn) / this._dataTableElement.offsetWidth) * 100) + "%";
</ins><span class="cx"> this._headerTableColumnGroupElement.children[leftColumnIndex].style.width = percentLeftColumn;
</span><span class="cx"> this._dataTableColumnGroupElement.children[leftColumnIndex].style.width = percentLeftColumn;
</span><span class="cx">
</span><del>- var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._dataTableElement.offsetWidth) * 100) + "%";
</del><ins>+ let percentRightColumn = (((trailingEdgeOfNextColumn - dragPoint) / this._dataTableElement.offsetWidth) * 100) + "%";
</ins><span class="cx"> this._headerTableColumnGroupElement.children[rightColumnIndex].style.width = percentRightColumn;
</span><span class="cx"> this._dataTableColumnGroupElement.children[rightColumnIndex].style.width = percentRightColumn;
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>