Bug 1819775 - Add icon for trending suggestions. r=adw

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

browser/components/search/test/browser/browser_trending_suggestions.js

@@ -137,6 +137,7 @@ async function check_results({
       Assert.equal(result.type, UrlbarUtils.RESULT_TYPE.SEARCH);
       Assert.equal(result.providerName, "SearchSuggestions");
       Assert.equal(result.payload.engine, "basic");
+      Assert.equal(result.payload.trending, true);
     }
   }
 

browser/components/urlbar/UrlbarProviderSearchSuggestions.sys.mjs

@@ -435,6 +435,7 @@ class ProviderSearchSuggestions extends UrlbarProvider {
                   alias ? alias : undefined,
                   UrlbarUtils.HIGHLIGHT.TYPED,
                 ],
+                trending: entry.trending,
                 query: [searchString.trim(), UrlbarUtils.HIGHLIGHT.NONE],
                 icon: !entry.value ? engine.iconURI?.spec : undefined,
               }
@@ -521,7 +522,7 @@ class ProviderSearchSuggestions extends UrlbarProvider {
    *   Whether we should fetch trending results.
    */
   #shouldFetchTrending(queryContext) {
-    return (
+    return !!(
       queryContext.searchString == "" &&
       lazy.UrlbarPrefs.get("trending.featureGate") &&
       (queryContext.searchMode ||

browser/components/urlbar/UrlbarUtils.sys.mjs

@@ -128,6 +128,7 @@ export var UrlbarUtils = {
     EXTENSION: "chrome://mozapps/skin/extensions/extension.svg",
     HISTORY: "chrome://browser/skin/history.svg",
     SEARCH_GLASS: "chrome://global/skin/icons/search-glass.svg",
+    TRENDING: "chrome://global/skin/icons/trending.svg",
     TIP: "chrome://global/skin/icons/lightbulb.svg",
   },
 
@@ -1530,6 +1531,9 @@ UrlbarUtils.RESULT_PAYLOAD_SCHEMA = {
       title: {
         type: "string",
       },
+      trending: {
+        type: "boolean",
+      },
       url: {
         type: "string",
       },

browser/components/urlbar/UrlbarView.sys.mjs

@@ -1709,6 +1709,9 @@ export class UrlbarView {
         lazy.UrlbarUtils.ICON.HISTORY) ||
       iconUrlOverride ||
       result.payload.icon ||
+      (result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH &&
+        result.payload.trending &&
+        lazy.UrlbarUtils.ICON.TRENDING) ||
       ((result.type == lazy.UrlbarUtils.RESULT_TYPE.SEARCH ||
         result.type == lazy.UrlbarUtils.RESULT_TYPE.KEYWORD) &&
         lazy.UrlbarUtils.ICON.SEARCH_GLASS) ||

browser/components/urlbar/tests/unit/head.js

@@ -736,6 +736,8 @@ function makeRemoteTabResult(
  *   The source of the search result. Defaults to UrlbarUtils.RESULT_SOURCE.SEARCH.
  * @param {boolean} [options.satisfiesAutofillThreshold]
  *   If this search should appear in the autofill section of the box
+ * @param {boolean} [options.trending]
+ *    If the search result is a trending result. `Defaults to false`.
  * @returns {UrlbarResult}
  */
 function makeSearchResult(
@@ -755,6 +757,7 @@ function makeSearchResult(
     inPrivateWindow,
     isPrivateEngine,
     heuristic = false,
+    trending = false,
     type = UrlbarUtils.RESULT_TYPE.SEARCH,
     source = UrlbarUtils.RESULT_SOURCE.SEARCH,
     satisfiesAutofillThreshold = false,
@@ -814,6 +817,7 @@ function makeSearchResult(
 
   if (typeof suggestion == "string") {
     result.payload.lowerCaseSuggestion = result.payload.suggestion.toLocaleLowerCase();
+    result.payload.trending = trending;
   }
 
   if (providerName) {

toolkit/components/search/SearchSuggestionController.sys.mjs

@@ -57,11 +57,14 @@ class SearchSuggestionEntry {
    * @param {string} [options.tail]
    *   Represents the suggested part of a tail suggestion. For example, Google
    *   might return "toronto" as the tail for the query "what time is it in t".
+   * @param {boolean} [options.trending]
+   *   Whether this is a trending suggestion.
    */
-  constructor(value, { matchPrefix, tail } = {}) {
+  constructor(value, { matchPrefix, tail, trending } = {}) {
     this.#value = value;
     this.#matchPrefix = matchPrefix;
     this.#tail = tail;
+    this.#trending = trending;
   }
 
   get value() {
@@ -76,6 +79,10 @@ class SearchSuggestionEntry {
     return this.#tail;
   }
 
+  get trending() {
+    return this.#trending;
+  }
+
   get tailOffsetIndex() {
     if (!this.#tail) {
       return -1;
@@ -111,6 +118,7 @@ class SearchSuggestionEntry {
   #value;
   #matchPrefix;
   #tail;
+  #trending;
 }
 
 // Maps each engine name to a unique firstPartyDomain, so that requests to
@@ -663,7 +671,8 @@ export class SearchSuggestionController {
           results.remote.push(
             this.#newSearchSuggestionEntry(
               fullTextSuggestions[i],
-              richSuggestionData?.[i]
+              richSuggestionData?.[i],
+              context.fetchTrending
             )
           );
         }
@@ -742,18 +751,21 @@ export class SearchSuggestionController {
    * @param {object} richSuggestionData
    *   Rich suggestion data returned by the engine. In Google's case, this is
    *   the corresponding entry at "google:suggestdetail".
+   * @param {boolean} trending
+   *   Whether the suggestion is a trending suggestion.
    * @returns {SearchSuggestionEntry}
    */
-  #newSearchSuggestionEntry(suggestion, richSuggestionData) {
+  #newSearchSuggestionEntry(suggestion, richSuggestionData, trending) {
     if (richSuggestionData) {
       // We have valid rich suggestions.
       return new SearchSuggestionEntry(suggestion, {
         matchPrefix: richSuggestionData?.mp,
         tail: richSuggestionData?.t,
+        trending,
       });
     }
     // Return a regular suggestion.
-    return new SearchSuggestionEntry(suggestion);
+    return new SearchSuggestionEntry(suggestion, { trending });
   }
 }
 

toolkit/themes/shared/desktop-jar.inc.mn

@@ -104,6 +104,7 @@
   skin/classic/global/icons/shortcut.svg                   (../../shared/icons/shortcut.svg)
   skin/classic/global/icons/sort-arrow.svg                 (../../shared/icons/sort-arrow.svg)
   skin/classic/global/icons/trackers.svg                   (../../shared/icons/trackers.svg)
+  skin/classic/global/icons/trending.svg                   (../../shared/icons/trending.svg)
   skin/classic/global/icons/update-icon.svg                (../../shared/icons/update-icon.svg)
   skin/classic/global/icons/arrow-down-12.svg              (../../shared/icons/arrow-down-12.svg)
   skin/classic/global/icons/arrow-down.svg                 (../../shared/icons/arrow-down.svg)

toolkit/themes/shared/icons/trending.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12.7197 5.71968L11.354 4.354C11.039 4.039 11.262 3.5 11.707 3.5H15.5C15.776 3.5 16 3.724 16 4V7.793C16 8.238 15.461 8.462 15.146 8.147L13.7798 6.78084L9.03033 11.5303C8.73743 11.8232 8.26256 11.8232 7.96967 11.5303L5.5 9.06065L1.08233 13.4783L0.0216675 12.4177L4.96967 7.46966C5.26256 7.17677 5.73743 7.17677 6.03033 7.46966L8.5 9.93933L12.7197 5.71968Z" fill="black"/>
+</svg>