tor-browser

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

AuditProgressOverlay.js (2396B)

      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 React = require("resource://devtools/client/shared/vendor/react.mjs");
      8 const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
      9 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     10 const {
     11  connect,
     12 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     13 
     14 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     15 const Localized = React.createFactory(FluentReact.Localized);
     16 
     17 /**
     18 * Helper functional component to render an accessible text progressbar.
     19 *
     20 * @param {object} props
     21 *        - id for the progressbar element
     22 *        - fluentId: localized string id
     23 */
     24 function TextProgressBar({ id, fluentId }) {
     25  return Localized(
     26    {
     27      id: fluentId,
     28      attrs: { "aria-valuetext": true },
     29    },
     30    ReactDOM.span({
     31      id,
     32      key: id,
     33      role: "progressbar",
     34    })
     35  );
     36 }
     37 
     38 class AuditProgressOverlay extends React.Component {
     39  static get propTypes() {
     40    return {
     41      auditing: PropTypes.array.isRequired,
     42      total: PropTypes.number,
     43      percentage: PropTypes.number,
     44    };
     45  }
     46 
     47  render() {
     48    const { auditing, percentage, total } = this.props;
     49    if (auditing.length === 0) {
     50      return null;
     51    }
     52 
     53    const id = "audit-progress-container";
     54 
     55    if (total == null) {
     56      return TextProgressBar({
     57        id,
     58        fluentId: "accessibility-progress-initializing",
     59      });
     60    }
     61 
     62    if (percentage === 100) {
     63      return TextProgressBar({
     64        id,
     65        fluentId: "accessibility-progress-finishing",
     66      });
     67    }
     68 
     69    return ReactDOM.span(
     70      {
     71        id,
     72        key: id,
     73      },
     74      Localized({
     75        id: "accessibility-progress-progressbar",
     76        $nodeCount: total,
     77      }),
     78      ReactDOM.progress({
     79        max: 100,
     80        value: percentage,
     81        className: "audit-progress-progressbar",
     82        "aria-labelledby": id,
     83      })
     84    );
     85  }
     86 }
     87 
     88 const mapStateToProps = ({ audit: { auditing, progress } }) => {
     89  const { total, percentage } = progress || {};
     90  return { auditing, total, percentage };
     91 };
     92 
     93 module.exports = connect(mapStateToProps)(AuditProgressOverlay);