bug 1353933 add a note about web-ext r?jdescottes draft
authorAndy McKay <amckay@mozilla.com>
Fri, 05 May 2017 16:53:04 -0700
changeset 573571 55e204310a8ff3fec66c4420dca2fc21c6b9ba0e
parent 562247 8dd662ed33876fc7d86882fd19bc9f56d96ffa41
child 627340 de7ebb8889e8bb8c97c25c67676e76932131367c
push id57435
push userbmo:amckay@mozilla.com
push dateFri, 05 May 2017 23:57:49 +0000
reviewersjdescottes
bugs1353933
milestone55.0a1
bug 1353933 add a note about web-ext r?jdescottes MozReview-Commit-ID: 2nNGL9BUKjQ
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/aboutdebugging/components/addons/panel.js
devtools/client/locales/en-US/aboutdebugging.properties
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -192,21 +192,31 @@ button {
   to a black icon. */
   filter: brightness(0%);
 }
 
 .addons-options {
   flex: 1;
 }
 
-.addons-debugging-label {
+.addons-debugging-label,
+.addons-web-ext-tip {
   display: inline-block;
   margin-inline-end: 1ch;
 }
 
+.addons-tip {
+  display: flex;
+  align-items: center;
+}
+
+.addons-tip-icon {
+  margin-inline-end: 1ch;
+}
+
 .error-page {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
--- a/devtools/client/aboutdebugging/components/addons/panel.js
+++ b/devtools/client/aboutdebugging/components/addons/panel.js
@@ -18,16 +18,18 @@ loader.lazyRequireGetter(this, "Debugger
   "devtools/shared/client/main", true);
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 const ExtensionIcon = "chrome://mozapps/skin/extensions/extensionGeneric.svg";
 const CHROME_ENABLED_PREF = "devtools.chrome.enabled";
 const REMOTE_ENABLED_PREF = "devtools.debugger.remote-enabled";
+const WEB_EXT_URL = "https://developer.mozilla.org/Add-ons" +
+                    "/WebExtensions/Getting_started_with_web-ext";
 
 module.exports = createClass({
   displayName: "AddonsPanel",
 
   propTypes: {
     client: PropTypes.instanceOf(DebuggerClient).isRequired,
     id: PropTypes.string.isRequired
   },
@@ -139,17 +141,32 @@ module.exports = createClass({
       TargetList({
         id: "temporary-extensions",
         name: temporaryName,
         targets: temporaryTargets,
         client,
         debugDisabled,
         targetClass,
         sort: true
-      })),
+      }),
+      dom.div({ className: "addons-tip"},
+        dom.img({
+          className: "addons-tip-icon",
+          role: "presentation",
+          src: "chrome://devtools/skin/images/help.svg",
+        }),
+        dom.span({
+          className: "addons-web-ext-tip",
+        }, Strings.GetStringFromName("webExtTip")),
+        "(",
+        dom.a({ href: WEB_EXT_URL, target: "_blank" },
+          Strings.GetStringFromName("moreInfo")),
+        ")"
+      )
+    ),
     dom.div({ id: "addons" },
       TargetList({
         id: "extensions",
         name: installedName,
         targets: installedTargets,
         client,
         debugDisabled,
         targetClass,
--- a/devtools/client/locales/en-US/aboutdebugging.properties
+++ b/devtools/client/locales/en-US/aboutdebugging.properties
@@ -60,16 +60,21 @@ loadTemporaryAddon = Load Temporary Add-
 # LOCALIZATION NOTE (extensions):
 # This string is displayed as a header above the list of loaded add-ons.
 extensions = Extensions
 
 # LOCALIZATION NOTE (temporaryExtensions):
 # This string is displayed as a header above the list of temporarily loaded add-ons.
 temporaryExtensions = Temporary Extensions
 
+# LOCALIZATION NOTE (webExtTip):
+# This string is displayed as a message below the list of temporarily loaded add-ons.
+webExtTip = You can use web-ext to load temporary WebExtensions from the command line.
+
+
 # LOCALIZATION NOTE (selectAddonFromFile2):
 # This string is displayed as the title of the file picker that appears when
 # the user clicks the 'Load Temporary Add-on' button
 selectAddonFromFile2 = Select Manifest File or Package (.xpi)
 
 # LOCALIZATION NOTE (reload):
 # This string is displayed as a label of the button that reloads a given addon.
 reload = Reload