<!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>[214899] 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/214899">214899</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2017-04-04 14:30:29 -0700 (Tue, 04 Apr 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: RTL: layout issues in debugger dashboard, arrows are on wrong side
https://bugs.webkit.org/show_bug.cgi?id=170425
Reviewed by Devin Rousso.
We need to move the up/down dashboard arrows to the trailing side for RTL.
Clean up some messy spacing rules so that the source location does not
overlap the arrows or get too close to the function icon.
* UserInterface/Views/DashboardContainerView.css:
(.toolbar .dashboard):
(body[dir=ltr] .toolbar .dashboard):
(body[dir=rtl] .toolbar .dashboard):
(.dashboard-container .advance-arrow):
(body[dir=ltr] .dashboard-container .advance-arrow):
(body[dir=rtl] .dashboard-container .advance-arrow):
(.toolbar.label-only .dashboard-container .advance-arrow):
(body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow):
(body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow):
* UserInterface/Views/DebuggerDashboardView.css:
(.toolbar .dashboard.debugger):
(body[dir=ltr] .toolbar .dashboard.debugger):
(body[dir=rtl] .toolbar .dashboard.debugger):
(.dashboard.debugger .navigation-bar):
(body[dir=ltr] .dashboard.debugger .navigation-bar):
(body[dir=rtl] .dashboard.debugger .navigation-bar):
(.dashboard.debugger > .location):
(.dashboard.debugger > .location > :first-child):
(body[dir=ltr] .dashboard.debugger > .location > :last-child):
(body[dir=rtl] .dashboard.debugger > .location > :last-child):
(.dashboard.debugger > .location .function-icon):
(body[dir=ltr] .dashboard.debugger > .location .function-icon):
(body[dir=rtl] .dashboard.debugger > .location .function-icon):
(.dashboard.debugger > .location .go-to-link):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (214898 => 214899)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2017-04-04 21:22:05 UTC (rev 214898)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-04-04 21:30:29 UTC (rev 214899)
</span><span class="lines">@@ -1,3 +1,40 @@
</span><ins>+2017-04-04 Brian Burg <bburg@apple.com>
+
+ Web Inspector: RTL: layout issues in debugger dashboard, arrows are on wrong side
+ https://bugs.webkit.org/show_bug.cgi?id=170425
+
+ Reviewed by Devin Rousso.
+
+ We need to move the up/down dashboard arrows to the trailing side for RTL.
+ Clean up some messy spacing rules so that the source location does not
+ overlap the arrows or get too close to the function icon.
+
+ * UserInterface/Views/DashboardContainerView.css:
+ (.toolbar .dashboard):
+ (body[dir=ltr] .toolbar .dashboard):
+ (body[dir=rtl] .toolbar .dashboard):
+ (.dashboard-container .advance-arrow):
+ (body[dir=ltr] .dashboard-container .advance-arrow):
+ (body[dir=rtl] .dashboard-container .advance-arrow):
+ (.toolbar.label-only .dashboard-container .advance-arrow):
+ (body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow):
+ (body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow):
+ * UserInterface/Views/DebuggerDashboardView.css:
+ (.toolbar .dashboard.debugger):
+ (body[dir=ltr] .toolbar .dashboard.debugger):
+ (body[dir=rtl] .toolbar .dashboard.debugger):
+ (.dashboard.debugger .navigation-bar):
+ (body[dir=ltr] .dashboard.debugger .navigation-bar):
+ (body[dir=rtl] .dashboard.debugger .navigation-bar):
+ (.dashboard.debugger > .location):
+ (.dashboard.debugger > .location > :first-child):
+ (body[dir=ltr] .dashboard.debugger > .location > :last-child):
+ (body[dir=rtl] .dashboard.debugger > .location > :last-child):
+ (.dashboard.debugger > .location .function-icon):
+ (body[dir=ltr] .dashboard.debugger > .location .function-icon):
+ (body[dir=rtl] .dashboard.debugger > .location .function-icon):
+ (.dashboard.debugger > .location .go-to-link):
+
</ins><span class="cx"> 2017-04-03 Brian Burg <bburg@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: RTL: results in Search navigation sidebar have misplaced highlights
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (214898 => 214899)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2017-04-04 21:22:05 UTC (rev 214898)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2017-04-04 21:30:29 UTC (rev 214899)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -72,11 +72,22 @@
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="cx">
</span><del>- padding: 0 10px 0 5px;
</del><ins>+ animation-duration: 0.4s;
</ins><span class="cx">
</span><del>- animation-duration: 0.4s;
</del><ins>+ --dashboard-padding-start: 10px;
+ --dashboard-padding-end: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=ltr] .toolbar .dashboard {
+ padding-left: var(--dashboard-padding-start);
+ padding-right: var(--dashboard-padding-end);
+}
+
+body[dir=rtl] .toolbar .dashboard {
+ padding-left: var(--dashboard-padding-end);
+ padding-right: var(--dashboard-padding-start);
+}
+
</ins><span class="cx"> .toolbar .dashboard.visible {
</span><span class="cx"> z-index: 1; /* Establish a stacking context. */
</span><span class="cx"> }
</span><span class="lines">@@ -123,7 +134,6 @@
</span><span class="cx">
</span><span class="cx"> .dashboard-container .advance-arrow {
</span><span class="cx"> position: absolute;
</span><del>- right: 0;
</del><span class="cx"> width: 19px;
</span><span class="cx"> top: 0;
</span><span class="cx"> bottom: 0;
</span><span class="lines">@@ -138,8 +148,18 @@
</span><span class="cx"> transition-property: opacity;
</span><span class="cx"> transition-duration: 0.2s;
</span><span class="cx"> background-clip: content-box;
</span><ins>+
+ --dashboard-advance-arrow-offset-end: 0px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=ltr] .dashboard-container .advance-arrow {
+ right: var(--dashboard-advance-arrow-offset-end);
+}
+
+body[dir=rtl] .dashboard-container .advance-arrow {
+ left: var(--dashboard-advance-arrow-offset-end);
+}
+
</ins><span class="cx"> .dashboard-container .advance-arrow:hover {
</span><span class="cx"> opacity: 0.8;
</span><span class="cx"> }
</span><span class="lines">@@ -156,10 +176,26 @@
</span><span class="cx"> .toolbar.label-only .dashboard-container .advance-arrow {
</span><span class="cx"> width: 8px;
</span><span class="cx"> height: 8px;
</span><ins>+ margin-top: 2px;
+ margin-bottom: 2px;
</ins><span class="cx"> margin: 2px 4px 2px 2px;
</span><ins>+
</ins><span class="cx"> background-size: 6px;
</span><ins>+
+ --dashboard-advance-arrow-margin-start: 2px;
+ --dashboard-advance-arrow-margin-end: 4px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow {
+ margin-left: var(--dashboard-advance-arrow-margin-start);
+ margin-right: var(--dashboard-advance-arrow-margin-end);
+}
+
+body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow {
+ margin-left: var(--dashboard-advance-arrow-margin-end);
+ margin-right: var(--dashboard-advance-arrow-margin-start);
+}
+
</ins><span class="cx"> .dashboard-container .advance-arrow.advance-forward {
</span><span class="cx"> top: 0;
</span><span class="cx"> background-position: 50% 4px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css (214898 => 214899)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css 2017-04-04 21:22:05 UTC (rev 214898)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css 2017-04-04 21:30:29 UTC (rev 214899)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2014 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2014-2017 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -31,9 +31,21 @@
</span><span class="cx"> text-align: center;
</span><span class="cx"> text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
</span><span class="cx"> color: hsl(0, 0%, 23%);
</span><del>- padding: 0 12px 0 5px;
</del><ins>+
+ --debugger-dashboard-padding-start: 5px;
+ --debugger-dashboard-padding-end: 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=ltr] .toolbar .dashboard.debugger {
+ padding-left: var(--debugger-dashboard-padding-start);
+ padding-right: var(--debugger-dashboard-padding-end);
+}
+
+body[dir=rtl] .toolbar .dashboard.debugger {
+ padding-left: var(--debugger-dashboard-padding-end);
+ padding-right: var(--debugger-dashboard-padding-start);
+}
+
</ins><span class="cx"> .dashboard.debugger > .message {
</span><span class="cx"> font-weight: bold;
</span><span class="cx"> }
</span><span class="lines">@@ -40,9 +52,18 @@
</span><span class="cx">
</span><span class="cx"> .dashboard.debugger .navigation-bar {
</span><span class="cx"> border: 0;
</span><del>- margin-right: 4px;
</del><ins>+
+ --debugger-dashboard-navigation-bar-margin-end: 4px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+body[dir=ltr] .dashboard.debugger .navigation-bar {
+ margin-right: var(--debugger-dashboard-navigation-bar-margin-end);
+}
+
+body[dir=rtl] .dashboard.debugger .navigation-bar {
+ margin-left: var(--debugger-dashboard-navigation-bar-margin-end);
+}
+
</ins><span class="cx"> .toolbar:not(.small-size) .dashboard.debugger .navigation-bar {
</span><span class="cx"> margin-top: 1px;
</span><span class="cx"> }
</span><span class="lines">@@ -104,6 +125,8 @@
</span><span class="cx"> .dashboard.debugger > .location {
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> flex: initial;
</span><ins>+
+ --debugger-dashboard-location-trailing-margin-end: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .dashboard.debugger > .location > * {
</span><span class="lines">@@ -114,9 +137,17 @@
</span><span class="cx"> align-self: center;
</span><span class="cx"> width: 16px;
</span><span class="cx"> height: 16px;
</span><del>- margin-right: 5px;
</del><span class="cx"> }
</span><span class="cx">
</span><ins>+/* Add spacing between the ellipsis'd location and the up/down arrows. */
+body[dir=ltr] .dashboard.debugger > .location > :last-child {
+ margin-right: var(--debugger-dashboard-location-trailing-margin-end);
+}
+
+body[dir=rtl] .dashboard.debugger > .location > :last-child {
+ margin-left: var(--debugger-dashboard-location-trailing-margin-end);
+}
+
</ins><span class="cx"> .toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child) {
</span><span class="cx"> margin-top: 1px;
</span><span class="cx"> }
</span><span class="lines">@@ -126,6 +157,18 @@
</span><span class="cx"> height: 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.dashboard.debugger > .location .function-icon {
+ --debugger-dashboard-function-icon-margin-end: 3px;
+}
+
+body[dir=ltr] .dashboard.debugger > .location .function-icon {
+ margin-right: var(--debugger-dashboard-function-icon-margin-end);
+}
+
+body[dir=rtl] .dashboard.debugger > .location .function-icon {
+ margin-left: var(--debugger-dashboard-function-icon-margin-end);
+}
+
</ins><span class="cx"> .dashboard.debugger > .location .function-name {
</span><span class="cx"> color: hsl(0, 0%, 11%);
</span><span class="cx"> padding-bottom: 1px;
</span><span class="lines">@@ -138,7 +181,7 @@
</span><span class="cx"> .dashboard.debugger > .location .go-to-link {
</span><span class="cx"> padding-bottom: 1px;
</span><span class="cx"> -webkit-text-decoration-color: hsl(0, 0%, 66%);
</span><del>-
</del><ins>+
</ins><span class="cx"> flex: initial;
</span><span class="cx"> text-overflow: ellipsis;
</span><span class="cx"> overflow: hidden;
</span></span></pre>
</div>
</div>
</body>
</html>