From 10b5ed8b35ae33446ee30622120d375ea3e4945a Mon Sep 17 00:00:00 2001
From: Greg Tatum <gtatum@mozilla.com>
Date: Tue, 25 Feb 2020 16:47:19 +0000
Subject: [PATCH] Bug 1597378 - Create new UI for the profiler popup; r=julienw

This commit implements the actual UI changes. A follow-up commit adds the
tests for the changes. The CSS is a little bit awkard since it uses lots of
ID selectors rather than class selectors. I wanted to be able to write quick
selects, since it's selecting across the entire browser document. I feel
a little conflicted with the approach, as I would prefer to use classes in
general.

The panel.jsm.js file collects all of the UI handling changes rather than
having everything in menu-button.jsm.js, as the latter can get loaded
at startup. I'm not sure if it's completely worth the trouble of having
two files, as most of it should be pretty light.

This commit does not handle localization for the panel, as we should be moving
to Fluent. Rather than solve that here, I will follow-up with it in Bug 1599774.

Differential Revision: https://phabricator.services.mozilla.com/D62914

--HG--
extra : moz-landing-system : lando
---
 .../customizableui/content/panelUI.inc.xhtml  |  82 ++++-
 .../shared/customizableui/panelUI.inc.css     | 281 +++++++++++++-
 devtools/client/jar.mn                        |   1 +
 .../client/performance-new/@types/gecko.d.ts  |  35 +-
 .../client/performance-new/@types/perf.d.ts   |   5 +
 .../performance-new/popup/menu-button.jsm.js  | 131 +++----
 .../client/performance-new/popup/moz.build    |   1 +
 .../client/performance-new/popup/panel.jsm.js | 342 ++++++++++++++++++
 .../images/performance-new-popup-backdrop.png | Bin 0 -> 8455 bytes
 modules/libpref/init/all.js                   |   2 +
 10 files changed, 804 insertions(+), 76 deletions(-)
 create mode 100644 devtools/client/performance-new/popup/panel.jsm.js
 create mode 100644 devtools/client/themes/images/performance-new-popup-backdrop.png

diff --git a/browser/components/customizableui/content/panelUI.inc.xhtml b/browser/components/customizableui/content/panelUI.inc.xhtml
index 3ce9282f287a..1a1e40af0e37 100644
--- a/browser/components/customizableui/content/panelUI.inc.xhtml
+++ b/browser/components/customizableui/content/panelUI.inc.xhtml
@@ -644,7 +644,87 @@
       <vbox id="PanelUI-developerItems" class="panel-subview-body"/>
     </panelview>
 
