Bug 1338386 - Make it clear if request comes from the browser cache; r?Honza
MozReview-Commit-ID: zo6Mh0zK7Z
--- 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;
}