tor-browser

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

ImagePreview.js (2599B)

      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  Component,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     11 const {
     12  L10N,
     13 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
     14 
     15 const {
     16  div,
     17  img,
     18 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     19 
     20 const {
     21  formDataURI,
     22  getUrlBaseName,
     23 } = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
     24 
     25 const RESPONSE_IMG_NAME = L10N.getStr("netmonitor.response.name");
     26 const RESPONSE_IMG_DIMENSIONS = L10N.getStr("netmonitor.response.dimensions");
     27 const RESPONSE_IMG_MIMETYPE = L10N.getStr("netmonitor.response.mime");
     28 
     29 class ImagePreview extends Component {
     30  static get propTypes() {
     31    return {
     32      mimeType: PropTypes.string,
     33      encoding: PropTypes.string,
     34      text: PropTypes.string,
     35      url: PropTypes.string,
     36    };
     37  }
     38 
     39  constructor(props) {
     40    super(props);
     41 
     42    this.state = {
     43      dimensions: {
     44        width: 0,
     45        height: 0,
     46      },
     47    };
     48 
     49    this.updateDimensions = this.updateDimensions.bind(this);
     50  }
     51 
     52  updateDimensions({ target }) {
     53    this.setState({
     54      dimensions: {
     55        width: target.naturalWidth,
     56        height: target.naturalHeight,
     57      },
     58    });
     59  }
     60 
     61  render() {
     62    const { mimeType, encoding, text, url } = this.props;
     63    const { width, height } = this.state.dimensions;
     64 
     65    return div(
     66      { className: "panel-container response-image-box devtools-monospace" },
     67      img({
     68        className: "response-image devtools-checkered-background",
     69        src: formDataURI(mimeType, encoding, text),
     70        onLoad: this.updateDimensions,
     71      }),
     72      div(
     73        { className: "response-summary" },
     74        div({ className: "tabpanel-summary-label" }, RESPONSE_IMG_NAME),
     75        div({ className: "tabpanel-summary-value" }, getUrlBaseName(url))
     76      ),
     77      div(
     78        { className: "response-summary" },
     79        div({ className: "tabpanel-summary-label" }, RESPONSE_IMG_DIMENSIONS),
     80        div({ className: "tabpanel-summary-value" }, `${width} × ${height}`)
     81      ),
     82      div(
     83        { className: "response-summary" },
     84        div({ className: "tabpanel-summary-label" }, RESPONSE_IMG_MIMETYPE),
     85        div({ className: "tabpanel-summary-value" }, mimeType)
     86      )
     87    );
     88  }
     89 }
     90 
     91 module.exports = ImagePreview;