Title: [214864] trunk/Source/WebInspectorUI
Revision
214864
Author
bb...@apple.com
Date
2017-04-03 20:30:30 -0700 (Mon, 03 Apr 2017)

Log Message

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.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (214863 => 214864)


--- 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)
@@ -1,3 +1,31 @@
+2017-04-03  Brian Burg  <bb...@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.
+
 2017-04-03  Devin Rousso  <web...@devinrousso.com>
 
         Web Inspector: clicking on the body of a CSS rule after editing the selector causes the section to disappear

Modified: trunk/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js (214863 => 214864)


--- 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)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -46,7 +46,7 @@
 
     get className()
     {
-        return WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName;
+        return "source-code-match";
     }
 
     saveIdentityToCookie(cookie)
@@ -59,8 +59,6 @@
     }
 };
 
-WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName = "source-code-match-icon";
-
 WebInspector.SourceCodeSearchMatchObject.TypeIdentifier = "source-code-search-match-object";
 WebInspector.SourceCodeSearchMatchObject.URLCookieKey = "source-code-url";
 WebInspector.SourceCodeSearchMatchObject.TextRangeKey = "text-range";

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css (214863 => 214864)


--- 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)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -47,6 +47,6 @@
     content: url(../Images/DOMNode.svg);
 }
 
-.source-code-match-icon .icon {
+.source-code-match .icon {
     content: url(../Images/ResultLine.svg);
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js (214863 => 214864)


--- 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)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -38,6 +38,10 @@
 
     static truncateAndHighlightTitle(title, searchTerm, sourceCodeTextRange)
     {
+        let isRTL = WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL;
+        const charactersToShowBeforeSearchMatch = isRTL ? 20 : 15;
+        const charactersToShowAfterSearchMatch = isRTL ? 15 : 50;
+
         // Use the original location, since those line/column offsets match the line text in title.
         var textRange = sourceCodeTextRange.textRange;
 
@@ -49,14 +53,14 @@
         // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
         // at the end of the string.
         var modifiedTitle = null;
-        if (searchTermIndex > WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
-            modifiedTitle = ellipsis + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
-            searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
+        if (searchTermIndex > charactersToShowBeforeSearchMatch) {
+            modifiedTitle = ellipsis + title.substring(searchTermIndex - charactersToShowBeforeSearchMatch);
+            searchTermIndex = charactersToShowBeforeSearchMatch + 1;
         } else
             modifiedTitle = title;
 
         // Truncate the tail of the title so the tooltip isn't so large.
-        modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
+        modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + charactersToShowAfterSearchMatch);
 
         console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
 
@@ -86,6 +90,3 @@
         return this.representedObject.sourceCodeTextRange.synthesizedTextValue + ":" + this.representedObject.title;
     }
 };
-
-WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
-WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css (214863 => 214864)


--- 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)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -51,3 +51,8 @@
 .sidebar > .panel.navigation.search > .search-bar > input[type="search"]::-webkit-search-results-button {
     margin-right: 4px;
 }
+
+body[dir=rtl] .sidebar > .panel.navigation.search .item.source-code-match {
+    direction: ltr;
+    text-align: right;
+}
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to