-    <panelview id="PanelUI-profiler" flex="1"/>
+    <panelview id="PanelUI-profiler" flex="1" descriptionheightworkaround="true">
+      <vbox id="PanelUI-profiler-container">
+        <vbox id="PanelUI-profiler-header" animationready="false">
+          <hbox id="PanelUI-profiler-header-bar">
+            <label flex="1" value="Firefox Profiler" />
+            <vbox class="PanelUI-profiler-toolbarbutton-container">
+              <toolbarbutton id="PanelUI-profiler-info-button"
+                            class="panel-info-button"
+                            aria-label="Reveal more information">
+                <image/>
+              </toolbarbutton>
+            </vbox>
+          </hbox>
+          <hbox id="PanelUI-profiler-info">
+            <vbox>
+              <hbox id="PanelUI-profiler-info-graphic" flex="1">
+                <spacer flex="1" />
+                <vbox>
+                  <spacer flex="1" />
+                  <image class="PanelUI-profiler-info-icon" />
+                </vbox>
+              </hbox>
+              <label value="Record, analyze, share" />
+              <description>
+                Collaborate on performance issues by publishing profiles to share with your team.
+              </description>
+              <hbox>
+                <button id="PanelUI-profiler-learn-more" tabindex="-1">Learn more</button>
+                <space flex="1" />
+              </hbox>
+            </vbox>
+          </hbox>
+        </vbox>
+        <vbox id="PanelUI-profiler-content">
+          <label class="PanelUI-profiler-content-label"
+                 value="Settings" />
+          <menulist id="PanelUI-profiler-presets"
+            flex="1"
+            value="custom">
+            <menupopup id="PanelUI-profiler-presets-menupopup" presetsbuilt="false">
+              <!-- The rest of the values get dynamically inserted. The "presetsbuilt"
+                   attribute will get updated to "true" once the presets have been
+                   built. -->
+              <menuitem label="Custom" value="custom"/>
+            </menupopup>
+          </menulist>
+          <!-- The following description gets inserted dynamically. -->
+          <description id="PanelUI-profiler-content-description" />
+          <hbox id="PanelUI-profiler-content-custom">
+            <button id="PanelUI-profiler-content-custom-button">
+              Edit Settings…
+            </button>
+          </hbox>
+          <hbox id="PanelUI-profiler-inactive" class="PanelUI-profiler-buttons">
+            <spacer flex="1" />
+            <vbox>
+              <button label="Start Recording"
+                      id="PanelUI-profiler-startRecording"
+                      class="PanelUI-profiler-button PanelUI-profiler-button-primary"
+                      />
+              <label class="PanelUI-profiler-shortcut">^⇧1</label>
+            </vbox>
+            <spacer flex="1" />
+          </hbox>
+          <hbox id="PanelUI-profiler-active" class="PanelUI-profiler-buttons">
+            <vbox flex="1">
+              <button label="Discard"
+                      class="PanelUI-profiler-button"
+                      id="PanelUI-profiler-stopAndDiscard" />
+              <label class="PanelUI-profiler-shortcut">^⇧1</label>
+            </vbox>
+            <vbox flex="1">
+              <button label="Capture"
+                      class="PanelUI-profiler-button PanelUI-profiler-button-primary"
+                      id="PanelUI-profiler-stopAndCapture" />
+              <label class="PanelUI-profiler-shortcut">^⇧2</label>
+            </vbox>
+          </hbox>
+        </vbox>
+      </vbox>
+    </panelview>
 
     <panelview id="PanelUI-characterEncodingView" flex="1">
       <vbox class="panel-subview-body">
diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css
index d5da7a2d92ee..c591b837cabd 100644
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1831,7 +1831,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
   height: calc(100% - 20px);
   margin: 10px;
   transition: opacity .25s;
-  opacity: 1; 
+  opacity: 1;
   background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
   background-repeat: no-repeat;
   background-position: top right;
@@ -1963,3 +1963,282 @@ panelview[mainview] #PanelUI-whatsNew-content {
   width: 100%;
   text-align: end;
 }
