Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 493 insertions, 0 deletions

diff --git a/browser/components/firefoxview/fxview-tab-list.mjs b/browser/components/firefoxview/fxview-tab-list.mjs
new file mode 100644
index 0000000000..1bc0dcd6a7
--- /dev/null
+++ b/browser/components/firefoxview/fxview-tab-list.mjs
@@ -0,0 +1,493 @@
+/* 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/. */
+
+import {
+  html,
+  ifDefined,
+  styleMap,
+} from "chrome://global/content/vendor/lit.all.mjs";
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+const NOW_THRESHOLD_MS = 91000;
+const lazy = {};
+let XPCOMUtils;
+
+if (!window.IS_STORYBOOK) {
+  XPCOMUtils = ChromeUtils.importESModule(
+    "resource://gre/modules/XPCOMUtils.sys.mjs"
+  ).XPCOMUtils;
+  XPCOMUtils.defineLazyGetter(lazy, "relativeTimeFormat", () => {
+    return new Services.intl.RelativeTimeFormat(undefined, {
+      style: "narrow",
+    });
+  });
+
+  ChromeUtils.defineESModuleGetters(lazy, {
+    BrowserUtils: "resource://gre/modules/BrowserUtils.sys.mjs",
+    PlacesUIUtils: "resource:///modules/PlacesUIUtils.sys.mjs",
+  });
+}
+
+/**
+ * A list of clickable tab items
+ *
+ * @property {string} dateTimeFormat - Expected format for date and/or time
+ * @property {string} hasPopup - The aria-haspopup attribute for the secondary action, if required
+ * @property {number} maxTabsLength - The max number of tabs for the list
+ * @property {Array} tabItems - Items to show in the tab list
+ */
+export default class FxviewTabList extends MozLitElement {
+  constructor() {
+    super();
+    window.MozXULElement.insertFTLIfNeeded("toolkit/branding/brandings.ftl");
+    window.MozXULElement.insertFTLIfNeeded("browser/fxviewTabList.ftl");
+    this.activeIndex = 0;
+    this.currentActiveElementId = "fxview-tab-row-main";
+    this.hasPopup = null;
+    this.dateTimeFormat = "relative";
+    this.maxTabsLength = 25;
+    this.tabItems = [];
+    this.#register();
+  }
+
+  static properties = {
+    activeIndex: { type: Number },
+    currentActiveElementId: { type: String },
+    dateTimeFormat: { type: String },
+    hasPopup: { type: String },
+    maxTabsLength: { type: Number },
+    tabItems: { type: Array },
+  };
+
+  static queries = {
+    rowEls: { all: "fxview-tab-row" },
+  };
+
+  willUpdate(changes) {
+    this.activeIndex = Math.min(
+      Math.max(this.activeIndex, 0),
+      this.tabItems.length - 1
+    );
+
+    if (changes.has("dateTimeFormat")) {
+      if (this.dateTimeFormat == "relative" && !window.IS_STORYBOOK) {
+        this.intervalID = setInterval(
+          () => this.onIntervalUpdate(),
+          this.timeMsPref
+        );
+      } else {
+        clearInterval(this.intervalID);
+      }
+    }
+  }
+
+  #register() {
+    if (!window.IS_STORYBOOK) {
+      XPCOMUtils.defineLazyPreferenceGetter(
+        this,
+        "timeMsPref",
+        "browser.tabs.firefox-view.updateTimeMs",
+        NOW_THRESHOLD_MS,
+        (prefName, oldVal, newVal) => {
+          if (!this.isConnected) {
+            return;
+          }
+          clearInterval(this.intervalID);
+          this.intervalID = setInterval(() => {
+            this.onIntervalUpdate();
+          }, newVal);
+          this.requestUpdate();
+        }
+      );
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.dateTimeFormat === "relative" && !window.IS_STORYBOOK) {
+      this.intervalID = setInterval(
+        () => this.onIntervalUpdate(),
+        this.timeMsPref
+      );
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.intervalID) {
+      clearInterval(this.intervalID);
+    }
+  }
+
+  async getUpdateComplete() {
+    await super.getUpdateComplete();
+    await Promise.all(Array.from(this.rowEls).map(item => item.updateComplete));
+  }
+
+  onIntervalUpdate() {
+    this.requestUpdate();
+    Array.from(this.rowEls).forEach(fxviewTabRow =>
+      fxviewTabRow.requestUpdate()
+    );
+  }
+
+  /**
+   * Focuses the expected element (either the link or button) within fxview-tab-row
+   * The currently focused/active element ID within a row is stored in this.currentActiveElementId
+   */
+  handleFocusElementInRow(e) {
+    let fxviewTabRow = e.target;
+    if (e.code == "ArrowUp") {
+      // Focus either the link or button of the previous row based on this.currentActiveElementId
+      e.preventDefault();
+      this.focusPrevRow();
+    } else if (e.code == "ArrowDown") {
+      // Focus either the link or button of the next row based on this.currentActiveElementId
+      e.preventDefault();
+      this.focusNextRow();
+    } else if (e.code == "ArrowRight") {
+      // Focus either the link or the button in the current row and
+      // set this.currentActiveElementId to that element's ID
+      e.preventDefault();
+      if (document.dir == "rtl") {
+        this.currentActiveElementId = fxviewTabRow.focusLink();
+      } else {
+        this.currentActiveElementId = fxviewTabRow.focusButton();
+      }
+    } else if (e.code == "ArrowLeft") {
+      // Focus either the link or the button in the current row and
+      // set this.currentActiveElementId to that element's ID
+      e.preventDefault();
+      if (document.dir == "rtl") {
+        this.currentActiveElementId = fxviewTabRow.focusButton();
+      } else {
+        this.currentActiveElementId = fxviewTabRow.focusLink();
+      }
+    }
+  }
+
+  focusPrevRow() {
+    // Focus link or button of item above
+    let previousIndex = this.activeIndex - 1;
+    if (previousIndex >= 0) {
+      this.rowEls[previousIndex].focus();
+      this.activeIndex = previousIndex;
+    }
+  }
+
+  focusNextRow() {
+    // Focus link or button of item below
+    let nextIndex = this.activeIndex + 1;
+    if (nextIndex < this.rowEls.length) {
+      this.rowEls[nextIndex].focus();
+      this.activeIndex = nextIndex;
+    }
+  }
+
+  // Use a relative URL in storybook to get faster reloads on style changes.
+  static stylesheetUrl = window.IS_STORYBOOK
+    ? "./fxview-tab-list.css"
+    : "chrome://browser/content/firefoxview/fxview-tab-list.css";
+
+  render() {
+    this.tabItems = this.tabItems.slice(0, this.maxTabsLength);
+    const {
+      activeIndex,
+      currentActiveElementId,
+      dateTimeFormat,
+      hasPopup,
+      tabItems,
+    } = this;
+    return html`
+      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <div
+        id="fxview-tab-list"
+        class="fxview-tab-list"
+        role="list"
+        @keydown=${this.handleFocusElementInRow}
+      >
+        ${tabItems.map(
+          (tabItem, i) =>
+            html`
+              <fxview-tab-row
+                exportparts="secondary-button"
+                ?active=${i == activeIndex}
+                .hasPopup=${hasPopup}
+                .currentActiveElementId=${currentActiveElementId}
+                .dateTimeFormat=${dateTimeFormat}
+                .favicon=${tabItem.icon}
+                .primaryL10nId=${tabItem.primaryL10nId}
+                .primaryL10nArgs=${ifDefined(tabItem.primaryL10nArgs)}
+                role="listitem"
+                .secondaryL10nId=${tabItem.secondaryL10nId}
+                .secondaryL10nArgs=${ifDefined(tabItem.secondaryL10nArgs)}
+                .tabid=${ifDefined(tabItem.tabid || tabItem.closedId)}
+                .time=${(tabItem.time || tabItem.closedAt).toString().length ===
+                16
+                  ? (tabItem.time || tabItem.closedAt) / 1000
+                  : tabItem.time || tabItem.closedAt}
+                .timeMsPref=${ifDefined(this.timeMsPref)}
+                .title=${tabItem.title}
+                .url=${tabItem.url}
+              >
+              </fxview-tab-row>
+            `
+        )}
+      </div>
+      <slot name="menu"></slot>
+    `;
+  }
+}
+customElements.define("fxview-tab-list", FxviewTabList);
+
+/**
+ * A tab item that displays favicon, title, url, and time of last access
+ *
+ * @property {boolean} active - Should current item have focus on keydown
+ * @property {string} currentActiveElementId - ID of currently focused element within each tab item
+ * @property {string} dateTimeFormat - Expected format for date and/or time
+ * @property {string} hasPopup - The aria-haspopup attribute for the secondary action, if required
+ * @property {number} tabid - The tab ID for when the tab item.
+ * @property {string} favicon - The favicon for the tab item.
+ * @property {string} primaryL10nId - The l10n id used for the primary action element
+ * @property {string} primaryL10nArgs - The l10n args used for the primary action element
+ * @property {string} secondaryL10nId - The l10n id used for the secondary action button
+ * @property {string} secondaryL10nArgs - The l10n args used for the secondary action element
+ * @property {number} time - The timestamp for when the tab was last accessed.
+ * @property {string} title - The title for the tab item.
+ * @property {string} url - The url for the tab item.
+ * @property {number} timeMsPref - The frequency in milliseconds of updates to relative time
+ */
+export class FxviewTabRow extends MozLitElement {
+  constructor() {
+    super();
+    this.active = false;
+    this.currentActiveElementId = "fxview-tab-row-main";
+  }
+
+  static properties = {
+    active: { type: Boolean },
+    currentActiveElementId: { type: String },
+    dateTimeFormat: { type: String },
+    favicon: { type: String },
+    hasPopup: { type: String },
+    primaryL10nId: { type: String },
+    primaryL10nArgs: { type: String },
+    secondaryL10nId: { type: String },
+    secondaryL10nArgs: { type: String },
+    tabid: { type: Number },
+    time: { type: Number },
+    title: { type: String },
+    timeMsPref: { type: Number },
+    url: { type: String },
+  };
+
+  static queries = {
+    mainEl: ".fxview-tab-row-main",
+    buttonEl: ".fxview-tab-row-button:not([hidden])",
+  };
+
+  get currentFocusable() {
+    return this.renderRoot.getElementById(this.currentActiveElementId);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  focus() {
+    this.currentFocusable.focus();
+  }
+
+  focusButton() {
+    this.buttonEl.focus();
+    return this.buttonEl.id;
+  }
+
+  focusLink() {
+    this.mainEl.focus();
+    return this.mainEl.id;
+  }
+
+  // Use a relative URL in storybook to get faster reloads on style changes.
+  static stylesheetUrl = window.IS_STORYBOOK
+    ? "./fxview-tab-row.css"
+    : "chrome://browser/content/firefoxview/fxview-tab-row.css";
+
+  dateFluentArgs(timestamp, dateTimeFormat) {
+    if (dateTimeFormat === "date" || dateTimeFormat === "dateTime") {
+      return JSON.stringify({ date: timestamp });
+    }
+    return null;
+  }
+
+  dateFluentId(timestamp, dateTimeFormat, _nowThresholdMs = NOW_THRESHOLD_MS) {
+    if (!timestamp) {
+      return "";
+    }
+    if (dateTimeFormat === "relative") {
+      const elapsed = Date.now() - timestamp;
+      if (elapsed <= _nowThresholdMs || !lazy.relativeTimeFormat) {
+        // Use a different string for very recent timestamps
+        return "fxviewtabrow-just-now-timestamp";
+      }
+      return null;
+    } else if (dateTimeFormat === "date" || dateTimeFormat === "dateTime") {
+      return "fxviewtabrow-date";
+    }
+    return null;
+  }
+
+  relativeTime(timestamp, dateTimeFormat, _nowThresholdMs = NOW_THRESHOLD_MS) {
+    if (dateTimeFormat === "relative") {
+      const elapsed = Date.now() - timestamp;
+      if (elapsed > _nowThresholdMs && lazy.relativeTimeFormat) {
+        return lazy.relativeTimeFormat.formatBestUnit(new Date(timestamp));
+      }
+    }
+    return null;
+  }
+
+  timeFluentId(dateTimeFormat) {
+    if (dateTimeFormat === "time" || dateTimeFormat === "dateTime") {
+      return "fxviewtabrow-time";
+    }
+    return null;
+  }
+
+  formatURIForDisplay(uriString) {
+    return !window.IS_STORYBOOK
+      ? lazy.BrowserUtils.formatURIStringForDisplay(uriString)
+      : uriString;
+  }
+
+  getImageUrl(icon, targetURI) {
+    if (!window.IS_STORYBOOK) {
+      return icon
+        ? lazy.PlacesUIUtils.getImageURL(icon)
+        : `page-icon:${targetURI}`;
+    }
+    return `chrome://global/skin/icons/defaultFavicon.svg`;
+  }
+
+  primaryActionHandler(event) {
+    if (
+      (event.type == "click" && !event.altKey) ||
+      (event.type == "keydown" && event.code == "Enter") ||
+      (event.type == "keydown" && event.code == "Space")
+    ) {
+      event.preventDefault();
+      if (!window.IS_STORYBOOK) {
+        this.dispatchEvent(
+          new CustomEvent("fxview-tab-list-primary-action", {
+            bubbles: true,
+            composed: true,
+            detail: { originalEvent: event, item: this },
+          })
+        );
+      }
+    }
+  }
+
+  secondaryActionHandler(event) {
+    if (
+      (event.type == "click" && event.detail && !event.altKey) ||
+      // detail=0 is from keyboard
+      (event.type == "click" && !event.detail)
+    ) {
+      event.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("fxview-tab-list-secondary-action", {
+          bubbles: true,
+          composed: true,
+          detail: { originalEvent: event, item: this },
+        })
+      );
+    }
+  }
+
+  render() {
+    const title = this.title;
+    const relativeString = this.relativeTime(
+      this.time,
+      this.dateTimeFormat,
+      !window.IS_STORYBOOK ? this.timeMsPref : NOW_THRESHOLD_MS
+    );
+    const dateString = this.dateFluentId(
+      this.time,
+      this.dateTimeFormat,
+      !window.IS_STORYBOOK ? this.timeMsPref : NOW_THRESHOLD_MS
+    );
+    const dateArgs = this.dateFluentArgs(this.time, this.dateTimeFormat);
+    const timeString = this.timeFluentId(this.dateTimeFormat);
+    const time = this.time;
+    const timeArgs = JSON.stringify({ time });
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://global/skin/in-content/common.css"
+      />
+      <link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
+      <a
+        href=${this.url}
+        class="fxview-tab-row-main"
+        id="fxview-tab-row-main"
+        tabindex=${this.active &&
+        this.currentActiveElementId === "fxview-tab-row-main"
+          ? "0"
+          : "-1"}
+        data-l10n-id=${this.primaryL10nId}
+        data-l10n-args=${ifDefined(this.primaryL10nArgs)}
+        @click=${this.primaryActionHandler}
+        @keydown=${this.primaryActionHandler}
+      >
+        <span
+          class="fxview-tab-row-favicon icon"
+          id="fxview-tab-row-favicon"
+          style=${styleMap({
+            backgroundImage: `url(${this.getImageUrl(this.favicon, this.url)})`,
+          })}
+        ></span>
+        <span class="fxview-tab-row-title" id="fxview-tab-row-title">
+          ${title}
+        </span>
+        <span class="fxview-tab-row-url" id="fxview-tab-row-url">
+          ${this.formatURIForDisplay(this.url)}
+        </span>
+        <span class="fxview-tab-row-date" id="fxview-tab-row-date">
+          <span
+            ?hidden=${relativeString || !dateString}
+            data-l10n-id=${ifDefined(dateString)}
+            data-l10n-args=${ifDefined(dateArgs)}
+          ></span>
+          <span ?hidden=${!relativeString}>${relativeString}</span>
+        </span>
+        <span
+          class="fxview-tab-row-time"
+          id="fxview-tab-row-time"
+          ?hidden=${!timeString}
+          data-timestamp=${this.time}
+          data-l10n-id=${ifDefined(timeString)}
+          data-l10n-args=${timeArgs}
+        >
+        </span>
+      </a>
+      <button
+        class="fxview-tab-row-button ghost-button icon-button semi-transparent"
+        id="fxview-tab-row-secondary-button"
+        part="secondary-button"
+        data-l10n-id=${this.secondaryL10nId}
+        data-l10n-args=${ifDefined(this.secondaryL10nArgs)}
+        aria-haspopup=${ifDefined(this.hasPopup)}
+        @click=${this.secondaryActionHandler}
+        tabindex="${this.active &&
+        this.currentActiveElementId === "fxview-tab-row-secondary-button"
+          ? "0"
+          : "-1"}"
+      ></button>
+    `;
+  }
+}
+
+customElements.define("fxview-tab-row", FxviewTabRow);