);
      return;
    }

    // Select the current row.
    const row = event.target;
    const {
      guid,
      previousElementSibling: prevRow,
      nextElementSibling: nextRow,
    } = row;
    this.selectedGuids.add(guid);

    // Select the previous or next sibling, depending on which arrow key was used.
    if (event.code === "ArrowUp" && prevRow) {
      this.selectedGuids.add(prevRow.guid);
    } else if (event.code === "ArrowDown" && nextRow) {
      this.selectedGuids.add(nextRow.guid);
    } else {
      this.requestVirtualListUpdate();
    }

    // Notify the host component.
    this.dispatchEvent(
      new CustomEvent("update-selection", {
        bubbles: true,
        composed: true,
      })
    );
  }

  clearSelection() {
    this.selectedGuids.clear();
    this.requestVirtualListUpdate();
  }

  get selectAllShortcut() {
    const [l10nMessage] = this.shortcutsLocalization.formatMessagesSync([
      "text-action-select-all-shortcut",
    ]);
    const shortcutKey = l10nMessage.attributes[0].value;
    return shortcutKey;
  }

  #selectAll() {
    for (const { guid } of this.tabItems) {
      this.selectedGuids.add(guid);
    }
    this.requestVirtualListUpdate();
    this.dispatchEvent(
      new CustomEvent("update-selection", {
        bubbles: true,
        composed: true,
      })
    );
  }

  itemTemplate = (tabItem, i) => {
    let tabIndex = -1;
    if ((this.searchQuery || this.sortOption == "lastvisited") && i == 0) {
      // Make the first row focusable if there is no header.
      tabIndex = 0;
    } else if (!this.searchQuery) {
      tabIndex = 0;
    }
    return html`
      <sidebar-tab-row
        ?active=${i == this.activeIndex}
        .canClose=${ifDefined(tabItem.canClose)}
        .closedId=${ifDefined(tabItem.closedId)}
        compact
        .currentActiveElementId=${this.currentActiveElementId}
        .closeRequested=${tabItem.closeRequested}
        .containerObj=${tabItem.containerObj}
        .fxaDeviceId=${ifDefined(tabItem.fxaDeviceId)}
        .favicon=${tabItem.icon}
        .guid=${tabItem.guid}
        .hasPopup=${this.hasPopup}
        .indicators=${tabItem.indicators}
        .primaryL10nArgs=${ifDefined(tabItem.primaryL10nArgs)}
        .primaryL10nId=${tabItem.primaryL10nId}
        role="listitem"
        .searchQuery=${ifDefined(this.searchQuery)}
        .secondaryActionClass=${ifDefined(
          this.secondaryActionClass ?? tabItem.secondaryActionClass
        )}
        .secondaryL10nArgs=${ifDefined(tabItem.secondaryL10nArgs)}
        .secondaryL10nId=${tabItem.secondaryL10nId}
        .selected=${this.selectedGuids.has(tabItem.guid)}
        .sourceClosedId=${ifDefined(tabItem.sourceClosedId)}
        .sourceWindowId=${ifDefined(tabItem.sourceWindowId)}
        .tabElement=${ifDefined(tabItem.tabElement)}
        tabindex=${tabIndex}
        .title=${tabItem.title}
        .url=${tabItem.url}
        @keydown=${e => e.currentTarget.primaryActionHandler(e)}
      ></sidebar-tab-row>
    `;
  };

  stylesheets() {
    return [
      super.stylesheets(),
      html`<link
        rel="stylesheet"
        href="chrome://browser/content/sidebar/sidebar-tab-list.css"
      />`,
    ];
  }
}
customElements.define("sidebar-tab-list", SidebarTabList);

export class SidebarTabRow extends FxviewTabRowBase {
  static properties = {
    containerObj: { type: Object },
    guid: { type: String },
    selected: { type: Boolean, reflect: true },
    indicators: { type: Array },
  };

  /**
   * Fallback to the native implementation in sidebar. We want to focus the
   * entire row instead of delegating it to link or hover buttons.
   */
  focus() {
    HTMLElement.prototype.focus.call(this);
  }

  #getContainerClasses() {
    let containerClasses = ["fxview-tab-row-container-indicator", "icon"];
    if (this.containerObj) {
      let { icon, color } = this.containerObj;
      containerClasses.push(`identity-icon-${icon}`);
      containerClasses.push(`identity-color-${color}`);
    }
    return containerClasses;
  }

  #containerIndicatorTemplate() {
    let tabList = this.getRootNode().host;
    let tabsToCheck = tabList.tabItems;
    return html`${when(
      tabsToCheck.some(tab => tab.containerObj),
      () => html`<span class=${this.#getContainerClasses().join(" ")}></span>`
    )}`;
  }

  secondaryButtonTemplate() {
    return html`${when(
      this.secondaryL10nId && this.secondaryActionClass,
      () =>
        html`<moz-button
          aria-haspopup=${ifDefined(this.hasPopup)}
          class=${classMap({
            "fxview-tab-row-button": true,
            [this.secondaryActionClass]: this.secondaryActionClass,
          })}
          data-l10n-args=${ifDefined(this.secondaryL10nArgs)}
          data-l10n-id=${this.secondaryL10nId}
          id="fxview-tab-row-secondary-button"
          type="icon ghost"
          @click=${this.secondaryActionHandler}
          iconSrc=${this.getIconSrc(this.secondaryActionClass)}
        ></moz-button>`
    )}`;
  }

  render() {
    return html`
      ${this.stylesheets()}
      ${when(
        this.containerObj,
        () => html`
          <link
            rel="stylesheet"
            href="chrome://browser/content/usercontext/usercontext.css"
          />
        `
      )}
      <link
        rel="stylesheet"
        href="chrome://browser/content/sidebar/sidebar-tab-row.css"
      />
      <a
        class=${classMap({
          "fxview-tab-row-main": true,
          "no-action-button-row": this.canClose === false,
          muted: this.indicators?.includes("muted"),
          attention: this.indicators?.includes("attention"),
          soundplaying: this.indicators?.includes("soundplaying"),
          "activemedia-blocked": this.indicators?.includes(
            "activemedia-blocked"
          ),
        })}
        disabled=${this.closeRequested}
        data-l10n-args=${ifDefined(this.primaryL10nArgs)}
        data-l10n-id=${ifDefined(this.primaryL10nId)}
        href=${ifDefined(this.url)}
        id="fxview-tab-row-main"
        tabindex="-1"
        title=${!this.primaryL10nId ? this.url : null}
        @click=${this.primaryActionHandler}
        @keydown=${this.primaryActionHandler}
      >
        ${this.faviconTemplate()} ${this.titleTemplate()}
      </a>
      ${this.secondaryButtonTemplate()} ${this.#containerIndicatorTemplate()}
    `;
  }
}
customElements.define("sidebar-tab-row", SidebarTabRow);
PK