diff --git a/src/browser/base/content/zen-glance.inc.xhtml b/src/browser/base/content/zen-glance.inc.xhtml index 51891d19c..3a2dcc0ae 100644 --- a/src/browser/base/content/zen-glance.inc.xhtml +++ b/src/browser/base/content/zen-glance.inc.xhtml @@ -1,4 +1,5 @@ diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs index 80947e1a8..a450dc6f8 100644 --- a/src/browser/base/zen-components/ZenGlanceManager.mjs +++ b/src/browser/base/zen-components/ZenGlanceManager.mjs @@ -20,10 +20,30 @@ ); ChromeUtils.defineLazyGetter(this, 'sidebarButtons', () => document.getElementById('zen-glance-sidebar-container')); - document.getElementById('tabbrowser-tabpanels').addEventListener('click', this.onOverlayClick.bind(this)); - Services.obs.addObserver(this, 'quit-application-requested'); + + this.#addSidebarButtonListeners(); + } + + #addSidebarButtonListeners() { + this.sidebarButtons.addEventListener('command', (event) => { + const button = event.target.closest('toolbarbutton'); + if (!button) { + return; + } + switch (button.id) { + case 'zen-glance-sidebar-close': + this.closeGlance({ onTabClose: true }); + break; + case 'zen-glance-sidebar-fullscreen': + this.fullyOpenGlance(); + break; + case 'zen-glance-sidebar-split': + this.splitGlance(); + break; + } + }); } get #currentBrowser() { @@ -524,7 +544,7 @@ this.#glances.delete(this.#currentGlanceID); } - async fullyOpenGlance() { + async fullyOpenGlance({ forSplit = false } = {}) { this.animatingFullOpen = true; gBrowser._insertTabAtIndex(this.#currentTab, { index: this.getTabPosition(this.#currentTab), @@ -540,7 +560,7 @@ this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('zen-glance-background'); this.#currentParentTab._visuallySelected = false; this.hideSidebarButtons(); - if (gReduceMotion) { + if (gReduceMotion || forSplit) { this.finishOpeningGlance(); return; } @@ -593,6 +613,20 @@ getFocusedTab(aDir) { return aDir < 0 ? this.#currentParentTab : this.#currentTab; } + + async splitGlance() { + if (this.#currentGlanceID) { + const currentTab = this.#currentTab; + const currentParentTab = this.#currentParentTab; + + await this.fullyOpenGlance({ forSplit: true }); + gZenViewSplitter.splitTabs([currentTab, currentParentTab], 'vsep'); + const browserContainer = currentTab.linkedBrowser?.closest('.browserSidebarContainer'); + if (!gReduceMotion && browserContainer) { + gZenViewSplitter.animateBrowserDrop(browserContainer); + } + } + } } window.gZenGlanceManager = new ZenGlanceManager(); diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index f3d0d49ec..ac5243750 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/src/browser/base/zen-components/ZenViewSplitter.mjs @@ -624,6 +624,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { this.dropZone.setAttribute('enabled', true); } const splitNode = this.getSplitNodeFromTab(tab); + if (!splitNode) return; const posToRoot = { ...splitNode.positionToRoot }; const browserRect = browser.getBoundingClientRect(); @@ -1589,28 +1590,32 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { } if (browserContainer) { - gZenUIManager.motion - .animate( - browserContainer, - { - scale: [0.97, 1], - opacity: [0, 1], - }, - { - type: 'spring', - bounce: 0.4, - duration: 0.2, - delay: 0.1, - } - ) - .then(() => { - this._maybeRemoveFakeBrowser(false); - this._finishAllAnimatingPromise = null; - }); + this.animateBrowserDrop(browserContainer, () => { + this._maybeRemoveFakeBrowser(false); + this._finishAllAnimatingPromise = null; + }); } return true; } + animateBrowserDrop(browserContainer, callback = () => {}) { + gZenUIManager.motion + .animate( + browserContainer, + { + scale: [0.97, 1], + opacity: [0, 1], + }, + { + type: 'spring', + bounce: 0.4, + duration: 0.2, + delay: 0.1, + } + ) + .then(callback); + } + handleTabDrop(event, urls, replace, inBackground) { if (replace || urls.length !== 1) { return false; diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index 74bb5d11d..13ca3d7dc 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -432,10 +432,8 @@ list-style-image: url('bookmark.svg') !important; } -#zen-split-views-button { - list-style-image: url('split.svg') !important; - fill: var(--toolbarbutton-icon-fill-attention); - fill-opacity: 1; +#zen-glance-sidebar-split { + list-style-image: url('split.svg'); } #sidebar-box[sidebarcommand='viewTabsSidebar'] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon, diff --git a/src/browser/themes/shared/zen-icons/lin/icons.css b/src/browser/themes/shared/zen-icons/lin/icons.css deleted file mode 100644 index d52a1e7fe..000000000 --- a/src/browser/themes/shared/zen-icons/lin/icons.css +++ /dev/null @@ -1,1135 +0,0 @@ -/* - * 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/. - */ - -.subviewbutton { - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; -} - -.private-browsing-indicator-icon { - list-style-image: url('account-private.svg') !important; - border-radius: 100% !important; -} - -#back-button, -#zen-sidebar-web-panel-back { - list-style-image: url('back.svg') !important; -} - -#zenSplitViewModifierActivateReallocation > image { - list-style-image: url('move-tab.svg') !important; -} - -#forward-button, -#zen-sidebar-web-panel-forward { - list-style-image: url('forward.svg') !important; -} - -#reload-button, -#zen-sidebar-web-panel-reload { - list-style-image: url('reload.svg') !important; -} - -#stop-button, -.close-icon, -#zen-sidebar-web-panel-close, -#zen-glance-sidebar-close, -.zen-theme-picker-custom-list-item-remove { - list-style-image: url('close.svg') !important; -} - -.reset-icon { - list-style-image: url('reload.svg') !important; -} - -.tab-reset-button { - list-style-image: url('unpin.svg') !important; -} - -#sidebar-button { - list-style-image: url('sidebars-right.svg') !important; -} - -#context_zenSplitTabs, -#context-zenAddToWebPanel { - /* TODO: Add split view icon */ - --menu-image: url('sidebars-right.svg') !important; -} - -#context-zen-change-workspace-tab { - --menu-image: url('move-tab.svg') !important; -} - -#context-zenSplitLink { - --menu-image: url('split.svg') !important; -} - -#sidebar-button:-moz-locale-dir(ltr):not([positionend]), -#sidebar-button:-moz-locale-dir(rtl)[positionend] { - list-style-image: url('chrome://browser/skin/sidebars.svg') !important; -} - -#downloads-button, -#downloads-indicator-anchor, -#appMenu-downloads-button, -#appMenu-library-downloads-button { - list-style-image: url('downloads.svg') !important; -} - -#appMenu-translate-button { - list-style-image: url('translations.svg') !important; -} - -#appMenu-zoom-controls { - list-style-image: url('plus.svg') !important; -} - -#appMenu-passwords-button, -#password-notification-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype='generatedPassword'] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype='loginWithOrigin'] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype='login'] > .ac-site-icon { - list-style-image: url('passwords.svg') !important; -} - -#nav-bar-overflow-button { - list-style-image: url('chevron.svg') !important; -} - -#zen-rice-share-options .options-header { - list-style-image: url('arrow-right.svg'); -} - -#PanelUI-menu-button, -#appMenu-more-button2, -#zen-workspace-actions-menu-icon { - list-style-image: url('menu.svg') !important; -} - -#appMenu-help-button2 { - list-style-image: url('help.svg') !important; -} - -#sync-button, -.urlbarView-row[source='tabs'] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, -#urlbar-engine-one-off-item-tabs { - list-style-image: url('tab.svg') !important; -} - -#history-panelmenu, -.urlbarView-row[source='history'] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, -#urlbar-engine-one-off-item-history, -#appMenu-history-button, -#appMenu-library-history-button, -#sidebar-switcher-history, -#zen-history-button, -#sidebar-box[sidebarcommand='viewHistorySidebar'] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { - list-style-image: url('history.svg') !important; -} - -#save-page-button, -#appMenu-save-file-button2 { - list-style-image: url('save.svg') !important; -} - -#print-button, -#appMenu-print-button2 { - list-style-image: url('print.svg') !important; -} - -.searchbar-search-icon { - list-style-image: url('search-glass.svg') !important; -} - -#find-button, -#appMenu-find-button2 { - list-style-image: url('search-page.svg') !important; -} - -#open-file-button { - list-style-image: url('open.svg') !important; -} - -#context_zenOpenWorkspace { - --menu-image: url('open.svg') !important; -} - -#context_zenSetAsDefaultWorkspace { - --menu-image: url('bookmark-hollow.svg') !important; -} - -#context_zenEditWorkspace, -#zenToolbarThemePicker { - --menu-image: url('edit-theme.svg') !important; -} - -#add-ons-button, -#appMenu-extensions-themes-button, -#unified-extensions-button { - list-style-image: url('extension.svg') !important; -} - -#zoom-out-button, -#appMenu-zoomReduce-button2 { - list-style-image: url('zoom-out.svg') !important; -} - -#zoom-in-button, -#tabs-newtab-button, -#new-tab-button, -#appMenu-zoomEnlarge-button2, -#PanelUI-zen-profiles-newProfile, -#zen-sidebar-add-panel-button, -#PanelUI-zen-workspaces-new image, -#PanelUI-zen-gradient-generator-color-custom-add image { - list-style-image: url('plus.svg') !important; -} - -#PanelUI-zen-workspaces-reorder-mode image { - list-style-image: url('move-tab.svg') !important; - rotate: 90deg; -} - -#cut-button { - list-style-image: url('edit-cut.svg') !important; -} - -#copy-button { - list-style-image: url('edit-copy.svg') !important; -} - -#paste-button { - list-style-image: url('edit-paste.svg') !important; -} - -#email-link-button { - list-style-image: url('mail.svg') !important; -} - -#screenshot-button { - list-style-image: url('screenshot.svg') !important; -} - -#preferences-button, -#zen-preferences-button, -.search-setting-button > .button-box > .button-icon, -#appMenu-settings-button, -#PanelUI-zen-profiles-managePrfs, -.unified-extensions-item-open-menu.subviewbutton { - list-style-image: url('settings.svg') !important; -} - -#spell-check-enabled { - list-style-image: url('spell-check.svg') !important; -} - -#panic-button { - list-style-image: url('forget.svg') !important; -} - -#appMenu-new-private-window-button2, -#PanelUI-zen-profiles-privateWin { - list-style-image: url('private-window.svg') !important; -} - -#privatebrowsing-button { - list-style-image: url('privateBrowsing.svg') !important; -} - -#save-to-pocket-button { - list-style-image: url('pocket-outline.svg') !important; -} - -#profiler-button-button > .toolbarbutton-icon, -.subviewbutton[label='Task Manager'] { - list-style-image: url('tool-profiler.svg') !important; -} - -#developer-button { - list-style-image: url('developer.svg') !important; -} - -#new-window-button, -#appMenu-new-window-button2 { - list-style-image: url('window.svg') !important; -} - -#restore-button, -#fullscreen-button, -#zen-glance-sidebar-open, -#appMenu-fullscreen-button2 { - list-style-image: url('fullscreen.svg') !important; -} - -#restore-button[checked], -#fullscreen-button[checked], -#appMenu-fullscreen-button2[checked] { - list-style-image: url('fullscreen-exit.svg') !important; -} - -#bookmarks-menu-button, -#appMenu-bookmarks-button, -#sidebar-switcher-bookmarks, -#appMenu-library-bookmarks-button, -#sidebar-box[sidebarcommand='viewBookmarksSidebar'] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { - list-style-image: url('bookmark-star-on-tray.svg') !important; -} - -#home-button, -#zen-sidebar-web-panel-home { - list-style-image: url('home.svg') !important; -} - -#library-button { - list-style-image: url('library.svg') !important; -} - -/* identity icons */ -#identity-icon { - list-style-image: url('info.svg'); -} - -#identity-box[pageproxystate='valid'].chromeUI #identity-icon { - filter: grayscale(1); -} - -#identity-box[pageproxystate='valid'].localResource #identity-icon { - list-style-image: url('page-portrait.svg') !important; -} - -#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate='invalid'] #identity-icon { - list-style-image: url('search-glass.svg') !important; -} - -#urlbar[actiontype='extension'] > #urlbar-input-container > #identity-box #identity-icon, -#identity-box[pageproxystate='valid'].extensionPage #identity-icon { - list-style-image: url('extension.svg') !important; -} - -#identity-box[pageproxystate='valid'].verifiedDomain #identity-icon, -#identity-box[pageproxystate='valid'].mixedActiveBlocked #identity-icon { - list-style-image: url('security.svg') !important; -} - -#urlbar-input-container[pageproxystate='valid'] - > #tracking-protection-icon-container - > #tracking-protection-icon-box - > #tracking-protection-icon { - list-style-image: url('tracking-protection.svg') !important; -} - -/* security */ -.identity-popup-security-connection { - list-style-image: url('security-broken.svg') !important; -} - -#identity-box[pageproxystate='valid'].notSecure #identity-icon, -#identity-box[pageproxystate='valid'].mixedActiveContent #identity-icon, -#identity-box[pageproxystate='valid'].httpsOnlyErrorPage #identity-icon { - list-style-image: url('security-broken.svg') !important; -} - -#identity-popup[connection='chrome'] .identity-popup-security-connection { - filter: grayscale(1); -} - -#identity-popup[connection='file'] .identity-popup-security-connection { - list-style-image: url('page-portrait.svg') !important; -} - -#identity-popup[connection^='secure'] .identity-popup-security-connection { - list-style-image: url('security.svg') !important; -} - -#identity-popup[ciphers='weak'] .identity-popup-security-connection, -#identity-popup[mixedcontent~='passive-loaded'][isbroken] .identity-popup-security-connection, -#identity-popup[connection='secure-cert-user-overridden'] .identity-popup-security-connection, -#identity-popup[connection='cert-error-page'] .identity-popup-security-connection { - list-style-image: url('security-warning.svg') !important; -} - -#identity-popup[connection='net-error-page'] .identity-popup-security-connection { - list-style-image: url('info.svg') !important; -} - -#identity-popup[connection='extension'] .identity-popup-security-connection { - list-style-image: url('extension.svg') !important; -} - -#appMenu-new-tab-button2 { - list-style-image: url('new-tab-image.svg') !important; -} - -.findbar-find-previous { - list-style-image: url('arrow-up.svg') !important; -} - -.findbar-find-next { - list-style-image: url('arrow-down.svg') !important; -} - -.zen-workspace-actions-reorder-icon { - list-style-image: url('drag-indicator.svg') !important; -} - -#protections-popup-mainView .subviewbutton-nav:not(.notFound)::after, -#identity-popup-mainView .subviewbutton-nav::after, -.widget-overflow-list .subviewbutton-nav::after, -.menu-right { - content: url('arrow-right.svg') !important; -} - -@media not (-moz-platform: windows) { - #PanelUI-subView .subviewbutton-nav::after { - content: url('arrow-right.svg') !important; - } -} - -#PlacesChevron, -#urlbar-go-button { - list-style-image: url('arrow-right.svg') !important; -} - -#zen-expand-sidebar-button { - list-style-image: url('expand-sidebar.svg') !important; -} - -.panel-header > .subviewbutton-back { - list-style-image: url('arrow-left.svg') !important; -} - -#overflowMenu-customize-button, -#appmenu-moreTools-button { - list-style-image: url('customize.svg') !important; -} - -#appmenu-zen-share-rice { - list-style-image: url('share.svg'); -} - -.bookmark-item[container] { - list-style-image: url('folder.svg') !important; -} - -#pageAction-panel-bookmark, -#star-button, -#zen-bookmark-button { - list-style-image: url('bookmark-hollow.svg') !important; -} - -#pageAction-panel-bookmark[starred], -#star-button[starred] { - list-style-image: url('bookmark.svg') !important; -} - -#zen-split-views-button { - list-style-image: url('split.svg') !important; - fill: var(--toolbarbutton-icon-fill-attention); - fill-opacity: 1; -} - -#sidebar-box[sidebarcommand='viewTabsSidebar'] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon, -#sidebar-switcher-tabs { - list-style-image: url('send-to-device.svg') !important; -} - -/* tab icons */ -.tab-icon-image[src="chrome://branding/content/icon32.png"], -.tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] -{ - content: url('new-tab-image.svg') !important; -} - -.tab-icon-image[src="chrome://global/skin/icons/settings.svg"] -{ - content: url('settings.svg') !important; -} - -.tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"] -{ - content: url('extension.svg') !important; -} - -.tab-icon-image[src="chrome://browser/skin/customize.svg"] -{ - content: url('customize.svg') !important; -} - -/* permissions */ -#permissions-granted-icon { - list-style-image: url('permissions.svg') !important; -} - -.geo-icon { - list-style-image: url('geo.svg') !important; -} - -.geo-icon.blocked-permission-icon { - list-style-image: url('geo-blocked.svg') !important; -} - -.xr-icon { - list-style-image: url('xr.svg') !important; -} - -.xr-icon.blocked-permission-icon { - list-style-image: url('xr-blocked.svg') !important; -} - -.popup-notification-icon[popupid='web-notifications'], -.desktop-notification-icon { - list-style-image: url('desktop-notification.svg') !important; -} - -.desktop-notification-icon.blocked-permission-icon { - list-style-image: url('desktop-notification-blocked.svg') !important; -} - -.camera-icon { - list-style-image: url('camera.svg') !important; -} - -.camera-icon.blocked-permission-icon { - list-style-image: url('camera-blocked.svg') !important; -} - -.microphone-icon { - list-style-image: url('microphone.svg') !important; -} - -.microphone-icon.blocked-permission-icon { - list-style-image: url('microphone-blocked.svg') !important; -} - -.screen-icon { - list-style-image: url('screen.svg') !important; -} - -.screen-icon.blocked-permission-icon { - list-style-image: url('screen-blocked.svg') !important; -} - -.popup-notification-icon[popupid='persistent-storage'], -.persistent-storage-icon, -.indexedDB-icon { - list-style-image: url('persistent-storage.svg') !important; -} - -.persistent-storage-icon.blocked-permission-icon { - list-style-image: url('persistent-storage-blocked.svg') !important; -} - -.popup-icon { - list-style-image: url('popup.svg') !important; -} - -.autoplay-media-icon { - list-style-image: url('autoplay-media.svg') !important; -} - -.autoplay-media-icon.blocked-permission-icon { - list-style-image: url('autoplay-media-blocked.svg') !important; -} - -#canvas-notification-icon, -.popup-notification-icon[popupid='canvas-permissions-prompt'], -.canvas-icon { - list-style-image: url('canvas.svg') !important; -} - -.canvas-icon.blocked-permission-icon { - list-style-image: url('canvas-blocked.svg') !important; -} - -.midi-icon, -.midi-sysex-icon, -.popup-notification-icon[popupid='midi'], -.popup-notification-icon[popupid='midi-sysex'] { - list-style-image: url('midi.svg') !important; -} - -.install-icon { - list-style-image: url('extension.svg') !important; -} - -.install-icon.blocked-permission-icon, -.popup-notification-icon[popupid='xpinstall-disabled'], -.popup-notification-icon[popupid='addon-install-blocked'], -.popup-notification-icon[popupid='addon-install-origin-blocked'] { - list-style-image: url('extension-blocked.svg') !important; -} - -/* tab sound icons */ -.tab-icon-overlay[soundplaying] { - list-style-image: url('tab-audio-playing-small.svg') !important; - background-image: none !important; - fill: white !important; -} - -.tab-icon-overlay[muted] { - list-style-image: url('tab-audio-muted-small.svg') !important; - background-image: none !important; - fill: white !important; -} - -.tab-icon-overlay[activemedia-blocked] { - list-style-image: url('tab-audio-blocked-small.svg') !important; - background-image: none !important; - fill: white !important; -} - -/* reload/stop animation */ -#stop-reload-button[animate] - > #reload-button[displaystop] - + #stop-button - > .toolbarbutton-animatable-box - > .toolbarbutton-animatable-image, -#zen-sidebar-web-panel-reload[animate] - > #zen-sidebar-web-panel-reload-button[displaystop] - + #zen-sidebar-web-panel-stop-button - > .toolbarbutton-animatable-box - > .toolbarbutton-animatable-image { - background-image: url('reload-to-stop.svg') !important; -} - -#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, -#zen-sidebar-web-panel-reload[animate] - > #zen-sidebar-web-panel-reload-button - > .toolbarbutton-animatable-box - > .toolbarbutton-animatable-image { - background-image: url('stop-to-reload.svg') !important; -} - -#reader-mode-button > .urlbar-icon { - list-style-image: url('reader-mode.svg') !important; -} - -#unified-extensions-manage-extensions { - list-style-image: url('manage.svg') !important; -} - -/* Context Menu Icons */ - -#context-video-pictureinpicture:not([checked='true']) .menu-iconic-icon { - list-style-image: url('media-pip.svg') !important; -} - -#context-media-loop:not([checked='true']) .menu-iconic-icon { - list-style-image: url('media-loop.svg') !important; -} - -:not(:not(menubar) > menu, #ContentSelectDropdown) - > menupopup - > menuitem:not( - .menuitem-iconic, - [type='checkbox'], - [type='radio'], - .in-menulist, - .in-menulist menuitem, - .unified-nav-current - ), -:not(:not(menubar) > menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, [type='checkbox'], [type='radio'], .in-menulist, .in-menulist menu, .unified-nav-current), -#toggle_toolbar-menubar, -#PanelUI-history toolbarbutton, -#unified-extensions-context-menu menuitem { - background-image: var(--menu-image) !important; - background-size: 16px !important; - background-position: var(--fp-contextmenu-menuitem-padding-inline) center !important; - background-repeat: no-repeat !important; - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; -} - -@media not (-moz-platform: windows) { - menu > .menu-iconic-text, - menuitem > .menu-iconic-text { - padding-inline-start: var(--fp-contextmenu-menuicon-margin-inline) !important; - } -} - -#context-savepage { - --menu-image: url('save.svg'); -} - -#context-selectall, -.textbox-contextmenu menuitem[cmd*='selectAll'], -#context_selectAllTabs, -#toolbar-context-selectAllTabs { - --menu-image: url('edit-select-all.svg'); -} - -#context-undo, -.textbox-contextmenu menuitem[cmd*='undo'], -#context_undoCloseTab, -#toolbar-context-undoCloseTab { - --menu-image: url('edit-undo.svg'); -} - -#toggle_toolbar-menubar { - --menu-image: url('menu-bar.svg'); -} - -#context-redo, -.textbox-contextmenu menuitem[cmd*='redo'] { - --menu-image: url('edit-redo.svg'); -} - -#context-copy, -.textbox-contextmenu menuitem[cmd*='copy'], -.textbox-contextmenu #strip-on-share, -#placesContext_copy { - --menu-image: url('edit-copy.svg'); -} - -#context-paste, -.textbox-contextmenu menuitem[cmd*='paste'], -#placesContext_paste_group { - --menu-image: url('edit-paste.svg'); -} - -#context-cut, -.textbox-contextmenu menuitem[cmd*='cut'], -#placesContext_cut { - --menu-image: url('edit-cut.svg'); -} - -#context-delete, -.customize-context-removeExtension, -.unified-extensions-context-menu-remove-extension, -.textbox-contextmenu menuitem[cmd*='delete'], -menuitem[id='placesContext_deleteBookmark'], -menuitem[id='placesContext_deleteFolder'], -menuitem[id='placesContext_delete'], -menuitem[id='placesContext_delete_history'], -menuitem[id='placesContext_deleteHost'], -#context_zenDeleteWebPanel, -#context_zenDeleteWorkspace { - --menu-image: url('edit-delete.svg'); -} - -#paste-and-go { - --menu-image: url('paste-and-go.svg'); -} - -#context-print-selection { - --menu-image: url('print.svg'); -} - -#context-take-screenshot { - --menu-image: url('screenshot.svg'); -} - -#context-viewsource { - --menu-image: url('source-code.svg'); -} - -#context-inspect-a11y { - --menu-image: url('accessibility.svg'); -} - -#context-inspect { - --menu-image: url('inspect.svg'); -} - -#context-searchselect { - --menu-image: url('search-glass.svg'); -} - -#context-viewimage { - --menu-image: url('image-open.svg'); -} - -#context-viewimageinfo { - --menu-image: url('info.svg'); -} - -#context-saveimage, -#context-video-saveimage { - --menu-image: url('image-save.svg'); -} - -#context-savevideo { - --menu-image: url('video-save.svg'); -} - -#context-viewvideo { - --menu-image: url('video-open.svg'); -} - -#context-saveaudio { - --menu-image: url('audio-save.svg'); -} - -#context-copyimage-contents { - --menu-image: url('image-copy.svg'); -} - -#context-copyimage, -#context-copyvideourl, -#context-copylink, -#context-stripOnShareLink, -#context_zenOpenNewTabWebPanel, -#context-pdfjs-copy { - --menu-image: url('link.svg'); -} - -#context-openlinkincurrent { - --menu-image: url('ext-link.svg'); -} - -#context-viewsource, -#context-viewframesource, -#context-viewpartialsource-selection { - --menu-image: url('source-code.svg'); -} - -#context-sendimage, -#context-sendvideo, -#context-sendaudio { - --menu-image: url('mail.svg'); -} - -#context-setDesktopBackground, -.viewCustomizeToolbar { - --menu-image: url('customize.svg'); -} - -#context-reloadimage, -#context_reloadTab, -#context_reloadSelectedTabs, -#toolbar-context-reloadSelectedTab, -#toolbar-context-reloadSelectedTabs, -#context_zen-reset-pinned-tab { - --menu-image: url('reload.svg'); -} - -#context-sendlinktodevice, -#context_sendTabToDevice, -#context-sendpagetodevice { - --menu-image: url('send-to-device.svg'); -} - -#context-openlinkintab, -#context-openlinkincontainertab, -#context_zenWorkspacesOpenInContainerTab, -#context_zenWebPanelContextInContainer, -menuitem[id='placesContext_open:newtab'], -menuitem[id='placesContext_openLinks:tabs'], -menuitem[id='placesContext_openBookmarkLinks:tabs'], -menuitem[id='placesContext_openBookmarkContainer:tabs'] { - --menu-image: url('tab.svg'); -} - -#context_openANewTab, -#toolbar-context-openANewTab { - --menu-image: url('new-tab-image.svg'); -} - -#context-openlinkinusercontext-menu, -menu[id='placesContext_open:newcontainertab'], -menu[id='placesContext_openContainer:tabs'] { - --menu-image: url('container-tab.svg'); -} - -#context-openlink, -menuitem[id='placesContext_open:newwindow'] { - --menu-image: url('window.svg'); -} - -#context-openlinkprivate, -menuitem[id='placesContext_open:newprivatewindow'] { - --menu-image: url('private-window.svg'); -} - -#context-savelink { - --menu-image: url('downloads.svg'); -} - -#spell-add-to-dictionary { - --menu-image: url('add-to-dictionary.svg'); -} - -#manage-saved-logins { - --menu-image: url('passwords.svg'); -} - -#context-media-play, -#context_playTab, -#context_playSelectedTabs { - --menu-image: url('media-play.svg'); -} - -#context-media-pause { - --menu-image: url('media-pause.svg'); -} - -#context-media-mute, -#context_toggleMuteTab, -#context_toggleMuteSelectedTabs, -#context_zenToggleMuteWebPanel { - --menu-image: url('media-mute.svg'); -} - -#context-media-unmute, -#context_toggleMuteTab[muted], -#context_toggleMuteSelectedTabs[muted], -#context_zenToggleMuteWebPanel[muted] { - --menu-image: url('media-unmute.svg'); -} - -#context-media-playbackrate { - --menu-image: url('media-speed.svg'); -} - -#context-video-fullscreen { - --menu-image: url('fullscreen.svg'); -} - -#context-leave-dom-fullscreen, -menuitem[contexttype='fullscreen'][label*='Exit'] { - --menu-image: url('fullscreen-exit.svg'); -} - -#context-media-hidecontrols, -#context-media-showcontrols { - --menu-image: url('permissions.svg'); -} - -#context_pinTab, -#context_unpinTab, -#context_pinSelectedTabs, -#context_unpinSelectedTabs, -.customize-context-moveToPanel, -#context_zen-replace-pinned-url-with-current { - --menu-image: url('pin.svg'); -} - -#context_zen-add-essential { - --menu-image: url('essential-add.svg'); -} - -#context_zen-remove-essential { - --menu-image: url('essential-remove.svg'); -} - -.customize-context-removeFromToolbar { - --menu-image: url('unpin.svg'); -} - -#zen-sidebar-web-panel-pinned[pinned='true'] { - list-style-image: url('pin.svg') !important; -} - -#zen-sidebar-web-panel-pinned { - list-style-image: url('unpin.svg') !important; -} - -#context_duplicateTab, -#context_duplicateTabs { - --menu-image: url('duplicate-tab.svg'); -} - -#zen-context-menu-compact-mode { - --menu-image: url('sidebar.svg'); -} - -#context_bookmarkTab, -#context_bookmarkSelectedTabs, -#toggle_PersonalToolbar, -#context-bookmarklink, -#toolbar-context-bookmarkSelectedTab, -#toolbar-context-bookmarkSelectedTabs { - --menu-image: url('bookmark-hollow.svg'); -} - -menuitem[id='placesContext_show_bookmark:info'], -menuitem[id='placesContext_show_folder:info'], -menuitem[id='placesContext_show:info'] { - --menu-image: url('edit.svg'); -} - -menuitem[id='placesContext_showAllBookmarks'], -#BMB_bookmarksShowAllTop, -#BMB_bookmarksShowAll, -.customize-context-manageExtension, -.unified-extensions-context-menu-manage-extension { - --menu-image: url('manage.svg'); -} - -#BMB_viewBookmarksSidebar { - --menu-image: url('chrome://browser/skin/sidebars.svg'); -} - -#BMB_searchBookmarks { - --menu-image: url('search-page.svg'); -} - -#appMenuRecentlyClosedTabs { - --menu-image: url('container-tab.svg'); -} - -#appMenuClearRecentHistory { - --menu-image: url('edit-delete.svg'); -} - -#appMenuRecentlyClosedWindows { - --menu-image: url('window.svg'); -} - -#appMenuSearchHistory { - --menu-image: url('search-glass.svg'); -} - -#PanelUI-historyMore { - --menu-image: url('manage.svg'); -} - -menuitem[id='placesContext_new:bookmark'], -menuitem[id='placesContext_new:folder'], -menuitem[id='placesContext_new:separator'] { - --menu-image: url('plus.svg'); -} - -#context-savelinktopocket, -#context-pocket { - --menu-image: url('pocket-outline.svg'); -} - -#context_moveTabOptions { - --menu-image: url('move-tab.svg'); -} - -.share-tab-url-item { - --menu-image: url('share.svg'); -} - -#context_reopenInContainer { - --menu-image: url('container-tab.svg'); -} - -#context_closeTab { - --menu-image: url('close.svg'); -} - -#context_closeTabOptions { - --menu-image: url('close-all.svg'); -} - -#context_zenUnloadTab, -#context_zenUnloadWebPanel, -#context_zenTabActions { - --menu-image: url('close-all.svg'); -} - -.customize-context-reportExtension, -.unified-extensions-context-menu-report-extension { - --menu-image: url('report.svg'); -} - -/* FIX header icons for the app menu sub menus (eg. fx account, history...) */ -.panel-header > h1 { - text-align: left; - margin-left: 8px !important; -} - -.wordmark::after { - content: 'Plus' !important; -} - -/* header icons for the app menu sub menus (eg. fx account, history...) */ -.panel-header > h1 > span::before { - content: ''; - background: var(--header-image, none) center / 16px no-repeat; - -moz-context-properties: fill, fill-opacity; - fill: currentColor; - padding-inline-start: calc(var(--fp-enabled, 0) * 16px); - margin-inline-end: calc(var(--fp-enabled, 0) * 8px); -} - -#PanelUI-fxa .panel-header > h1 > span::before { - --header-image: var(--avatar-image-url); - --fp-enabled: 1; - transform: scale(1.25); - border-radius: 99px; - display: inline-block; - height: 16px; -} - -#PanelUI-bookmarks .panel-header > h1 > span::before { - --header-image: url('bookmark-star-on-tray.svg'); - --fp-enabled: 1; -} - -#PanelUI-history .panel-header > h1 > span::before { - --header-image: url('history.svg'); - --fp-enabled: 1; -} - -#PanelUI-helpView .panel-header > h1 > span::before { - --header-image: url('help.svg'); - --fp-enabled: 1; -} - -#appMenu-libraryView .panel-header > h1 > span::before { - --header-image: url('library.svg'); - --fp-enabled: 1; -} - -#unified-extensions-panel .panel-header > h1 > span::before { - --header-image: url('extension.svg'); - --fp-enabled: 1; -} - -@media not (-moz-platform: linux) { - .unified-extensions-context-menu-pin-to-toolbar { - --menu-image: url('pin.svg'); - } -} - -.unified-extensions-context-menu-move-widget-down { - --menu-image: url('arrow-down.svg'); -} - -.unified-extensions-context-menu-move-widget-up { - --menu-image: url('arrow-up.svg'); -} - -:not(:not(menubar) > menu, #ContentSelectDropdown) - > menupopup - > menuitem:not( - .menuitem-iconic, - [type='checkbox'], - [type='radio'], - .in-menulist, - .in-menulist menuitem, - .unified-nav-current - ), -:not(:not(menubar) > menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, [type='checkbox'], [type='radio'], .in-menulist, .in-menulist menu, .unified-nav-current), -:not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menucaption { - padding-inline-start: calc( - var(--fp-contextmenu-menuitem-padding-inline) + 16px + var(--fp-contextmenu-menuicon-margin-inline) - ) !important; -} - -menupopup > menuitem:is([type='checkbox']) .menu-iconic-left { - --menu-image: none !important; - margin-inline-start: 4px; - - @media not (-moz-platform: windows) { - margin-inline-end: 0; - padding-inline-end: 0; - } -} - -@media (-moz-platform: windows) { - menupopup > menuitem[checked='true'] { - padding-inline-start: 6px; - } -}