diff --git a/src/browser/themes/shared/zen-icons/common/library/library-boosts-sprite.svg b/src/browser/themes/shared/zen-icons/common/library/library-boosts-sprite.svg new file mode 100644 index 000000000..d3d4146c6 --- /dev/null +++ b/src/browser/themes/shared/zen-icons/common/library/library-boosts-sprite.svg @@ -0,0 +1,1519 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg b/src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg index 6f8551c16..bf9680708 100644 --- a/src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg +++ b/src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg @@ -22,7 +22,7 @@ .zen-downloads-arrow { animation: zenDownloadsArrowBounce 0.583s forwards; } - + diff --git a/src/browser/themes/shared/zen-icons/common/library/library-downloads-sprite.svg b/src/browser/themes/shared/zen-icons/common/library/library-downloads-sprite.svg new file mode 100644 index 000000000..bb27dcdd7 --- /dev/null +++ b/src/browser/themes/shared/zen-icons/common/library/library-downloads-sprite.svg @@ -0,0 +1,511 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/browser/themes/shared/zen-icons/common/library/library-history-sprite.svg b/src/browser/themes/shared/zen-icons/common/library/library-history-sprite.svg new file mode 100644 index 000000000..b8b6a4834 --- /dev/null +++ b/src/browser/themes/shared/zen-icons/common/library/library-history-sprite.svg @@ -0,0 +1,1231 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/browser/themes/shared/zen-icons/common/library/library-media-sprite.svg b/src/browser/themes/shared/zen-icons/common/library/library-media-sprite.svg new file mode 100644 index 000000000..b7141c000 --- /dev/null +++ b/src/browser/themes/shared/zen-icons/common/library/library-media-sprite.svg @@ -0,0 +1,1591 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/browser/themes/shared/zen-icons/common/library/library-spaces-sprite.svg b/src/browser/themes/shared/zen-icons/common/library/library-spaces-sprite.svg new file mode 100644 index 000000000..3659a9708 --- /dev/null +++ b/src/browser/themes/shared/zen-icons/common/library/library-spaces-sprite.svg @@ -0,0 +1,1303 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn index 441d91dd2..2443855d2 100644 --- a/src/browser/themes/shared/zen-icons/jar.inc.mn +++ b/src/browser/themes/shared/zen-icons/jar.inc.mn @@ -453,16 +453,11 @@ * skin/classic/browser/zen-icons/zoom-out.svg (../shared/zen-icons/nucleo/zoom-out.svg) #endif * skin/classic/browser/zen-icons/urlbar-arrow.svg (../shared/zen-icons/common/urlbar-arrow.svg) -* skin/classic/browser/zen-icons/library/library-boosts-active.svg (../shared/zen-icons/common/library/library-boosts-active.svg) -* skin/classic/browser/zen-icons/library/library-boosts.svg (../shared/zen-icons/common/library/library-boosts.svg) -* skin/classic/browser/zen-icons/library/library-downloads-active.svg (../shared/zen-icons/common/library/library-downloads-active.svg) -* skin/classic/browser/zen-icons/library/library-downloads.svg (../shared/zen-icons/common/library/library-downloads.svg) -* skin/classic/browser/zen-icons/library/library-history-active.svg (../shared/zen-icons/common/library/library-history-active.svg) -* skin/classic/browser/zen-icons/library/library-history.svg (../shared/zen-icons/common/library/library-history.svg) -* skin/classic/browser/zen-icons/library/library-media-active.svg (../shared/zen-icons/common/library/library-media-active.svg) -* skin/classic/browser/zen-icons/library/library-media.svg (../shared/zen-icons/common/library/library-media.svg) -* skin/classic/browser/zen-icons/library/library-spaces-active.svg (../shared/zen-icons/common/library/library-spaces-active.svg) -* skin/classic/browser/zen-icons/library/library-spaces.svg (../shared/zen-icons/common/library/library-spaces.svg) + skin/classic/browser/zen-icons/library/library-boosts-sprite.svg (../shared/zen-icons/common/library/library-boosts-sprite.svg) + skin/classic/browser/zen-icons/library/library-downloads-sprite.svg (../shared/zen-icons/common/library/library-downloads-sprite.svg) + skin/classic/browser/zen-icons/library/library-history-sprite.svg (../shared/zen-icons/common/library/library-history-sprite.svg) + skin/classic/browser/zen-icons/library/library-media-sprite.svg (../shared/zen-icons/common/library/library-media-sprite.svg) + skin/classic/browser/zen-icons/library/library-spaces-sprite.svg (../shared/zen-icons/common/library/library-spaces-sprite.svg) * skin/classic/browser/zen-icons/selectable/airplane.svg (../shared/zen-icons/common/selectable/airplane.svg) * skin/classic/browser/zen-icons/selectable/american-football.svg (../shared/zen-icons/common/selectable/american-football.svg) * skin/classic/browser/zen-icons/selectable/baseball.svg (../shared/zen-icons/common/selectable/baseball.svg) diff --git a/src/zen/library/ZenLibrary.mjs b/src/zen/library/ZenLibrary.mjs index 85665b854..4fc909dac 100644 --- a/src/zen/library/ZenLibrary.mjs +++ b/src/zen/library/ZenLibrary.mjs @@ -60,7 +60,6 @@ export class ZenLibrary extends MozLitElement { constructor() { super(); - this._iconKeys = {}; this.activeTab = Services.prefs.getStringPref(PREVIOUS_TAB_PREF, "") || "history"; } @@ -68,7 +67,6 @@ export class ZenLibrary extends MozLitElement { if (this.activeTab === value) { return; } - this._iconKeys[value] = Date.now(); this._activeTab = value; Services.prefs.setStringPref(PREVIOUS_TAB_PREF, value); } @@ -83,6 +81,7 @@ export class ZenLibrary extends MozLitElement { return; } window.addEventListener("keydown", this); + this.addEventListener("animationend", this); // Add connected call back and make `appContentWrapper` transform translate the oposite of this element this.#resizeObserver = new ResizeObserver(() => { if (gZenWorkspaces._swipeManager._swipeState.librarySwiping) { @@ -118,6 +117,24 @@ export class ZenLibrary extends MozLitElement { this._header.appendChild( gZenVerticalTabsManager.actualWindowButtons.cloneNode(true) ); + const activeTabEl = this.querySelector(".zen-library-tab[active]"); + if (activeTabEl) { + this.#animateTabIcon(activeTabEl); + } + } + + /** + * Plays a tab's icon sprite animation, reload-to-stop style: the [animate] + * attribute starts the strip's steps() animation (see zen-library.css) and + * the animationend handler removes it again. Restarts if mid-animation. + * + * @param {Element} tab + */ + #animateTabIcon(tab) { + tab.removeAttribute("animate"); + // Flush styles so re-adding the attribute restarts the animation. + void tab.offsetWidth; + tab.setAttribute("animate", "true"); } render() { @@ -134,22 +151,15 @@ export class ZenLibrary extends MozLitElement { { - this._iconKeys[Section.id] = Date.now(); - if (this.activeTab !== Section.id) { - this.activeTab = Section.id; - } else { - this.requestUpdate(); - } + data-section=${Section.id} + @click=${event => { + this.activeTab = Section.id; + this.#animateTabIcon(event.currentTarget); }} > - ${this.activeTab === Section.id - ? html`` - : html``} +
+
+
` @@ -175,6 +185,12 @@ export class ZenLibrary extends MozLitElement { } break; } + case "animationend": { + if (event.animationName === "zen-library-tab-icon-play") { + event.target.closest(".zen-library-tab")?.removeAttribute("animate"); + } + break; + } } } diff --git a/src/zen/library/zen-library.css b/src/zen/library/zen-library.css index cd53f24f8..549285019 100644 --- a/src/zen/library/zen-library.css +++ b/src/zen/library/zen-library.css @@ -109,12 +109,55 @@ zen-library[open] { background: color-mix(in srgb, currentColor 10%, transparent); } - & img { + & .zen-library-tab-icon { width: 28px; height: 28px; + overflow: clip; + } + + & .zen-library-tab-icon-image { + width: calc(36 * 28px); + height: 28px; fill: rgba(255, 255, 255, 0.8); stroke: var(--zen-colors-primary); -moz-context-properties: fill, stroke; + transform: translateX(0); + } + + &[data-section="history"] .zen-library-tab-icon-image { + background-image: url("chrome://browser/skin/zen-icons/library/library-history-sprite.svg"); + } + + &[data-section="downloads"] .zen-library-tab-icon-image { + background-image: url("chrome://browser/skin/zen-icons/library/library-downloads-sprite.svg"); + } + + &[data-section="boosts"] .zen-library-tab-icon-image { + background-image: url("chrome://browser/skin/zen-icons/library/library-boosts-sprite.svg"); + } + + &[data-section="spaces"] .zen-library-tab-icon-image { + background-image: url("chrome://browser/skin/zen-icons/library/library-spaces-sprite.svg"); + } + + &[data-section="media"] .zen-library-tab-icon-image { + background-image: url("chrome://browser/skin/zen-icons/library/library-media-sprite.svg"); + } + + @media (prefers-reduced-motion: no-preference) { + &[animate] .zen-library-tab-icon-image { + animation: zen-library-tab-icon-play 0.583s steps(36, jump-none); + } + } +} + +@keyframes zen-library-tab-icon-play { + from { + transform: translateX(0); + } + + to { + transform: translateX(calc(35 * -28px)); } }