Bug 1520412 - Refactor ErrorMessage to generic Message;r=ladybenko,Ola
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 17 Jan 2019 16:56:25 +0000
changeset 514278 7949c9530cfe66194fa012b7b9b66d9e3f3d43e1
parent 514277 c3d4685b58a5eabb34d6a04fa1cd4e7d5e53c7c9
child 514279 779094a64ae178fe32a50798d0c1aafdad1aa68c
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersladybenko, Ola
bugs1520412
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1520412 - Refactor ErrorMessage to generic Message;r=ladybenko,Ola Differential Revision: https://phabricator.services.mozilla.com/D16677
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
devtools/client/aboutdebugging-new/src/components/shared/ErrorMessage.css
devtools/client/aboutdebugging-new/src/components/shared/ErrorMessage.js
devtools/client/aboutdebugging-new/src/components/shared/Message.css
devtools/client/aboutdebugging-new/src/components/shared/Message.js
devtools/client/aboutdebugging-new/src/components/shared/moz.build
devtools/client/aboutdebugging-new/src/constants.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_temporary_addon_install_error.js
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -17,13 +17,13 @@
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/shared/ErrorMessage.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";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css";
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -25,19 +25,22 @@
 
   --link-color: #0a8dff;
   --link-color-active: #003eaa;
   --link-color-hover: #0060df;
 
   /* Colors from Photon */
   --success-50: #30e60b;
   --warning-50: #ffe900;
+  --warning-90: #3e2800;
   --error-50: #ff0039;
+  --error-60: #d70022;
   --highlight-50: #0a84ff;
   --grey-30: #d7d7db; /* for ui, no special semantic */
