tor-browser

commit 0551b4f5b9bcc73b81c641f80e9a5b46295eee82
parent 0a16df7a28efd3d5fe3d10c7bddec4a07be04d42
Author: Daisuke Akatsuka <daisuke@birchill.co.jp>
Date:   Wed,  1 Oct 2025 08:35:32 +0000

Bug 1991585: Make the style of the realtime suggestion correct r=desktop-theme-reviewers,adw,tgiles

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

Diffstat:
M
browser/components/urlbar/UrlbarView.sys.mjs
 | 
57
++++++++++++++++++++++++++++++++++++---------------------
M
browser/themes/shared/urlbarView.css
 | 
3
++-

2 files changed, 38 insertions(+), 22 deletions(-)
diff --git a/browser/components/urlbar/UrlbarView.sys.mjs b/browser/components/urlbar/UrlbarView.sys.mjs
@@ -1509,10 +1509,12 @@ export class UrlbarView {
    *     An array of CSS classes to set on the element. If this is defined, the
    *     element's previous classes will be cleared first!
    *
+   * @param {Element} item
+   *   The row element.
    * @param {UrlbarResult} result
    *   The UrlbarResult displayed to the node. This is optional.
    */
-  #updateElementForDynamicType(element, update, result = null) {
+  #updateElementForDynamicType(element, update, item, result = null) {
     if (update.attributes) {
       for (let [name, value] of Object.entries(update.attributes)) {
         if (name == "id") {
@@ -1555,7 +1557,11 @@ export class UrlbarView {
     }
 
     if (update.classList) {
-      element.classList = "";
+      if (element == item._content) {
+        element.className = "urlbarView-row-inner";
+      } else {
+        element.className = "";
+      }
       element.classList.add(...update.classList);
     }
   }
@@ -1574,7 +1580,8 @@ export class UrlbarView {
       dynamicType,
       item._content,
       item._elements,
-      viewTemplate
+      viewTemplate,
+      item
     );
     item.toggleAttribute("has-url", classes.has("urlbarView-url"));
     item.toggleAttribute("has-action", classes.has("urlbarView-action"));
@@ -1594,6 +1601,8 @@ export class UrlbarView {
    * @param {object} template
    *   The template object being recursed into. Pass the top-level template
    *   object to start with.
+   * @param {Element} item
+   *   The row element.
    * @param {Set} classes
    *   The CSS class names of all elements in the row's subtree are recursively
    *   collected in this set. Don't pass anything to start with so that the
@@ -1607,9 +1616,10 @@ export class UrlbarView {
     parentNode,
     elementsByName,
     template,
+    item,
     classes = new Set()
   ) {
-    this.#updateElementForDynamicType(parentNode, template);
+    this.#updateElementForDynamicType(parentNode, template, item);
 
     if (template.classList) {
       for (let c of template.classList) {
@@ -1635,6 +1645,7 @@ export class UrlbarView {
         child,
         elementsByName,
         childTemplate,
+        item,
         classes
       );
     }
@@ -1757,23 +1768,27 @@ export class UrlbarView {
     }
   ) {
     let button = this.#createElement("span");
-    this.#updateElementForDynamicType(button, {
-      attributes: {
-        ...attributes,
-        role: "button",
-      },
-      classList: [
-        ...classList,
-        "urlbarView-button",
-        "urlbarView-button-" + name,
-      ],
-      dataset: {
-        name,
-        command,
-        url,
-        input,
+    this.#updateElementForDynamicType(
+      button,
+      {
+        attributes: {
+          ...attributes,
+          role: "button",
+        },
+        classList: [
+          ...classList,
+          "urlbarView-button",
+          "urlbarView-button-" + name,
+        ],
+        dataset: {
+          name,
+          command,
+          url,
+          input,
+        },
       },
-    });
+      item
+    );
 
     button.id = `${item.id}-button-${name}`;
     if (l10n) {
@@ -2310,7 +2325,7 @@ export class UrlbarView {
         continue;
       }
       let node = item.querySelector(`#${item.id}-${nodeName}`);
-      this.#updateElementForDynamicType(node, update, result);
+      this.#updateElementForDynamicType(node, update, item, result);
       if (update.style) {
         for (let [styleName, value] of Object.entries(update.style)) {
           node.style[styleName] = value;
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
@@ -1321,7 +1321,8 @@
   --green-status-color: light-dark(var(--color-green-60), var(--color-green-20));
   --red-status-color: light-dark(var(--color-red-70), var(--color-red-40));
 
-  display: flex;
+  /* Remove the usual inner padding. Each item in the row will have its own. */
+  padding: 0;
 
   > .urlbarView-realtime-item {
     display: flex;