<!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>[214864] 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/214864">214864</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2017-04-03 20:30:30 -0700 (Mon, 03 Apr 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: RTL: results in Search navigation sidebar have misplaced highlights
https://bugs.webkit.org/show_bug.cgi?id=170292
Reviewed by Timothy Hatcher.
* UserInterface/Models/SourceCodeSearchMatchObject.js:
(WebInspector.SourceCodeSearchMatchObject.prototype.get className):
* UserInterface/Views/SearchIcons.css:
(.source-code-match .icon):
(.source-code-match-icon .icon): Deleted.
Remove -icon suffix from the class name since the class is attached to a result
and is not specific to the icon displayed within the result <li>.
* UserInterface/Views/SearchResultTreeElement.js:
(WebInspector.SearchResultTreeElement.truncateAndHighlightTitle):
Flip the leading and trailing context in RTL so that the highlight is not overflowed
to the left when too much context is included on the right side. Less context must be
used in RTL because we must not overflow to the right, as it may hide the result. And,
we don't know the exact starting character either as it may be overflowed to the right
as the user resizes the expanded sidebar larger or smaller. So show less context to
be conservative about never overflowing the highlighted result string.
* UserInterface/Views/SearchSidebarPanel.css:
(.sidebar > .panel.navigation.search .item.source-code-match .title):
When in RTL, show source code matches as LTR with text-align to right.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsSourceCodeSearchMatchObjectjs">trunk/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchIconscss">trunk/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchResultTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (214863 => 214864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2017-04-04 03:28:03 UTC (rev 214863)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-04-04 03:30:30 UTC (rev 214864)
</span><span class="lines">@@ -1,3 +1,31 @@
</span><ins>+2017-04-03 Brian Burg <bburg@apple.com>
+
+ Web Inspector: RTL: results in Search navigation sidebar have misplaced highlights
+ https://bugs.webkit.org/show_bug.cgi?id=170292
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Models/SourceCodeSearchMatchObject.js:
+ (WebInspector.SourceCodeSearchMatchObject.prototype.get className):
+ * UserInterface/Views/SearchIcons.css:
+ (.source-code-match .icon):
+ (.source-code-match-icon .icon): Deleted.
+ Remove -icon suffix from the class name since the class is attached to a result
+ and is not specific to the icon displayed within the result <li>.
+
+ * UserInterface/Views/SearchResultTreeElement.js:
+ (WebInspector.SearchResultTreeElement.truncateAndHighlightTitle):
+ Flip the leading and trailing context in RTL so that the highlight is not overflowed
+ to the left when too much context is included on the right side. Less context must be
+ used in RTL because we must not overflow to the right, as it may hide the result. And,
+ we don't know the exact starting character either as it may be overflowed to the right
+ as the user resizes the expanded sidebar larger or smaller. So show less context to
+ be conservative about never overflowing the highlighted result string.
+
+ * UserInterface/Views/SearchSidebarPanel.css:
+ (.sidebar > .panel.navigation.search .item.source-code-match .title):
+ When in RTL, show source code matches as LTR with text-align to right.
+
</ins><span class="cx"> 2017-04-03 Devin Rousso <webkit@devinrousso.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: clicking on the body of a CSS rule after editing the selector causes the section to disappear
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsSourceCodeSearchMatchObjectjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js (214863 => 214864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js 2017-04-04 03:28:03 UTC (rev 214863)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js 2017-04-04 03:30:30 UTC (rev 214864)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 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">@@ -46,7 +46,7 @@
</span><span class="cx">
</span><span class="cx"> get className()
</span><span class="cx"> {
</span><del>- return WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName;
</del><ins>+ return "source-code-match";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> saveIdentityToCookie(cookie)
</span><span class="lines">@@ -59,8 +59,6 @@
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName = "source-code-match-icon";
-
</del><span class="cx"> WebInspector.SourceCodeSearchMatchObject.TypeIdentifier = "source-code-search-match-object";
</span><span class="cx"> WebInspector.SourceCodeSearchMatchObject.URLCookieKey = "source-code-url";
</span><span class="cx"> WebInspector.SourceCodeSearchMatchObject.TextRangeKey = "text-range";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchIconscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css (214863 => 214864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css 2017-04-04 03:28:03 UTC (rev 214863)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css 2017-04-04 03:30:30 UTC (rev 214864)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 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">@@ -47,6 +47,6 @@
</span><span class="cx"> content: url(../Images/DOMNode.svg);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.source-code-match-icon .icon {
</del><ins>+.source-code-match .icon {
</ins><span class="cx"> content: url(../Images/ResultLine.svg);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchResultTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js (214863 => 214864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js 2017-04-04 03:28:03 UTC (rev 214863)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js 2017-04-04 03:30:30 UTC (rev 214864)
</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">@@ -38,6 +38,10 @@
</span><span class="cx">
</span><span class="cx"> static truncateAndHighlightTitle(title, searchTerm, sourceCodeTextRange)
</span><span class="cx"> {
</span><ins>+ let isRTL = WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL;
+ const charactersToShowBeforeSearchMatch = isRTL ? 20 : 15;
+ const charactersToShowAfterSearchMatch = isRTL ? 15 : 50;
+
</ins><span class="cx"> // Use the original location, since those line/column offsets match the line text in title.
</span><span class="cx"> var textRange = sourceCodeTextRange.textRange;
</span><span class="cx">
</span><span class="lines">@@ -49,14 +53,14 @@
</span><span class="cx"> // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
</span><span class="cx"> // at the end of the string.
</span><span class="cx"> var modifiedTitle = null;
</span><del>- if (searchTermIndex > WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
- modifiedTitle = ellipsis + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
- searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
</del><ins>+ if (searchTermIndex > charactersToShowBeforeSearchMatch) {
+ modifiedTitle = ellipsis + title.substring(searchTermIndex - charactersToShowBeforeSearchMatch);
+ searchTermIndex = charactersToShowBeforeSearchMatch + 1;
</ins><span class="cx"> } else
</span><span class="cx"> modifiedTitle = title;
</span><span class="cx">
</span><span class="cx"> // Truncate the tail of the title so the tooltip isn't so large.
</span><del>- modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
</del><ins>+ modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + charactersToShowAfterSearchMatch);
</ins><span class="cx">
</span><span class="cx"> console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
</span><span class="cx">
</span><span class="lines">@@ -86,6 +90,3 @@
</span><span class="cx"> return this.representedObject.sourceCodeTextRange.synthesizedTextValue + ":" + this.representedObject.title;
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
-WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css (214863 => 214864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css 2017-04-04 03:28:03 UTC (rev 214863)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css 2017-04-04 03:30:30 UTC (rev 214864)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 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">@@ -51,3 +51,8 @@
</span><span class="cx"> .sidebar > .panel.navigation.search > .search-bar > input[type="search"]::-webkit-search-results-button {
</span><span class="cx"> margin-right: 4px;
</span><span class="cx"> }
</span><ins>+
+body[dir=rtl] .sidebar > .panel.navigation.search .item.source-code-match {
+ direction: ltr;
+ text-align: right;
+}
</ins></span></pre>
</div>
</div>
</body>
</html>