Merge r228214 - Web Inspector: Rename String.prototype.trimEnd to avo…

…id conflicts with native trimEnd https://bugs.webkit.org/show_bug.cgi?id=182545 Reviewed by Brian Burg. Source/WebInspectorUI: Rename: - trimEnd to truncateEnd - trimMiddle to truncateMiddle * UserInterface/Base/Utilities.js: (String.prototype.trimMiddle): Deleted. (String.prototype.trimEnd): Deleted. (String.prototype.truncateMiddle): Added. (String.prototype.truncateEnd): Added. Use strict mode. Scrict mode allows `this` to be a primitive (a string, in our case). In non-strict mode, `this` is always an object. Without the strict mode, "a".truncateEnd(42) !== "a", because truncateEnd returns a string object. * UserInterface/Views/DOMTreeElement.js: (WI.DOMTreeElement.prototype._buildAttributeDOM): * UserInterface/Views/DOMTreeElementPathComponent.js: (WI.DOMTreeElementPathComponent): * UserInterface/Views/SearchResultTreeElement.js: Remove an obvious comment. (WI.SearchResultTreeElement.truncateAndHighlightTitle): * UserInterface/Views/SpreadsheetStyleProperty.js: (WI.SpreadsheetStyleProperty.prototype._renderValue): LayoutTests: * inspector/unit-tests/string-utilities-expected.txt: * inspector/unit-tests/string-utilities.html:
WebKit · Feb 19, 2018 · 76e4c0b · 76e4c0b
1 parent 64ff09f
commit 76e4c0b
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 9 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,13 @@
+2018-02-06  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Rename String.prototype.trimEnd to avoid conflicts with native trimEnd
+        https://bugs.webkit.org/show_bug.cgi?id=182545
+
+        Reviewed by Brian Burg.
+
+        * inspector/unit-tests/string-utilities-expected.txt:
+        * inspector/unit-tests/string-utilities.html:
+
 2018-02-06  Said Abou-Hallawa  <sabouhallawa@apple.com>
 
         Rendering SVG images with same size as WebGL texture doesn't work correctly

diff --git a/LayoutTests/inspector/unit-tests/string-utilities-expected.txt b/LayoutTests/inspector/unit-tests/string-utilities-expected.txt
@@ -46,3 +46,13 @@ PASS: Last line of a three line string should be the third line.
 PASS: Last line of a string with a traling line break should be empty.
 PASS: Last line of an empty string is the same empty string.
 
+-- Running test case: String.prototype.truncateMiddle
+PASS: String stays the same.
+PASS: Ellipsis is inserted in the middle.
+PASS: Ellipsis is inserted after the second character.
+
+-- Running test case: String.prototype.truncateEnd
+PASS: String stays the same.
+PASS: Ellipsis is inserted in the middle.
+PASS: Ellipsis is inserted after the third character.
+
diff --git a/LayoutTests/inspector/unit-tests/string-utilities.html b/LayoutTests/inspector/unit-tests/string-utilities.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html>
 <head>
+<meta charset="utf-8">
 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
 <script>
 function test()
@@ -78,6 +79,28 @@
         }
     });
 
+    suite.addTestCase({
+        name: "String.prototype.truncateMiddle",
+        test() {
+            const ellipsis = "\u2026";
+            InspectorTest.expectEqual("abcdef".truncateMiddle(6), "abcdef", "String stays the same.");
+            InspectorTest.expectEqual("abcdef".truncateMiddle(5), `ab${ellipsis}ef`, "Ellipsis is inserted in the middle.");
+            InspectorTest.expectEqual("abcdef".truncateMiddle(4), `ab${ellipsis}f`, "Ellipsis is inserted after the second character.");
+            return true;
+        }
+    });
+
+    suite.addTestCase({
+        name: "String.prototype.truncateEnd",
+        test() {
+            const ellipsis = "\u2026";
+            InspectorTest.expectEqual("abcdef".truncateEnd(6), "abcdef", "String stays the same.");
+            InspectorTest.expectEqual("abcdef".truncateEnd(5), "abcd" + ellipsis, "Ellipsis is inserted in the middle.");
+            InspectorTest.expectEqual("abcdef".truncateEnd(4), "abc" + ellipsis, "Ellipsis is inserted after the third character.");
+            return true;
+        }
+    });
+
     suite.runTestCasesAndFinish();
 }
 </script>

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,34 @@
+2018-02-06  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Rename String.prototype.trimEnd to avoid conflicts with native trimEnd
+        https://bugs.webkit.org/show_bug.cgi?id=182545
+
+        Reviewed by Brian Burg.
+
+        Rename:
+        - trimEnd to truncateEnd
+        - trimMiddle to truncateMiddle
+
+        * UserInterface/Base/Utilities.js:
+        (String.prototype.trimMiddle): Deleted.
+        (String.prototype.trimEnd): Deleted.
+        (String.prototype.truncateMiddle): Added.
+        (String.prototype.truncateEnd): Added.
+        Use strict mode. Scrict mode allows `this` to be a primitive (a string, in our case).
+        In non-strict mode, `this` is always an object. Without the strict mode,
+        "a".truncateEnd(42) !== "a", because truncateEnd returns a string object.
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WI.DOMTreeElement.prototype._buildAttributeDOM):
+        * UserInterface/Views/DOMTreeElementPathComponent.js:
+        (WI.DOMTreeElementPathComponent):
+        * UserInterface/Views/SearchResultTreeElement.js:
+        Remove an obvious comment.
+
+        (WI.SearchResultTreeElement.truncateAndHighlightTitle):
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype._renderValue):
+
 2018-02-02  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: Styles Redesign: Pasting multiple properties should create properties instead of a bad property

