Web Inspector: Open Resource dialog should support matching file paths

https://bugs.webkit.org/show_bug.cgi?id=178152
<rdar://problem/34925656>

Reviewed by Patrick Angle.

* Source/WebInspectorUI/UserInterface/Controllers/ResourceQueryController.js:
(WI.ResourceQueryController.prototype.executeQuery):
(WI.ResourceQueryController.prototype._findSpecialCharacterIndicesInDisplayName): Added.
(WI.ResourceQueryController.prototype._findSpecialCharacterIndicesInURL): Added.
(WI.ResourceQueryController.prototype._findSpecialCharacterIndices): Deleted.
Do a second search for the entire URL. Use the result that has the better rank.

* Source/WebInspectorUI/UserInterface/Controllers/QueryController.js:
(WI.QueryController.prototype.findSpecialCharacterIndices): Added.
* Source/WebInspectorUI/UserInterface/Controllers/CSSQueryController.js:
(WI.CSSQueryController.prototype.executeQuery):
(WI.CSSQueryController.prototype._findSpecialCharacterIndicesInPropertyName): Added.
(WI.CSSQueryController.prototype._findSpecialCharacterIndices): Deleted.
Move the shared `_findSpecialCharacterIndices` to the base class to avoid repeated logic.

* Source/WebInspectorUI/UserInterface/Models/ResourceQueryResult.js:
(WI.ResourceQueryResult):
(WI.ResourceQueryResult.prototype.get searchString): Added.
Include the string for the matches so callers can reason about what was matched.

* Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js:
(WI.OpenResourceDialog.prototype._populateResourceTreeOutline):
(WI.OpenResourceDialog.prototype._populateResourceTreeOutline.createHighlightedTitleFragment):
Shift the matches if it was for the entire URL, so that highlights still appear for the display name.

* LayoutTests/inspector/unit-tests/css-query-controller.html:
* LayoutTests/inspector/unit-tests/css-query-controller-expected.txt:
* LayoutTests/inspector/unit-tests/resource-query-controller.html:
* LayoutTests/inspector/unit-tests/resource-query-controller-expected.txt:

Canonical link: https://commits.webkit.org/251155@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295060 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/inspector/unit-tests/css-query-controller-expected.txt

@@ -3,19 +3,19 @@ Testing WI.CSSQueryController
 
 == Running test suite: CSSQueryController
 -- Running test case: FindSpecialCharacterIndices
-PASS: Result for margin should match expected special indices.
-PASS: Result for MARGIN should match expected special indices.
-PASS: Result for margin-right should match expected special indices.
-PASS: Result for -webkit-mask should match expected special indices.
-PASS: Result for --var-kebab-case should match expected special indices.
-PASS: Result for --varCamelCase should match expected special indices.
-PASS: Result for --varlowercase should match expected special indices.
-PASS: Result for --VARUPPERCASE should match expected special indices.
-PASS: Result for --var_snake_case should match expected special indices.
-PASS: Result for var(--name) should match expected special indices.
-PASS: Result for rgb(0, 0, 0) should match expected special indices.
-PASS: Result for rgb(0 0 0 / 100%) should match expected special indices.
-PASS: Result for rgb(0 0 0 / 0.1) should match expected special indices.
+PASS: The special characters in "margin" should match.
+PASS: The special characters in "MARGIN" should match.
+PASS: The special characters in "margin-right" should match.
+PASS: The special characters in "-webkit-mask" should match.
+PASS: The special characters in "--var-kebab-case" should match.
+PASS: The special characters in "--varCamelCase" should match.
+PASS: The special characters in "--varlowercase" should match.
+PASS: The special characters in "--VARUPPERCASE" should match.
+PASS: The special characters in "--var_snake_case" should match.
+PASS: The special characters in "var(--name)" should match.
+PASS: The special characters in "rgb(0, 0, 0)" should match.
+PASS: The special characters in "rgb(0 0 0 / 100%)" should match.
+PASS: The special characters in "rgb(0 0 0 / 0.1)" should match.
 
 -- Running test case: ExecuteQueryAgainstNoValues
 PASS: Should return no results.

