<!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>[214048] 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/214048">214048</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2017-03-16 10:19:53 -0700 (Thu, 16 Mar 2017)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: RTL: add FindBanner support for RTL layout
https://bugs.webkit.org/show_bug.cgi?id=168723

Reviewed by Timothy Hatcher.

Due to the large number of CSS tricks used by this widget, adding RTL
support involves changing a large number of rules. The important parts:

- Use '.segmented.{previous,next}-result' instead of '.segmented.
{left,right}', this makes the style rules way less confusing for RTL.

- Flip icons so icons look like &quot;&lt; &gt;&quot; but actions are reversed.

- Get rid of the weird expanding button divider. This is impossible
to mirror with the existing adjacent sibling combinator, and it does
not match the system appearance. Just replace the mini-divider with a
full divider and remove related dynamic rules that trigger on :active.

- Always keep the button divider between next/previous on the rightmost
button, to avoid subtle differences between LTR and RTL.

- Fix some mistakes where we weren't using --border-color and also
didn't adjust the handcoded border color for the inactive window case.

* UserInterface/Views/FindBanner.css:
(.find-banner):
(body[dir=ltr] .find-banner &gt; :first-child,):
(body[dir=ltr] .find-banner &gt; :last-child,):
(.find-banner &gt; input[type=&quot;search&quot;]):
(body[dir=ltr] .find-banner &gt; input[type=&quot;search&quot;]):
(body[dir=rtl] .find-banner &gt; input[type=&quot;search&quot;]):
(.find-banner &gt; button:active:not(:disabled)):
(.find-banner &gt; button.segmented):
(.find-banner &gt; button.segmented.previous-result):
(body[dir=ltr] .find-banner &gt; button.segmented.previous-result):
(body[dir=rtl] .find-banner &gt; button.segmented.previous-result):
(body[dir=ltr] .find-banner &gt; button.segmented.previous-result &gt; .glyph):
(body[dir=rtl] .find-banner &gt; button.segmented.previous-result &gt; .glyph):
(body[dir=ltr] .find-banner &gt; button.segmented.previous-result:active:not(:disabled) &gt; .glyph):
(body[dir=rtl] .find-banner &gt; button.segmented.previous-result:active:not(:disabled) &gt; .glyph):
(.find-banner &gt; button.segmented.next-result):
(body[dir=ltr] .find-banner &gt; button.segmented.next-result):
(body[dir=rtl] .find-banner &gt; button.segmented.next-result):
(body[dir=ltr] .find-banner &gt; button.segmented.next-result &gt; .glyph):
(body[dir=rtl] .find-banner &gt; button.segmented.next-result &gt; .glyph):
(body[dir=ltr] .find-banner &gt; button.segmented.next-result:active:not(:disabled) &gt; .glyph):
(body[dir=rtl] .find-banner &gt; button.segmented.next-result:active:not(:disabled) &gt; .glyph):
(.find-banner.console-find-banner &gt; input[type=&quot;search&quot;]):
(body[dir=ltr] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]):
(body[dir=rtl] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]):
(body[dir=ltr] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container):
(body[dir=rtl] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container):
(.find-banner &gt; :first-child): Deleted.
(.find-banner &gt; :last-child): Deleted.
(.find-banner &gt; button.segmented.left): Deleted.
(.find-banner &gt; button:not(:active).segmented.right:before): Deleted.
(.find-banner &gt; button.segmented.left:active + button.segmented.right,): Deleted.
(.find-banner &gt; button.segmented.left:active + button.segmented.right:before): Deleted.
(.find-banner &gt; button.segmented.left &gt; .glyph): Deleted.
(.find-banner &gt; button.segmented.left:active:not(:disabled) &gt; .glyph): Deleted.
(.find-banner &gt; button.segmented.right): Deleted.
(.find-banner &gt; button.segmented.right &gt; .glyph): Deleted.
(.find-banner &gt; button.segmented.right:active:not(:disabled) &gt; .glyph): Deleted.
(.find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container): Deleted.

