Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 129 insertions, 0 deletions

diff --git a/devtools/client/netmonitor/src/components/StatusCode.js b/devtools/client/netmonitor/src/components/StatusCode.js
new file mode 100644
index 0000000000..7f4f082636
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/StatusCode.js
@@ -0,0 +1,129 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { div } = dom;
+
+const UPDATED_STATUS_PROPS = [
+  "fromCache",
+  "fromServiceWorker",
+  "status",
+  "statusText",
+];
+
+/**
+ * Status code component
+ * Displays HTTP status code icon
+ * Used in RequestListColumnStatus and HeadersPanel
+ */
+class StatusCode extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(
+      UPDATED_STATUS_PROPS,
+      this.props.item,
+      nextProps.item
+    );
+  }
+
+  render() {
+    const { item } = this.props;
+    const { fromCache, fromServiceWorker, status, statusText, blockedReason } =
+      item;
+    let code;
+
+    if (status) {
+      if (fromCache) {
+        code = "cached";
+      } else if (fromServiceWorker) {
+        code = "service worker";
+      } else {
+        code = status;
+      }
+    }
+
+    if (blockedReason) {
+      return div(
+        {
+          className:
+            "requests-list-status-code status-code status-code-blocked",
+          title: L10N.getStr("networkMenu.blockedTooltip"),
+        },
+        div({
+          className: "status-code-blocked-icon",
+        })
+      );
+    }
+
+    // `data-code` refers to the status-code
+    // `data-status-code` can be one of "cached", "service worker"
+    // or the status-code itself
+    // For example - if a resource is cached, `data-code` would be 200
+    // and the `data-status-code` would be "cached"
+    return div(
+      {
+        className: "requests-list-status-code status-code",
+        onMouseOver({ target }) {
+          if (status && statusText && !target.title) {
+            target.title = getStatusTooltip(item);
+          }
+        },
+        "data-status-code": code,
+        "data-code": status,
+      },
+      status
+    );
+  }
+}
+
+function getStatusTooltip(item) {
+  const { fromCache, fromServiceWorker, status, statusText } = item;
+  let title;
+  if (fromCache && fromServiceWorker) {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.cachedworker",
+      status,
+      statusText
+    );
+  } else if (fromCache) {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.cached",
+      status,
+      statusText
+    );
+  } else if (fromServiceWorker) {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.worker",
+      status,
+      statusText
+    );
+  } else {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.simple",
+      status,
+      statusText
+    );
+  }
+  return title;
+}
+
+module.exports = StatusCode;