Bug 1404917 - Move image preview tooltip to file name and remove prev…

…iew icon. r=Honza

MozReview-Commit-ID: 86YPdHZhCmo

UltraBlame original commit: e1515b5c14e299553098c78fd79c0e735602875d

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -301,15 +301,6 @@
   text-align: start;
 }
 
-.requests-list-icon {
-  background: transparent;
-  width: 15px;
-  height: 15px;
-  margin: 0 4px;
-  outline: 1px solid var(--table-splitter-color);
-  vertical-align: top;
-}
-
 
 
 .requests-list-protocol {

devtools/client/netmonitor/src/components/RequestListColumnFile.js

@@ -11,18 +11,16 @@ const {
 } = require("devtools/client/shared/vendor/react");
 const { propertiesEqual } = require("../utils/request-utils");
 
-const { div, img } = DOM;
+const { div } = DOM;
 
 const UPDATED_FILE_PROPS = [
-  "responseContentDataUri",
   "urlDetails",
 ];
 
 class RequestListColumnFile extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
-      onThumbnailMouseDown: PropTypes.func.isRequired,
     };
   }
 
@@ -32,20 +30,14 @@ class RequestListColumnFile extends Component {
 
   render() {
     let {
-      item: { responseContentDataUri, urlDetails },
-      onThumbnailMouseDown
+      item: { urlDetails },
     } = this.props;
 
     return (
       div({
         className: "requests-list-column requests-list-file",
         title: urlDetails.unicodeUrl,
       },
-        img({
-          className: "requests-list-icon",
-          src: responseContentDataUri,
-          onMouseDown: onThumbnailMouseDown,
-        }),
         urlDetails.baseNameWithQuery
       )
     );

devtools/client/netmonitor/src/components/RequestListContent.js

@@ -47,7 +47,6 @@ class RequestListContent extends Component {
       onItemMouseDown: PropTypes.func.isRequired,
       onSecurityIconMouseDown: PropTypes.func.isRequired,
       onSelectDelta: PropTypes.func.isRequired,
-      onThumbnailMouseDown: PropTypes.func.isRequired,
       onWaterfallMouseDown: PropTypes.func.isRequired,
       scale: PropTypes.number,
       selectedRequestId: PropTypes.string,
@@ -149,7 +148,7 @@ class RequestListContent extends Component {
     }
 
     let { connector } = this.props;
-    if (requestItem.responseContent && target.closest(".requests-list-icon")) {
+    if (target.closest(".requests-list-file")) {
       return setTooltipImageContent(connector, tooltip, itemEl, requestItem);
     }
 
@@ -222,7 +221,6 @@ class RequestListContent extends Component {
       onCauseBadgeMouseDown,
       onItemMouseDown,
       onSecurityIconMouseDown,
-      onThumbnailMouseDown,
       onWaterfallMouseDown,
       scale,
       selectedRequestId,
@@ -252,7 +250,6 @@ class RequestListContent extends Component {
               onMouseDown: () => onItemMouseDown(item.id),
               onCauseBadgeMouseDown: () => onCauseBadgeMouseDown(item.cause),
               onSecurityIconMouseDown: () => onSecurityIconMouseDown(item.securityState),
-              onThumbnailMouseDown: () => onThumbnailMouseDown(),
               onWaterfallMouseDown: () => onWaterfallMouseDown(),
             }))
           )
@@ -294,13 +291,6 @@ module.exports = connect(
 
 
 
-
-    onThumbnailMouseDown: () => {
-      dispatch(Actions.selectDetailsPanelTab("response"));
-    },
-
-
-
     onWaterfallMouseDown: () => {
       dispatch(Actions.selectDetailsPanelTab("timings"));
     },

devtools/client/netmonitor/src/components/RequestListItem.js

@@ -86,7 +86,6 @@ class RequestListItem extends Component {
       onFocusedNodeChange: PropTypes.func,
       onMouseDown: PropTypes.func.isRequired,
       onSecurityIconMouseDown: PropTypes.func.isRequired,
-      onThumbnailMouseDown: PropTypes.func.isRequired,
       onWaterfallMouseDown: PropTypes.func.isRequired,
       waterfallWidth: PropTypes.number,
     };
@@ -125,7 +124,6 @@ class RequestListItem extends Component {
       onMouseDown,
       onCauseBadgeMouseDown,
       onSecurityIconMouseDown,
-      onThumbnailMouseDown,
       onWaterfallMouseDown,
     } = this.props;
 
@@ -144,7 +142,7 @@ class RequestListItem extends Component {
       },
         columns.get("status") && RequestListColumnStatus({ item }),
         columns.get("method") && RequestListColumnMethod({ item }),
-        columns.get("file") && RequestListColumnFile({ item, onThumbnailMouseDown }),
+        columns.get("file") && RequestListColumnFile({ item }),
         columns.get("protocol") && RequestListColumnProtocol({ item }),
         columns.get("scheme") && RequestListColumnScheme({ item }),
         columns.get("domain") && RequestListColumnDomain({ item,

devtools/client/netmonitor/src/connector/chrome/response.js

@@ -4,8 +4,6 @@
 
 "use strict";
 
-const { formDataURI } = require("../../utils/request-utils");
-
 function ResponseInfo(id, response, content) {
   let {
     mimeType
@@ -23,7 +21,7 @@ function ResponseInfo(id, response, content) {
 }
 
 function ResponseContent(id, response, content) {
-  const {body, base64Encoded} = content;
+  const {body} = content;
   let {mimeType, encodedDataLength} = response;
   let responseContent = ResponseInfo(id, response, content);
   let payload = Object.assign(
@@ -33,9 +31,6 @@ function ResponseContent(id, response, content) {
       transferredSize: encodedDataLength, 
       mimeType: mimeType
     }, body);
-  if (mimeType.includes("image/")) {
-    payload.responseContentDataUri = formDataURI(mimeType, base64Encoded, response);
-  }
   return payload;
 }
 

devtools/client/netmonitor/src/connector/firefox-data-provider.js

@@ -9,7 +9,6 @@ const { EVENTS } = require("../constants");
 const { CurlUtils } = require("devtools/client/shared/curl");
 const {
   fetchHeaders,
-  formDataURI,
 } = require("../utils/request-utils");
 
 
@@ -128,13 +127,8 @@ class FirefoxDataProvider {
   async fetchResponseContent(mimeType, responseContent) {
     let payload = {};
     if (mimeType && responseContent && responseContent.content) {
-      let { encoding, text } = responseContent.content;
+      let { text } = responseContent.content;
       let response = await this.getLongString(text);
-
-      if (mimeType.includes("image/")) {
-        payload.responseContentDataUri = formDataURI(mimeType, encoding, response);
-      }
-
       responseContent.content.text = response;
       payload.responseContent = responseContent;
     }

devtools/client/netmonitor/src/reducers/requests.js

@@ -59,7 +59,6 @@ const Request = I.Record({
   responseCookies: undefined,
   responseContent: undefined,
   responseContentAvailable: false,
-  responseContentDataUri: undefined,
   formDataSections: undefined,
 });
 

devtools/client/netmonitor/src/request-list-tooltip.js

@@ -13,20 +13,21 @@ const { formDataURI } = require("./utils/request-utils");
 const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400; 
 
 async function setTooltipImageContent(connector, tooltip, itemEl, requestItem) {
-  let { mimeType, text, encoding } = requestItem.responseContent.content;
+  let { mimeType } = requestItem;
 
   if (!mimeType || !mimeType.includes("image/")) {
     return false;
   }
 
-  let string = await connector.getLongString(text);
-  let src = formDataURI(mimeType, encoding, string);
+  let responseContent = await connector.requestData(requestItem.id, "responseContent");
+  let { encoding, text } = responseContent.content;
+  let src = formDataURI(mimeType, encoding, text);
   let maxDim = REQUESTS_TOOLTIP_IMAGE_MAX_DIM;
   let { naturalWidth, naturalHeight } = await getImageDimensions(tooltip.doc, src);
   let options = { maxDim, naturalWidth, naturalHeight };
   setImageTooltip(tooltip, tooltip.doc, src, options);
 
-  return itemEl.querySelector(".requests-list-icon");
+  return itemEl.querySelector(".requests-list-file");
 }
 
 module.exports = {

devtools/client/netmonitor/test/browser.ini

@@ -122,7 +122,6 @@ skip-if = (os == 'linux' && debug && bits == 32) # Bug 1303439
 [browser_net_footer-summary.js]
 [browser_net_headers-alignment.js]
 [browser_net_headers_sorted.js]
-[browser_net_icon-preview.js]
 [browser_net_image-tooltip.js]
 [browser_net_json-b64.js]
 [browser_net_json-null.js]
@@ -176,7 +175,6 @@ skip-if = true # Bug 1258809
 [browser_net_status-codes.js]
 [browser_net_streaming-response.js]
 [browser_net_throttle.js]
-[browser_net_thumbnail-click.js]
 [browser_net_timeline_ticks.js]
 skip-if = true # TODO: fix the test
 [browser_net_timing-division.js]

devtools/client/netmonitor/test/browser_net_image-tooltip.js

@@ -11,7 +11,6 @@ const IMAGE_TOOLTIP_REQUESTS = 1;
 
 add_task(function* test() {
   let { tab, monitor } = yield initNetMonitor(IMAGE_TOOLTIP_URL);
-  const SELECTOR = ".requests-list-icon[src]";
   info("Starting test... ");
 
   let { document, store, windowRequire, connector } = monitor.panelWin;
@@ -25,7 +24,6 @@ add_task(function* test() {
   let onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS);
   yield performRequests();
   yield onEvents;
-  yield waitUntil(() => !!document.querySelector(SELECTOR));
 
   info("Checking the image thumbnail after a few requests were made...");
   yield showTooltipAndVerify(document.querySelectorAll(".request-list-item")[0]);
@@ -42,7 +40,6 @@ add_task(function* test() {
   yield triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
   yield performRequests();
   yield onEvents;
-  yield waitUntil(() => !!document.querySelector(SELECTOR));
 
   info("Checking the image thumbnail after a reload.");
   yield showTooltipAndVerify(document.querySelectorAll(".request-list-item")[1]);
@@ -66,7 +63,7 @@ add_task(function* test() {
 
 
   function* showTooltipAndVerify(target) {
-    let anchor = target.querySelector(".requests-list-icon");
+    let anchor = target.querySelector(".requests-list-file");
     yield showTooltipOn(anchor);
 
     info("Tooltip was successfully opened for the image request.");