Changeset 214864 in webkit

Timestamp:

Apr 3, 2017 8:30:30 PM (7 years ago)

Author:

BJ Burg

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Models/SourceCodeSearchMatchObject.js (modified) (3 diffs)
• UserInterface/Views/SearchIcons.css (modified) (2 diffs)
• UserInterface/Views/SearchResultTreeElement.js (modified) (4 diffs)
• UserInterface/Views/SearchSidebarPanel.css (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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.
+
 2017-04-03  Devin Rousso  <webkit@devinrousso.com>
 

trunk/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js

@@ -1 +1 @@
 /*
- * 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
@@ -47 +47 @@
     get className()
     {
-        return WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName;
+        return "source-code-match";
     }
 
@@ -60 +60 @@
 };
 
-WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName = "source-code-match-icon";
-
 WebInspector.SourceCodeSearchMatchObject.TypeIdentifier = "source-code-search-match-object";
 WebInspector.SourceCodeSearchMatchObject.URLCookieKey = "source-code-url";

trunk/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css

@@ -1 +1 @@
 /*
- * 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
@@ -48 +48 @@
 }
 
-.source-code-match-icon .icon {
+.source-code-match .icon {
     content: url(../Images/ResultLine.svg);
 }

trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js

@@ -1 +1 @@
 /*
- * 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
@@ -39 +39 @@
     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;
@@ -50 +54 @@
         // 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());
@@ -87 +91 @@
     }
 };
-
-WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
-WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;

trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css

@@ -1 +1 @@
 /*
- * 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
@@ -52 +52 @@
     margin-right: 4px;
 }
+
+body[dir=rtl] .sidebar > .panel.navigation.search .item.source-code-match {
+    direction: ltr;
+    text-align: right;
+}