Bug 1356536 - Add file type icons in network monitor. r=Honza
authorAmy Chan <amy_yyc@yahoo.com>
Tue, 16 Oct 2018 10:30:23 +0000
changeset 489788 4fa33210cbc490a1dc353e2288b507138de81772
parent 489787 23ac21b643c2f398affbdfc7a59f97af70733a9c
child 489789 37d138b1e58b9c45ee3baef530bb133597b14eb3
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersHonza
bugs1356536
milestone64.0a1
Bug 1356536 - Add file type icons in network monitor. r=Honza Added request type icons in File column of Network Monitor Differential Revision: https://phabricator.services.mozilla.com/D7697
devtools/client/jar.mn
devtools/client/netmonitor/src/assets/icons/file-type-general.svg
devtools/client/netmonitor/src/assets/icons/file-type-image.svg
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/components/RequestListColumnFile.js
devtools/client/netmonitor/src/utils/request-utils.js
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -260,16 +260,18 @@ devtools.jar:
     skin/tooltip/arrow-horizontal-dark@2x.png (themes/tooltip/arrow-horizontal-dark@2x.png)
     skin/tooltip/arrow-vertical-dark.png (themes/tooltip/arrow-vertical-dark.png)
     skin/tooltip/arrow-vertical-dark@2x.png (themes/tooltip/arrow-vertical-dark@2x.png)
     skin/tooltip/arrow-horizontal-light.png (themes/tooltip/arrow-horizontal-light.png)
     skin/tooltip/arrow-horizontal-light@2x.png (themes/tooltip/arrow-horizontal-light@2x.png)
     skin/tooltip/arrow-vertical-light.png (themes/tooltip/arrow-vertical-light.png)
     skin/tooltip/arrow-vertical-light@2x.png (themes/tooltip/arrow-vertical-light@2x.png)
     skin/images/reload.svg (themes/images/reload.svg)
+    skin/images/file-type-general.svg (netmonitor/src/assets/icons/file-type-general.svg)
+    skin/images/file-type-image.svg (netmonitor/src/assets/icons/file-type-image.svg)
     skin/images/security-state-broken.svg (themes/images/security-state-broken.svg)
     skin/images/security-state-insecure.svg (themes/images/security-state-insecure.svg)
     skin/images/security-state-secure.svg (themes/images/security-state-secure.svg)
     skin/images/security-state-weak.svg (themes/images/security-state-weak.svg)
     skin/images/diff.svg (themes/images/diff.svg)
     skin/images/import.svg (themes/images/import.svg)
     skin/images/pane-collapse.svg (themes/images/pane-collapse.svg)
     skin/images/pane-expand.svg (themes/images/pane-expand.svg)
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/icons/file-type-general.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" fill="#0B0B0B" fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 14.001L2.996 14h9.008l-.004.002V6l.293.707-4-4L9 3H3.003L3 2.999V14zm-1 0V3C2 2.447 2.449 2 3.003 2H9l4 4v8.002a.996.996 0 0 1-.996.998H2.996A.996.996 0 0 1 2 14.001z"/>
+  <path d="M4.5 9H11V8H4v1h.5zM4.5 11H11v-1H4v1h.5zM4.5 13H11v-1H4v1h.5zM4.5 5H7V4H4v1h.5zM4.5 7H7V6H4v1h.5zM8 7h5V6H9V2H8v5z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/icons/file-type-image.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" fill="#0B0B0B" fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 14.001L2.996 14h9.008l-.004.002V6l.293.707-4-4L9 3H3.003L3 2.999V14zm-1 0V3C2 2.447 2.449 2 3.003 2H9l4 4v8.002a.996.996 0 0 1-.996.998H2.996A.996.996 0 0 1 2 14.001z"/>
+  <path d="M8 7h5V6H9V2H8v5z"/>
+</svg>
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -278,16 +278,36 @@
 .requests-list-file {
   width: 40%;
 }
 
 .requests-list-file.requests-list-column {
   text-align: start;
 }
 
+.requests-file-type-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0 4px;
+  vertical-align: text-bottom;
+}
+
+.request-list-item.selected .requests-file-type-icon {
+  filter: brightness(1.3);
+}
+
+.file-type-general {
+  background-image: url(chrome://devtools/skin/images/file-type-general.svg);
+}
+
+.file-type-image {
+  background-image: url(chrome://devtools/skin/images/file-type-image.svg);
+}
+
 /* Protocol column */
 
 .requests-list-protocol {
   width: 8%;
 }
 
 /* Cookies column */
 
--- a/devtools/client/netmonitor/src/components/RequestListColumnFile.js
+++ b/devtools/client/netmonitor/src/components/RequestListColumnFile.js
@@ -2,17 +2,17 @@
  * 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("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { propertiesEqual } = require("../utils/request-utils");
+const { propertiesEqual, getFileName } = require("../utils/request-utils");
 
 const { div } = dom;
 
 const UPDATED_FILE_PROPS = [
   "urlDetails",
 ];
 
 class RequestListColumnFile extends Component {
@@ -23,23 +23,34 @@ class RequestListColumnFile extends Comp
   }
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_FILE_PROPS, this.props.item, nextProps.item);
   }
 
   render() {
     const {
-      item: { urlDetails },
+      item: { urlDetails, cause },
     } = this.props;
+    const iconClassList = ["requests-file-type-icon"];
+
+    if (cause && cause.type == "img") {
+      iconClassList.push("file-type-image");
+    } else {
+      iconClassList.push("file-type-general");
+    }
 
     return (
       div({
         className: "requests-list-column requests-list-file",
-        title: urlDetails.unicodeUrl,
+        title: urlDetails.unicodeUrl
       },
+        div({
+          className: iconClassList.join(" "),
+          title: getFileName(urlDetails.baseNameWithQuery) || urlDetails.unicodeUrl,
+        }),
         urlDetails.baseNameWithQuery
       )
     );
   }
 }
 
 module.exports = RequestListColumnFile;
--- a/devtools/client/netmonitor/src/utils/request-utils.js
+++ b/devtools/client/netmonitor/src/utils/request-utils.js
@@ -148,16 +148,27 @@ function getAbbreviatedMimeType(mimeType
   if (!mimeType) {
     return "";
   }
   const abbrevType = (mimeType.split(";")[0].split("/")[1] || "").split("+")[0];
   return CONTENT_MIME_TYPE_ABBREVIATIONS[abbrevType] || abbrevType;
 }
 
 /**
+ * Helpers for getting a filename from a mime type.
+ *
+ * @param {string} baseNameWithQuery - unicode basename and query of a url
+ * @return {string} unicode filename portion of a url
+ */
+function getFileName(baseNameWithQuery) {
+  const basename = baseNameWithQuery && baseNameWithQuery.split("?")[0];
+  return basename && basename.includes(".") ? basename : null;
+}
+
+/**
  * Helpers for retrieving a URL object from a string
  *
  * @param {string} url - unvalidated url string
  * @return {URL} The URL object
  */
 function getUrl(url) {
   try {
     return new URL(url);
@@ -519,16 +530,17 @@ function processNetworkUpdates(update, r
 module.exports = {
   decodeUnicodeBase64,
   getFormDataSections,
   fetchHeaders,
   fetchNetworkUpdatePacket,
   formDataURI,
   writeHeaderText,
   getAbbreviatedMimeType,
+  getFileName,
   getEndTime,
   getFormattedProtocol,
   getResponseHeader,
   getResponseTime,
   getStartTime,
   getUrlBaseName,
   getUrlBaseNameWithQuery,
   getUrlDetails,