Bug 1505126: Part 2 - Render the ADB status into a new component, with an icon r=jdescottes,daisuke,Ola

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

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/aboutdebugging.css

@@ -26,6 +26,7 @@
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/shared/IconLabel.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/shared/Message.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css";

devtools/client/aboutdebugging-new/src/base.css

@@ -77,7 +77,8 @@
   --base-font-size: var(--body-10-font-size);
   --base-font-weight: var(--body-10-font-weight);
   --base-line-height: 1.8;
-  --message-font-size: 13px; /* Body 10 in Photon - https://design.firefox.com/photon/visuals/typography.html */
+  --icon-label-font-size: var(--body-10-font-size);
+  --message-font-size: var(--body-10-font-size);
   --button-font-size: var(--base-font-size);
   --micro-font-size: 11px;
   --monospace-font-family: monospace;

devtools/client/aboutdebugging-new/src/components/shared/IconLabel.css

@@ -0,0 +1,23 @@
+.icon-label {
+  display: flex;
+  column-gap: var(--base-unit);
+  align-items: center;
+  margin: calc(var(--base-unit) * 2) 0;
+  -moz-context-properties: fill;
+
+  font-size: var(--icon-label-font-size);
+}
+
+.icon-label--ok {
+  --icon-color: var(--green-70);
+}
+.icon-label--info {
+  --icon-color: var(--grey-90);
+}
+
+.icon-label__icon {
+  padding: var(--base-unit);
+  fill: var(--icon-color);
+  width: calc(var(--base-unit) * 4);
+  height: calc(var(--base-unit) * 4);
+}

devtools/client/aboutdebugging-new/src/components/shared/IconLabel.js

@@ -0,0 +1,46 @@
+/* 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";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const { ICON_LABEL_LEVEL } = require("../../constants");
+
+const ICONS = {
+  [ICON_LABEL_LEVEL.INFO]: "chrome://global/skin/icons/info.svg",
+  [ICON_LABEL_LEVEL.OK]: "chrome://global/skin/icons/check.svg",
+};
+
+/* This component displays an icon accompanied by some content. It's similar
+   to a message, but it's not interactive */
+class IconLabel extends PureComponent {
+  static get propTypes() {
+    return {
+      children: PropTypes.node.isRequired,
+      className: PropTypes.string,
+      level: PropTypes.oneOf(Object.values(ICON_LABEL_LEVEL)).isRequired,
+    };
+  }
+
+  render() {
+    const { children, className, level } = this.props;
+    return dom.span(
+      {
+        className: `icon-label icon-label--${level} ${className || ""}`,
+      },
+      dom.img(
+        {
+          className: "icon-label__icon",
+          src: ICONS[level],
+        }
+      ),
+      children,
+    );
+  }
+}
+
+module.exports = IconLabel;

devtools/client/aboutdebugging-new/src/components/shared/moz.build

@@ -3,6 +3,8 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'IconLabel.css',
+    'IconLabel.js',
     'Message.css',
     'Message.js',
 )

devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js

@@ -11,11 +11,11 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
-const { MESSAGE_LEVEL, PAGE_TYPES, RUNTIMES } = require("../../constants");
+const { ICON_LABEL_LEVEL, PAGE_TYPES, RUNTIMES } = require("../../constants");
 const Types = require("../../types/index");
 loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
 
-const Message = createFactory(require("../shared/Message"));
+const IconLabel = createFactory(require("../shared/IconLabel"));
 const SidebarItem = createFactory(require("./SidebarItem"));
 const SidebarFixedItem = createFactory(require("./SidebarFixedItem"));
 const SidebarRuntimeItem = createFactory(require("./SidebarRuntimeItem"));
