Bug 1884170 - Missing options button icon in history fixed r=fxview-reviewers,kcochrane

Added correct secondary class names to show options button icon in history.

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

Author: nikk15

browser/components/firefoxview/fxview-tab-list.mjs

@@ -929,6 +929,27 @@ export class FxviewTabRow extends MozLitElement {
             ? "0"
             : "-1"}"
         ></button>`
+      )}
+      ${when(
+        this.tertiaryL10nId && this.tertiaryActionHandler,
+        () => html`<button
+          class=${classMap({
+            "fxview-tab-row-button": true,
+            "ghost-button": true,
+            "icon-button": true,
+            "semi-transparent": true,
+            [this.tertiaryActionClass]: this.tertiaryActionClass,
+          })}
+          id="fxview-tab-row-tertiary-button"
+          data-l10n-id=${this.tertiaryL10nId}
+          data-l10n-args=${ifDefined(this.tertiaryL10nArgs)}
+          aria-haspopup=${ifDefined(this.hasPopup)}
+          @click=${this.tertiaryActionHandler}
+          tabindex="${this.active &&
+          this.currentActiveElementId === "fxview-tab-row-tertiary-button"
+            ? "0"
+            : "-1"}"
+        ></button>`
       )}`;
   }
 
@@ -956,27 +977,6 @@ export class FxviewTabRow extends MozLitElement {
         this.#pinnedTabItemTemplate.bind(this),
         this.#unpinnedTabItemTemplate.bind(this)
       )}
-      ${when(
-        this.tertiaryL10nId && this.tertiaryActionHandler,
-        () => html`<button
-          class=${classMap({
-            "fxview-tab-row-button": true,
-            "ghost-button": true,
-            "icon-button": true,
-            "semi-transparent": true,
-            [this.tertiaryActionClass]: this.tertiaryActionClass,
-          })}
-          id="fxview-tab-row-tertiary-button"
-          data-l10n-id=${this.tertiaryL10nId}
-          data-l10n-args=${ifDefined(this.tertiaryL10nArgs)}
-          aria-haspopup=${ifDefined(this.hasPopup)}
-          @click=${this.tertiaryActionHandler}
-          tabindex="${this.active &&
-          this.currentActiveElementId === "fxview-tab-row-tertiary-button"
-            ? "0"
-            : "-1"}"
-        ></button>`
-      )}
     `;
   }
 

browser/components/firefoxview/history.mjs

@@ -442,7 +442,7 @@ class HistoryInView extends ViewPage {
             </h3>
             <fxview-tab-list
               slot="main"
-              class="with-context-menu"
+              secondaryActionClass="options-button"
               dateTimeFormat="dateTime"
               hasPopup="menu"
               maxTabsLength=${this.maxTabsLength}
@@ -520,7 +520,7 @@ class HistoryInView extends ViewPage {
       )}
       <fxview-tab-list
         slot="main"
-        class="with-context-menu"
+        secondaryActionClass="options-button"
         dateTimeFormat="dateTime"
         hasPopup="menu"
         maxTabsLength="-1"

browser/components/firefoxview/syncedtabs.mjs

@@ -419,7 +419,7 @@ class SyncedTabsInView extends ViewPage {
       </h3>
       <fxview-tab-list
         slot="main"
-        class="with-context-menu"
+        secondaryActionClass="options-button"
         hasPopup="menu"
         .tabItems=${ifDefined(tabItems)}
         .searchQuery=${this.searchQuery}

browser/components/storybook/stories/fxview-tab-list.stories.md

@@ -28,7 +28,7 @@ And used as follows:
 With context menu:
 ```html
 <fxview-tab-list
-    class="with-context-menu"
+    secondaryActionClass="options-button"
     .dateTimeFormat=${"relative"}
     .hasPopup=${"menu"}
     .maxTabsLength=${this.maxTabsLength}
@@ -97,10 +97,12 @@ You'll need to pass along some of the following properties:
 
 ### Notes
 
-* In order to keep this as generic as possible, the icon for the secondary action button will NOT have a default. You can supply a `class` attribute to an instance of `fxview-tab-list` in order to apply styles to things like the icon for the secondary action button. In the above example, I added a class `"with-context-menu"` to `fxview-tab-list`, so I can update the button's icon by using:
+* In order to keep this as generic as possible, the icon for the secondary action button will NOT have a default. You can supply a `class` attribute to an instance of `fxview-tab-list` in order to apply styles to things like the icon for the secondary action button. In the above example, I added a `secondaryActionClass` `"options-button"` to `fxview-tab-list`, so I can update the button's icon by using:
 ```css
-    fxview-tab-list.with-context-menu::part(secondary-button) {
-      background-image: url("chrome://global/skin/icons/more.svg");
+    .fxview-tab-row-button {
+        &.options-button {
+            background-image: url("chrome://global/skin/icons/more.svg");
+        }
     }
 ```
 * You'll also need to define functions for the `fxview-tab-list-primary-action` and `fxview-tab-list-secondary-action` listeners in order to add functionality to the primary element and the secondary button.