Bug 1446450 - Show additional error messages in about:debugging;r=daisuke

Depends on D20648

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

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

devtools/client/aboutdebugging/aboutdebugging.css

@@ -207,6 +207,12 @@ button {
   fill: #0c0c0d;
 }
 
+.addons-install-error__additional-errors {
+  font-family: monospace;
+  font-size: 13px;
+  margin-block: 8px;
+}
+
 .addons-options {
   flex: 1;
 }

devtools/client/aboutdebugging/components/addons/Controls.js

@@ -67,7 +67,7 @@ class AddonsControls extends Component {
       })
       .catch(e => {
         console.error(e);
-        this.setState({ installError: e.message, lastInstallErrorFile: file });
+        this.setState({ installError: e, lastInstallErrorFile: file });
       });
   }
 

devtools/client/aboutdebugging/components/addons/InstallError.js

@@ -17,22 +17,31 @@ const Strings = Services.strings.createBundle(
 class AddonsInstallError extends Component {
   static get propTypes() {
     return {
-      error: PropTypes.string,
+      error: PropTypes.object,
       retryInstall: PropTypes.func,
     };
   }
 
   render() {
+    const { error } = this.props;
     if (!this.props.error) {
       return null;
     }
-    const text = Strings.formatStringFromName("addonInstallError", [this.props.error], 1);
+    const text = Strings.formatStringFromName("addonInstallError", [error.message], 1);
+
+    const additionalErrors = Array.isArray(error.additionalErrors) ?
+      dom.div(
+        { className: "addons-install-error__additional-errors" },
+        error.additionalErrors.join(" ")
+      ) : null;
+
     return dom.div(
       { className: "addons-install-error" },
       dom.span(
         {},
         dom.div({ className: "warning" }),
         dom.span({}, text),
+        additionalErrors
       ),
       dom.button(
         { className: "addons-install-retry", onClick: this.props.retryInstall },