diff options
Diffstat (limited to 'devtools/client/performance-new/popup')
| -rw-r--r-- | devtools/client/performance-new/popup/README.md | 3 | ||||
| -rw-r--r-- | devtools/client/performance-new/popup/logic.jsm.js | 342 | ||||
| -rw-r--r-- | devtools/client/performance-new/popup/menu-button.jsm.js | 333 | ||||
| -rw-r--r-- | devtools/client/performance-new/popup/moz.build | 12 |
4 files changed, 690 insertions, 0 deletions
diff --git a/devtools/client/performance-new/popup/README.md b/devtools/client/performance-new/popup/README.md new file mode 100644 index 0000000000..78ef8e54c7 --- /dev/null +++ b/devtools/client/performance-new/popup/README.md @@ -0,0 +1,3 @@ +# Profiler Popup + +This directory collects the code that powers the profiler popup. See devtools/client/performance-new/README.md for more information. diff --git a/devtools/client/performance-new/popup/logic.jsm.js b/devtools/client/performance-new/popup/logic.jsm.js new file mode 100644 index 0000000000..006c28c675 --- /dev/null +++ b/devtools/client/performance-new/popup/logic.jsm.js @@ -0,0 +1,342 @@ +/* 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/. */ +// @ts-check +"use strict"; + +/** + * This file controls the logic of the profiler popup view. + */ + +/** + * @typedef {ReturnType<typeof selectElementsInPanelview>} Elements + * @typedef {ReturnType<typeof createViewControllers>} ViewController + */ + +/** + * @typedef {Object} State - The mutable state of the popup. + * @property {Array<() => void>} cleanup - Functions to cleanup once the view is hidden. + * @property {boolean} isInfoCollapsed + */ + +const { createLazyLoaders } = ChromeUtils.import( + "resource://devtools/client/performance-new/shared/typescript-lazy-load.jsm.js" +); + +const lazy = createLazyLoaders({ + PanelMultiView: () => + ChromeUtils.importESModule("resource:///modules/PanelMultiView.sys.mjs"), + Background: () => + ChromeUtils.import( + "resource://devtools/client/performance-new/shared/background.jsm.js" + ), +}); + +/** + * This function collects all of the selection of the elements inside of the panel. + * + * @param {XULElement} panelview + */ +function selectElementsInPanelview(panelview) { + const document = panelview.ownerDocument; + /** + * Get an element or throw an error if it's not found. This is more friendly + * for TypeScript. + * + * @param {string} id + * @return {HTMLElement} + */ + function getElementById(id) { + /** @type {HTMLElement | null} */ + // @ts-ignore - Bug 1674368 + const { PanelMultiView } = lazy.PanelMultiView(); + const element = PanelMultiView.getViewNode(document, id); + if (!element) { + throw new Error(`Could not find the element from the ID "${id}"`); + } + return element; + } + + // Forcefully cast the window to the type ChromeWindow. + /** @type {any} */ + const chromeWindowAny = document.defaultView; + /** @type {ChromeWindow} */ + const chromeWindow = chromeWindowAny; + + return { + document, + panelview, + window: chromeWindow, + inactive: getElementById("PanelUI-profiler-inactive"), + active: getElementById("PanelUI-profiler-active"), + presetDescription: getElementById("PanelUI-profiler-content-description"), + presetsEditSettings: getElementById( + "PanelUI-profiler-content-edit-settings" + ), + presetsMenuList: /** @type {MenuListElement} */ ( + getElementById("PanelUI-profiler-presets") + ), + header: getElementById("PanelUI-profiler-header"), + info: getElementById("PanelUI-profiler-info"), + menupopup: getElementById("PanelUI-profiler-presets-menupopup"), + infoButton: getElementById("PanelUI-profiler-info-button"), + learnMore: getElementById("PanelUI-profiler-learn-more"), + startRecording: getElementById("PanelUI-profiler-startRecording"), + stopAndDiscard: getElementById("PanelUI-profiler-stopAndDiscard"), + stopAndCapture: getElementById("PanelUI-profiler-stopAndCapture"), + settingsSection: getElementById("PanelUI-profiler-content-settings"), + contentRecording: getElementById("PanelUI-profiler-content-recording"), + }; +} + +/** + * This function returns an interface that can be used to control the view of the + * panel based on the current mutable State. + * + * @param {State} state + * @param {Elements} elements + */ +function createViewControllers(state, elements) { + return { + updateInfoCollapse() { + const { header, info, infoButton } = elements; + header.setAttribute( + "isinfocollapsed", + state.isInfoCollapsed ? "true" : "false" + ); + // @ts-ignore - Bug 1674368 + infoButton.checked = !state.isInfoCollapsed; + + if (state.isInfoCollapsed) { + const { height } = info.getBoundingClientRect(); + info.style.marginBlockEnd = `-${height}px`; + } else { + info.style.marginBlockEnd = "0"; + } + }, + + updatePresets() { + const { presets, getRecordingSettings } = lazy.Background(); + const { presetName } = getRecordingSettings( + "aboutprofiling", + Services.profiler.GetFeatures() + ); + const preset = presets[presetName]; + if (preset) { + elements.presetDescription.style.display = "block"; + elements.document.l10n.setAttributes( + elements.presetDescription, + preset.l10nIds.popup.description + ); + elements.presetsMenuList.value = presetName; + } else { + elements.presetDescription.style.display = "none"; + // We don't remove the l10n-id attribute as the element is hidden anyway. + // It will be updated again when it's displayed next time. + elements.presetsMenuList.value = "custom"; + } + }, + + updateProfilerState() { + if (Services.profiler.IsActive()) { + elements.inactive.hidden = true; + elements.active.hidden = false; + elements.settingsSection.hidden = true; + elements.contentRecording.hidden = false; + } else { + elements.inactive.hidden = false; + elements.active.hidden = true; + elements.settingsSection.hidden = false; + elements.contentRecording.hidden = true; + } + }, + + createPresetsList() { + // Check the DOM if the presets were built or not. We can't cache this value + // in the `State` object, as the `State` object will be removed if the + // button is removed from the toolbar, but the DOM changes will still persist. + if (elements.menupopup.getAttribute("presetsbuilt") === "true") { + // The presets were already built. + return; + } + + const { presets } = lazy.Background(); + const currentPreset = Services.prefs.getCharPref( + "devtools.performance.recording.preset" + ); + + const menuitems = Object.entries(presets).map(([id, preset]) => { + const { document, presetsMenuList } = elements; + const menuitem = document.createXULElement("menuitem"); + document.l10n.setAttributes(menuitem, preset.l10nIds.popup.label); + menuitem.setAttribute("value", id); + if (id === currentPreset) { + presetsMenuList.setAttribute("value", id); + } + return menuitem; + }); + + elements.menupopup.prepend(...menuitems); + elements.menupopup.setAttribute("presetsbuilt", "true"); + }, + + hidePopup() { + const panel = elements.panelview.closest("panel"); + if (!panel) { + throw new Error("Could not find the panel from the panelview."); + } + /** @type {any} */ (panel).hidePopup(); + }, + }; +} + +/** + * Perform all of the business logic to present the popup view once it is open. + * + * @param {State} state + * @param {Elements} elements + * @param {ViewController} view + */ +function initializeView(state, elements, view) { + view.createPresetsList(); + + state.cleanup.push(() => { + // The UI should be collapsed by default for the next time the popup + // is open. + state.isInfoCollapsed = true; + view.updateInfoCollapse(); + }); + + // Turn off all animations while initializing the popup. + elements.header.setAttribute("animationready", "false"); + + elements.window.requestAnimationFrame(() => { + // Allow the elements to layout once, the updateInfoCollapse implementation measures + // the size of the container. It needs to wait a second before the bounding box + // returns an actual size. + view.updateInfoCollapse(); + view.updateProfilerState(); + view.updatePresets(); + + // Now wait for another rAF, and turn the animations back on. + elements.window.requestAnimationFrame(() => { + elements.header.setAttribute("animationready", "true"); + }); + }); +} + +/** + * This function is in charge of settings all of the events handlers for the view. + * The handlers must also add themselves to the `state.cleanup` for them to be + * properly cleaned up once the view is destroyed. + * + * @param {State} state + * @param {Elements} elements + * @param {ViewController} view + */ +function addPopupEventHandlers(state, elements, view) { + const { changePreset, startProfiler, stopProfiler, captureProfile } = + lazy.Background(); + + /** + * Adds a handler that automatically is removed once the panel is hidden. + * + * @param {HTMLElement} element + * @param {string} type + * @param {(event: Event) => void} handler + */ + function addHandler(element, type, handler) { + element.addEventListener(type, handler); + state.cleanup.push(() => { + element.removeEventListener(type, handler); + }); + } + + addHandler(elements.infoButton, "click", event => { + // Any button command event in the popup will cause it to close. Prevent this + // from happening on click. + event.preventDefault(); + + state.isInfoCollapsed = !state.isInfoCollapsed; + view.updateInfoCollapse(); + }); + + addHandler(elements.startRecording, "click", () => { + startProfiler("aboutprofiling"); + }); + + addHandler(elements.stopAndDiscard, "click", () => { + stopProfiler(); + }); + + addHandler(elements.stopAndCapture, "click", () => { + captureProfile("aboutprofiling"); + view.hidePopup(); + }); + + addHandler(elements.learnMore, "click", () => { + elements.window.openWebLinkIn("https://profiler.firefox.com/docs/", "tab"); + view.hidePopup(); + }); + + addHandler(elements.presetsMenuList, "command", () => { + changePreset( + "aboutprofiling", + elements.presetsMenuList.value, + Services.profiler.GetFeatures() + ); + view.updatePresets(); + }); + + addHandler(elements.presetsMenuList, "popuphidden", event => { + // Changing a preset makes the popup autohide, this handler stops the + // propagation of that event, so that only the menulist's popup closes, + // and not the rest of the popup. + event.stopPropagation(); + }); + + addHandler(elements.presetsMenuList, "click", event => { + // Clicking on a preset makes the popup autohide, this preventDefault stops + // the CustomizableUI from closing the popup. + event.preventDefault(); + }); + + addHandler(elements.presetsEditSettings, "click", () => { + elements.window.openTrustedLinkIn("about:profiling", "tab"); + view.hidePopup(); + }); + + // Update the view when the profiler starts/stops. + // These are all events that can affect the current state of the profiler. + const events = ["profiler-started", "profiler-stopped"]; + for (const event of events) { + Services.obs.addObserver(view.updateProfilerState, event); + state.cleanup.push(() => { + Services.obs.removeObserver(view.updateProfilerState, event); + }); + } +} + +/** + * Initialize everything needed for the popup to work fine. + * @param {State} panelState + * @param {XULElement} panelview + */ +function initializePopup(panelState, panelview) { + const panelElements = selectElementsInPanelview(panelview); + const panelviewControllers = createViewControllers(panelState, panelElements); + addPopupEventHandlers(panelState, panelElements, panelviewControllers); + initializeView(panelState, panelElements, panelviewControllers); +} + +// Provide an exports object for the JSM to be properly read by TypeScript. +/** @type {any} */ +var module = {}; + +module.exports = { + initializePopup, +}; + +// Object.keys() confuses the linting which expects a static array expression. +// eslint-disable-next-line +var EXPORTED_SYMBOLS = Object.keys(module.exports); diff --git a/devtools/client/performance-new/popup/menu-button.jsm.js b/devtools/client/performance-new/popup/menu-button.jsm.js new file mode 100644 index 0000000000..1cf1abe19d --- /dev/null +++ b/devtools/client/performance-new/popup/menu-button.jsm.js @@ -0,0 +1,333 @@ +/* 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/. */ +// @ts-check +"use strict"; + +/** + * This file controls the enabling and disabling of the menu button for the profiler. + * Care should be taken to keep it minimal as it can be run with browser initialization. + */ + +// Provide an exports object for the JSM to be properly read by TypeScript. +/** @type {any} */ +var exports = {}; + +const { createLazyLoaders } = ChromeUtils.import( + "resource://devtools/client/performance-new/shared/typescript-lazy-load.jsm.js" +); + +const lazy = createLazyLoaders({ + CustomizableUI: () => + ChromeUtils.importESModule("resource:///modules/CustomizableUI.sys.mjs"), + CustomizableWidgets: () => + ChromeUtils.importESModule( + "resource:///modules/CustomizableWidgets.sys.mjs" + ), + PopupLogic: () => + ChromeUtils.import( + "resource://devtools/client/performance-new/popup/logic.jsm.js" + ), + Background: () => + ChromeUtils.import( + "resource://devtools/client/performance-new/shared/background.jsm.js" + ), +}); + +const WIDGET_ID = "profiler-button"; + +/** + * Add the profiler button to the navbar. + * + * @param {ChromeDocument} document The browser's document. + * @return {void} + */ +function addToNavbar(document) { + const { CustomizableUI } = lazy.CustomizableUI(); + + CustomizableUI.addWidgetToArea(WIDGET_ID, CustomizableUI.AREA_NAVBAR); +} + +/** + * Remove the widget and place it in the customization palette. This will also + * disable the shortcuts. + * + * @return {void} + */ +function remove() { + const { CustomizableUI } = lazy.CustomizableUI(); + CustomizableUI.removeWidgetFromArea(WIDGET_ID); +} + +/** + * See if the profiler menu button is in the navbar, or other active areas. The + * placement is null when it's inactive in the customization palette. + * + * @return {boolean} + */ +function isInNavbar() { + const { CustomizableUI } = lazy.CustomizableUI(); + return Boolean(CustomizableUI.getPlacementOfWidget("profiler-button")); +} + +/** + * Opens the popup for the profiler. + * @param {Document} document + */ +function openPopup(document) { + // First find the button. + /** @type {HTMLButtonElement | null} */ + const button = document.querySelector("#profiler-button"); + if (!button) { + throw new Error("Could not find the profiler button."); + } + + // Sending a click event anywhere on the button could start the profiler + // instead of opening the popup. Sending a command event on a view widget + // will make CustomizableUI show the view. + const cmdEvent = document.createEvent("xulcommandevent"); + // @ts-ignore - Bug 1674368 + cmdEvent.initCommandEvent("command", true, true, button.ownerGlobal); + button.dispatchEvent(cmdEvent); +} + +/** + * This function creates the widget definition for the CustomizableUI. It should + * only be run if the profiler button is enabled. + * @param {(isEnabled: boolean) => void} toggleProfilerKeyShortcuts + * @return {void} + */ +function initialize(toggleProfilerKeyShortcuts) { + const { CustomizableUI } = lazy.CustomizableUI(); + const { CustomizableWidgets } = lazy.CustomizableWidgets(); + + const widget = CustomizableUI.getWidget(WIDGET_ID); + if (widget && widget.provider == CustomizableUI.PROVIDER_API) { + // This widget has already been created. + return; + } + + const viewId = "PanelUI-profiler"; + + /** + * This is mutable state that will be shared between panel displays. + * + * @type {import("devtools/client/performance-new/popup/logic.jsm.js").State} + */ + const panelState = { + cleanup: [], + isInfoCollapsed: true, + }; + + /** + * Handle when the customization changes for the button. This event is not + * very specific, and fires for any CustomizableUI widget. This event is + * pretty rare to fire, and only affects users of the profiler button, + * so it shouldn't have much overhead even if it runs a lot. + */ + function handleCustomizationChange() { + const isEnabled = isInNavbar(); + toggleProfilerKeyShortcuts(isEnabled); + + if (!isEnabled) { + // The profiler menu button is no longer in the navbar, make sure that the + // "intro-displayed" preference is reset. + /** @type {import("../@types/perf").PerformancePref["PopupIntroDisplayed"]} */ + const popupIntroDisplayedPref = + "devtools.performance.popup.intro-displayed"; + Services.prefs.setBoolPref(popupIntroDisplayedPref, false); + + // We stop the profiler when the button is removed for normal users, + // but we try to avoid interfering with profiling of automated tests. + if ( + Services.profiler.IsActive() && + (!Cu.isInAutomation || !Services.env.exists("MOZ_PROFILER_STARTUP")) + ) { + Services.profiler.StopProfiler(); + } + } + } + + const item = { + id: WIDGET_ID, + type: "button-and-view", + viewId, + l10nId: "profiler-popup-button-idle", + + onViewShowing: + /** + * @type {(event: { + * target: ChromeHTMLElement | XULElement, + * detail: { + * addBlocker: (blocker: Promise<void>) => void + * } + * }) => void} + */ + event => { + try { + // The popup logic is stored in a separate script so it doesn't have + // to be parsed at browser startup, and will only be lazily loaded + // when the popup is viewed. + const { initializePopup } = lazy.PopupLogic(); + + initializePopup(panelState, event.target); + } catch (error) { + // Surface any errors better in the console. + console.error(error); + } + }, + + /** + * @type {(event: { target: ChromeHTMLElement | XULElement }) => void} + */ + onViewHiding(event) { + // Clean-up the view. This removes all of the event listeners. + for (const fn of panelState.cleanup) { + fn(); + } + panelState.cleanup = []; + }, + + /** + * Perform any general initialization for this widget. This is called once per + * browser window. + * + * @type {(document: HTMLDocument) => void} + */ + onBeforeCreated: document => { + /** @type {import("../@types/perf").PerformancePref["PopupIntroDisplayed"]} */ + const popupIntroDisplayedPref = + "devtools.performance.popup.intro-displayed"; + + // Determine the state of the popup's info being collapsed BEFORE the view + // is shown, and update the collapsed state. This way the transition animation + // isn't run. + panelState.isInfoCollapsed = Services.prefs.getBoolPref( + popupIntroDisplayedPref + ); + if (!panelState.isInfoCollapsed) { + // We have displayed the intro, don't show it again by default. + Services.prefs.setBoolPref(popupIntroDisplayedPref, true); + } + + // Handle customization event changes. If the profiler is no longer in the + // navbar, then reset the popup intro preference. + const window = document.defaultView; + if (window) { + /** @type {any} */ (window).gNavToolbox.addEventListener( + "customizationchange", + handleCustomizationChange + ); + } + + toggleProfilerKeyShortcuts(isInNavbar()); + }, + + /** + * This method is used when we need to operate upon the button element itself. + * This is called once per browser window. + * + * @type {(node: ChromeHTMLElement) => void} + */ + onCreated: node => { + const document = node.ownerDocument; + const window = document?.defaultView; + if (!document || !window) { + console.error( + "Unable to find the document or the window of the profiler toolbar item." + ); + return; + } + + const firstButton = node.firstElementChild; + if (!firstButton) { + console.error( + "Unable to find the button element inside the profiler toolbar item." + ); + return; + } + + // Assign the null-checked button element to a new variable so that + // TypeScript doesn't require additional null checks in the functions + // below. + const buttonElement = firstButton; + + // This class is needed to show the subview arrow when our button + // is in the overflow menu. + buttonElement.classList.add("subviewbutton-nav"); + + function setButtonActive() { + document.l10n.setAttributes( + buttonElement, + "profiler-popup-button-recording" + ); + buttonElement.classList.toggle("profiler-active", true); + buttonElement.classList.toggle("profiler-paused", false); + } + function setButtonPaused() { + document.l10n.setAttributes( + buttonElement, + "profiler-popup-button-capturing" + ); + buttonElement.classList.toggle("profiler-active", false); + buttonElement.classList.toggle("profiler-paused", true); + } + function setButtonInactive() { + document.l10n.setAttributes( + buttonElement, + "profiler-popup-button-idle" + ); + buttonElement.classList.toggle("profiler-active", false); + buttonElement.classList.toggle("profiler-paused", false); + } + + if (Services.profiler.IsPaused()) { + setButtonPaused(); + } + if (Services.profiler.IsActive()) { + setButtonActive(); + } + + Services.obs.addObserver(setButtonActive, "profiler-started"); + Services.obs.addObserver(setButtonInactive, "profiler-stopped"); + Services.obs.addObserver(setButtonPaused, "profiler-paused"); + + window.addEventListener("unload", () => { + Services.obs.removeObserver(setButtonActive, "profiler-started"); + Services.obs.removeObserver(setButtonInactive, "profiler-stopped"); + Services.obs.removeObserver(setButtonPaused, "profiler-paused"); + }); + }, + + // @ts-ignore - Bug 1674368 + onCommand: event => { + if (Services.profiler.IsPaused()) { + // A profile is already being captured, ignore this event. + return; + } + const { startProfiler, captureProfile } = lazy.Background(); + if (Services.profiler.IsActive()) { + captureProfile("aboutprofiling"); + } else { + startProfiler("aboutprofiling"); + } + }, + }; + + CustomizableUI.createWidget(item); + CustomizableWidgets.push(item); +} + +const ProfilerMenuButton = { + initialize, + addToNavbar, + isInNavbar, + openPopup, + remove, +}; + +exports.ProfilerMenuButton = ProfilerMenuButton; + +// Object.keys() confuses the linting which expects a static array expression. +// eslint-disable-next-line +var EXPORTED_SYMBOLS = Object.keys(exports); diff --git a/devtools/client/performance-new/popup/moz.build b/devtools/client/performance-new/popup/moz.build new file mode 100644 index 0000000000..4430bba9af --- /dev/null +++ b/devtools/client/performance-new/popup/moz.build @@ -0,0 +1,12 @@ +# 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/. + +DevToolsModules( + "logic.jsm.js", + "menu-button.jsm.js", +) + +with Files("**"): + BUG_COMPONENT = ("DevTools", "Performance Tools (Profiler/Timeline)") |