Bug 1686127 - Support text highlighting in dynamic results. r=adw, a=jcristau

Differential Revision: https://phabricator.services.mozilla.com/D101412

browser/components/urlbar/UrlbarView.jsm

@@ -1476,6 +1476,25 @@ class UrlbarView {
   async _updateRowForDynamicType(item, result) {
     item.setAttribute("dynamicType", result.payload.dynamicType);
 
+    // First, apply highlighting. We do this before updating via getViewUpdate
+    // so the dynamic provider can override the highlighting by setting the
+    // textContent of the highlighted node, if it wishes.
+    for (let [payloadName, highlights] of Object.entries(
+      result.payloadHighlights
+    )) {
+      if (!highlights.length) {
+        continue;
+      }
+      // Highlighting only works if the dynamic element name is the same as the
+      // highlighted payload property name.
+      let nodeToHighlight = item.querySelector(`#${item.id}-${payloadName}`);
+      this._addTextContentWithHighlights(
+        nodeToHighlight,
+        result.payload[payloadName],
+        highlights
+      );
+    }
+
     // Get the view update from the result's provider.
     let provider = UrlbarProvidersManager.getProvider(result.providerName);
     let viewUpdate = await provider.getViewUpdate(result);

browser/components/urlbar/tests/browser/browser_dynamicResults.js

@@ -493,6 +493,103 @@ add_task(async function shouldNavigate() {
   }, new TestShouldNavigateProvider());
 });
 
+// Tests applying highlighting to a dynamic result.
+add_task(async function highlighting() {
+  /**
+   * Provides a dynamic result with highlighted text.
+   */
+  class TestHighlightProvider extends TestProvider {
+    startQuery(context, addCallback) {
+      let result = Object.assign(
+        new UrlbarResult(
+          UrlbarUtils.RESULT_TYPE.DYNAMIC,
+          UrlbarUtils.RESULT_SOURCE.OTHER_LOCAL,
+          ...UrlbarResult.payloadAndSimpleHighlights(context.tokens, {
+            dynamicType: DYNAMIC_TYPE_NAME,
+            text: ["Test title", UrlbarUtils.HIGHLIGHT.SUGGESTED],
+          })
+        ),
+        { suggestedIndex: 1 }
+      );
+      addCallback(this, result);
+    }
+
+    getViewUpdate(result, idsByName) {
+      return {};
+    }
+  }
+
+  // Test that highlighting is applied.
+  await withDynamicTypeProvider(async () => {
+    await UrlbarTestUtils.promiseAutocompleteResultPopup({
+      window,
+      value: "test",
+      waitForFocus: SimpleTest.waitForFocus,
+    });
+
+    let row = await UrlbarTestUtils.waitForAutocompleteResultAt(window, 1);
+    Assert.equal(
+      row.result.type,
+      UrlbarUtils.RESULT_TYPE.DYNAMIC,
+      "row.result.type"
+    );
+    let parentTextNode = row.querySelector(
+      `.urlbarView-dynamic-${DYNAMIC_TYPE_NAME}-text`
+    );
+    let highlightedTextNode = row.querySelector(
+      `.urlbarView-dynamic-${DYNAMIC_TYPE_NAME}-text > strong`
+    );
+    Assert.equal(parentTextNode.firstChild.textContent, "Test");
+    Assert.equal(
+      highlightedTextNode.textContent,
+      " title",
+      "The highlighting was applied successfully."
+    );
+  }, new TestHighlightProvider());
+
+  /**
+   * Provides a dynamic result with highlighted text that is then overridden.
+   */
+  class TestHighlightProviderOveridden extends TestHighlightProvider {
+    getViewUpdate(result, idsByName) {
+      return {
+        text: {
+          textContent: "Test title",
+        },
+      };
+    }
+  }
+
+  // Test that highlighting is not applied when overridden from getViewUpdate.
+  await withDynamicTypeProvider(async () => {
+    // Do a search.
+    await UrlbarTestUtils.promiseAutocompleteResultPopup({
+      window,
+      value: "test",
+      waitForFocus: SimpleTest.waitForFocus,
+    });
+
+    let row = await UrlbarTestUtils.waitForAutocompleteResultAt(window, 1);
+    Assert.equal(
+      row.result.type,
+      UrlbarUtils.RESULT_TYPE.DYNAMIC,
+      "row.result.type"
+    );
+    let parentTextNode = row.querySelector(
+      `.urlbarView-dynamic-${DYNAMIC_TYPE_NAME}-text`
+    );
+    let highlightedTextNode = row.querySelector(
+      `.urlbarView-dynamic-${DYNAMIC_TYPE_NAME}-text > strong`
+    );
+    Assert.equal(
+      parentTextNode.firstChild.textContent,
+      "Test title",
+      "No highlighting was applied"
+    );
+    Assert.ok(!highlightedTextNode, "The <strong> child node was deleted.");
+  }, new TestHighlightProviderOveridden());
+});
+
 /**
  * Provides a dynamic result.
  */