tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

fxview-tab-list.stories.mjs (6340B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { html } from "lit.all.mjs";
      6 import "browser/components/firefoxview/fxview-tab-list.mjs";
      7 
      8 const DATE_TIME_FORMATS = {
      9  relative: "relative",
     10  dateTime: "dateTime",
     11  date: "date",
     12  time: "time",
     13 };
     14 
     15 export default {
     16  title: "Domain-specific UI Widgets/Firefox View/Tab List",
     17  component: "fxview-tab-list",
     18  argTypes: {
     19    dateTimeFormat: {
     20      options: Object.keys(DATE_TIME_FORMATS),
     21      mapping: DATE_TIME_FORMATS,
     22      control: { type: "select" },
     23    },
     24  },
     25 };
     26 
     27 const Template = ({
     28  listClass,
     29  dateTimeFormat,
     30  hasPopup,
     31  maxTabsLength,
     32  primaryAction,
     33  secondaryAction,
     34  secondaryActionClass,
     35  tabItems,
     36 }) => html`
     37  <style>
     38    main {
     39      max-width: 750px;
     40    }
     41    fxview-tab-list.menu::part(secondary-button) {
     42      background-image: url("chrome://global/skin/icons/more.svg");
     43    }
     44    fxview-tab-list.dismiss::part(secondary-button) {
     45      background-image: url("chrome://global/skin/icons/close.svg");
     46    }
     47    :host panel-item::part(button) {
     48      padding-inline-start: 12px;
     49      cursor: pointer;
     50    }
     51  </style>
     52  <main>
     53    <fxview-tab-list
     54      class=${listClass}
     55      .hasPopup=${hasPopup}
     56      .dateTimeFormat=${dateTimeFormat}
     57      .maxTabsLength=${maxTabsLength}
     58      .tabItems=${tabItems}
     59      .updatesPaused=${false}
     60      .secondaryActionClass=${secondaryActionClass}
     61      @fxview-tab-list-secondary-action=${secondaryAction}
     62      @fxview-tab-list-primary-action=${primaryAction}
     63    >
     64      <panel-list slot="menu">
     65        <panel-item data-l10n-id="fxviewtabrow-delete"></panel-item>
     66        <panel-item
     67          data-l10n-id="fxviewtabrow-forget-about-this-site"
     68        ></panel-item>
     69        <hr />
     70        <panel-item data-l10n-id="fxviewtabrow-open-in-window"></panel-item>
     71        <panel-item
     72          data-l10n-id="fxviewtabrow-open-in-private-window"
     73        ></panel-item>
     74        <hr />
     75        <panel-item data-l10n-id="fxviewtabrow-add-bookmark"></panel-item>
     76        <panel-item data-l10n-id="fxviewtabrow-save-to-pocket"></panel-item>
     77        <panel-item data-l10n-id="fxviewtabrow-copy-link"></panel-item>
     78      </panel-list>
     79    </fxview-tab-list>
     80  </main>
     81 `;
     82 
     83 const MAX_TABS_LENGTH = 25;
     84 
     85 let secondaryAction = e => {
     86  e.target.querySelector("panel-list").toggle(e.detail.originalEvent);
     87 };
     88 
     89 let primaryAction = () => {
     90  // Open in new tab
     91 };
     92 
     93 const tabItems = [
     94  {
     95    icon: "chrome://global/skin/icons/defaultFavicon.svg",
     96    title: "Example Domain",
     97    url: "example.net",
     98    time: 1678141738136,
     99    primaryL10nId: "fxviewtabrow-tabs-list-tab",
    100    primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }),
    101    secondaryL10nId: "fxviewtabrow-options-menu-button",
    102    secondaryL10nArgs: JSON.stringify({ tabTitle: "Example Domain" }),
    103  },
    104  {
    105    icon: "chrome://global/skin/icons/defaultFavicon.svg",
    106    title: "Example Domain",
    107    url: "example.org",
    108    time: 1678141738136,
    109    primaryL10nId: "fxviewtabrow-tabs-list-tab",
    110    primaryL10nArgs: JSON.stringify({ targetURI: "example.org" }),
    111    secondaryL10nId: "fxviewtabrow-options-menu-button",
    112    secondaryL10nArgs: JSON.stringify({ tabTitle: "Example Domain" }),
    113  },
    114  {
    115    icon: "chrome://global/skin/icons/defaultFavicon.svg",
    116    title: "Example Domain",
    117    url: "example.com",
    118    time: 1678141738136,
    119    primaryL10nId: "fxviewtabrow-tabs-list-tab",
    120    primaryL10nArgs: JSON.stringify({ targetURI: "example.com" }),
    121    secondaryL10nId: "fxviewtabrow-options-menu-button",
    122    secondaryL10nArgs: JSON.stringify({ tabTitle: "Example Domain" }),
    123  },
    124 ];
    125 const recentlyClosedItems = [
    126  {
    127    icon: "chrome://global/skin/icons/defaultFavicon.svg",
    128    title: "Example Domain",
    129    url: "example.net",
    130    tabid: 1,
    131    time: 1678141738136,
    132    primaryL10nId: "fxviewtabrow-tabs-list-tab",
    133    primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }),
    134    secondaryL10nId: "fxviewtabrow-dismiss-tab-button",
    135    secondaryL10nArgs: JSON.stringify({
    136      tabTitle: "Example Domain",
    137    }),
    138  },
    139  {
    140    icon: "chrome://global/skin/icons/defaultFavicon.svg",
    141    title: "Example Domain",
    142    url: "example.org",
    143    tabid: 2,
    144    time: 1678141738136,
    145    primaryL10nId: "fxviewtabrow-tabs-list-tab",
    146    primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }),
    147    secondaryL10nId: "fxviewtabrow-dismiss-tab-button",
    148    secondaryL10nArgs: JSON.stringify({
    149      tabTitle: "Example Domain",
    150    }),
    151  },
    152  {
    153    icon: "chrome://global/skin/icons/defaultFavicon.svg",
    154    title: "Example Domain",
    155    url: "example.com",
    156    tabid: 3,
    157    time: 1678141738136,
    158    primaryL10nId: "fxviewtabrow-tabs-list-tab",
    159    primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }),
    160    secondaryL10nId: "fxviewtabrow-dismiss-tab-button",
    161    secondaryL10nArgs: JSON.stringify({
    162      tabTitle: "Example Domain",
    163    }),
    164  },
    165 ];
    166 
    167 export const RelativeTime = Template.bind({});
    168 RelativeTime.args = {
    169  listClass: "menu",
    170  dateTimeFormat: "relative",
    171  hasPopup: "menu",
    172  maxTabsLength: MAX_TABS_LENGTH,
    173  primaryAction,
    174  secondaryAction,
    175  secondaryActionClass: "options-button",
    176  tabItems,
    177 };
    178 export const DateAndTime = Template.bind({});
    179 DateAndTime.args = {
    180  listClass: "menu",
    181  dateTimeFormat: "dateTime",
    182  maxTabsLength: MAX_TABS_LENGTH,
    183  primaryAction,
    184  secondaryAction,
    185  secondaryActionClass: "options-button",
    186  tabItems,
    187 };
    188 export const DateOnly = Template.bind({});
    189 DateOnly.args = {
    190  listClass: "menu",
    191  dateTimeFormat: "date",
    192  hasPopup: "menu",
    193  maxTabsLength: MAX_TABS_LENGTH,
    194  primaryAction,
    195  secondaryAction,
    196  secondaryActionClass: "options-button",
    197  tabItems,
    198 };
    199 export const TimeOnly = Template.bind({});
    200 TimeOnly.args = {
    201  listClass: "menu",
    202  dateTimeFormat: "time",
    203  hasPopup: "menu",
    204  maxTabsLength: MAX_TABS_LENGTH,
    205  primaryAction,
    206  secondaryAction,
    207  secondaryActionClass: "options-button",
    208  tabItems,
    209 };
    210 export const RecentlyClosed = Template.bind({});
    211 RecentlyClosed.args = {
    212  listClass: "dismiss",
    213  dateTimeFormat: "relative",
    214  hasPopup: null,
    215  maxTabsLength: MAX_TABS_LENGTH,
    216  primaryAction,
    217  secondaryAction: () => {},
    218  secondaryActionClass: "dismiss-button",
    219  tabItems: recentlyClosedItems,
    220 };