+  --white-100: #fff; /* for ui, no special semantic */
 
   /* Global layout vars */
   --page-width: 664px;
   --base-distance: 4px;
 
   /* Global styles */
   --base-font-style: message-box;
   --base-font-size: 15px; /* root font of 11px * 1.36em = 15px */
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
@@ -6,19 +6,20 @@
 
 const { createFactory, 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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
-const ErrorMessage = createFactory(require("../shared/ErrorMessage"));
+const Message = createFactory(require("../shared/Message"));
 
 const Actions = require("../../actions/index");
+const { MESSAGE_LEVEL } = require("../../constants");
 
 /**
  * This component provides an installer for temporary extension.
  */
 class TemporaryExtensionInstaller extends PureComponent {
   static get propTypes() {
     return {
       dispatch: PropTypes.func.isRequired,
@@ -41,24 +42,33 @@ class TemporaryExtensionInstaller extend
         dom.button(
           {
             className: "default-button js-temporary-extension-install-button",
             onClick: e => this.install(),
           },
           "Load Temporary Add-on…"
         )
       ),
-      temporaryInstallError ? ErrorMessage(
+      temporaryInstallError ? Message(
         {
-          errorDescriptionKey: "about-debugging-tmp-extension-install-error",
+          level: MESSAGE_LEVEL.ERROR,
         },
         dom.div(
-          {
-            className: "technical-text",
-          },
-          temporaryInstallError
+          {},
+          Localized(
+            {
+              id: "about-debugging-tmp-extension-install-error",
+            },
+            dom.span({}, "There was an error during the temporary add-on installation")
+          ),
+          dom.div(
+            {
+              className: "technical-text",
+            },
+            temporaryInstallError
+          )
         )
       ) : null
     );
   }
 }
 
 module.exports = TemporaryExtensionInstaller;
rename from devtools/client/aboutdebugging-new/src/components/shared/ErrorMessage.css
rename to devtools/client/aboutdebugging-new/src/components/shared/Message.css
--- a/devtools/client/aboutdebugging-new/src/components/shared/ErrorMessage.css
+++ b/devtools/client/aboutdebugging-new/src/components/shared/Message.css
@@ -1,30 +1,41 @@
 /* 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/. */
 
-.error-message {
-  /* Temporary color chosen to match error background used in about:addons
-   * Pending UX in Bug 1509091 */
-  background-color: #FFE8E9;
+.message--level-error {
+  --message-color: var(--white-100);
+  --message-background-color: var(--error-60);
+}
 
-  /* Temporary color chosen to match chrome://mozapps/skin/extensions/alerticon-error.svg
-   * Pending UX in Bug 1509091 */
-  color: #E62117;
-
-  margin: calc(var(--base-distance) * 2) 0;
-  padding: var(--base-distance) calc(var(--base-distance) * 3);
+.message--level-warning {
+  --message-color: var(--warning-90);
+  --message-background-color: var(--warning-50);
 }
 
+
 /*
- * Layout of the error message header
+ * Layout of the message
  *
- *  +--------+----------------+
- *  | Icon   | Header message |
- *  +--------+----------------+
+ *  +--------+-----------------+
+ *  | Icon   | Message content |
+ *  |        | (several lines) |
+ *  |        | (     ...     ) |
+ *  +--------+-----------------+
  */
-.error-message__header {
-  align-items: center;
+.message {
+  background-color: var(--message-background-color);
+  border-radius: var(--base-distance);
+  color: var(--message-color);
   display: grid;
+  fill: var(--message-color);
+  grid-column-gap: var(--base-distance);
   grid-template-columns: calc(var(--base-distance) * 6) 1fr;
-  font-weight: bold;
+  margin: calc(var(--base-distance) * 2) 0;
+  padding: var(--base-distance);
+
+  -moz-context-properties: fill;
 }
+
+.message__icon {
+  margin: var(--base-distance);
+}
rename from devtools/client/aboutdebugging-new/src/components/shared/ErrorMessage.js
rename to devtools/client/aboutdebugging-new/src/components/shared/Message.js
--- a/devtools/client/aboutdebugging-new/src/components/shared/ErrorMessage.js
+++ b/devtools/client/aboutdebugging-new/src/components/shared/Message.js
@@ -1,56 +1,51 @@
 /* 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 { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
-const Localized = createFactory(FluentReact.Localized);
+const { MESSAGE_LEVEL } = require("../../constants");
+
+const ICONS = {
+  // Reuse the warning icon for errors. Waiting for the proper icon in Bug 1520191.
+  [MESSAGE_LEVEL.ERROR]: "chrome://global/skin/icons/warning.svg",
+  [MESSAGE_LEVEL.WARNING]: "chrome://global/skin/icons/warning.svg",
+};
 
 /**
- * This component is designed to display an error message. It is composed of a header
- * displaying an error icon followed by a provided localized error description.
- * Children passed to this component will be displayed beflow the message header.
+ * This component is designed to display a photon-style message bar. The component is
+ * responsible for displaying the message container with the appropriate icon. The content
+ * of the message should be passed as the children of this component.
  */
-class ErrorMessage extends PureComponent {
+class Message extends PureComponent {
   static get propTypes() {
     return {
       children: PropTypes.node.isRequired,
-      // Should match a valid localized string key.
-      errorDescriptionKey: PropTypes.string.isRequired,
+      level: PropTypes.oneOf(Object.values(MESSAGE_LEVEL)).isRequired,
     };
   }
 
   render() {
-    return dom.div(
+    const { level } = this.props;
+    const iconSrc = ICONS[level];
+
+    return dom.aside(
       {
-        className: "error-message js-error-message",
+        className: `message message--level-${level} js-message`,
       },
-      dom.div(
+      dom.img(
         {
-          className: "error-message__header",
-        },
-        dom.img(
-          {
-            // Temporary image chosen to match error container in about:addons.
-            // Pending UX in Bug 1509091
-            src: "chrome://mozapps/skin/extensions/alerticon-error.svg",
-          }
-        ),
-        Localized(
-          {
-            id: this.props.errorDescriptionKey,
-          },
-          dom.span({}, this.props.errorDescriptionKey)
-        )
+          className: "message__icon",
+          src: iconSrc,
+        }
       ),
       this.props.children
     );
   }
 }
 
-module.exports = ErrorMessage;
+module.exports = Message;
--- a/devtools/client/aboutdebugging-new/src/components/shared/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/shared/moz.build
@@ -1,8 +1,8 @@
 # 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(
-    'ErrorMessage.css',
-    'ErrorMessage.js',
+    'Message.css',
+    'Message.js',
 )
--- a/devtools/client/aboutdebugging-new/src/constants.js
+++ b/devtools/client/aboutdebugging-new/src/constants.js
@@ -64,16 +64,21 @@ const DEBUG_TARGET_PANE = {
   INSTALLED_EXTENSION: "installedExtension",
   OTHER_WORKER: "otherWorker",
   SERVICE_WORKER: "serviceWorker",
   SHARED_WORKER: "sharedWorker",
   TAB: "tab",
   TEMPORARY_EXTENSION: "temporaryExtension",
 };
 
+const MESSAGE_LEVEL = {
+  ERROR: "error",
+  WARNING: "warning",
+};
+
 const PAGE_TYPES = {
   RUNTIME: "runtime",
   CONNECT: "connect",
 };
 
 const PREFERENCES = {
   // Temporary preference without any default value until network locations are enabled.
   NETWORK_ENABLED: "devtools.aboutdebugging.network",
@@ -109,16 +114,17 @@ const USB_STATES = {
   ENABLED_USB: "ENABLED_USB",
   UPDATING_USB: "UPDATING_USB",
 };
 
 // flatten constants
 module.exports = Object.assign({}, {
   DEBUG_TARGETS,
   DEBUG_TARGET_PANE,
+  MESSAGE_LEVEL,
   PAGE_TYPES,
   PREFERENCES,
   RUNTIME_PREFERENCE,
   RUNTIMES,
   SERVICE_WORKER_FETCH_STATES,
   SERVICE_WORKER_STATUSES,
   USB_STATES,
 }, actionTypes);
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_temporary_addon_install_error.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_temporary_addon_install_error.js
@@ -19,26 +19,26 @@ add_task(async function() {
   const { document, tab } = await openAboutDebugging();
 
   info("Install a bad extension");
   // Do not use installTemporaryAddon here since the install will fail.
   prepareMockFilePicker(BAD_EXTENSION_PATH);
   document.querySelector(".js-temporary-extension-install-button").click();
 
   info("Wait until the install error message appears");
-  await waitUntil(() => document.querySelector(".js-error-message"));
-  const installError = document.querySelector(".js-error-message");
+  await waitUntil(() => document.querySelector(".js-message"));
+  const installError = document.querySelector(".js-message");
   ok(installError.textContent.includes("JSON.parse: unexpected keyword"),
     "The expected installation error is displayed: " + installError.textContent);
 
   info("Install a valid extension to make the message disappear");
   await installTemporaryExtension(EXTENSION_PATH, EXTENSION_NAME, document);
 
   info("Wait until the error message disappears");
-  await waitUntil(() => !document.querySelector(".js-error-message"));
+  await waitUntil(() => !document.querySelector(".js-message"));
 
   info("Wait for the temporary addon to be displayed as a debug target");
   await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
 
   await removeTemporaryExtension(EXTENSION_NAME, document);
 
   await removeTab(tab);
 });