Bug 1338386 - Make it clear if request comes from the browser cache; r?Honza draft
authorVincent Lequertier <vi.le@autistici.org>
Sun, 05 Mar 2017 14:30:50 +0100
changeset 493621 e550aeabafd98c50ab739a60454c3017ece40fee
parent 490433 1bc2ad020aee2830e0a7941f10958dbec108c254
child 547909 78794e8b0e9fc469b5921b621eb32929bd4c4bb3
push id47817
push userbmo:vi.le@autistici.org
push dateSun, 05 Mar 2017 14:01:27 +0000
reviewersHonza
bugs1338386
milestone54.0a1
Bug 1338386 - Make it clear if request comes from the browser cache; r?Honza MozReview-Commit-ID: zo6Mh0zK7Z
devtools/client/netmonitor/components/request-list-content.js
devtools/client/netmonitor/components/request-list-item.js
devtools/client/themes/netmonitor.css
--- a/devtools/client/netmonitor/components/request-list-content.js
+++ b/devtools/client/netmonitor/components/request-list-content.js
@@ -37,16 +37,17 @@ const REQUESTS_TOOLTIP_TOGGLE_DELAY = 50
  */
 const RequestListContent = createClass({
   displayName: "RequestListContent",
 
   propTypes: {
     dispatch: PropTypes.func.isRequired,
     displayedRequests: PropTypes.object.isRequired,
     firstRequestStartedMillis: PropTypes.number.isRequired,
+    fromCache: PropTypes.bool.isRequired,
     onItemMouseDown: PropTypes.func.isRequired,
     onSecurityIconClick: PropTypes.func.isRequired,
     onSelectDelta: PropTypes.func.isRequired,
     scale: PropTypes.number,
     selectedRequestId: PropTypes.string,
   },
 
   componentWillMount() {
@@ -238,16 +239,17 @@ const RequestListContent = createClass({
       div({
         ref: "contentEl",
         className: "requests-list-contents",
         tabIndex: 0,
         onKeyDown: this.onKeyDown,
       },
         displayedRequests.map((item, index) => RequestListItem({
           firstRequestStartedMillis,
+          fromCache: item.status === "304" || item.fromCache,
           item,
           index,
           isSelected: item.id === selectedRequestId,
           key: item.id,
           onContextMenu: this.onContextMenu,
           onFocusedNodeChange: this.onFocusedNodeChange,
           onMouseDown: () => onItemMouseDown(item.id),
           onSecurityIconClick: () => onSecurityIconClick(item.securityState),
--- a/devtools/client/netmonitor/components/request-list-item.js
+++ b/devtools/client/netmonitor/components/request-list-item.js
@@ -60,16 +60,17 @@ const UPDATED_REQ_PROPS = [
 const RequestListItem = createClass({
   displayName: "RequestListItem",
 
   propTypes: {
     item: PropTypes.object.isRequired,
     index: PropTypes.number.isRequired,
     isSelected: PropTypes.bool.isRequired,
     firstRequestStartedMillis: PropTypes.number.isRequired,
+    fromCache: PropTypes.bool.isRequired,
     onContextMenu: PropTypes.func.isRequired,
     onFocusedNodeChange: PropTypes.func,
     onMouseDown: PropTypes.func.isRequired,
     onSecurityIconClick: PropTypes.func.isRequired,
   },
 
   componentDidMount() {
     if (this.props.isSelected) {
@@ -92,25 +93,31 @@ const RequestListItem = createClass({
   },
 
   render() {
     const {
       item,
       index,
       isSelected,
       firstRequestStartedMillis,
+      fromCache,
       onContextMenu,
       onMouseDown,
       onSecurityIconClick
     } = this.props;
 
     let classList = ["request-list-item"];
     if (isSelected) {
       classList.push("selected");
     }
+
+    if (fromCache) {
+      classList.push("fromCache");
+    }
+
     classList.push(index % 2 ? "odd" : "even");
 
     return (
       div({
         ref: "el",
         className: classList.join(" "),
         "data-id": item.id,
         tabIndex: 0,
@@ -378,21 +385,21 @@ const TransferredSizeColumn = createFact
     item: PropTypes.object.isRequired,
   },
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_TRANSFERRED_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
-    const { transferredSize, fromCache, fromServiceWorker } = this.props.item;
+    const { transferredSize, fromCache, fromServiceWorker, status } = this.props.item;
 
     let text;
     let className = "subitem-label";
-    if (fromCache) {
+    if (fromCache || status === "304") {
       text = L10N.getStr("networkMenu.sizeCached");
       className += " theme-comment";
     } else if (fromServiceWorker) {
       text = L10N.getStr("networkMenu.sizeServiceWorker");
       className += " theme-comment";
     } else if (typeof transferredSize == "number") {
       text = getFormattedSize(transferredSize);
     } else if (transferredSize === null) {
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -586,16 +586,20 @@
 .request-list-item:not(.selected).odd {
   background-color: var(--table-zebra-background);
 }
 
 .request-list-item:not(.selected):hover {
   background-color: var(--theme-selection-background-semitransparent);
 }
 
+.request-list-item.fromCache > .requests-list-subitem:not(.requests-list-waterfall) {
+    opacity: 0.6;
+}
+
 .theme-firebug .request-list-item:not(.selected):hover {
   background: #EFEFEF;
 }
 
 .theme-firebug .requests-list-subitem {
   padding: 1px;
 }