Bug 1634448 - Update the menu button to reflect the current profiler states; r=canaltinova

This patch adjusts the profiler menu button to properly reflect the current state
of the profiler. It doesn't completely match the design spec, as there are a bunch
of CSS rules already in place in the toolbar, and I wanted to keep the changes
simple. It does however, update the UI based on the state of the profiler.

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

browser/themes/shared/toolbarbutton-icons.inc.css

@@ -257,7 +257,26 @@ toolbar[brighttext] {
 }
 
 #profiler-button {
-  list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch.svg");
+  list-style-image: url("chrome://devtools/skin/images/tool-profiler.svg");
+  transform: scaleX(-1);
+}
+
+#profiler-button.profiler-active {
+  transform: scaleX(1);
+  fill: #0060df;
+  fill-opacity: 1;
+}
+
+#profiler-button.profiler-active image {
+  background-color: #0060df33;
+}
+
+#profiler-button.profiler-active:hover image {
+  background-color: #0060df22;
+}
+
+#profiler-button.profiler-paused image {
+  opacity: 0.4;
 }
 
 #preferences-button {

devtools/client/performance-new/popup/menu-button.jsm.js

@@ -229,21 +229,46 @@ function initialize(toggleProfilerKeyShortcuts) {
         return;
       }
 
-      function updateButtonColor() {
-        // Use photon blue-60 when active.
-        buttonElement.style.fill = Services.profiler.IsActive()
-          ? "#0060df"
-          : "";
+      function setButtonActive() {
+        buttonElement.setAttribute(
+          "tooltiptext",
+          "The profiler is recording a profile"
+        );
+        buttonElement.classList.toggle("profiler-active", true);
+        buttonElement.classList.toggle("profiler-paused", false);
+      }
+      function setButtonPaused() {
+        buttonElement.setAttribute(
+          "tooltiptext",
+          "The profiler is capturing a profile"
+        );
+        buttonElement.classList.toggle("profiler-active", false);
+        buttonElement.classList.toggle("profiler-paused", true);
+      }
+      function setButtonInactive() {
+        buttonElement.setAttribute(
+          "tooltiptext",
+          "Record a performance profile"
+        );
+        buttonElement.classList.toggle("profiler-active", false);
+        buttonElement.classList.toggle("profiler-paused", false);
       }
 
-      updateButtonColor();
+      if (Services.profiler.IsPaused()) {
+        setButtonPaused();
+      }
+      if (Services.profiler.IsActive()) {
+        setButtonActive();
+      }
 
-      Services.obs.addObserver(updateButtonColor, "profiler-started");
-      Services.obs.addObserver(updateButtonColor, "profiler-stopped");
+      Services.obs.addObserver(setButtonActive, "profiler-started");
+      Services.obs.addObserver(setButtonInactive, "profiler-stopped");
+      Services.obs.addObserver(setButtonPaused, "profiler-paused");
 
       window.addEventListener("unload", () => {
-        Services.obs.removeObserver(updateButtonColor, "profiler-started");
-        Services.obs.removeObserver(updateButtonColor, "profiler-stopped");
+        Services.obs.removeObserver(setButtonActive, "profiler-started");
+        Services.obs.removeObserver(setButtonInactive, "profiler-stopped");
+        Services.obs.removeObserver(setButtonPaused, "profiler-paused");
       });
     },
   };

devtools/client/performance-new/test/browser/browser.ini

@@ -25,6 +25,7 @@ support-files =
 [browser_devtools-record-capture.js]
 [browser_devtools-record-discard.js]
 [browser_webchannel-enable-menu-button.js]
+[browser_popup-profiler-states.js]
 [browser_popup-record-capture.js]
 [browser_popup-record-discard.js]
 [browser_popup-private-browsing.js]

devtools/client/performance-new/test/browser/browser_popup-profiler-states.js

@@ -0,0 +1,81 @@
+/* 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/. */
+
+"use strict";
+
+add_task(async function test() {
+  info(
+    "Test the states of the profiler button, e.g. inactive, active, and capturing."
+  );
+  await setProfilerFrontendUrl(
+    "http://example.com/browser/devtools/client/performance-new/test/browser/fake-frontend.html"
+  );
+  await makeSureProfilerPopupIsEnabled();
+
+  const { toggleProfiler, captureProfile } = ChromeUtils.import(
+    "resource://devtools/client/performance-new/popup/background.jsm.js"
+  );
+
+  const button = document.getElementById("profiler-button");
+  if (!button) {
+    throw new Error("Could not find the profiler button.");
+  }
+
+  info("The profiler button starts out inactive");
+  checkButtonState(button, {
+    tooltip: "Record a performance profile",
+    active: false,
+    paused: false,
+  });
+
+  info("Toggling the profiler turns on the active state");
+  toggleProfiler("aboutprofiling");
+  checkButtonState(button, {
+    tooltip: "The profiler is recording a profile",
+    active: true,
+    paused: false,
+  });
+
+  info("Capturing a profile makes the button paused");
+  captureProfile("aboutprofiling");
+  checkButtonState(button, {
+    tooltip: "The profiler is capturing a profile",
+    active: false,
+    paused: true,
+  });
+
+  waitUntil(
+    () => !button.classList.contains("profiler-paused"),
+    "Waiting until the profiler is no longer paused"
+  );
+
+  await checkTabLoadedProfile({
+    initialTitle: "Waiting on the profile",
+    successTitle: "Profile received",
+    errorTitle: "Error",
+  });
+});
+
+/**
+ * This check dives into the implementation details of the button, mainly
+ * because it's hard to provide a user-focused interpretation of button
+ * stylings.
+ */
+function checkButtonState(button, { tooltip, active, paused }) {
+  is(
+    button.getAttribute("tooltiptext"),
+    tooltip,
+    `The tooltip for the button is "${tooltip}".`
+  );
+  is(
+    button.classList.contains("profiler-active"),
+    active,
+    `The expected profiler button active state is: ${active}`
+  );
+  is(
+    button.classList.contains("profiler-paused"),
+    paused,
+    `The expected profiler button paused state is: ${paused}`
+  );
+}

devtools/client/themes/images/tool-profiler.svg

@@ -1,6 +1,6 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
   <path d="M8 0A8 8 0 0 0 .78 11.43a1 1 0 1 0 1.8-.86 5.94 5.94 0 0 1 0-5.17 6 6 0 0 1 10.83 5.17 1 1 0 1 0 1.81.86A7.99 7.99 0 0 0 8 0M10 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10.96 6.7a.5.5 0 1 0-.92-.4l-1.7 3.73a2 2 0 0 1 .92.41l1.7-3.73z"/>
 </svg>