* UserInterface/Views/FindBanner.js:
(WebInspector.FindBanner):
Change left and right to logical names for the buttons, and inline
some style classes with single uses.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFindBannercss">trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFindBannerjs">trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (214047 => 214048)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2017-03-16 17:16:56 UTC (rev 214047)
+++ trunk/Source/WebInspectorUI/ChangeLog        2017-03-16 17:19:53 UTC (rev 214048)
</span><span class="lines">@@ -1,3 +1,75 @@
</span><ins>+2017-03-16  Brian Burg  &lt;bburg@apple.com&gt;
+
+        Web Inspector: RTL: add FindBanner support for RTL layout
+        https://bugs.webkit.org/show_bug.cgi?id=168723
+
+        Reviewed by Timothy Hatcher.
+
+        Due to the large number of CSS tricks used by this widget, adding RTL
+        support involves changing a large number of rules. The important parts:
+
+        - Use '.segmented.{previous,next}-result' instead of '.segmented.
+        {left,right}', this makes the style rules way less confusing for RTL.
+
+        - Flip icons so icons look like &quot;&lt; &gt;&quot; but actions are reversed.
+
+        - Get rid of the weird expanding button divider. This is impossible
+        to mirror with the existing adjacent sibling combinator, and it does
+        not match the system appearance. Just replace the mini-divider with a
+        full divider and remove related dynamic rules that trigger on :active.
+
+        - Always keep the button divider between next/previous on the rightmost
+        button, to avoid subtle differences between LTR and RTL.
+
+        - Fix some mistakes where we weren't using --border-color and also
+        didn't adjust the handcoded border color for the inactive window case.
+
+        * UserInterface/Views/FindBanner.css:
+        (.find-banner):
+        (body[dir=ltr] .find-banner &gt; :first-child,):
+        (body[dir=ltr] .find-banner &gt; :last-child,):
+        (.find-banner &gt; input[type=&quot;search&quot;]):
+        (body[dir=ltr] .find-banner &gt; input[type=&quot;search&quot;]):
+        (body[dir=rtl] .find-banner &gt; input[type=&quot;search&quot;]):
+        (.find-banner &gt; button:active:not(:disabled)):
+        (.find-banner &gt; button.segmented):
+        (.find-banner &gt; button.segmented.previous-result):
+        (body[dir=ltr] .find-banner &gt; button.segmented.previous-result):
+        (body[dir=rtl] .find-banner &gt; button.segmented.previous-result):
+        (body[dir=ltr] .find-banner &gt; button.segmented.previous-result &gt; .glyph):
+        (body[dir=rtl] .find-banner &gt; button.segmented.previous-result &gt; .glyph):
+        (body[dir=ltr] .find-banner &gt; button.segmented.previous-result:active:not(:disabled) &gt; .glyph):
+        (body[dir=rtl] .find-banner &gt; button.segmented.previous-result:active:not(:disabled) &gt; .glyph):
+        (.find-banner &gt; button.segmented.next-result):
+        (body[dir=ltr] .find-banner &gt; button.segmented.next-result):
+        (body[dir=rtl] .find-banner &gt; button.segmented.next-result):
+        (body[dir=ltr] .find-banner &gt; button.segmented.next-result &gt; .glyph):
+        (body[dir=rtl] .find-banner &gt; button.segmented.next-result &gt; .glyph):
+        (body[dir=ltr] .find-banner &gt; button.segmented.next-result:active:not(:disabled) &gt; .glyph):
+        (body[dir=rtl] .find-banner &gt; button.segmented.next-result:active:not(:disabled) &gt; .glyph):
+        (.find-banner.console-find-banner &gt; input[type=&quot;search&quot;]):
+        (body[dir=ltr] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]):
+        (body[dir=rtl] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]):
+        (body[dir=ltr] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container):
+        (body[dir=rtl] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container):
+        (.find-banner &gt; :first-child): Deleted.
+        (.find-banner &gt; :last-child): Deleted.
+        (.find-banner &gt; button.segmented.left): Deleted.
+        (.find-banner &gt; button:not(:active).segmented.right:before): Deleted.
+        (.find-banner &gt; button.segmented.left:active + button.segmented.right,): Deleted.
+        (.find-banner &gt; button.segmented.left:active + button.segmented.right:before): Deleted.
+        (.find-banner &gt; button.segmented.left &gt; .glyph): Deleted.
+        (.find-banner &gt; button.segmented.left:active:not(:disabled) &gt; .glyph): Deleted.
+        (.find-banner &gt; button.segmented.right): Deleted.
+        (.find-banner &gt; button.segmented.right &gt; .glyph): Deleted.
+        (.find-banner &gt; button.segmented.right:active:not(:disabled) &gt; .glyph): Deleted.
+        (.find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container): Deleted.
+
+        * UserInterface/Views/FindBanner.js:
+        (WebInspector.FindBanner):
+        Change left and right to logical names for the buttons, and inline
+        some style classes with single uses.
+
</ins><span class="cx"> 2017-03-15  Devin Rousso  &lt;webkit@devinrousso.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Selecting text in the console does not do what I expect
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFindBannercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css (214047 => 214048)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css        2017-03-16 17:16:56 UTC (rev 214047)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css        2017-03-16 17:19:53 UTC (rev 214048)
</span><span class="lines">@@ -42,6 +42,8 @@
</span><span class="cx">     transition-timing-function: ease-in;
</span><span class="cx"> 
</span><span class="cx">     z-index: var(--z-index-header);
</span><ins>+
+    --find-banner-outer-child-margin: 8px;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .find-banner.showing {
</span><span class="lines">@@ -64,16 +66,19 @@
</span><span class="cx">     transition-timing-function: ease-out;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; :first-child {
-    margin-left: 8px !important;
</del><ins>+body[dir=ltr] .find-banner &gt; :first-child,
+body[dir=rtl] .find-banner &gt; :last-child {
+    margin-left: var(--find-banner-outer-child-margin) !important;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; :last-child {
-    margin-right: 8px !important;
</del><ins>+body[dir=ltr] .find-banner &gt; :last-child,
+body[dir=rtl] .find-banner &gt; :first-child {
+    margin-right: var(--find-banner-outer-child-margin) !important;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .find-banner &gt; input[type=&quot;search&quot;] {
</span><del>-    margin: 1px -1px 1px 6px;
</del><ins>+    margin-top: 1px;
+    margin-bottom: 1px;
</ins><span class="cx"> 
</span><span class="cx">     width: 30vw;
</span><span class="cx">     min-width: 143px;
</span><span class="lines">@@ -86,10 +91,35 @@
</span><span class="cx">     outline: none;
</span><span class="cx"> 
</span><span class="cx">     border: 1px solid var(--border-color);
</span><del>-    border-radius: 4px 0 0 4px;
</del><ins>+
</ins><span class="cx">     background-color: white;
</span><ins>+
+    --find-banner-search-box-margin-start: 6px;
+    --find-banner-search-box-margin-end: -1px;
+    --find-banner-search-box-border-radius-start: 4px;
+    --find-banner-search-box-border-radius-end: 0;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+body[dir=ltr] .find-banner &gt; input[type=&quot;search&quot;] {
+    margin-left: var(--find-banner-search-box-margin-start);
+    margin-right: var(--find-banner-search-box-margin-end);
+
+    border-top-left-radius: var(--find-banner-search-box-border-radius-start);
+    border-bottom-left-radius: var(--find-banner-search-box-border-radius-start);
+    border-top-right-radius: var(--find-banner-search-box-border-radius-end);
+    border-bottom-right-radius: var(--find-banner-search-box-border-radius-end);
+}
+
+body[dir=rtl] .find-banner &gt; input[type=&quot;search&quot;] {
+    margin-left: var(--find-banner-search-box-margin-end);
+    margin-right: var(--find-banner-search-box-margin-start);
+
+    border-top-left-radius: var(--find-banner-search-box-border-radius-end);
+    border-bottom-left-radius: var(--find-banner-search-box-border-radius-end);
+    border-top-right-radius: var(--find-banner-search-box-border-radius-start);
+    border-bottom-right-radius: var(--find-banner-search-box-border-radius-start);
+}
+
</ins><span class="cx"> .find-banner &gt; button {
</span><span class="cx">     margin: 1px 4px;
</span><span class="cx"> 
</span><span class="lines">@@ -125,64 +155,80 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .find-banner &gt; button:active:not(:disabled) {
</span><del>-    border: 1px solid var(--border-color-dark);
</del><ins>+    border: 1px solid var(--border-color);
</ins><span class="cx">     background-color: var(--button-background-color-pressed);
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .find-banner &gt; button.segmented {
</span><span class="cx">     margin: 1px 0;
</span><ins>+
+    --find-banner-previous-result-border-end: solid 1px var(--border-color);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.left {
</del><ins>+.find-banner &gt; button.segmented.previous-result {
</ins><span class="cx">     border-radius: 0;
</span><del>-    border-right: none;
</del><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button:not(:active).segmented.right:before {
-    content: &quot;&quot;;
-    position: relative;
-    display: block;
-    float: left;
-    width: 1px;
-    height: 13px;
-    right: 6px;
-    top: -1px;
-    background-color: var(--border-color);
</del><ins>+body[dir=ltr] .find-banner &gt; button.segmented.previous-result {
+    border-right: var(--find-banner-previous-result-border-end);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.left:active + button.segmented.right,
-.find-banner &gt; button.segmented.right:active {
-    border-left: solid 1px var(--border-color-dark);
</del><ins>+body[dir=rtl] .find-banner &gt; button.segmented.previous-result {
+    border-left: var(--find-banner-previous-result-border-end);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.left:active + button.segmented.right:before {
-    display: none;
</del><ins>+body[dir=ltr] .find-banner &gt; button.segmented.previous-result &gt; .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#left-arrow-normal);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.left &gt; .glyph {
-    background-image: url(../Images/BackForwardArrows.svg#left-arrow-normal);
</del><ins>+body[dir=rtl] .find-banner &gt; button.segmented.previous-result &gt; .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#right-arrow-normal);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.left:active:not(:disabled) &gt; .glyph {
</del><ins>+body[dir=ltr] .find-banner &gt; button.segmented.previous-result:active:not(:disabled) &gt; .glyph {
</ins><span class="cx">     background-image: url(../Images/BackForwardArrows.svg#left-arrow-active);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.right {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    margin-left: -1px;
-    border-left: none;
</del><ins>+body[dir=rtl] .find-banner &gt; button.segmented.previous-result:active:not(:disabled) &gt; .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#right-arrow-active);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.right &gt; .glyph {
</del><ins>+.find-banner &gt; button.segmented.next-result {
+    --next-result-border-style-start: none;
+    --next-result-border-radius-start: 0;
+    --next-result-glyph-margin-start: 1px;
+}
+
+body[dir=ltr] .find-banner &gt; button.segmented.next-result {
+    border-top-left-radius: var(--next-result-border-radius-start);
+    border-bottom-left-radius: var(--next-result-border-radius-start);
+    border-left: var(--next-result-border-style-start);
+}
+
+body[dir=rtl] .find-banner &gt; button.segmented.next-result {
+    border-top-right-radius: var(--next-result-border-radius-start);
+    border-bottom-right-radius: var(--next-result-border-radius-start);
+    border-right: var(--next-result-border-style-start);
+}
+
+body[dir=ltr] .find-banner &gt; button.segmented.next-result &gt; .glyph {
</ins><span class="cx">     background-image: url(../Images/BackForwardArrows.svg#right-arrow-normal);
</span><del>-    margin-left: 1px;
</del><ins>+    margin-left: var(--next-result-glyph-margin-start);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner &gt; button.segmented.right:active:not(:disabled) &gt; .glyph {
</del><ins>+body[dir=rtl] .find-banner &gt; button.segmented.next-result &gt; .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#left-arrow-normal);
+    margin-right: var(--next-result-glyph-margin-start);
+}
+
+body[dir=ltr] .find-banner &gt; button.segmented.next-result:active:not(:disabled) &gt; .glyph {
</ins><span class="cx">     background-image: url(../Images/BackForwardArrows.svg#right-arrow-active);
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+body[dir=rtl] .find-banner &gt; button.segmented.next-result:active:not(:disabled) &gt; .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#left-arrow-active);
+}
+
</ins><span class="cx"> .find-banner &gt; button.segmented {
</span><span class="cx">     min-width: 22px;
</span><span class="cx">     padding: 3px 6px 2px;
</span><span class="lines">@@ -211,12 +257,30 @@
</span><span class="cx"> .find-banner.console-find-banner &gt; input[type=&quot;search&quot;] {
</span><span class="cx">     padding-top: 0;
</span><span class="cx">     outline: none;
</span><del>-    border: 1px solid hsla(0, 0%, 0%, 0.35);
-    border-radius: 3px 0 0 3px;
</del><ins>+    border: 1px solid var(--border-color);
</ins><span class="cx">     background-color: hsla(0, 0%, 100%, 0.2);
</span><span class="cx">     background-clip: padding-box;
</span><ins>+
+    --console-find-banner-search-box-border-radius-start: 3px;
+    --console-find-banner-search-box-border-radius-end: 0;
+
+    --console-find-banner-search-box-decoration-margin-start: 4px;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+body[dir=ltr] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;] {
+    border-top-left-radius: var(--console-find-banner-search-box-border-radius-start);
+    border-bottom-left-radius: var(--console-find-banner-search-box-border-radius-start);
+    border-top-right-radius: var(--console-find-banner-search-box-border-radius-end);
+    border-bottom-right-radius: var(--console-find-banner-search-box-border-radius-end);
+}
+
+body[dir=rtl] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;] {
+    border-top-left-radius: var(--console-find-banner-search-box-border-radius-end);
+    border-bottom-left-radius: var(--console-find-banner-search-box-border-radius-end);
+    border-top-right-radius: var(--console-find-banner-search-box-border-radius-start);
+    border-bottom-right-radius: var(--console-find-banner-search-box-border-radius-start);
+}
+
</ins><span class="cx"> .find-banner.console-find-banner &gt; :matches(input[type=&quot;search&quot;], button) {
</span><span class="cx">     height: 22px;
</span><span class="cx"> }
</span><span class="lines">@@ -225,10 +289,14 @@
</span><span class="cx">     color: hsla(0, 0%, 0%, 0.35);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container {
-    margin-left: 4px;
</del><ins>+body[dir=ltr] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container {
+    margin-left: var(--console-find-banner-search-box-decoration-margin-start);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+body[dir=rtl] .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]::-webkit-textfield-decoration-container {
+    margin-right: var(--console-find-banner-search-box-decoration-margin-start);
+}
+
</ins><span class="cx"> .find-banner.console-find-banner &gt; input[type=&quot;search&quot;]:focus {
</span><span class="cx">     background-color: white;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFindBannerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js (214047 => 214048)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js        2017-03-16 17:16:56 UTC (rev 214047)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js        2017-03-16 17:19:53 UTC (rev 214048)
</span><span class="lines">@@ -51,8 +51,7 @@
</span><span class="cx">         this.element.appendChild(this._inputField);
</span><span class="cx"> 
</span><span class="cx">         this._previousResultButton = document.createElement(&quot;button&quot;);
</span><del>-        this._previousResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
-        this._previousResultButton.classList.add(WebInspector.FindBanner.LeftSegmentButtonStyleClassName);
</del><ins>+        this._previousResultButton.classList.add(&quot;segmented&quot;, &quot;previous-result&quot;);
</ins><span class="cx">         this._previousResultButton.disabled = true;
</span><span class="cx">         this._previousResultButton.addEventListener(&quot;click&quot;, this._previousResultButtonClicked.bind(this));
</span><span class="cx">         this.element.appendChild(this._previousResultButton);
</span><span class="lines">@@ -62,8 +61,7 @@
</span><span class="cx">         this._previousResultButton.appendChild(previousResultButtonGlyphElement);
</span><span class="cx"> 
</span><span class="cx">         this._nextResultButton = document.createElement(&quot;button&quot;);
</span><del>-        this._nextResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
-        this._nextResultButton.classList.add(WebInspector.FindBanner.RightSegmentButtonStyleClassName);
</del><ins>+        this._nextResultButton.classList.add(&quot;segmented&quot;, &quot;next-result&quot;);
</ins><span class="cx">         this._nextResultButton.disabled = true;
</span><span class="cx">         this._nextResultButton.addEventListener(&quot;click&quot;, this._nextResultButtonClicked.bind(this));
</span><span class="cx">         this.element.appendChild(this._nextResultButton);
</span><span class="lines">@@ -316,9 +314,6 @@
</span><span class="cx"> WebInspector.FindBanner.ShowingFindBannerStyleClassName = &quot;showing-find-banner&quot;;
</span><span class="cx"> WebInspector.FindBanner.NoTransitionStyleClassName = &quot;no-find-banner-transition&quot;;
</span><span class="cx"> WebInspector.FindBanner.ShowingStyleClassName = &quot;showing&quot;;
</span><del>-WebInspector.FindBanner.SegmentedButtonStyleClassName = &quot;segmented&quot;;
-WebInspector.FindBanner.LeftSegmentButtonStyleClassName = &quot;left&quot;;
-WebInspector.FindBanner.RightSegmentButtonStyleClassName = &quot;right&quot;;
</del><span class="cx"> WebInspector.FindBanner.SegmentGlyphStyleClassName = &quot;glyph&quot;;
</span><span class="cx"> 
</span><span class="cx"> WebInspector.FindBanner.Event = {
</span></span></pre>
</div>
</div>

</body>
</html>