devtools/client/netmonitor/src/components/StatusCode.js

   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.js");
  10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
  11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
  12 const {
  13   L10N,
  14 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
  15 const {
  16   propertiesEqual,
  17 } = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
  18
  19 const { div, span } = dom;
  20
  21 const UPDATED_STATUS_PROPS = [
  22   "earlyHintsStatus",
  23   "fromCache",
  24   "fromServiceWorker",
  25   "status",
  26   "statusText",
  27 ];
  28
  29 /**
  30  * Status code component
  31  * Displays HTTP status code icon
  32  * Used in RequestListColumnStatus and HeadersPanel
  33  */
  34 class StatusCode extends Component {
  35   static get propTypes() {
  36     return {
  37       item: PropTypes.object.isRequired,
  38     };
  39   }
  40
  41   shouldComponentUpdate(nextProps) {
  42     return !propertiesEqual(
  43       UPDATED_STATUS_PROPS,
  44       this.props.item,
  45       nextProps.item
  46     );
  47   }
  48
  49   render() {
  50     const { item } = this.props;
  51     const {
  52       fromCache,
  53       fromServiceWorker,
  54       status,
  55       statusText,
  56       earlyHintsStatus,
  57       blockedReason,
  58     } = item;
  59     let code;
  60
  61     if (status) {
  62       if (fromCache) {
  63         code = "cached";
  64       } else if (fromServiceWorker) {
  65         code = "service worker";
  66       } else {
  67         code = status;
  68       }
  69     }
  70
  71     if (blockedReason) {
  72       return div(
  73         {
  74           className:
  75             "requests-list-status-code status-code status-code-blocked",
  76           title: L10N.getStr("networkMenu.blockedTooltip"),
  77         },
  78         div({
  79           className: "status-code-blocked-icon",
  80         })
  81       );
  82     }
  83
  84     const statusInfo = [
  85       {
  86         status,
  87         statusText,
  88         code,
  89       },
  90     ];
  91     if (earlyHintsStatus) {
  92       statusInfo.unshift({
  93         status: earlyHintsStatus,
  94         statusText: "",
  95         code: earlyHintsStatus,
  96       });
  97     }
  98
  99     // `data-code` refers to the status-code
 100     // `data-status-code` can be one of "cached", "service worker"
 101     // or the status-code itself
 102     // For example - if a resource is cached, `data-code` would be 200
 103     // and the `data-status-code` would be "cached"
 104     return div(
 105       {},
 106       statusInfo.map(info => {
 107         if (!info.status) {
 108           return null;
 109         }
 110         return span(
 111           {
 112             className: "requests-list-status-code status-code",
 113             onMouseOver({ target }) {
 114               if (info.status && info.statusText && !target.title) {
 115                 target.title = getStatusTooltip(item);
 116               }
 117             },
 118             "data-status-code": info.code,
 119             "data-code": info.status,
 120           },
 121           info.status
 122         );
 123       })
 124     );
 125   }
 126 }
 127
 128 function getStatusTooltip(item) {
 129   const { fromCache, fromServiceWorker, status, statusText } = item;
 130   let title;
 131   if (fromCache && fromServiceWorker) {
 132     title = L10N.getFormatStr(
 133       "netmonitor.status.tooltip.cachedworker",
 134       status,
 135       statusText
 136     );
 137   } else if (fromCache) {
 138     title = L10N.getFormatStr(
 139       "netmonitor.status.tooltip.cached",
 140       status,
 141       statusText
 142     );
 143   } else if (fromServiceWorker) {
 144     title = L10N.getFormatStr(
 145       "netmonitor.status.tooltip.worker",
 146       status,
 147       statusText
 148     );
 149   } else {
 150     title = L10N.getFormatStr(
 151       "netmonitor.status.tooltip.simple",
 152       status,
 153       statusText
 154     );
 155   }
 156   return title;
 157 }
 158
 159 module.exports = StatusCode;