LayoutTests/inspector/unit-tests/css-query-controller.html

@@ -15,55 +15,55 @@
             let tests = [
                 {
                     padvalue: "margin",
-                    expected: "^",
+                    expected: "^     ",
                 },
                 {
                     padvalue: "MARGIN",
-                    expected: "^",
+                    expected: "^     ",
                 },
                 {
                     padvalue: "margin-right",
-                    expected: "^     ^^",
+                    expected: "^     ^^    ",
                 },
                 {
                     padvalue: "-webkit-mask",
-                    expected: "^^     ^^",
+                    expected: "^^     ^^   ",
                 },
                 {
                     padvalue: "--var-kebab-case",
-                    expected: "^^^  ^^    ^^",
+                    expected: "^^^  ^^    ^^   ",
                 },
                 {
                     padvalue: "--varCamelCase",
-                    expected: "^^^  ^    ^",
+                    expected: "^^^  ^    ^   ",
                 },
                 {
                     padvalue: "--varlowercase",
-                    expected: "^^^",
+                    expected: "^^^           ",
                 },
                 {
                     padvalue: "--VARUPPERCASE",
-                    expected: "^^^",
+                    expected: "^^^           ",
                 },
                 {
                     padvalue: "--var_snake_case",
-                    expected: "^^^  ^^    ^^",
+                    expected: "^^^  ^^    ^^   ",
                 },
                 {
                     padvalue: "var(--name)",
-                    expected: "^   ^^^",
+                    expected: "^   ^^^    ",
                 },
                 {
                     padvalue: "rgb(0, 0, 0)",
-                    expected: "^",
+                    expected: "^           ",
                 },
                 {
                     padvalue: "rgb(0 0 0 / 100%)",
-                    expected: "^",
+                    expected: "^                ",
                 },
                 {
                     padvalue: "rgb(0 0 0 / 0.1)",
-                    expected: "^",
+                    expected: "^               ",
                 }
             ];
 
@@ -72,12 +72,12 @@
                 specialIndices.forEach((index) => {
                     mask = mask.substr(0, index) + "^" + mask.substr(index + 1);
                 });
-                return mask.trim();
+                return mask;
             }
 
             for (let {padvalue, expected} of tests) {
-                let actual = createSpecialMask(padvalue, matcher._findSpecialCharacterIndices(padvalue));
-                InspectorTest.expectEqual(actual, expected, `Result for ${padvalue} should match expected special indices.`);
+                let actual = createSpecialMask(padvalue, matcher._findSpecialCharacterIndicesInPropertyName(padvalue));
+                InspectorTest.expectEqual(actual, expected, `The special characters in "${padvalue}" should match.`);
             }
         }
     });

LayoutTests/inspector/unit-tests/resource-query-controller-expected.txt

@@ -2,16 +2,30 @@ Testing WI.ResourceQueryController.
 
 
 == Running test suite: ResourceQueryController
--- Running test case: FindSpecialCharacterIndices
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
-PASS: Result should match expected special indices.
+-- Running test case: FindSpecialCharacterIndices.DisplayName
+PASS: The special characters in "Abcd" should match.
+PASS: The special characters in "ABCDE" should match.
+PASS: The special characters in "abcdef" should match.
+PASS: The special characters in "abc-def" should match.
+PASS: The special characters in "abc---def" should match.
+PASS: The special characters in "a-bc_de.f" should match.
+PASS: The special characters in "AxBxCxDxExFx" should match.
+PASS: The special characters in "ab-c_d.ef" should match.
+PASS: The special characters in "AxBxCxdxexDxyxEF" should match.
+
+-- Running test case: FindSpecialCharacterIndices.URL
+PASS: The special characters in "aBcd" should match.
+PASS: The special characters in "/aBcd" should match.
+PASS: The special characters in "aBcd_dEfg" should match.
+PASS: The special characters in "/aBcd_dEfg" should match.
+PASS: The special characters in "aBcd-dEfg" should match.
+PASS: The special characters in "/aBcd-dEfg" should match.
+PASS: The special characters in "aBcd.dEfg" should match.
+PASS: The special characters in "/aBcd.dEfg" should match.
+PASS: The special characters in "aBcd/dEfg" should match.
+PASS: The special characters in "/aBcd/dEfg" should match.
+PASS: The special characters in "aBcd/dEfg_hIjk-lMno.pQrs" should match.
+PASS: The special characters in "/aBcd/dEfg_hIjk-lMno.pQrs" should match.
 
 -- Running test case: ExecuteQueryAgainstNoResources
 PASS: Should return no results.

