tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

ManifestIconItem.js (2478B)

      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 {
     12  br,
     13  code,
     14  img,
     15  span,
     16 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     17 
     18 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     19 const Localized = createFactory(FluentReact.Localized);
     20 const {
     21  l10n,
     22 } = require("resource://devtools/client/application/src/modules/l10n.js");
     23 
     24 const Types = require("resource://devtools/client/application/src/types/index.js");
     25 const ManifestItem = createFactory(
     26  require("resource://devtools/client/application/src/components/manifest/ManifestItem.js")
     27 );
     28 
     29 /**
     30 * This component displays a Manifest member which holds a color value
     31 */
     32 class ManifestIconItem extends PureComponent {
     33  static get propTypes() {
     34    return {
     35      // {
     36      //   label: { contentType, sizes },
     37      //   value: { src, purpose }
     38      // }
     39      ...Types.manifestItemIcon,
     40    };
     41  }
     42 
     43  getLocalizedImgTitle() {
     44    const { sizes } = this.props.label;
     45 
     46    return sizes && sizes.length
     47      ? l10n.getString("manifest-icon-img-title", { sizes })
     48      : l10n.getString("manifest-icon-img-title-no-sizes");
     49  }
     50 
     51  renderLabel() {
     52    const { contentType, sizes } = this.props.label;
     53 
     54    // sinze both `contentType` and `sizes` may be undefined, we don't need to
     55    // render the <br> if one –or both– are not to be displayed
     56    const shallRenderBr = contentType && sizes;
     57 
     58    return [
     59      sizes ? sizes : null,
     60      shallRenderBr ? br({ key: "label-br" }) : null,
     61      contentType ? contentType : null,
     62    ];
     63  }
     64 
     65  render() {
     66    const { src, purpose } = this.props.value;
     67 
     68    return ManifestItem(
     69      {
     70        label: this.renderLabel(),
     71      },
     72      Localized(
     73        {
     74          id: "manifest-icon-img",
     75          attrs: {
     76            alt: true,
     77          },
     78        },
     79        img({
     80          className: "manifest-item__icon",
     81          src,
     82          title: this.getLocalizedImgTitle(),
     83        })
     84      ),
     85      br({}),
     86      Localized(
     87        {
     88          id: "manifest-icon-purpose",
     89          code: code({}),
     90          $purpose: purpose,
     91        },
     92        span({})
     93      )
     94    );
     95  }
     96 }
     97 
     98 module.exports = ManifestIconItem;