Bug 1500374 - Display temporary ID message for tmp webextensions in new aboutdebugging;r=daisuke
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 18 Jan 2019 13:50:05 +0000
changeset 514428 1a9e703e70d1ab05dc51605afaf44936c77d3568
parent 514427 160cc7a53e2142dd5165c7ed5d28c2d224cf451c
child 514429 7aa26271b4c584966b70f16f395e98791211be7e
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaisuke
bugs1500374
milestone66.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 1500374 - Display temporary ID message for tmp webextensions in new aboutdebugging;r=daisuke Depends on D16571 Differential Revision: https://phabricator.services.mozilla.com/D16572
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/components/RuntimePage.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.css
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -16,14 +16,15 @@
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/shared/Message.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css";
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -15,16 +15,17 @@ const Localized = createFactory(FluentRe
 const ConnectionPromptSetting = createFactory(require("./ConnectionPromptSetting"));
 const DebugTargetPane = createFactory(require("./debugtarget/DebugTargetPane"));
 const ExtensionDetail = createFactory(require("./debugtarget/ExtensionDetail"));
 const InspectAction = createFactory(require("./debugtarget/InspectAction"));
 const RuntimeInfo = createFactory(require("./RuntimeInfo"));
 const ServiceWorkerAction = createFactory(require("./debugtarget/ServiceWorkerAction"));
 const TabDetail = createFactory(require("./debugtarget/TabDetail"));
 const TemporaryExtensionAction = createFactory(require("./debugtarget/TemporaryExtensionAction"));
+const TemporaryExtensionDetail = createFactory(require("./debugtarget/TemporaryExtensionDetail"));
 const TemporaryExtensionInstaller =
   createFactory(require("./debugtarget/TemporaryExtensionInstaller"));
 const WorkerDetail = createFactory(require("./debugtarget/WorkerDetail"));
 
 const Actions = require("../actions/index");
 const { DEBUG_TARGET_PANE, PAGE_TYPES, RUNTIMES } = require("../constants");
 
 const {
@@ -128,17 +129,17 @@ class RuntimePage extends PureComponent 
       isSupportedDebugTargetPane(runtimeInfo.type, DEBUG_TARGET_PANE.TEMPORARY_EXTENSION)
         ? TemporaryExtensionInstaller({
             dispatch,
             temporaryInstallError,
         }) : null,
       this.renderDebugTargetPane("Temporary Extensions",
                                  temporaryExtensions,
                                  TemporaryExtensionAction,
-                                 ExtensionDetail,
+                                 TemporaryExtensionDetail,
                                  DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
                                  "about-debugging-runtime-temporary-extensions"),
       this.renderDebugTargetPane("Extensions",
                                  installedExtensions,
                                  InspectAction,
                                  ExtensionDetail,
                                  DEBUG_TARGET_PANE.INSTALLED_EXTENSION,
                                  "about-debugging-runtime-extensions"),
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.css
@@ -0,0 +1,7 @@
+/* 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/. */
+
+.temporary-extension-detail__temporary-id-message {
+  padding: calc(var(--base-distance) * 2) 0;
+}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.js
@@ -0,0 +1,57 @@
+/* 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 ExtensionDetail = createFactory(require("./ExtensionDetail"));
+
+const Types = require("../../types/index");
+
+const TEMP_ID_DOC_URL =
+  "https://developer.mozilla.org/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID";
+
+/**
+ * This component displays detail information for a temporary extension.
+ */
+class TemporaryExtensionDetail extends PureComponent {
+  static get propTypes() {
+    return {
+      // Provided by wrapping the component with FluentReact.withLocalization.
+      getString: PropTypes.func.isRequired,
+      target: Types.debugTarget.isRequired,
+    };
+  }
+
+  renderTemporaryIdMessage() {
+    return Localized(
+      {
+        id: "about-debugging-tmp-extension-temporary-id",
+        a: dom.a({
+          href: TEMP_ID_DOC_URL,
+          target: "_blank",
+        }),
+      },
+      dom.div({
+        className: "temporary-extension-detail__temporary-id-message",
+      }),
+    );
+  }
+
+  render() {
+    return dom.div(
+      {},
+      this.renderTemporaryIdMessage(),
+      ExtensionDetail({ target: this.props.target }),
+    );
+  }
+}
+
+module.exports = FluentReact.withLocalization(TemporaryExtensionDetail);
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
@@ -11,12 +11,14 @@ DevToolsModules(
     'DebugTargetPane.js',
     'ExtensionDetail.css',
     'ExtensionDetail.js',
     'FieldPair.js',
     'InspectAction.js',
     'ServiceWorkerAction.js',
     'TabDetail.js',
     'TemporaryExtensionAction.js',
+    'TemporaryExtensionDetail.css',
+    'TemporaryExtensionDetail.js',
     'TemporaryExtensionInstaller.js',
     'WorkerDetail.css',
     'WorkerDetail.js',
 )
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -51,17 +51,16 @@ about-debugging-sidebar-runtime-item-waiting-for-runtime = Waiting for runtimeā€¦
 # Title for runtime sidebar items that are related to a specific device (USB, WiFi).
 about-debugging-sidebar-runtime-item-name =
   .title = { $displayName } ({ $deviceName })
 # Title for runtime sidebar items where we cannot get device information (network
 # locations).
 about-debugging-sidebar-runtime-item-name-no-device =
   .title = { $displayName }
 
-
 # Temporary text displayed in a sidebar button to refresh USB devices. Temporary
 # UI, do not localize.
 about-debugging-refresh-usb-devices-button = Refresh devices
 
 # Title of the Connect page.
 about-debugging-connect-title = Connect a Device
 
 # WiFi section of the Connect page
@@ -152,16 +151,19 @@ about-debugging-tmp-extension-reload-but
 about-debugging-tmp-extension-remove-button = Remove
 
 # Message displayed in the file picker that opens to select a temporary extension to load
 # (triggered by the button using "about-debugging-tmp-extension-install-button")
 # manifest.json .xpi and .zip should not be localized.
 # Note: this message is only displayed in Windows and Linux platforms.
 about-debugging-tmp-extension-install-message = Select manifest.json file or .xpi/.zip archive
 
+# This string is displayed as a message about the add-on having a temporaryID.
+about-debugging-tmp-extension-temporary-id = This WebExtension has a temporary ID. <a>Learn more</a>
+
 # Text of a link displayed for extensions in "runtime" pages.
 # Clicking on the link should open the manifest file in a new tab.
 about-debugging-extension-manifest-link = Manifest URL
 
 # Text displayed for extensions in "runtime" pages, before displaying the extension's uuid.
 # UUIDs look like b293e463-481e-5148-a487-5aaf7a130429
 about-debugging-extension-uuid =
   .label = Internal UUID