@@ -45,21 +45,20 @@ class Sidebar extends PureComponent {
       this.props.adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
     const localizationId = isUsbEnabled ? "about-debugging-sidebar-usb-enabled" :
                                           "about-debugging-sidebar-usb-disabled";
-    return Message(
+    return IconLabel(
       {
-          level: MESSAGE_LEVEL.INFO,
-          isCloseable: true,
+          level: isUsbEnabled ? ICON_LABEL_LEVEL.OK : ICON_LABEL_LEVEL.INFO,
       },
-        Localized(
+      Localized(
+        {
+          id: localizationId,
+        },
+        dom.span(
           {
-            id: localizationId,
+            className: "js-sidebar-usb-status",
           },
-          dom.div(
-            {
-              className: "js-sidebar-usb-status",
-            },
-            localizationId
-          )
+          localizationId
+        )
       )
     );
   }
@@ -207,7 +206,7 @@ class Sidebar extends PureComponent {
         ),
         SidebarItem(
           {
-            className: "sidebar__adb-status sidebar-item--full-width",
+            className: "sidebar__adb-status",
           },
           dom.hr({ className: "separator separator--breathe" }),
           this.renderAdbStatus(),

devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css

@@ -25,11 +25,6 @@
   height: calc(var(--base-unit) * 9);
 }
 
-.sidebar-item--full-width {
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-}
-
 .sidebar-item__link {
   display: block;
   height: 100%;

devtools/client/aboutdebugging-new/src/constants.js

@@ -84,6 +84,11 @@ const DEBUG_TARGET_PANE = {
   TEMPORARY_EXTENSION: "temporaryExtension",
 };
 
+const ICON_LABEL_LEVEL = {
+  INFO: "info",
+  OK: "ok",
+};
+
 const MESSAGE_LEVEL = {
   ERROR: "error",
   INFO: "info",
@@ -139,6 +144,7 @@ const USB_STATES = {
 module.exports = Object.assign({}, {
   DEBUG_TARGETS,
   DEBUG_TARGET_PANE,
+  ICON_LABEL_LEVEL,
   MESSAGE_LEVEL,
   PAGE_TYPES,
   PREFERENCES,

devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js

@@ -3,24 +3,42 @@
 
 "use strict";
 
-/**
- * This test asserts that the sidebar shows a message with a closing button describing
- * the status of the USB devices debugging.
- */
+/* import-globals-from helper-addons.js */
+Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
+
+// Test that Message component can be closed with the X button
 add_task(async function() {
-  const { document, tab } = await openAboutDebugging();
+  const EXTENSION_NAME = "Temporary web extension";
+  const EXTENSION_ID = "test-devtools@mozilla.org";
 
-  const usbStatusElement = document.querySelector(".js-sidebar-usb-status");
-  ok(usbStatusElement, "Sidebar shows the USB status element");
-  ok(usbStatusElement.textContent.includes("USB disabled"),
-    "USB status element has the expected content");
+  const { document, tab, window } = await openAboutDebugging();
+  await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
-  const button = document.querySelector(".js-sidebar-item .qa-message-button-close");
+  await installTemporaryExtensionFromXPI({
+    id: EXTENSION_ID,
+    name: EXTENSION_NAME,
+    extraProperties: {
+      // This property is not expected in the manifest and should trigger a warning!
+      "wrongProperty": {},
+    },
+  }, document);
+
+  info("Wait until a debug target item appears");
+  await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
+  const target = findDebugTargetByText(EXTENSION_NAME, document);
+
+  const warningMessage = target.querySelector(".js-message");
+  ok(!!warningMessage, "A warning message is displayed for the installed addon");
+
+  const button = warningMessage.querySelector(".qa-message-button-close");
+  ok(!!button, "The warning message has a close button");
+
+  info("Closing the message and waiting for it to disappear");
   button.click();
+  await waitUntil(() => {
+    return target.querySelector(".js-message") === null;
+  });
 
-  // new search for element
-  ok(document.querySelector(".js-sidebar-usb-status") === null,
-    "USB status element is no longer displayed");
-
+  await removeTemporaryExtension(EXTENSION_NAME, document);
   await removeTab(tab);
 });