diff --git a/base/content/browser-elements.js b/base/content/browser-elements.js index 9ceb23acb9..28eef1686d 100644 --- a/base/content/browser-elements.js +++ b/base/content/browser-elements.js @@ -42,14 +42,6 @@ let noCallbackElements = [ "chrome://dot/content/widgets/browser-command-element.js", - "chrome://dot/content/widgets/browser-panel.js", - "chrome://dot/content/widgets/browser-panel-area.js", - "chrome://dot/content/widgets/browser-multipanel-area.js", - "chrome://dot/content/widgets/browser-panel-menu.js", - "chrome://dot/content/widgets/browser-panel-menuitem.js", - - "chrome://dot/content/widgets/browser-customizable-area-overflow-menu.js", - "chrome://dot/content/widgets/browser-group.js", "chrome://dot/content/widgets/browser-separator.js", @@ -58,7 +50,6 @@ let noCallbackElements = [ "chrome://dot/content/widgets/browser-toolbar-button.js", "chrome://dot/content/widgets/browser-tab-button.js", "chrome://dot/content/widgets/browser-urlbar-button.js", - "chrome://dot/content/widgets/browser-panel-button.js", "chrome://dot/content/widgets/browser-urlbar-input.js", @@ -73,8 +64,6 @@ let noCallbackElements = [ "chrome://dot/content/widgets/browser-customizable-area-empty.js", "chrome://dot/content/widgets/browser-customizable-template.js", - "chrome://dot/content/widgets/browser-identity-panel.js", - "chrome://dot/content/widgets/browser-tab.js", "chrome://dot/content/widgets/browser-tab-icon.js", "chrome://dot/content/widgets/browser-tab-label.js", diff --git a/base/content/browser.js b/base/content/browser.js index 9734eb0b1d..f8f158487e 100644 --- a/base/content/browser.js +++ b/base/content/browser.js @@ -34,10 +34,6 @@ var { BrowserActions } = ChromeUtils.importESModule( "resource:///modules/BrowserActions.sys.mjs" ); -var { BrowserPanels } = ChromeUtils.importESModule( - "resource:///modules/BrowserPanels.sys.mjs" -); - var { BrowserStorage } = ChromeUtils.importESModule( "resource:///modules/BrowserStorage.sys.mjs" ); @@ -95,9 +91,6 @@ class BrowserApplication extends BrowserCustomizableArea { /** @type {typeof BrowserActions.prototype} */ actions = null; - /** @type {typeof BrowserPanels.prototype} */ - panels = null; - /** @type {typeof BrowserStorage.prototype} */ storage = null; @@ -249,7 +242,6 @@ class BrowserApplication extends BrowserCustomizableArea { this.shortcuts = new BrowserShortcuts(); this.commands = new BrowserCommands(window); this.actions = new BrowserActions(this); - this.panels = new BrowserPanels(window); this.accessibility = new BrowserAccessibility(window); this.prompts = new BrowserPrompts(window); this.status = new BrowserStatus(window); diff --git a/components/actions/ActionRegistry.sys.mjs b/components/actions/ActionRegistry.sys.mjs index cdec5d939c..7a0da365aa 100644 --- a/components/actions/ActionRegistry.sys.mjs +++ b/components/actions/ActionRegistry.sys.mjs @@ -14,9 +14,6 @@ const ALL_ACTIONS = [ // browser.developer "browser.developer.inspect", - // browser.panels - "browser.panels.open", - // browser.tabs "browser.tabs.close_tab", "browser.tabs.go_back", diff --git a/components/actions/content/browser/panels/open.js b/components/actions/content/browser/panels/open.js deleted file mode 100644 index 06c65e19f7..0000000000 --- a/components/actions/content/browser/panels/open.js +++ /dev/null @@ -1,49 +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/. */ - -/** - * @typedef {import("components/actions/ActionsIPC.sys.mjs").ActionDispatchEvent} ActionDispatchEvent - * @template T - */ - -const { Action } = ChromeUtils.importESModule( - "resource://gre/modules/Action.sys.mjs" -); - -export class BrowserPanelsOpenAction extends Action { - static id = "browser.panels.open"; - - constructor() { - super(); - } - - /** - * The name of this action - */ - get name() { - return "Open a panel"; - } - - /** - * Performs this action - * @param {ActionDispatchEvent<{ id: string; x?: number; y?: number; opener?: Element; anchor?: any; args?: Record }>} event - */ - run(event) { - const { args } = event.detail; - - const win = event.target.ownerGlobal; - const { gDot } = win; - - const panel = gDot.panels.getPanelById(args.id); - panel.openPanel({ - x: args.x, - y: args.y, - - element: args.opener, - anchor: args.anchor, - - args: event.target.context - }); - } -} diff --git a/components/commands/content/tab-identity.js b/components/commands/content/tab-identity.js index a28c9c36c8..12837f6e26 100644 --- a/components/commands/content/tab-identity.js +++ b/components/commands/content/tab-identity.js @@ -101,12 +101,7 @@ export class TabIdentityCommand extends TabCommand { * @param {Event} event */ _openPanel(event) { - this.actions.run("browser.panels.open", { - id: "identity-panel", - - opener: event.target, - anchor: "before after" - }); + console.log("_openPanel"); } /** diff --git a/components/customizableui/content/browser-customizable-area-overflow-menu.js b/components/customizableui/content/browser-customizable-area-overflow-menu.js deleted file mode 100644 index d2ec05db8e..0000000000 --- a/components/customizableui/content/browser-customizable-area-overflow-menu.js +++ /dev/null @@ -1,27 +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/. */ - -class BrowserCustomizableAreaOverflowMenu extends BrowserPanelMenu { - constructor() { - super(); - } - - connectedCallback() { - super.connectedCallback(); - - super.connect("customizable-area-overflow-menu", { - orientation: "vertical", - styles: ["chrome://dot/content/widgets/browser-panel-button.css"] - }); - } - - disconnectedCallback() { - super.disconnectedCallback(); - } -} - -customElements.define( - "browser-customizable-area-overflow-menu", - BrowserCustomizableAreaOverflowMenu -); diff --git a/components/customizableui/jar.mn b/components/customizableui/jar.mn index e7030635b7..1b80731931 100644 --- a/components/customizableui/jar.mn +++ b/components/customizableui/jar.mn @@ -12,8 +12,6 @@ dot.jar: content/widgets/browser-customizable-overflowable-area.js (content/browser-customizable-overflowable-area.js) content/widgets/browser-customizable-overflowable-area.css (content/browser-customizable-overflowable-area.css) - content/widgets/browser-customizable-area-overflow-menu.js (content/browser-customizable-area-overflow-menu.js) - content/widgets/browser-customizable-template.js (content/browser-customizable-template.js) content/widgets/browser-customizable-template.css (content/browser-customizable-template.css) diff --git a/components/dev/content/dev-preferences-popout.js b/components/dev/content/dev-preferences-popout.js index d0f1d48c49..c75e114f3c 100644 --- a/components/dev/content/dev-preferences-popout.js +++ b/components/dev/content/dev-preferences-popout.js @@ -275,7 +275,6 @@ class DevelopmentPreferencesPopout extends MozHTMLElement { this.registerHandle("dot.tabs.debug_information.visible", false); this.registerHandle("dot.customizable.debug_context.enabled", false); this.registerHandle("dot.commands.loglevel", LOG_LEVELS); - this.registerHandle("dot.panels.debug_information.visible", false); this.registerHandle("dot.tabs.in_animation_duration_ms", 50); this.registerHandle("dot.tabs.out_animation_duration_ms", 30); this.registerHandle("dot.customizable.loglevel", LOG_LEVELS); diff --git a/components/identity/content/browser-identity-panel.css b/components/identity/content/browser-identity-panel.css deleted file mode 100644 index 80bcc512a3..0000000000 --- a/components/identity/content/browser-identity-panel.css +++ /dev/null @@ -1,7 +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/. */ - -panel.browser-panel[panelid=identity-panel] { - min-width: 400px; -} \ No newline at end of file diff --git a/components/identity/content/browser-identity-panel.js b/components/identity/content/browser-identity-panel.js deleted file mode 100644 index 390e7eb60c..0000000000 --- a/components/identity/content/browser-identity-panel.js +++ /dev/null @@ -1,76 +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/. */ - -class IdentityPanelOverviewPage extends BrowserMultipanelPage { - connectedCallback() { - super.connectedCallback(); - - this.appendChild( - html( - "div", - { class: "browser-panel-header" }, - html( - "span", - { class: "browser-panel-header-title" }, - `Site information for ${this.multipanel.context.browser.currentURI.spec}` - ) - ) - ); - - this.appendChild(html("p", {}, "overview")); - - const btn = html("button", {}, "Go to connection security"); - btn.addEventListener("click", () => { - this.multipanel.navigate("connection-security"); - }); - - this.appendChild(btn); - } -} - -class IdentityPanelConnectionSecurityPage extends BrowserMultipanelPage { - connectedCallback() { - super.connectedCallback(); - - this.appendChild( - html( - "div", - { class: "browser-panel-header" }, - html( - "span", - { class: "browser-panel-header-title" }, - `Connection security for ${this.multipanel.context.browser.currentURI.spec}` - ) - ) - ); - - this.appendChild(html("p", {}, "connection security")); - - const btn = html("button", {}, "Go home"); - btn.addEventListener("click", () => { - this.multipanel.navigate("default"); - }); - - this.appendChild(btn); - } -} - -class BrowserIdentityPanel extends BrowserMultipanelArea { - static get pages() { - return { - default: IdentityPanelOverviewPage, - "connection-security": IdentityPanelConnectionSecurityPage - }; - } - - constructor() { - super(); - } - - connectedCallback() { - super.connectedCallback(); - } -} - -customElements.define("identity-panel", BrowserIdentityPanel); diff --git a/components/identity/jar.mn b/components/identity/jar.mn index 22a3f57ae2..ada1a1a809 100644 --- a/components/identity/jar.mn +++ b/components/identity/jar.mn @@ -6,5 +6,3 @@ dot.jar: % content dot %content/ contentaccessible=yes - content/widgets/browser-identity-panel.js (content/browser-identity-panel.js) - content/widgets/browser-identity-panel.css (content/browser-identity-panel.css) \ No newline at end of file diff --git a/components/panels/BrowserPanels.sys.mjs b/components/panels/BrowserPanels.sys.mjs deleted file mode 100644 index 0b73225c6d..0000000000 --- a/components/panels/BrowserPanels.sys.mjs +++ /dev/null @@ -1,182 +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/. */ - -/** - * @typedef {object} PanelOpenOptions - * @property {"local" | "screen"} [coordMode] - * @property {number} [x] - * @property {number} [y] - * @property {Element} [element] - * @property {`${"before" | "after"} ${"before" | "after"}`} [anchor] - * @property {Element} [root] - * @property {boolean} [autopurge] - * @property {Record} [args] - */ - -export class BrowserPanels { - /** @type {Window} */ - #win = null; - - /** @type {Set} */ - #visiblePanelIds = new Set(); - - /** - * The currently visible panels in the browser window - */ - get visiblePanels() { - return Array.from(this.#visiblePanelIds.values()); - } - - /** - * The root element to render all panels to - */ - get root() { - return this.#win.document.documentElement; - } - - /** - * Obtains a panel element from its panel ID - * @param {string} panel - */ - getPanel(panel) { - return this.#win.customElements.get(panel); - } - - /** - * Obtains the open panel element in the DOM from its panel ID - * @param {string} openPanelId - * @returns {BrowserPanel} - */ - getPanelElement(openPanelId) { - return this.#win.document.querySelector(`panel#${openPanelId}`); - } - - /** - * Creates a new menu from an array of menu items - * @param {string} id - * @param {any[]} menuitems - * @returns {BrowserPanel} - */ - createMenu(id, menuitems) { - const doc = this.#win.document; - - const menuArea = /** @type {BrowserPanelMenu} */ ( - doc.createElement("browser-panel-menu") - ); - menuArea.customizableContainer.appendChild( - doc.createTextNode("hello world") - ); - - const panelEl = this._setupPanel(id, menuArea); - - return panelEl; - } - - /** - * Initialises a panel - * @param {string} panelName - * @param {CustomElementConstructor | Element} panelElement - */ - _setupPanel(panelName, panelElement) { - try { - const panelId = `panel-${panelName}-${Date.now()}`; - - const panelEl = /** @type {BrowserPanel} */ ( - this.#win.document.createXULElement("panel", { - is: "browser-panel" - }) - ); - - panelEl.id = panelId; - - if (this.#win.customElements.get(panelName)) { - const panelAreaEl = this.#win.document.createElement(panelName); - - panelEl.appendChild(panelAreaEl); - } else { - panelEl.appendChild(/** @type {Element} */ (panelElement)); - } - - panelEl.addEventListener("popupshowing", () => { - this.#visiblePanelIds.add(panelId); - }); - - panelEl.addEventListener("popuphiding", () => { - this.#visiblePanelIds.delete(panelId); - }); - - return panelEl; - } catch (e) { - throw new Error( - `${this.constructor.name}: Failure opening panel with ID '${panelName}'.\n` + - e + - "\n" + - e.stack || "" - ); - } - } - - /** - * Obtains a panel using its panel ID - * - * Returns the panel element - * @param {string} panelId - */ - getPanelById(panelId) { - const panelInstance = this.getPanel(panelId); - - if (!panelInstance) { - throw new Error( - `${this.constructor.name}: No panel found with name '${panelId}'.` - ); - } - - const panelEl = this._setupPanel(panelId, panelInstance); - - return panelEl; - } - - /** - * Opens a browser panel - * - * Returns the open panel ID - * @param {BrowserPanel} panelEl - * @param {PanelOpenOptions} openOptions - */ - open(panelEl, openOptions = {}) { - panelEl.openPanel(openOptions); - } - - /** - * Closes a currently visible panel using its open panel ID - * @param {string} openPanelId - */ - close(openPanelId) { - if (this.#visiblePanelIds.has(openPanelId)) { - const panelEl = this.getPanelElement(openPanelId); - - panelEl.hidePopup(true); - } - } - - /** - * Fired when a key is pressed on the window - * @param {KeyboardEvent} event - */ - _onWinKeyPress(event) { - if (event.code == "Escape") { - for (const panelId of this.visiblePanels) { - const panelEl = this.getPanelElement(panelId); - - panelEl.hidePopup(true, true); - } - } - } - - constructor(win) { - this.#win = win; - - this.#win.addEventListener("keydown", this._onWinKeyPress.bind(this)); - } -} diff --git a/components/panels/content/browser-multipanel-area.css b/components/panels/content/browser-multipanel-area.css deleted file mode 100644 index c8733ea954..0000000000 --- a/components/panels/content/browser-multipanel-area.css +++ /dev/null @@ -1,39 +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/. */ - -.multipanel-area { - padding: 0; - width: fit-content; - height: fit-content; -} - -:host(.multipanel-area) .customizable-container { - display: flex; - - max-width: var(--current-panel-width); - max-height: var(--current-panel-height, 300px); - min-width: var(--current-panel-width); - min-height: var(--current-panel-height, 300px); - - overflow: hidden; - - scroll-behavior: smooth; - - transition: 0.3s all cubic-bezier(0.19, 1, 0.22, 1); -} - -:host(.multipanel-area) .multipanel-page { - position: absolute; - - height: fit-content; - width: max-content; - - transform: translateX(calc(calc(var(--scroll-x) - var(--panel-x)) / -1)); -} - -:host(.multipanel-area) .multipanel-page[opening], -:host(.multipanel-area) .multipanel-page[closing] { - pointer-events: none; - background-color: rgba(255, 0, 0, 0.241); -} \ No newline at end of file diff --git a/components/panels/content/browser-multipanel-area.js b/components/panels/content/browser-multipanel-area.js deleted file mode 100644 index b5dc12317c..0000000000 --- a/components/panels/content/browser-multipanel-area.js +++ /dev/null @@ -1,203 +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/. */ - -class BrowserMultipanelPage extends MozHTMLElement { - constructor() { - super(); - } - - /** - * The multipanel area element that houses this page - */ - get multipanel() { - return /** @type {BrowserMultipanelArea} */ ( - /** @type {ShadowRoot} */ (this.getRootNode()).host - ); - } - - /** - * Fired when a transition starts on the page - */ - _onTransitionStart() { - this.toggleAttribute("opening", true); - } - - /** - * Fired when a transition ends on the page - */ - _onTransitionEnd() { - this.toggleAttribute("opening", false); - } - - connectedCallback() { - this.classList.add("multipanel-page"); - - this.addEventListener( - "transitionstart", - this._onTransitionStart.bind(this), - { once: true } - ); - - this.addEventListener( - "transitionend", - this._onTransitionEnd.bind(this), - { once: true } - ); - - setInterval(() => { - this.style.setProperty( - "--panel-x", - (this.previousElementSibling - ? this.previousElementSibling.getBoundingClientRect().width - : 0) + "px" - ); - }, 1); - } -} - -customElements.define("browser-multipanel-page", BrowserMultipanelPage); - -class BrowserMultipanelArea extends BrowserPanelArea { - constructor() { - super(); - } - - /** - * The mapping of page IDs to page components - */ - static get pages() { - return {}; - } - - _pages = new Map(); - - _activePage = null; - - /** - * The page that is currently active - */ - get activePage() { - return this._activePage; - } - - /** - * Navigates to a page using its path - * @param {string} path - * @param {boolean} [animate] - */ - async navigate(path, animate = true) { - const newPage = this._pages.get(path); - - if (!newPage) { - throw new Error( - `${this.constructor.name}: No page with the path '${path}'.` - ); - } - - /** @type {BrowserMultipanelPage} */ - let newPageEl = null; - if (this.customizableContainer.querySelector(newPage)) { - newPageEl = this.customizableContainer.querySelector(newPage); - } else { - newPageEl = document.createElement(newPage); - this.customizableContainer.appendChild(newPageEl); - } - - this._activePage = newPageEl; - - this.customizableContainer.style.pointerEvents = "none"; - - const newPageBounds = newPageEl.getBoundingClientRect(); - - const animationDuration = 300; - - const cssVariables = { - scrollX: parseFloat( - this.customizableContainer.style.getPropertyValue("--scroll-x") - ) - }; - - anime({ - targets: cssVariables, - scrollX: - newPageEl.previousElementSibling?.getBoundingClientRect() - ?.width || 0, - duration: animate ? animationDuration : 0, - easing: "easeInOutQuad", - endDelay: 50, - update: () => { - this.customizableContainer.style.setProperty( - "--scroll-x", - cssVariables.scrollX + "px" - ); - }, - complete: () => { - this.customizableContainer.style.pointerEvents = ""; - } - }); - } - - /** - * Initialises the multipanel area - */ - _init() { - const elementName = customElements.getName( - /** @type {any} */ (this.constructor) - ); - - for (const [path, page] of Object.entries( - /** @type {typeof BrowserMultipanelArea} */ (this.constructor).pages - )) { - const pageElementName = `${elementName}-${path}-page`; - - if (!customElements.get(pageElementName)) { - try { - customElements.define(pageElementName, page); - } catch (e) { - throw new Error( - `${this.constructor.name}: Failed to register page '${path}'.\n` + - e + - "\n" + - e.stack || "" - ); - } - } - - this._pages.set(path, pageElementName); - } - - this.navigate("default"); - - setInterval(() => { - if (this._activePage) { - const bounds = this._activePage?.getBoundingClientRect(); - - this.customizableContainer.style.setProperty( - "--current-panel-width", - bounds.width + "px" - ); - - this.customizableContainer.style.setProperty( - "--current-panel-height", - bounds.height + "px" - ); - } - }, 1); - } - - connectedCallback() { - super.connectedCallback(); - - this.classList.add("multipanel-area"); - this.setAttribute("orientation", "horizontal"); - - this._init(); - } - - disconnectedCallback() { - super.disconnectedCallback(); - } -} - -customElements.define("browser-multipanel-area", BrowserMultipanelArea); diff --git a/components/panels/content/browser-panel-area.css b/components/panels/content/browser-panel-area.css deleted file mode 100644 index 8ab779df66..0000000000 --- a/components/panels/content/browser-panel-area.css +++ /dev/null @@ -1,49 +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/. */ - -.browser-panel-container { - display: flex; - flex-direction: column; - - width: auto; - height: auto; - - min-width: 16px; - min-height: 16px; - - padding: 0px 8px; - margin: var(--panel-shadow-margin); - - background-color: var(--arrowpanel-background); - - border: 1px solid var(--arrowpanel-border-color); - border-radius: 8px; - - box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132), 0 .6px 1.8px 0 rgba(0, 0, 0, .108); - - overflow: clip; -} - -:host(.browser-panel-container) .browser-panel-header { - display: flex; - - justify-content: center; - align-items: center; - - width: 100%; - padding: 14px 0px; - - border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent 100%); - - & .browser-panel-header-title { - font-weight: bold; - } -} - -:host(.browser-panel-container) .browser-panel-content { - display: flex; - - justify-content: center; - align-items: center; -} \ No newline at end of file diff --git a/components/panels/content/browser-panel-area.js b/components/panels/content/browser-panel-area.js deleted file mode 100644 index 7f096c0ec4..0000000000 --- a/components/panels/content/browser-panel-area.js +++ /dev/null @@ -1,68 +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/. */ - -var { CommandAudiences } = ChromeUtils.importESModule( - "resource://gre/modules/CommandAudiences.sys.mjs" -); - -class BrowserPanelArea extends BrowserCustomizableArea { - constructor() { - super(); - } - - /** - * The customizable components to inherit from when used in this area - */ - static get customizableComponents() { - return { - button: html("button", { is: "browser-panel-button" }) - }; - } - - /** - * The closest panel element to this area - * @returns {BrowserPanel} - */ - get panel() { - return this.closest("panel"); - } - - /** - * The context for the panel - */ - get context() { - const self = this; - - return { - self, - audience: CommandAudiences.PANEL, - - /** @type {Window} */ - get window() { - return self.ownerGlobal; - }, - - /** @type {BrowserTab} */ - get tab() { - return ( - self.panel?.openArgs?.tab || - self.ownerGlobal.gDot.tabs.selectedTab - ); - }, - - /** @type {ChromeBrowser} */ - get browser() { - return self.panel?.openArgs?.tab || this.tab.linkedBrowser; - } - }; - } - - connectedCallback() { - this.classList.add("browser-panel-container"); - } - - disconnectedCallback() {} -} - -customElements.define("browser-panel-area", BrowserPanelArea); diff --git a/components/panels/content/browser-panel-button.css b/components/panels/content/browser-panel-button.css deleted file mode 100644 index 44d2a945db..0000000000 --- a/components/panels/content/browser-panel-button.css +++ /dev/null @@ -1,26 +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/. */ - -button[is=browser-panel-button] { - display: flex; - - width: 100%; - height: var(--panel-button-height, 32px); - - padding: 0px 10px; - - --button-default-color: transparent; - --button-outline-offset: -2px !important; - - & .browser-button-container { - display: flex; - - gap: 10px; - align-items: center; - - padding: 0; - - flex: 1; - } -} \ No newline at end of file diff --git a/components/panels/content/browser-panel-button.js b/components/panels/content/browser-panel-button.js deleted file mode 100644 index 4d3ac5e6ae..0000000000 --- a/components/panels/content/browser-panel-button.js +++ /dev/null @@ -1,38 +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/. */ - -class BrowserPanelButton extends BrowserCommandButton { - constructor() { - super(); - } - - /** - * Triggered when a command event is fired on the panel button - * @param {import("components/commands/Command.sys.mjs").CommandEvent} event - */ - _onPanelButtonCommand(event) { - const panelArea = /** @type {BrowserPanelArea} */ (this.host); - - panelArea.panel.hidePopup(true, true); - } - - connectedCallback() { - super.connectedCallback(); - - this.addEventListener("command", this._onPanelButtonCommand.bind(this)); - } - - disconnectedCallback() { - super.disconnectedCallback(); - - this.removeEventListener( - "command", - this._onPanelButtonCommand.bind(this) - ); - } -} - -customElements.define("browser-panel-button", BrowserPanelButton, { - extends: "button" -}); diff --git a/components/panels/content/browser-panel-menu.css b/components/panels/content/browser-panel-menu.css deleted file mode 100644 index 9e51d579e7..0000000000 --- a/components/panels/content/browser-panel-menu.css +++ /dev/null @@ -1,14 +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/. */ - -.browser-menu-container { - min-width: var(--menu-min-width, 200px); - padding: 2px; - --panel-button-height: 38px; -} - -:host(.browser-menu-container) .customizable-container { - --menuitem-gap: 2px; - gap: var(--menuitem-gap); -} \ No newline at end of file diff --git a/components/panels/content/browser-panel-menu.js b/components/panels/content/browser-panel-menu.js deleted file mode 100644 index 79afc219d5..0000000000 --- a/components/panels/content/browser-panel-menu.js +++ /dev/null @@ -1,41 +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/. */ - -class BrowserPanelMenu extends BrowserPanelArea { - constructor() { - super(); - } - - /** - * Handles incoming events to the menu popup - * @param {Event} event - */ - _handlePanelEvent(event) { - switch (event.type) { - case "popuphidden": - this.remove(); - break; - } - } - - connectedCallback() { - super.connectedCallback(); - - this.panel.setAttribute("animate", "true"); - this.classList.add("browser-menu-container"); - - this.addEventListener("popuphidden", this._handlePanelEvent.bind(this)); - } - - disconnectedCallback() { - super.disconnectedCallback(); - - this.removeEventListener( - "popuphidden", - this._handlePanelEvent.bind(this) - ); - } -} - -customElements.define("browser-panel-menu", BrowserPanelMenu); diff --git a/components/panels/content/browser-panel-menuitem.css b/components/panels/content/browser-panel-menuitem.css deleted file mode 100644 index c27055da78..0000000000 --- a/components/panels/content/browser-panel-menuitem.css +++ /dev/null @@ -1,26 +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/. */ - -browser-panel-menuitem { - display: flex; - flex-direction: column; -} - -browser-panel-menuitem[type=separator] { - width: calc(100% - 4px * 2); - height: 1px; - margin-block: 2px; - margin-inline: 4px; - background: linear-gradient(to top, var(--arrowpanel-border-color), var(--arrowpanel-border-color)), color-mix(in srgb, currentColor 15%, transparent 100%); -} - -browser-panel-menuitem[type=group] { - display: flex; - flex-direction: row; - gap: var(--menuitem-gap); -} - -browser-panel-menuitem[type=group][orientation=vertical] { - flex-direction: column; -} \ No newline at end of file diff --git a/components/panels/content/browser-panel-menuitem.js b/components/panels/content/browser-panel-menuitem.js deleted file mode 100644 index 66801135a3..0000000000 --- a/components/panels/content/browser-panel-menuitem.js +++ /dev/null @@ -1,69 +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/. */ - -class BrowserPanelMenuItem extends MozHTMLElement { - /** - * The allowed customizable attributes for the menu item - */ - static get customizableAttributes() { - return { - type: (value) => { - if (!["normal", "group", "separator"].includes(value)) { - throw new Error( - `Attribute 'type' must be either "normal", "separator" or "group", got '${value}'.` - ); - } - - return value; - }, - - orientation: "orientation" - }; - } - - /** - * Determines what type of menu item this is - */ - get type() { - return this.getAttribute("type"); - } - - /** - * Determines the orientation of the menu item - */ - get orientation() { - return this.getAttribute("orientation"); - } - - set orientation(newValue) { - this.setAttribute("orientation", newValue); - } - - /** - * Determines the icons mode of the menu item - */ - get mode() { - return this.getAttribute("mode"); - } - - set mode(newValue) { - this.setAttribute("mode", newValue); - } - - connectedCallback() { - if (this.delayConnectedCallback()) return; - - if (this.type == "group") { - if (!this.getAttribute("orientation")) { - this.orientation = "horizontal"; - } - } - - if (this.orientation == "horizontal") { - this.mode = "icons"; - } - } -} - -customElements.define("browser-panel-menuitem", BrowserPanelMenuItem); diff --git a/components/panels/content/browser-panel.css b/components/panels/content/browser-panel.css deleted file mode 100644 index 811f4fb8b6..0000000000 --- a/components/panels/content/browser-panel.css +++ /dev/null @@ -1,22 +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/. */ - -panel.browser-panel { - --panel-shadow-margin: 14px; - - margin: calc(-1 * (var(--panel-shadow-margin) + var(--panel-inner-padding, 0px))); - - -moz-window-dragging: no-drag; - - &[animate="true"] { - opacity: 1; - - transition: 0.3s opacity cubic-bezier(0.19, 1, 0.22, 1); - - &:not([open]) { - transition-duration: 0.1s; - opacity: 0; - } - } -} \ No newline at end of file diff --git a/components/panels/content/browser-panel.js b/components/panels/content/browser-panel.js deleted file mode 100644 index 9937f46b2a..0000000000 --- a/components/panels/content/browser-panel.js +++ /dev/null @@ -1,374 +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/. */ - -var MozPopupElement = MozElements.MozElementMixin(XULPopupElement); - -class BrowserPanel extends MozPopupElement { - #debugVisiblePref = "dot.panels.debug_information.visible"; - - constructor() { - super(); - - this.classList.add("browser-panel"); - - this.setAttribute( - "is", - customElements.getName( - /** @type {CustomElementConstructor} */ (this.constructor) - ) - ); - this.setAttribute("animate", "false"); - this.setAttribute("consumeoutsideclicks", "true"); - this.setAttribute("incontentshell", "false"); - this.setAttribute("ignorekeys", "true"); - this.setAttribute("tooltip", "aHTMLTooltip"); - } - - /** - * Arguments supplied to the panel when it opens - */ - openArgs = {}; - - /** - * The container element that holds the panel's contents - */ - get container() { - return /** @type {HTMLElement} */ ( - this.querySelector(".browser-panel-container") - ); - } - - /** - * Fires when the popup starts showing on-screen - */ - onPopupShowing() { - window.addEventListener("mousemove", this._handlePanelEvent.bind(this)); - window.addEventListener("mousedown", this._handlePanelEvent.bind(this)); - - this.toggleAttribute("open", true); - } - - /** - * Fires when the popup is shown on-screen - */ - onPopupShown() { - const alertEvt = document.createEvent("Events"); - alertEvt.initEvent("AlertActive", true, true); - - this.dispatchEvent(alertEvt); - } - - /** - * Fires when the popup starts being hidden - */ - onPopupHiding() { - window.removeEventListener( - "mousemove", - this._handlePanelEvent.bind(this) - ); - window.removeEventListener( - "mousedown", - this._handlePanelEvent.bind(this) - ); - - // Remove the panel once all transitions have completed - if (this.getAttribute("animate") == "true") { - this.addEventListener( - "transitionend", - () => { - console.log("transitionend"); - - this.removeAttribute("open"); - this.hidePopup(); - }, - { - once: true - } - ); - } else { - this.hidePopup(); - } - } - - /** - * Fired when the mouse moves across browser windows - * @param {MouseEvent} event - */ - onSystemMouseMove(event) { - if (this.state !== "open" || !this.container) { - return; - } - - const panelBounds = this.getOuterScreenRect(); - - const containerBounds = this.container.getBoundingClientRect(); - const outerContainerBounds = window.windowUtils.toScreenRect( - containerBounds.x, - containerBounds.y, - containerBounds.width, - containerBounds.height - ); - - const mouseBounds = window.windowUtils.toScreenRect( - /** @type {MouseEvent} */ (event).clientX, - /** @type {MouseEvent} */ (event).clientY, - 0, - 0 - ); - - const lowerX = outerContainerBounds.x; - const lowerY = outerContainerBounds.y; - const upperX = lowerX + outerContainerBounds.width; - const upperY = lowerY + outerContainerBounds.height; - - const lowerPanelX = panelBounds.x; - const lowerPanelY = panelBounds.y; - const upperPanelX = lowerPanelX + panelBounds.width; - const upperPanelY = lowerPanelY + panelBounds.height; - - const insideContainer = - mouseBounds.x >= lowerX && - mouseBounds.x <= upperX && - mouseBounds.y >= lowerY && - mouseBounds.y <= upperY; - - const insidePanel = - mouseBounds.x >= lowerPanelX && - mouseBounds.x <= upperPanelX && - mouseBounds.y >= lowerPanelY && - mouseBounds.y <= upperPanelY; - - this.insideMargins = insidePanel && !insideContainer; - - this.style.pointerEvents = this.insideMargins ? "none" : ""; - } - - /** - * Dispatches a panels event to an element - * @param {Element} element - * @param {string} name - * @param {Record} data - */ - _dispatchEvent(element, name, data) { - const evt = new CustomEvent(`BrowserPanels::${name}`, { - detail: data - }); - - element.dispatchEvent(evt); - } - - /** - * - * @param {any[]} args - * @returns {any} - * @deprecated - */ - openPopup(...args) { - super.openPopup(...args); - } - - /** - * - * @param {any[]} args - * @returns {any} - * @deprecated - */ - openPopupAtScreen(...args) { - super.openPopupAtScreen(...args); - } - - /** - * - * @param {any[]} args - * @returns {any} - * @deprecated - */ - openPopupAtScreenRect(...args) { - super.openPopupAtScreenRect(...args); - } - - /** - * Opens the panel - * @param {import("../BrowserPanels.sys.mjs").PanelOpenOptions} openOptions - */ - openPanel(openOptions) { - const noCoords = - !("x" in openOptions) || - !("y" in openOptions) || - typeof openOptions.x == "undefined" || - typeof openOptions.y == "undefined"; - - if (noCoords && !openOptions.element) { - throw new Error( - "Properties 'x' and 'y' or 'element' are required." - ); - } - - if (openOptions.element && !openOptions.anchor) { - openOptions.anchor = "before before"; - } - - if (openOptions.element && noCoords) { - const [anchorX, anchorY] = openOptions.anchor.split(" "); - - const bounds = openOptions.element.getBoundingClientRect(); - - const width = anchorX == "before" ? 0 : bounds.width; - const height = anchorY == "before" ? 0 : bounds.height; - - openOptions.x = bounds.x + width; - openOptions.y = bounds.y + height; - } - - this.openArgs = openOptions?.args || {}; - - this.toggleAttribute( - "autopurge", - openOptions && "autopurge" in openOptions - ? openOptions.autopurge - : true - ); - - const root = openOptions?.root || this.ownerDocument.documentElement; - - this.addEventListener("popupshowing", () => { - this._dispatchEvent(openOptions.element || root, "PanelOpen", { - id: this.id - }); - }); - - this.addEventListener("popuphidden", () => { - this._dispatchEvent(openOptions.element || root, "PanelClose", { - id: this.id - }); - - if (this.hasAttribute("autopurge")) { - this.remove(); - } - }); - - switch (openOptions.coordMode) { - case "screen": - super.openPopupAtScreen(openOptions.x, openOptions.y); - - break; - default: - super.openPopup(null, "", openOptions.x, openOptions.y); - - break; - } - } - - /** - * Hide the popup if it is open. The cancel argument is used as a hint that - * the popup is being closed because it has been cancelled, rather than - * something being selected within the panel. - * - * @param {boolean} [cancel] if true, then the popup is being cancelled. - * @param {boolean} [force] - * @returns {any} - */ - hidePopup(cancel, force) { - // If we explicitly disallow autohiding popups, avoid - // calling the hidePopup method on XULPopupElement - if ( - Services.prefs.getBoolPref("ui.popup.disable_autohide", false) && - !force - ) { - return; - } - - super.hidePopup(cancel); - } - - /** - * Handles incoming events to the popup - * @param {Event} event - */ - _handlePanelEvent(event) { - switch (event.type) { - case "popupshowing": - this.onPopupShowing(); - break; - case "popupshown": - this.onPopupShown(); - break; - case "popuphiding": - this.onPopupHiding(); - break; - case "mousedown": - if (this.insideMargins) { - this.hidePopup(); - } - - break; - case "mousemove": - this.onSystemMouseMove(/** @type {MouseEvent} */ (event)); - break; - } - } - - /** - * @param {BrowserDebugHologram} hologram - */ - renderDebugHologram(hologram) { - const bounds = this.getBoundingClientRect(); - - return html( - "div", - {}, - ...[ - `W: ${Math.round(bounds.width)}`, - `H: ${Math.round(bounds.height)}`, - `O: ${ - parseFloat(getComputedStyle(this).opacity).toFixed(2) || 0 - }`, - `Sl: ${Math.round(this.scrollLeft)}px`, - `SlMax: ${Math.round( - /** @type {any} */ (this).scrollLeftMax - )}px` - ].map((c) => html("span", {}, c)) - ); - } - - connectedCallback() { - if (this.delayConnectedCallback()) return; - - this.appendChild( - BrowserDebugHologram.create( - { - id: "panel", - prefId: this.#debugVisiblePref - }, - this.renderDebugHologram.bind(this) - ) - ); - - this.addEventListener( - "popupshowing", - this._handlePanelEvent.bind(this) - ); - this.addEventListener("popupshown", this._handlePanelEvent.bind(this)); - this.addEventListener("popuphiding", this._handlePanelEvent.bind(this)); - } - - disconnectedCallback() { - if (this.delayConnectedCallback()) return; - - this.removeEventListener( - "popupshowing", - this._handlePanelEvent.bind(this) - ); - this.removeEventListener( - "popupshown", - this._handlePanelEvent.bind(this) - ); - this.removeEventListener( - "popuphiding", - this._handlePanelEvent.bind(this) - ); - } -} - -customElements.define("browser-panel", BrowserPanel, { extends: "panel" }); diff --git a/components/panels/jar.mn b/components/panels/jar.mn deleted file mode 100644 index b55de6a012..0000000000 --- a/components/panels/jar.mn +++ /dev/null @@ -1,25 +0,0 @@ -# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- -# vim: set filetype=python: -# 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/. - -dot.jar: -% content dot %content/ contentaccessible=yes - content/widgets/browser-panel.js (content/browser-panel.js) - content/widgets/browser-panel.css (content/browser-panel.css) - - content/widgets/browser-panel-area.js (content/browser-panel-area.js) - content/widgets/browser-panel-area.css (content/browser-panel-area.css) - - content/widgets/browser-multipanel-area.js (content/browser-multipanel-area.js) - content/widgets/browser-multipanel-area.css (content/browser-multipanel-area.css) - - content/widgets/browser-panel-menu.js (content/browser-panel-menu.js) - content/widgets/browser-panel-menu.css (content/browser-panel-menu.css) - - content/widgets/browser-panel-menuitem.js (content/browser-panel-menuitem.js) - content/widgets/browser-panel-menuitem.css (content/browser-panel-menuitem.css) - - content/widgets/browser-panel-button.js (content/browser-panel-button.js) - content/widgets/browser-panel-button.css (content/browser-panel-button.css) diff --git a/components/panels/moz.build b/components/panels/moz.build deleted file mode 100644 index 2f0a19aea3..0000000000 --- a/components/panels/moz.build +++ /dev/null @@ -1,11 +0,0 @@ -# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- -# vim: set filetype=python: -# 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/. - -JAR_MANIFESTS += ["jar.mn"] - -EXTRA_JS_MODULES += [ - "BrowserPanels.sys.mjs", -] \ No newline at end of file