diff --git a/Source/WebInspectorUI/UserInterface/Base/Utilities.js b/Source/WebInspectorUI/UserInterface/Base/Utilities.js
@@ -579,10 +579,12 @@ Object.defineProperty(String.prototype, "isUpperCase",
     }
 });
 
-Object.defineProperty(String.prototype, "trimMiddle",
+Object.defineProperty(String.prototype, "truncateMiddle",
 {
     value(maxLength)
     {
+        "use strict";
+
         if (this.length <= maxLength)
             return this;
         var leftHalf = maxLength >> 1;
@@ -591,10 +593,12 @@ Object.defineProperty(String.prototype, "trimMiddle",
     }
 });
 
-Object.defineProperty(String.prototype, "trimEnd",
+Object.defineProperty(String.prototype, "truncateEnd",
 {
     value(maxLength)
     {
+        "use strict";
+
         if (this.length <= maxLength)
             return this;
         return this.substr(0, maxLength - 1) + ellipsis;

diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
@@ -1271,7 +1271,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
                 attrValueElement.textContent = value;
             } else {
                 if (value.startsWith("data:"))
-                    value = value.trimMiddle(60);
+                    value = value.truncateMiddle(60);
 
                 attrValueElement = document.createElement("a");
                 attrValueElement.href = rewrittenURL;

diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js
@@ -45,12 +45,12 @@ WI.DOMTreeElementPathComponent = class DOMTreeElementPathComponent extends WI.Hi
 
         case Node.TEXT_NODE:
             className = WI.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName;
-            title = "\"" + node.nodeValue().trimEnd(32) + "\"";
+            title = "\"" + node.nodeValue().truncateEnd(32) + "\"";
             break;
 
         case Node.COMMENT_NODE:
             className = WI.DOMTreeElementPathComponent.DOMCommentIconStyleClassName;
-            title = "<!--" + node.nodeValue().trimEnd(32) + "-->";
+            title = "<!--" + node.nodeValue().truncateEnd(32) + "-->";
             break;
 
         case Node.DOCUMENT_TYPE_NODE:
@@ -65,7 +65,7 @@ WI.DOMTreeElementPathComponent = class DOMTreeElementPathComponent extends WI.Hi
 
         case Node.CDATA_SECTION_NODE:
             className = WI.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName;
-            title = "<![CDATA[" + node.trimEnd(32) + "]]>";
+            title = "<![CDATA[" + node.truncateEnd(32) + "]]>";
             break;
 
         case Node.DOCUMENT_FRAGMENT_NODE:

diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js
@@ -59,8 +59,7 @@ WI.SearchResultTreeElement = class SearchResultTreeElement extends WI.GeneralTre
         } else
             modifiedTitle = title;
 
-        // Truncate the tail of the title so the tooltip isn't so large.
-        modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + charactersToShowAfterSearchMatch);
+        modifiedTitle = modifiedTitle.truncateEnd(searchTermIndex + searchTerm.length + charactersToShowAfterSearchMatch);
 
         console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
@@ -336,7 +336,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
             if (className) {
                 let span = document.createElement("span");
                 span.classList.add(className);
-                span.textContent = token.value.trimMiddle(maxValueLength);
+                span.textContent = token.value.truncateMiddle(maxValueLength);
                 return span;
             }