+
+#PanelUI-profiler {
+  /* On Linux, the popup was too wide for the content due to this rule. This is marked
+     as !important to get over the specificity of the CustomizeableUI base rules. */
+  min-width: 0 !important;
+}
+
+#PanelUI-profiler description {
+  max-width: 290px;
+}
+
+/* Make the width nicely sized for when the panel is in the overflow menu area. */
+#widget-overflow #PanelUI-profiler description {
+  max-width: 347px;
+}
+
+#widget-overflow #PanelUI-profiler-header-bar {
+  display: none;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="false"] {
+  background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd);
+  color: #fff;
+}
+
+#PanelUI-profiler-header-bar {
+  border-bottom: 1px solid #0003;
+}
+
+#PanelUI-profiler-header-bar label {
+  margin-inline-start: 32px;
+  padding: 12px;
+  font-weight: bold;
+  text-align: center;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info {
+  pointer-events: none;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-header-bar {
+  border-bottom: 1px solid var(--panel-separator-color);
+}
+
+#PanelUI-profiler-header[isinfocollapsed="false"] #PanelUI-profiler-info-button {
+  background-color: #0003;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="false"] #PanelUI-profiler-info-button:hover {
+  background-color: #0005;
+}
+
+#PanelUI-profiler-info {
+  height: 180px;
+  background: top 10px right no-repeat
+    url("chrome://devtools/skin/images/performance-new-popup-backdrop.png");
+  opacity: 1;
+}
+
+/* The header has an attribute "animationready" that is either set to "true" or to
+   "false". When the DOM is being initialized it is set to "false" so that animatios
+   do not run. */
+#PanelUI-profiler-header[animationready="true"] #PanelUI-profiler-info {
+  transition: margin-block-end 250ms, opacity 250ms;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info {
+  opacity: 0;
+}
+
+/* Hide the unused box that gets added here. */
+#PanelUI-profiler-learn-more > hbox {
+  display: none;
+}
+
+#PanelUI-profiler-content {
+  position: relative;
+}
+
+.PanelUI-profiler-toolbarbutton-container {
+  -moz-box-pack: center;
+  margin-inline-end: 4px;
+}
+
+#PanelUI-profiler-info label {
+  font-size: 16px;
+  font-weight: bold;
+  margin-block: 6px;
+  margin-inline: 15px;
+}
+
+#PanelUI-profiler-info description {
+  margin-block: 4px;
+  margin-inline: 15px;
+}
+
+#PanelUI-profiler-info button {
+  -moz-appearance: none;
+  padding: 2px;
+  margin: 4px 13px 13px;
+  color: #fff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#PanelUI-profiler-info button:active {
+  color: #fffc;
+}
+
+#PanelUI-profiler-info button:focus {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  text-decoration: none;
+}
+
+#PanelUI-profiler-presets {
+  -moz-appearance: none;
+  width: 100%;
+  min-height: 24px;
+  background-color: #EDEDF0;
+  color: inherit !important;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  font-weight: 400;
+  padding-inline: 4px;
+  text-decoration: none;
+  font-size: 12px;
+  margin-inline: 15px;
+  margin-block: 8px;
+}
+
+/* This is dark-mode specific styling. */
+:root[lwt-popup-brighttext] #PanelUI-profiler-presets {
+  background-color: rgb(47, 47, 51);
+  color: #fff;
+  border: 1px solid #666168;
+}
+
+#PanelUI-profiler-presets:hover:not([disabled="true"]) {
+  border-color: #DDDDE0;
+}
+
+#PanelUI-profiler-presets:focus {
+  box-shadow: 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+#PanelUI-profiler-presets menupopup {
+  -moz-appearance: none;
+  border: 1px solid #B7B7B7;
+  border-radius: 2px;
+  background-color: #FFF;
+  padding-block: 4px;
+}
+
+#PanelUI-profiler-presets menuitem {
+  -moz-appearance: none;
+  font-size: 1em;
+  color: #000;
+  padding-block: 0.2em;
+}
+
+#PanelUI-profiler-presets menuitem[_moz-menuactive] {
+  color: #fff;
+  background-color: #0060DF;
+}
+
+/* The dropmarker is generated by the menulist element */
+#PanelUI-profiler-presets dropmarker {
+  -moz-appearance: none;
+  display: block;
+  margin-block-start: 5px;
+  -moz-context-properties: fill;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  fill: currentColor;
+}
+
+#PanelUI-profiler-content-custom-button {
+  -moz-appearance: none;
+  margin: 0;
+  color: #0046A4;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+:root[lwt-popup-brighttext] #PanelUI-profiler-content-custom-button {
+  color: #76B1FF;
+}
+
+#PanelUI-profiler-content-custom-button:hover {
+  text-decoration: underline;
+}
+
+#PanelUI-profiler-content-custom-button:active,
+#PanelUI-profiler-content-custom-button:focus {
+  text-decoration: underline;
+}
+
+#PanelUI-profiler-content-custom {
+  margin-inline: 15px;
+}
+
+.PanelUI-profiler-content-label {
+  font-weight: bold;
+  font-size: 13px;
+  margin-inline: 15px;
+  margin-block-start: 10px;
+}
+
+#PanelUI-profiler-content-description {
+  margin-inline: 15px;
+  margin-block: 4px;
+  font-size: 12px;
+  opacity: 0.75;
+}
+
+.PanelUI-profiler-button {
+  -moz-appearance: none;
+  background-color: #e0e0e1;
+  border-radius: 2px;
+  color: #000;
+  padding: 8px;
+  margin-block: 0;
+  margin-inline: 5px;
+  font-size: 13px;
+}
+
+.PanelUI-profiler-button:hover {
+  background-color: #c9c9ca;
+}
+
+.PanelUI-profiler-button:active {
+  background-color: #b1b1b1;
+}
+
+.PanelUI-profiler-button:focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+.PanelUI-profiler-button-primary {
+  background-color: #0060DF;
+  /* The !important designation here is to overcome the specificity of the button.css
+     styles that are being applied on linux for hovers. */
+  color: #fff !important;
+}
+
+.PanelUI-profiler-button-primary:hover {
+  background-color: #003eaa;
+}
+
+.PanelUI-profiler-button-primary:active {
+  background-color: #002275;
+}
+
+.PanelUI-profiler-shortcut {
+  padding-block-start: 5px;
+  opacity: 0.5;
+  text-align: center;
+}
+
+.PanelUI-profiler-buttons {
+  margin-inline: 10px;
+  margin-block: 7px 12px;
+}
+
+.PanelUI-profiler-info-icon {
+  margin-inline-end: 25px;
+  margin-block-start: 20px;
+  width: 50px;
+  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+  -moz-context-properties: fill;
+  fill: #fff;
+}
+
+#PanelUI-profiler-presets[disabled="true"] .menulist-label-box {
+  opacity: 0.5;
+}
diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index 5f7b45865783..cba4bedaede8 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -98,6 +98,7 @@ devtools.jar:
     skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)
     skin/images/performance-details-call-tree.svg (themes/images/performance-details-call-tree.svg)
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
+    skin/images/performance-new-popup-backdrop.png (themes/images/performance-new-popup-backdrop.png)
     skin/breadcrumbs.css (themes/breadcrumbs.css)
     skin/chart.css (themes/chart.css)
     skin/widgets.css (themes/widgets.css)
