Bug 1520191 - Polish style for error and warning messages r=jdescottes,ladybenko,flod
authorOla Gasidlo <ogasidlo@mozilla.com>
Tue, 21 May 2019 11:14:47 +0000
changeset 474725 28504d015b50e07394582a0b7a166e9a98d5e6a5
parent 474724 979750dd65da33eebd25999f286b98914639a735
child 474726 03d3b6d0eeca1bcf833bef4d519848220d5c78bd
push id113168
push userrmaries@mozilla.com
push dateTue, 21 May 2019 16:39:23 +0000
treeherdermozilla-inbound@3c0f78074b72 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, ladybenko, flod
bugs1520191
milestone69.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 1520191 - Polish style for error and warning messages r=jdescottes,ladybenko,flod Wrapped error log in <details> Differential Revision: https://phabricator.services.mozilla.com/D31046
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAdditionalActions.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.js
devtools/client/aboutdebugging-new/src/components/shared/DetailsLog.js
devtools/client/aboutdebugging-new/src/components/shared/Message.js
devtools/client/aboutdebugging-new/src/components/shared/moz.build
devtools/client/jar.mn
devtools/client/locales/en-US/aboutdebugging.ftl
devtools/client/themes/images/aboutdebugging-error.svg
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
@@ -78,17 +78,22 @@ class NetworkLocationsForm extends PureC
         level: MESSAGE_LEVEL.ERROR,
         isCloseable: true,
       },
       Localized(
         {
           id: errorMessageId,
           "$host-value": errorHostValue,
         },
-        dom.p({}, errorMessageId)
+        dom.p(
+          {
+          className: "technical-text",
+          },
+          errorMessageId
+        )
       ),
     );
   }
 
   render() {
     return dom.form(
       {
         className: "connect-page__network-form",
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
@@ -6,16 +6,17 @@
 
 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 DetailsLog = createFactory(require("../shared/DetailsLog"));
 const FieldPair = createFactory(require("./FieldPair"));
 const Message = createFactory(require("../shared/Message"));
 
 const { MESSAGE_LEVEL } = require("../../constants");
 const Types = require("../../types/index");
 
 /**
  * This component displays detail information for extension.
@@ -43,21 +44,26 @@ class ExtensionDetail extends PureCompon
       },
       warnings.map((warning, index) => {
         return Message(
           {
             level: MESSAGE_LEVEL.WARNING,
             isCloseable: true,
             key: `warning-${index}`,
           },
-          dom.p(
+          DetailsLog(
             {
-              className: "technical-text",
+              type: MESSAGE_LEVEL.WARNING,
             },
-            warning
+            dom.p(
+              {
+                className: "technical-text",
+              },
+              warning
+            ),
           )
         );
       })
     );
   }
 
   renderUUID() {
     const { uuid } = this.props.target.details;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAdditionalActions.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAdditionalActions.js
@@ -8,16 +8,18 @@ const { createFactory, PureComponent } =
 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 Actions = require("../../actions/index");
 const Types = require("../../types/index");
+
+const DetailsLog = createFactory(require("../shared/DetailsLog"));
 const Message = createFactory(require("../shared/Message"));
 const { MESSAGE_LEVEL } = require("../../constants");
 
 /**
  * This component provides components that reload/remove temporary extension.
  */
 class TemporaryExtensionAdditionalActions extends PureComponent {
   static get propTypes() {
@@ -45,17 +47,27 @@ class TemporaryExtensionAdditionalAction
     }
 
     return Message(
       {
         className: "qa-temporary-extension-reload-error",
         level: MESSAGE_LEVEL.ERROR,
         key: "reload-error",
       },
-      dom.p({ className: "technical-text" }, reloadError),
+      DetailsLog(
+        {
+          type: MESSAGE_LEVEL.ERROR,
+        },
+        dom.p(
+          {
+            className: "technical-text",
+          },
+          reloadError
+        ),
+      )
     );
   }
 
   render() {
     return [
       dom.div(
         {
           className: "toolbar toolbar--right-align",
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.js
@@ -6,16 +6,17 @@
 
 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 DetailsLog = createFactory(require("../shared/DetailsLog"));
 const Message = createFactory(require("../shared/Message"));
 const TemporaryExtensionInstaller =
   createFactory(require("./TemporaryExtensionInstaller"));
 
 const { MESSAGE_LEVEL } = require("../../constants");
 
 /**
  * This component provides an installer and error message area for temporary extension.
@@ -57,20 +58,25 @@ class TemporaryExtensionInstallSection e
         isCloseable: true,
       },
       Localized(
         {
           id: "about-debugging-tmp-extension-install-error",
         },
         dom.p(
           { },
-          "There was an error during the temporary add-on installation"
+          "about-debugging-tmp-extension-install-error"
         )
       ),
-      errors,
+      DetailsLog(
+        {
+          type: MESSAGE_LEVEL.ERROR,
+        },
+        errors
+      )
     );
   }
 
   render() {
     const { dispatch } = this.props;
 
     return dom.section(
       {},
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/shared/DetailsLog.js
@@ -0,0 +1,61 @@
+/* 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 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");
+
+/**
+ * This component is designed to wrap a warning / error log message
+ * in the details tag to hide long texts and make the message expendable
+ * out of the box.
+ */
+class DetailsLog extends PureComponent {
+  static get propTypes() {
+    return {
+      children: PropTypes.node.isRequired,
+      type: PropTypes.string,
+    };
+  }
+  getLocalizationString() {
+    const { type } = this.props;
+
+    switch (type) {
+      case MESSAGE_LEVEL.WARNING:
+        return "about-debugging-message-details-label-warning";
+      case MESSAGE_LEVEL.ERROR:
+        return "about-debugging-message-details-label-error";
+      default:
+        return "about-debugging-message-details-label";
+    }
+  }
+
+  render() {
+    const { children } = this.props;
+
+    return dom.details(
+      {
+        className: "details--log",
+      },
+      Localized({
+          id: this.getLocalizationString(),
+      },
+        dom.summary(
+          {},
+          this.getLocalizationString()
+        )
+      ),
+      children
+    );
+  }
+}
+
+module.exports = DetailsLog;
--- a/devtools/client/aboutdebugging-new/src/components/shared/Message.js
+++ b/devtools/client/aboutdebugging-new/src/components/shared/Message.js
@@ -9,18 +9,17 @@ const dom = require("devtools/client/sha
 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.ERROR]: "chrome://devtools/skin/images/aboutdebugging-error.svg",
   [MESSAGE_LEVEL.INFO]: "chrome://devtools/skin/images/aboutdebugging-information.svg",
   [MESSAGE_LEVEL.WARNING]: "chrome://global/skin/icons/warning.svg",
 };
 const CLOSE_ICON_SRC = "chrome://devtools/skin/images/close.svg";
 
 /**
  * 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
--- a/devtools/client/aboutdebugging-new/src/components/shared/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/shared/moz.build
@@ -1,10 +1,11 @@
 # 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(
+    'DetailsLog.js',
     'IconLabel.css',
     'IconLabel.js',
     'Message.css',
     'Message.js',
 )
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -71,16 +71,17 @@ devtools.jar:
     skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg)
     skin/images/arrowhead-right.svg (themes/images/arrowhead-right.svg)
     skin/images/arrowhead-down.svg (themes/images/arrowhead-down.svg)
     skin/images/arrowhead-up.svg (themes/images/arrowhead-up.svg)
     skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
     skin/images/checkbox.svg (themes/images/checkbox.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
     skin/images/aboutdebugging-connect-icon.svg (themes/images/aboutdebugging-connect-icon.svg)
+    skin/images/aboutdebugging-error.svg (themes/images/aboutdebugging-error.svg)
     skin/images/aboutdebugging-fenix-nightly.svg (themes/images/aboutdebugging-fenix-nightly.svg)
     skin/images/aboutdebugging-fenix.svg (themes/images/aboutdebugging-fenix.svg)
     skin/images/aboutdebugging-firefox-aurora.svg (themes/images/aboutdebugging-firefox-aurora.svg)
     skin/images/aboutdebugging-firefox-beta.svg (themes/images/aboutdebugging-firefox-beta.svg)
     skin/images/aboutdebugging-firefox-logo.svg (themes/images/aboutdebugging-firefox-logo.svg)
     skin/images/aboutdebugging-firefox-nightly.svg (themes/images/aboutdebugging-firefox-nightly.svg)
     skin/images/aboutdebugging-firefox-release.svg (themes/images/aboutdebugging-firefox-release.svg)
     skin/images/aboutdebugging-globe-icon.svg (themes/images/aboutdebugging-globe-icon.svg)
--- a/devtools/client/locales/en-US/aboutdebugging.ftl
+++ b/devtools/client/locales/en-US/aboutdebugging.ftl
@@ -363,8 +363,17 @@ about-debugging-main-process-name = Main
 
 # Displayed as description for the Main Process debug target in the Processes category.
 # Only for remote browsers, if `devtools.aboutdebugging.process-debugging` is true.
 about-debugging-main-process-description2 = Main Process for the target browser
 
 # Alt text used for the close icon of message component (warnings, errors and notifications).
 about-debugging-message-close-icon =
   .alt = Close message
+
+# Label text used for the error details of message component.
+about-debugging-message-details-label-error = Error details
+
+# Label text used for the warning details of message component.
+about-debugging-message-details-label-warning = Warning details
+
+# Label text used for default state of details of message component.
+about-debugging-message-details-label = Details
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-error.svg
@@ -0,0 +1,11 @@
+<!-- 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">
+	<path 
+			fill="context-fill" 
+			fill-rule="evenodd"
+			transform="rotate(180 8 8)" 
+			d="M8 1a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm0 3a1 1 0 1 1-1 1 1 1 0 0 1 1-1zm0 3a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z">
+	</path>
+</svg>