TemporaryExtensionDetail.js (2075B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 const { 8 createFactory, 9 PureComponent, 10 } = require("resource://devtools/client/shared/vendor/react.mjs"); 11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 13 14 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); 15 const Localized = createFactory(FluentReact.Localized); 16 17 const ExtensionDetail = createFactory( 18 require("resource://devtools/client/aboutdebugging/src/components/debugtarget/ExtensionDetail.js") 19 ); 20 const FieldPair = createFactory( 21 require("resource://devtools/client/aboutdebugging/src/components/debugtarget/FieldPair.js") 22 ); 23 24 const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js"); 25 26 const TEMP_ID_DOC_URL = 27 "https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/"; 28 29 /** 30 * This component displays detail information for a temporary extension. 31 */ 32 class TemporaryExtensionDetail extends PureComponent { 33 static get propTypes() { 34 return { 35 // Provided by wrapping the component with FluentReact.withLocalization. 36 getString: PropTypes.func.isRequired, 37 target: Types.debugTarget.isRequired, 38 }; 39 } 40 41 renderTemporaryIdMessage() { 42 return Localized( 43 { 44 id: "about-debugging-tmp-extension-temporary-id", 45 a: dom.a({ 46 className: "qa-temporary-id-link", 47 href: TEMP_ID_DOC_URL, 48 target: "_blank", 49 }), 50 }, 51 dom.div({ 52 className: "qa-temporary-id-message", 53 }) 54 ); 55 } 56 57 render() { 58 return ExtensionDetail( 59 { 60 target: this.props.target, 61 }, 62 FieldPair({ label: this.renderTemporaryIdMessage() }) 63 ); 64 } 65 } 66 67 module.exports = FluentReact.withLocalization(TemporaryExtensionDetail);