diff --git a/devtools/client/performance-new/@types/gecko.d.ts b/devtools/client/performance-new/@types/gecko.d.ts
index 5e6fc0500299..c4db449bfef6 100644
--- a/devtools/client/performance-new/@types/gecko.d.ts
+++ b/devtools/client/performance-new/@types/gecko.d.ts
@@ -156,8 +156,8 @@ declare namespace MockedExports {
 
   // TS-TODO
   const CustomizableUIJSM: any;
-
   const CustomizableWidgetsJSM: any;
+  const PanelMultiViewJSM: any;
 
   const Services: Services;
 
@@ -267,6 +267,10 @@ declare module "resource:///modules/CustomizableWidgets.jsm" {
   export = MockedExports.CustomizableWidgetsJSM;
 }
 
+declare module "resource:///modules/PanelMultiView.jsm" {
+  export = MockedExports.PanelMultiViewJSM;
+}
+
 declare var ChromeUtils: MockedExports.ChromeUtils;
 declare var Cu: MockedExports.ChromeUtils;
 
@@ -298,4 +302,31 @@ declare interface XULIframeElement extends XULElement {
   src: string;
 }
 
-declare interface ChromeWindow extends Window {}
+declare interface ChromeWindow extends Window {
+  openWebLinkIn: (
+    url: string,
+    where: "current" | "tab" | "tabshifted" | "window" | "save",
+    // TS-TODO
+    params?: unknown
+  ) => void;
+  openTrustedLinkIn: (
+    url: string,
+    where: "current" | "tab" | "tabshifted" | "window" | "save",
+    // TS-TODO
+    params?: unknown
+  ) => void;
+}
+
+declare interface MenuListElement extends XULElement {
+  value: string;
+  disabled: boolean;
+}
+
+declare interface XULCommandEvent extends Event {
+  target: XULElement
+}
+
+declare interface XULElementWithCommandHandler {
+  addEventListener: (type: "command", handler: (event: XULCommandEvent) => void, isCapture?: boolean) => void
+  removeEventListener: (type: "command", handler: (event: XULCommandEvent) => void, isCapture?: boolean) => void
+}
diff --git a/devtools/client/performance-new/@types/perf.d.ts b/devtools/client/performance-new/@types/perf.d.ts
index b433b24055b9..444ee9526095 100644
--- a/devtools/client/performance-new/@types/perf.d.ts
+++ b/devtools/client/performance-new/@types/perf.d.ts
@@ -368,6 +368,11 @@ export interface PerformancePref {
    * and update it elsewhere.
    */
   PopupEnabled: "devtools.performance.popup.enabled";
+  /**
+   * The profiler popup has some introductory text explaining what it is the first
+   * time that you open it. After that, it is not displayed by default.
+   */
+  PopupIntroDisplayed: "devtools.performance.popup.intro-displayed";
 }
 
 /**
diff --git a/devtools/client/performance-new/popup/menu-button.jsm.js b/devtools/client/performance-new/popup/menu-button.jsm.js
index 50ec2e33607b..9d73efaa01d1 100644
--- a/devtools/client/performance-new/popup/menu-button.jsm.js
+++ b/devtools/client/performance-new/popup/menu-button.jsm.js
@@ -6,7 +6,8 @@
 
 /**
  * @typedef {import("../@types/perf").PerformancePref} PerformancePref
- * */
+ */
+
 /**
  * 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.
@@ -47,6 +48,13 @@ const lazyCustomizableWidgets = requireLazy(() =>
   /** @type {import("resource:///modules/CustomizableWidgets.jsm")} */
   (ChromeUtils.import("resource:///modules/CustomizableWidgets.jsm"))
 );
