Bug 1326230 - Add a warning for temporary ids in about:debugging. r=mstriemer

MozReview-Commit-ID: 2Ui2kfB8UPe

--HG--
extra : transplant_source : %DC%B9%EC%10%94%96%C7%9E%ECa%0D%BA%9E%3D%3C%94Q%5E%19%15

devtools/client/aboutdebugging/aboutdebugging.css

@@ -207,6 +207,12 @@ button {
 .addons-tip {
   display: flex;
   align-items: center;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  background-image: url(chrome://devtools/skin/images/help.svg);
+  background-repeat: no-repeat;
+  padding-inline-start: 32px;
+  height: 24px;
 }
 
 .addons-tip-icon {
@@ -244,6 +250,7 @@ button {
   display: flex;
   margin: 0;
   padding: 16px 0;
+  font-size: 14px;
 }
 
 .addon-target-actions {
@@ -262,7 +269,6 @@ button {
 
 .addon-target-info {
   display: grid;
-  font-size: 14px;
   grid-template-columns: 128px 1fr;
 }
 

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

@@ -150,11 +150,6 @@ module.exports = createClass({
         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")),

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

@@ -8,7 +8,7 @@
 
 const { createClass, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
-const { debugAddon, uninstallAddon } = require("../../modules/addon");
+const { debugAddon, uninstallAddon, isTemporaryID } = require("../../modules/addon");
 const Services = require("Services");
 
 loader.lazyImporter(this, "BrowserToolboxProcess",
@@ -20,6 +20,9 @@ loader.lazyRequireGetter(this, "DebuggerClient",
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
+const TEMP_ID_URL = "https://developer.mozilla.org/Add-ons" +
+                    "/WebExtensions/WebExtensions_and_the_Add-on_ID";
+
 function filePathForTarget(target) {
   // Only show file system paths, and only for temporarily installed add-ons.
   if (!target.temporarilyInstalled || !target.url || !target.url.startsWith("file://")) {
@@ -67,6 +70,23 @@ function internalIDForTarget(target) {
   ];
 }
 
+function temporaryID(target) {
+  if (!isTemporaryID(target.addonID)) {
+    return [];
+  }
+
+  return [
+    dom.div({ className: "addons-tip" },
+      dom.span({ className: "addons-web-ext-tip" },
+        Strings.GetStringFromName("temporaryID")
+      ),
+      dom.a({ href: TEMP_ID_URL, className: "temporary-id-url", target: "_blank" },
+        Strings.GetStringFromName("temporaryID.learnMore")
+      )
+    )
+  ];
+}
+
 module.exports = createClass({
   displayName: "AddonTarget",
 
@@ -119,6 +139,7 @@ module.exports = createClass({
         }),
         dom.span({ className: "target-name", title: target.name }, target.name)
       ),
+      ...temporaryID(target),
       dom.dl(
         { className: "addon-target-info" },
         ...filePathForTarget(target),

devtools/client/aboutdebugging/modules/addon.js

@@ -7,6 +7,7 @@
 loader.lazyImporter(this, "BrowserToolboxProcess",
   "resource://devtools/client/framework/ToolboxProcess.jsm");
 loader.lazyImporter(this, "AddonManager", "resource://gre/modules/AddonManager.jsm");
+loader.lazyImporter(this, "AddonManagerPrivate", "resource://gre/modules/AddonManager.jsm");
 
 let toolbox = null;
 
@@ -27,3 +28,7 @@ exports.uninstallAddon = async function (addonID) {
   let addon = await AddonManager.getAddonByID(addonID);
   return addon && addon.uninstall();
 };
+
+exports.isTemporaryID = function (addonID) {
+  return AddonManagerPrivate.isTemporaryInstallID(addonID);
+};

devtools/client/aboutdebugging/test/addons/test-devtools-webextension-noid/manifest.json

@@ -0,0 +1,5 @@
+{
+  "manifest_version": 2,
+  "name": "test-devtools-webextension-noid",
+  "version": "1.0"
+}

devtools/client/aboutdebugging/test/browser.ini

@@ -9,6 +9,7 @@ support-files =
   addons/bug1273184.xpi
   addons/test-devtools-webextension/*
   addons/test-devtools-webextension-nobg/*
+  addons/test-devtools-webextension-noid/*
   service-workers/delay-sw.html
   service-workers/delay-sw.js
   service-workers/empty-sw.html

devtools/client/aboutdebugging/test/browser_addons_debug_info.js

@@ -56,3 +56,28 @@ add_task(function* testWebExtension() {
 
   yield closeAboutDebugging(tab);
 });
+
+add_task(function* testTemporaryWebExtension() {
+  let addonName = "test-devtools-webextension-noid";
+  let { tab, document } = yield openAboutDebugging("addons");
+
+  yield waitForInitialAddonList(document);
+  yield installAddon({
+    document,
+    path: "addons/test-devtools-webextension-noid/manifest.json",
+    name: addonName,
+    isWebExtension: true
+  });
+
+  let addons = document.querySelectorAll("#temporary-extensions .addon-target-container");
+  // Assuming that our temporary add-on is now at the top.
+  let container = addons[addons.length-1];
+  let addonId = container.dataset.addonId;
+
+  let temporaryID = container.querySelector(".temporary-id-url");
+  ok(temporaryID, "Temporary ID message does appear");
+
+  yield uninstallAddon({document, id: addonId, name: addonName});
+
+  yield closeAboutDebugging(tab);
+});

devtools/client/locales/en-US/aboutdebugging.properties

@@ -88,6 +88,15 @@ webExtTip = You can use web-ext to load temporary WebExtensions from the command
 # (https://developer.mozilla.org/Add-ons/WebExtensions/Getting_started_with_web-ext)
 webExtTip.learnMore = Learn more
 
+# LOCALIZATION NOTE (temporaryID):
+# This string is displayed as a message about the add-on having a temporaryID.
+temporaryID = This WebExtension has a temporary ID.
+
+# LOCALIZATION NOTE (temporaryID.learnMore):
+# This string is displayed as a link next to the temporaryID message and leads
+# the user to MDN.
+temporaryID.learnMore = Learn more
+
 # 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