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 499900 4fa33210cbc490a1dc353e2288b507138de81772
parent 499899 23ac21b643c2f398affbdfc7a59f97af70733a9c
child 499902 37d138b1e58b9c45ee3baef530bb133597b14eb3
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1356536
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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,