+const lazyPopupPanel = requireLazy(() =>
+  /** @type {import("devtools/client/performance-new/popup/panel.jsm.js")} */
+  (ChromeUtils.import(
+    "resource://devtools/client/performance-new/popup/panel.jsm.js"
+  ))
+);
+
 /** @type {PerformancePref["PopupEnabled"]} */
 const BUTTON_ENABLED_PREF = "devtools.performance.popup.enabled";
 const WIDGET_ID = "profiler-button";
@@ -132,15 +140,24 @@ function initialize() {
     return;
   }
 
-  /** @typedef {() => void} Observer */
-
-  /** @type {null | Observer} */
+  /** @type {null | (() => void)} */
   let observer = null;
+  const viewId = "PanelUI-profiler";
+
+  /**
+   * This is mutable state that will be shared between panel displays.
+   *
+   * @type {import("devtools/client/performance-new/popup/panel.jsm.js").State}
+   */
+  const panelState = {
+    cleanup: [],
+    isInfoCollapsed: true,
+  };
 
   const item = {
     id: WIDGET_ID,
     type: "view",
-    viewId: "PanelUI-profiler",
+    viewId,
     tooltiptext: "profiler-button.tooltiptext",
 
     onViewShowing:
@@ -153,85 +170,55 @@ function initialize() {
        * }) => void}
        */
       event => {
-        const panelview = event.target;
-        const document = panelview.ownerDocument;
-        if (!document) {
-          throw new Error(
-            "Expected to find a document on the panelview element."
-          );
+        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 {
+            selectElementsInPanelview,
+            createViewControllers,
+            addPopupEventHandlers,
+            initializePopup,
+          } = lazyPopupPanel();
+
+          const panelElements = selectElementsInPanelview(event.target);
+          const panelView = createViewControllers(panelState, panelElements);
+          addPopupEventHandlers(panelState, panelElements, panelView);
+          initializePopup(panelState, panelElements, panelView);
+        } catch (error) {
+          // Surface any errors better in the console.
+          console.error(error);
         }
-
-        // Create an iframe and append it to the panelview.
-        const iframe = document.createXULElement("iframe");
-        iframe.id = "PanelUI-profilerIframe";
-        iframe.className = "PanelUI-developer-iframe";
-        iframe.src =
-          "chrome://devtools/content/performance-new/popup/popup.xhtml";
-
-        panelview.appendChild(iframe);
-        /** @type {any} - Cast to an any since we're assigning values to the window object. */
-        const contentWindow = iframe.contentWindow;
-
-        // Provide a mechanism for the iframe to close the popup.
-        contentWindow.gClosePopup = () => {
-          CustomizableUI.hidePanelForNode(iframe);
-        };
-
-        // Provide a mechanism for the iframe to resize the popup.
-        /** @type {(height: number) => void} */
-        contentWindow.gResizePopup = height => {
-          iframe.style.height = `${Math.min(600, height)}px`;
-        };
-
-        // Tell the iframe whether we're in dark mode or not. This approach
-        // unfortunately has two flaws. First, since this is a boolean setting,
-        // we ignore any theme information and just flip on our preset dark mode
-        // if the theme is dark enough. It might look out of place depending on
-        // the system or Firefox theme in use. Second, we won't detect all dark
-        // mode cases here. If the user is using the default Firefox theme, which
-        // normally adjusts to system-themes, we'll only be able to detect dark
-        // mode on Windows and Macintosh. In Linux, instead of having a global
-        // dark mode setting, we use GTK-theme colors directly for theming, and
-        // those won't be detected here. Similarly, if a Windows user is not using
-        // the particular dark mode system setting, but instead using a darker
-        // system theme, then that will also not be detected here.
-        contentWindow.gIsDarkMode = document.documentElement.hasAttribute(
-          "lwt-popup-brighttext"
-        );
-
-        // The popup has an annoying rendering "blip" when first rendering the react
-        // components. This adds a blocker until the content is ready to show.
-        event.detail.addBlocker(
-          new Promise(resolve => {
-            contentWindow.gReportReady = () => {
-              // Delete the function gReportReady so we don't leave any dangling
-              // references between windows.
-              delete contentWindow.gReportReady;
-              // Now resolve this promise to open the window.
-              resolve();
-            };
-          })
-        );
       },
 
     /**
      * @type {(event: { target: ChromeHTMLElement | XULElement }) => void}
      */
     onViewHiding(event) {
-      const document = event.target.ownerDocument;
-
-      // Create the iframe, and append it.
-      const iframe = document.getElementById("PanelUI-profilerIframe");
-      if (!iframe) {
-        throw new Error("Unable to select the PanelUI-profilerIframe.");
+      // Clean-up the view. This removes all of the event listeners.
+      for (const fn of panelState.cleanup) {
+        fn();
       }
-
-      // Remove the iframe so it doesn't leak.
-      iframe.remove();
+      panelState.cleanup = [];
     },
 
     /** @type {(document: HTMLDocument) => void} */
     onBeforeCreated: document => {
+      /** @type {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);
+      }
+
       setMenuItemChecked(document, true);
     },
 
diff --git a/devtools/client/performance-new/popup/moz.build b/devtools/client/performance-new/popup/moz.build
index 65e2737a32f3..57fd35f56c2a 100644
--- a/devtools/client/performance-new/popup/moz.build
+++ b/devtools/client/performance-new/popup/moz.build
@@ -6,6 +6,7 @@
 DevToolsModules(
     'background.jsm.js',
     'menu-button.jsm.js',
+    'panel.jsm.js',
 )
 
 with Files('**'):
diff --git a/devtools/client/performance-new/popup/panel.jsm.js b/devtools/client/performance-new/popup/panel.jsm.js
new file mode 100644
index 000000000000..1875fb2f14fb
--- /dev/null
+++ b/devtools/client/performance-new/popup/panel.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
+ */
+
+/**
+ * TS-TODO
+ *
+ * This function replaces lazyRequireGetter, and TypeScript can understand it. It's
+ * currently duplicated until we have consensus that TypeScript is a good idea.
+ *
+ * @template T
+ * @type {(callback: () => T) => () => T}
+ */
+function requireLazy(callback) {
+  /** @type {T | undefined} */
+  let cache;
+  return () => {
+    if (cache === undefined) {
+      cache = callback();
+    }
+    return cache;
+  };
+}
+
+// Provide an exports object for the JSM to be properly read by TypeScript.
+/** @type {any} */ (this).module = {};
+
+const lazyServices = requireLazy(() =>
+  /** @type {import("resource://gre/modules/Services.jsm")} */
+  (ChromeUtils.import("resource://gre/modules/Services.jsm"))
+);
+const lazyPanelMultiView = requireLazy(() =>
+  /** @type {import("resource:///modules/PanelMultiView.jsm")} */
+  (ChromeUtils.import("resource:///modules/PanelMultiView.jsm"))
+);
+const lazyBackground = requireLazy(() =>
+  /** @type {import("resource://devtools/client/performance-new/popup/background.jsm.js")} */
+  (ChromeUtils.import(
+    "resource://devtools/client/performance-new/popup/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} */
+    const element = document.getElementById(id);
+    if (!element) {
+      throw new Error(`Could not find the element from the ID "${id}"`);
+    }
+    return element;
+  }
+
+  return {
+    document,
+    panelview,
+    window: /** @type {ChromeWindow} */ (document.defaultView),
+    inactive: getElementById("PanelUI-profiler-inactive"),
+    active: getElementById("PanelUI-profiler-active"),
+    presetDescription: getElementById("PanelUI-profiler-content-description"),
+    presetCustom: getElementById("PanelUI-profiler-content-custom"),
+    presetsCustomButton: getElementById(
+      "PanelUI-profiler-content-custom-button"
+    ),
+    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"),
+  };
+}
+
+/**
+ * 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 } = elements;
+      header.setAttribute(
+        "isinfocollapsed",
+        state.isInfoCollapsed ? "true" : "false"
+      );
+
+      if (state.isInfoCollapsed) {
+        const { height } = info.getBoundingClientRect();
+        info.style.marginBlockEnd = `-${height}px`;
+      } else {
+        info.style.marginBlockEnd = "0";
+      }
+    },
+
+    updatePresets() {
+      const { presets, getRecordingPreferencesFromBrowser } = lazyBackground();
+      const { presetName } = getRecordingPreferencesFromBrowser();
+      const preset = presets[presetName];
+      if (preset) {
+        elements.presetDescription.style.display = "block";
+        elements.presetCustom.style.display = "none";
+        elements.presetDescription.textContent = preset.description;
+        elements.presetsMenuList.value = presetName;
+      } else {
+        elements.presetDescription.style.display = "none";
+        elements.presetCustom.style.display = "block";
+      }
+      const { PanelMultiView } = lazyPanelMultiView();
+      // Update the description height sizing.
+      PanelMultiView.forNode(elements.panelview).descriptionHeightWorkaround();
+    },
+
+    updateProfilerActive() {
+      const { Services } = lazyServices();
+      const isProfilerActive = Services.profiler.IsActive();
+      elements.inactive.setAttribute(
+        "hidden",
+        isProfilerActive ? "true" : "false"
+      );
+      elements.active.setAttribute(
+        "hidden",
+        isProfilerActive ? "false" : "true"
+      );
+      elements.presetsMenuList.disabled = isProfilerActive;
+    },
+
+    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 { Services } = lazyServices();
+      const { presets } = lazyBackground();
+      const currentPreset = Services.prefs.getCharPref(
+        "devtools.performance.recording.preset"
+      );
+
+      const menuitems = Object.entries(presets).map(([id, preset]) => {
+        const menuitem = elements.document.createXULElement("menuitem");
+        menuitem.setAttribute("label", preset.label);
+        menuitem.setAttribute("value", id);
+        if (id === currentPreset) {
+          elements.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 initializePopup(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.updateProfilerActive();
+    view.updatePresets();
+
+    // XUL <description> elements don't vertically size correctly, this is
+    // the workaround for it.
+    const { PanelMultiView } = lazyPanelMultiView();
+    PanelMultiView.forNode(elements.panelview).descriptionHeightWorkaround();
+
+    // 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,
+  } = lazyBackground();
+
+  /**
+   * 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();
+  });
+
+  addHandler(elements.stopAndDiscard, "click", () => {
+    stopProfiler();
+  });
+
+  addHandler(elements.stopAndCapture, "click", () => {
+    captureProfile();
+    view.hidePopup();
+  });
+
+  addHandler(elements.learnMore, "click", () => {
+    elements.window.openWebLinkIn("https://profiler.firefox.com/docs/", "tab");
+    view.hidePopup();
+  });
+
+  addHandler(elements.presetsMenuList, "command", () => {
+    changePreset(elements.presetsMenuList.value);
+    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.presetsCustomButton, "click", () => {
+    elements.window.openTrustedLinkIn("about:profiling", "tab");
+    view.hidePopup();
+  });
+
+  // Update the view when the profiler starts/stops.
+  const { Services } = lazyServices();
+  Services.obs.addObserver(view.updateProfilerActive, "profiler-started");
+  Services.obs.addObserver(view.updateProfilerActive, "profiler-stopped");
+  state.cleanup.push(() => {
+    Services.obs.removeObserver(view.updateProfilerActive, "profiler-started");
+    Services.obs.removeObserver(view.updateProfilerActive, "profiler-stopped");
+  });
+}
+
+module.exports = {
+  selectElementsInPanelview,
+  createViewControllers,
+  addPopupEventHandlers,
+  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/themes/images/performance-new-popup-backdrop.png b/devtools/client/themes/images/performance-new-popup-backdrop.png
new file mode 100644
index 0000000000000000000000000000000000000000..675b49a234261aabf5b6f007b83b7ae811f7cf62
GIT binary patch
literal 8455
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%0D|&HU+_hja|aL%TZr)ZGJm~
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
TVcLK1bih|>WvOZjlfeH0PTchm

literal 0
HcmV?d00001

diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index 09ea36efb3c4..636dcb173d48 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -880,6 +880,8 @@ pref("devtools.performance.recording.threads", "[\"GeckoMain\",\"Compositor\",\"
 // the host machine. This is used in order to look up symbol information from
 // build artifacts of local builds.
 pref("devtools.performance.recording.objdirs", "[]");
+// The popup will display some introductory text the first time it is displayed.
+pref("devtools.performance.popup.intro-displayed", false);
 
 // view source
 pref("view_source.editor.path", "");