Bug 1330741 - Show filesystem location of add-ons in about:debugging r=jdescottes

MozReview-Commit-ID: 3pmdAi80boT

devtools/client/aboutdebugging/aboutdebugging.css

@@ -249,6 +249,25 @@ button {
   font-weight: 600;
 }
 
+.addon-target-info {
+  display: grid;
+  font-size: 14px;
+  grid-template-columns: 128px 1fr;
+}
+
+.addon-target-info-label {
+  padding-inline-end: 8px;
+  padding-bottom: 8px;
+}
+
+.addon-target-info-label:last-of-type {
+  padding-bottom: 16px;
+}
+
+.addon-target-info-content {
+  margin: 0;
+}
+
 .addon-target-button {
   background: none;
   border: none;
@@ -289,3 +308,18 @@ button {
    * lines up with the icon. */
   margin-inline-start: -4px;
 }
+
+/* We want the ellipsis on the left-hand-side, so make the parent RTL
+ * with an ellipsis and the child can be LTR. */
+.file-path {
+  direction: rtl;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-path-inner {
+  direction: ltr;
+  unicode-bidi: plaintext;
+}

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

@@ -76,7 +76,8 @@ module.exports = createClass({
             icon: addon.iconURL || ExtensionIcon,
             addonID: addon.id,
             addonActor: addon.actor,
-            temporarilyInstalled: addon.temporarilyInstalled
+            temporarilyInstalled: addon.temporarilyInstalled,
+            url: addon.url,
           };
         });
 

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

@@ -20,6 +20,25 @@ loader.lazyRequireGetter(this, "DebuggerClient",
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
+function filePathForTarget(target) {
+  // Only show file system paths, and only for temporarily installed add-ons.
+  if (!target.temporarilyInstalled || !target.url || !target.url.startsWith("file://")) {
+    return [];
+  }
+  let path = target.url.slice("file://".length);
+  return [
+    dom.dt(
+      { className: "addon-target-info-label" },
+      Strings.GetStringFromName("location")),
+    // Wrap the file path in a span so we can do some RTL/LTR swapping to get
+    // the ellipsis on the left.
+    dom.dd(
+      { className: "addon-target-info-content file-path" },
+      dom.span({ className: "file-path-inner", title: path }, path),
+    ),
+  ];
+}
+
 module.exports = createClass({
   displayName: "AddonTarget",
 
@@ -31,7 +50,8 @@ module.exports = createClass({
       addonID: PropTypes.string.isRequired,
       icon: PropTypes.string,
       name: PropTypes.string.isRequired,
-      temporarilyInstalled: PropTypes.bool
+      temporarilyInstalled: PropTypes.bool,
+      url: PropTypes.string,
     }).isRequired
   },
 
@@ -68,6 +88,10 @@ module.exports = createClass({
         }),
         dom.span({ className: "target-name", title: target.name }, target.name)
       ),
+      dom.dl(
+        { className: "addon-target-info" },
+        ...filePathForTarget(target),
+      ),
       dom.div({className: "addon-target-actions"},
         dom.button({
           className: "debug-button addon-target-button",

devtools/client/aboutdebugging/test/browser.ini

@@ -20,6 +20,7 @@ support-files =
   !/devtools/client/framework/test/shared-head.js
 
 [browser_addons_debug_bootstrapped.js]
+[browser_addons_debug_info.js]
 [browser_addons_debug_webextension.js]
 tags = webextensions
 [browser_addons_debug_webextension_inspector.js]

devtools/client/aboutdebugging/test/browser_addons_debug_info.js

@@ -0,0 +1,28 @@
+"use strict";
+
+const ADDON_ID = "test-devtools@mozilla.org";
+const ADDON_NAME = "test-devtools";
+
+add_task(function* () {
+  let { tab, document } = yield openAboutDebugging("addons");
+  yield waitForInitialAddonList(document);
+
+  yield installAddon({
+    document,
+    path: "addons/unpacked/install.rdf",
+    name: ADDON_NAME,
+  });
+
+  let container = document.querySelector(`[data-addon-id="${ADDON_ID}"]`);
+  let filePath = container.querySelector(".file-path");
+  let expectedFilePath = "browser/devtools/client/aboutdebugging/test/addons/unpacked/";
+
+  // Verify that the path to the install location is shown next to its label.
+  ok(filePath, "file path is in DOM");
+  ok(filePath.textContent.endsWith(expectedFilePath), "file path is set correctly");
+  is(filePath.previousElementSibling.textContent, "Location", "file path has label");
+
+  yield uninstallAddon({document, id: ADDON_ID, name: ADDON_NAME});
+
+  yield closeAboutDebugging(tab);
+});

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

@@ -79,6 +79,10 @@ reload = Reload
 # disabled 'reload' button.
 reloadDisabledTooltip = Only temporarily installed add-ons can be reloaded
 
+# LOCALIZATION NOTE (location):
+# This string is displayed as a label for the filesystem location of an extension.
+location = Location
+
 # LOCALIZATION NOTE (workers):
 # This string is displayed as a header of the about:debugging#workers page.
 workers = Workers