LayoutTests/inspector/unit-tests/resource-query-controller.html

@@ -8,46 +8,46 @@
     let suite = InspectorTest.createSyncSuite("ResourceQueryController");
 
     suite.addTestCase({
-        name: "FindSpecialCharacterIndices",
-        description: "Should correctly find special filename characters.",
+        name: "FindSpecialCharacterIndices.DisplayName",
+        description: "Should correctly find special filename characters in the displayName.",
         test() {
             let matcher = new WI.ResourceQueryController;
             let tests = [
                 {
                     filename: "Abcd",
-                    expected: "^"
+                    expected: "^   ",
                 },
                 {
                     filename: "ABCDE",
-                    expected: "^"
+                    expected: "^    ",
                 },
                 {
                     filename: "abcdef",
-                    expected: "^",
+                    expected: "^     ",
                 },
                 {
                     filename: "abc-def",
-                    expected: "^  ^^",
+                    expected: "^  ^^  ",
                 },
                 {
                     filename: "abc---def",
-                    expected: "^  ^^^^",
+                    expected: "^  ^^^^  ",
                 },
                 {
                     filename: "a-bc_de.f",
                     expected: "^^^ ^^ ^^",
                 },
                 {
                     filename: "AxBxCxDxExFx",
-                    expected: "^ ^ ^ ^ ^ ^",
+                    expected: "^ ^ ^ ^ ^ ^ ",
                 },
                 {
                     filename: "ab-c_d.ef",
-                    expected: "^ ^^^^^^",
+                    expected: "^ ^^^^^^ ",
                 },
                 {
                     filename: "AxBxCxdxexDxyxEF",
-                    expected: "^ ^ ^     ^   ^",
+                    expected: "^ ^ ^     ^   ^ ",
                 },
             ];
 
@@ -56,12 +56,83 @@
                 specialIndices.forEach((index) => {
                     mask = mask.substr(0, index) + "^" + mask.substr(index + 1);
                 });
-                return mask.trim();
+                return mask;
             }
 
             for (let {filename, expected} of tests) {
-                let actual = createSpecialMask(filename, matcher._findSpecialCharacterIndices(filename));
-                InspectorTest.expectEqual(actual, expected, "Result should match expected special indices.");
+                let actual = createSpecialMask(filename, matcher._findSpecialCharacterIndicesInDisplayName(filename));
+                InspectorTest.expectEqual(actual, expected, `The special characters in "${filename}" should match.`);
+            }
+        }
+    });
+
+    suite.addTestCase({
+        name: "FindSpecialCharacterIndices.URL",
+        description: "Should correctly find special filename characters in the url.",
+        test() {
+            let matcher = new WI.ResourceQueryController;
+            let tests = [
+                {
+                    filename: "aBcd",
+                    expected: "^^  ",
+                },
+                {
+                    filename: "/aBcd",
+                    expected: "^^^  ",
+                },
+                {
+                    filename: "aBcd_dEfg",
+                    expected: "^^  ^^^  ",
+                },
+                {
+                    filename: "/aBcd_dEfg",
+                    expected: "^^^  ^^^  ",
+                },
+                {
+                    filename: "aBcd-dEfg",
+                    expected: "^^  ^^^  ",
+                },
+                {
+                    filename: "/aBcd-dEfg",
+                    expected: "^^^  ^^^  ",
+                },
+                {
+                    filename: "aBcd.dEfg",
+                    expected: "^^  ^^^  ",
+                },
+                {
+                    filename: "/aBcd.dEfg",
+                    expected: "^^^  ^^^  ",
+                },
+                {
+                    filename: "aBcd/dEfg",
+                    expected: "^^  ^^^  ",
+                },
+                {
+                    filename: "/aBcd/dEfg",
+                    expected: "^^^  ^^^  ",
+                },
+                {
+                    filename: "aBcd/dEfg_hIjk-lMno.pQrs",
+                    expected: "^^  ^^^  ^^^  ^^^  ^^^  ",
+                },
+                {
+                    filename: "/aBcd/dEfg_hIjk-lMno.pQrs",
+                    expected: "^^^  ^^^  ^^^  ^^^  ^^^  ",
+                },
+            ];
+
+            function createSpecialMask(filename, specialIndices) {
+                let mask = " ".repeat(filename.length);
+                specialIndices.forEach((index) => {
+                    mask = mask.substr(0, index) + "^" + mask.substr(index + 1);
+                });
+                return mask;
+            }
+
+            for (let {filename, expected} of tests) {
+                let actual = createSpecialMask(filename, matcher._findSpecialCharacterIndicesInURL(filename));
+                InspectorTest.expectEqual(actual, expected, `The special characters in "${filename}" should match.`);
             }
         }
     });

