diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 7e0ef36d4..9c4e3fdce 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -12,8 +12,9 @@ content/browser/zen-components/ZenUIMigration.mjs (../../zen/common/ZenUIMigration.mjs) content/browser/zen-components/ZenCommonUtils.mjs (../../zen/common/ZenCommonUtils.mjs) content/browser/zen-components/ZenSessionStore.mjs (../../zen/common/ZenSessionStore.mjs) - content/browser/zen-components/ZenEmojisData.min.mjs (../../zen/common/emojis/ZenEmojisData.min.mjs) + content/browser/zen-components/ZenEmojisData.min.mjs (../../zen/common/emojis/ZenEmojisData.min.mjs) content/browser/zen-components/ZenEmojiPicker.mjs (../../zen/common/emojis/ZenEmojiPicker.mjs) + content/browser/zen-components/ZenHasPolyfill.mjs (../../zen/common/ZenHasPolyfill.mjs) content/browser/zen-styles/zen-theme.css (../../zen/common/styles/zen-theme.css) content/browser/zen-styles/zen-buttons.css (../../zen/common/styles/zen-buttons.css) @@ -29,7 +30,6 @@ content/browser/zen-styles/zen-branding.css (../../zen/common/styles/zen-branding.css) content/browser/zen-styles/zen-panels/bookmarks.css (../../zen/common/styles/zen-panels/bookmarks.css) - content/browser/zen-styles/zen-panels/extensions.css (../../zen/common/styles/zen-panels/extensions.css) content/browser/zen-styles/zen-panels/print.css (../../zen/common/styles/zen-panels/print.css) content/browser/zen-styles/zen-panels/dialog.css (../../zen/common/styles/zen-panels/dialog.css) diff --git a/src/browser/base/content/zen-preloaded.inc.xhtml b/src/browser/base/content/zen-preloaded.inc.xhtml index ca6f88a9a..4d4f56661 100644 --- a/src/browser/base/content/zen-preloaded.inc.xhtml +++ b/src/browser/base/content/zen-preloaded.inc.xhtml @@ -5,7 +5,8 @@ # This needs to be here, before all the other scripts, because it's used before # the window is fully loaded. # Make sure they are loaded before the global-scripts.inc file. - + + diff --git a/src/zen/common/ZenHasPolyfill.mjs b/src/zen/common/ZenHasPolyfill.mjs new file mode 100644 index 000000000..036e459c2 --- /dev/null +++ b/src/zen/common/ZenHasPolyfill.mjs @@ -0,0 +1,71 @@ +// 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/. + +{ + class nsHasPolyfill { + constructor() { + this.observers = []; + this.idStore = 0; + } + + /** + * @param {{selector: string, exists: boolean}} descendantSelectors + */ + observeSelectorExistence(element, descendantSelectors, stateAttribute) { + const updateState = () => { + const exists = descendantSelectors.some(({ selector }) => { + return element.querySelector(selector); + }); + const { exists: shouldExist = true } = descendantSelectors; + if (exists === shouldExist) { + if (!element.hasAttribute(stateAttribute)) { + element.setAttribute(stateAttribute, 'true'); + } + } else { + if (element.hasAttribute(stateAttribute)) { + element.removeAttribute(stateAttribute); + } + } + }; + + const observer = new MutationObserver(updateState); + updateState(); + const observerId = this.idStore++; + this.observers.push({ + id: observerId, + observer, + element, + }); + return observerId; + } + + disconnectObserver(observerId) { + const index = this.observers.findIndex((o) => o.id === observerId); + if (index !== -1) { + this.observers[index].observer.disconnect(); + } + } + + connectObserver(observerId) { + const observer = this.observers.find((o) => o.id === observerId); + if (observer) { + observer.observer.observe(observer.element, { + childList: true, + subtree: true, + attributes: true, + }); + } + } + + destroy() { + this.observers.forEach((observer) => observer.observer.disconnect()); + this.observers = []; + } + } + + const hasPolyfillInstance = new nsHasPolyfill(); + window.addEventListener('unload', () => hasPolyfillInstance.destroy(), { once: true }); + + window.ZenHasPolyfill = hasPolyfillInstance; +} diff --git a/src/zen/common/styles/zen-panels/extensions.css b/src/zen/common/styles/zen-panels/extensions.css deleted file mode 100644 index 3505709f9..000000000 --- a/src/zen/common/styles/zen-panels/extensions.css +++ /dev/null @@ -1,73 +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/. - */ -#unified-extensions-manage-extensions { - padding-left: 20px; -} - -panelview .unified-extensions-item-action-button { - padding: 5px 20px; -} - -#unified-extensions-description { - padding: 0 20px; - margin: 0; -} - -.unified-extensions-item { - padding: 0; -} - -#unified-extensions-view { - --uei-icon-size: 16px; - - .unified-extensions-item { - margin-block: 0; - border-radius: var(--arrowpanel-menuitem-border-radius); - - > .unified-extensions-item-action-button { - .unified-extensions-item-message-deck { - display: none; - } - - &:hover { - background-color: initial; - } - } - - > .unified-extensions-item-menu-button { - list-style-image: url('chrome://global/skin/icons/more.svg'); - padding: 0; - - > .toolbarbutton-icon { - padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); - border: none; - opacity: 0; - } - - &:hover { - > .toolbarbutton-icon { - background-color: initial; - } - - &:active { - color: var(--button-primary-hover-bgcolor); - } - } - } - - &:hover { - background-color: var(--panel-item-hover-bgcolor); - - > .unified-extensions-item-menu-button > .toolbarbutton-icon { - opacity: 1; - } - } - - &:has(> .unified-extensions-item-action-button:not([disabled]):hover:active) { - background-color: var(--panel-item-active-bgcolor); - } - } -} diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index 544755b9c..5b25874c6 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -4,7 +4,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css'); -@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css'); @import url('chrome://browser/content/zen-styles/zen-panels/print.css'); @import url('chrome://browser/content/zen-styles/zen-panels/dialog.css'); diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs index da77570ed..01a2329ea 100644 --- a/src/zen/compact-mode/ZenCompactMode.mjs +++ b/src/zen/compact-mode/ZenCompactMode.mjs @@ -60,6 +60,8 @@ var gZenCompactModeManager = { document.getElementById('zen-appcontent-navbar-wrapper') ); + this.addHasPolyfillObserver(); + // Clear hover states when window state changes (minimize, maximize, etc.) window.addEventListener('sizemodechange', () => this._clearAllHoverStates()); @@ -126,6 +128,19 @@ var gZenCompactModeManager = { return gNavToolbox; }, + addHasPolyfillObserver() { + this.sidebarObserverId = ZenHasPolyfill.observeSelectorExistence( + this.sidebar, + [ + { + selector: + ":is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)", + }, + ], + 'zen-compact-mode-active' + ); + }, + flashSidebarIfNecessary(aInstant = false) { // This function is called after exiting DOM fullscreen mode, // so we do a bit of a hack to re-calculate the URL height @@ -199,6 +214,11 @@ var gZenCompactModeManager = { // IF we are animating IN, call the callbacks first so we can calculate the width // once the window buttons are shown this.updateContextMenu(); + if (this.preference) { + ZenHasPolyfill.connectObserver(this.sidebarObserverId); + } else { + ZenHasPolyfill.disconnectObserver(this.sidebarObserverId); + } if (!this.preference) { this._evenListeners.forEach((callback) => callback()); await this.animateCompactMode(); diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index af40c17ab..c5249695d 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -182,11 +182,8 @@ #navigator-toolbox[flash-popup], #navigator-toolbox[has-popup-menu], #navigator-toolbox[movingtab], - #navigator-toolbox:has(.tabbrowser-tab:active), &[zen-renaming-tab='true'] #navigator-toolbox, - #navigator-toolbox:has( - *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore) - ) { + #navigator-toolbox[zen-compact-mode-active] { &:not([animate='true']) { --zen-compact-mode-func: linear( 0 0%, diff --git a/src/zen/split-view/ZenViewSplitter.mjs b/src/zen/split-view/ZenViewSplitter.mjs index 40cc7a4a2..cd7c61207 100644 --- a/src/zen/split-view/ZenViewSplitter.mjs +++ b/src/zen/split-view/ZenViewSplitter.mjs @@ -1151,6 +1151,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature { } this.removeSplitters(); this.tabBrowserPanel.removeAttribute('zen-split-view'); + document.getElementById('tabbrowser-tabbox').removeAttribute('zen-split-view'); this.currentView = -1; this.toggleWrapperDisplay(false); this.maybeDisableOpeningTabOnSplitView(); @@ -1174,6 +1175,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature { }); this.tabBrowserPanel.setAttribute('zen-split-view', 'true'); + document.getElementById('tabbrowser-tabbox').setAttribute('zen-split-view', 'true'); this.applyGridToTabs(splitData.tabs); this.applyGridLayout(splitData.layoutTree); diff --git a/src/zen/split-view/zen-decks.css b/src/zen/split-view/zen-decks.css index 1d81fd62c..6f241bf4b 100644 --- a/src/zen/split-view/zen-decks.css +++ b/src/zen/split-view/zen-decks.css @@ -64,7 +64,7 @@ } } -#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) { +#tabbrowser-tabbox[zen-split-view='true'] { :root[zen-no-padding='true'] & { --zen-element-separation: 8px; }