Source/WebInspectorUI/UserInterface/Controllers/CSSQueryController.js

@@ -63,7 +63,7 @@ WI.CSSQueryController = class CSSQueryController extends WI.QueryController
 
         for (let value of this._values) {
             if (!this._cachedSpecialCharacterIndicesForValueMap.has(value))
-                this._cachedSpecialCharacterIndicesForValueMap.set(value, this._findSpecialCharacterIndices(value));
+                this._cachedSpecialCharacterIndicesForValueMap.set(value, this._findSpecialCharacterIndicesInPropertyName(value));
 
             let matches = this.findQueryMatches(query, value.toLowerCase(), this._cachedSpecialCharacterIndicesForValueMap.get(value));
             if (matches.length)
@@ -79,37 +79,8 @@ WI.CSSQueryController = class CSSQueryController extends WI.QueryController
 
     // Private
 
-    _findSpecialCharacterIndices(string)
+    _findSpecialCharacterIndicesInPropertyName(propertyName)
     {
-        if (!string.length)
-            return [];
-
-        const separators = "-_";
-
-        // Special characters include the following:
-        // 1. The first character.
-        // 2. Uppercase characters that follow a lowercase letter.
-        // 3. Separators and the first character following the separator.
-        let indices = [0];
-
-        for (let i = 1; i < string.length; ++i) {
-            let character = string[i];
-            let isSpecial = false;
-
-            if (separators.includes(character))
-                isSpecial = true;
-            else {
-                let previousCharacter = string[i - 1];
-                if (separators.includes(previousCharacter))
-                    isSpecial = true;
-                else if (character.isUpperCase() && previousCharacter.isLowerCase())
-                    isSpecial = true;
-            }
-
-            if (isSpecial)
-                indices.push(i);
-        }
-
-        return indices;
+        return this.findSpecialCharacterIndices(propertyName, "-_");
     }
 };

Source/WebInspectorUI/UserInterface/Controllers/QueryController.js

@@ -108,4 +108,39 @@ WI.QueryController = class QueryController
 
         return matches;
     }
+
+    // Protected
+
+    findSpecialCharacterIndices(string, separators)
+    {
+        if (!string.length)
+            return [];
+
+        // Special characters include the following:
+        // - The first character.
+        // - Uppercase characters that follow a lowercase letter.
+        // - Separators and the first character following the separator.
+
+        let indices = [0];
+
+        for (let i = 1; i < string.length; ++i) {
+            let character = string[i];
+            let isSpecial = false;
+
+            if (separators.includes(character))
+                isSpecial = true;
+            else {
+                let previousCharacter = string[i - 1];
+                if (separators.includes(previousCharacter))
+                    isSpecial = true;
+                else if (character.isUpperCase() && previousCharacter.isLowerCase())
+                    isSpecial = true;
+            }
+
+            if (isSpecial)
+                indices.push(i);
+        }
+
+        return indices;
+    }
 };