Bug 1404917 - Move image preview tooltip to file name and remove preview icon. r=Honza

MozReview-Commit-ID: 86YPdHZhCmo

--HG--
extra : rebase_source : dfb3a5edbfa52c2b35f8606a471fb4973de14764

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;
-}
-
 /* Protocol column */
 
 .requests-list-protocol {

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

@@ -11,10 +11,9 @@ 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",
 ];
 
@@ -22,7 +21,6 @@ class RequestListColumnFile extends Component {
   static get propTypes() {
     return {
       item: PropTypes.object.isRequired,
-      onThumbnailMouseDown: PropTypes.func.isRequired,
     };
   }
 
@@ -32,8 +30,7 @@ class RequestListColumnFile extends Component {
 
   render() {
     let {
-      item: { responseContentDataUri, urlDetails },
-      onThumbnailMouseDown
+      item: { urlDetails },
     } = this.props;
 
     return (
@@ -41,11 +38,6 @@ class RequestListColumnFile extends Component {
         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(),
             }))
           )
@@ -291,13 +288,6 @@ module.exports = connect(
       }
     },
     onSelectDelta: (delta) => dispatch(Actions.selectDelta(delta)),
-    /**
-     * A handler that opens the response tab in the details view if
-     * the thumbnail is clicked.
-     */
-    onThumbnailMouseDown: () => {
-      dispatch(Actions.selectDetailsPanelTab("response"));
-    },
     /**
      * A handler that opens the timing sidebar panel if the waterfall is clicked.
      */

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, // TODO: verify
       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; // px
 
 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_icon-preview.js

@@ -1,68 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-/**
- * Tests if image responses show a thumbnail in the requests menu.
- */
-
-add_task(function* () {
-  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
-  const SELECTOR = ".requests-list-icon[src]";
-  info("Starting test... ");
-
-  let { document, store, windowRequire, connector } = monitor.panelWin;
-  let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
-  let { triggerActivity } = connector;
-  let { ACTIVITY_TYPE } = windowRequire("devtools/client/netmonitor/src/constants");
-
-  store.dispatch(Actions.batchEnable(false));
-
-  let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
-  yield performRequests();
-  yield wait;
-  yield waitUntil(() => !!document.querySelector(SELECTOR));
-
-  info("Checking the image thumbnail when all items are shown.");
-  checkImageThumbnail();
-
-  store.dispatch(Actions.sortBy("contentSize"));
-  info("Checking the image thumbnail when all items are sorted.");
-  checkImageThumbnail();
-
-  store.dispatch(Actions.toggleRequestFilterType("images"));
-  info("Checking the image thumbnail when only images are shown.");
-  checkImageThumbnail();
-
-  info("Reloading the debuggee and performing all requests again...");
-  wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
-  yield reloadAndPerformRequests();
-  yield wait;
-  yield waitUntil(() => !!document.querySelector(SELECTOR));
-
-  info("Checking the image thumbnail after a reload.");
-  checkImageThumbnail();
-
-  yield teardown(monitor);
-
-  function performRequests() {
-    return ContentTask.spawn(tab.linkedBrowser, {}, function* () {
-      content.wrappedJSObject.performRequests();
-    });
-  }
-
-  function* reloadAndPerformRequests() {
-    yield triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
-    yield performRequests();
-  }
-
-  function checkImageThumbnail() {
-    is(document.querySelectorAll(SELECTOR).length, 1,
-      "There should be only one image request with a thumbnail displayed.");
-    is(document.querySelector(SELECTOR).src, TEST_IMAGE_DATA_URI,
-      "The image requests-list-icon thumbnail is displayed correctly.");
-    is(document.querySelector(SELECTOR).hidden, false,
-      "The image requests-list-icon thumbnail should not be hidden.");
-  }
-});

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() {
    * with the expected content.
    */
   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.");

devtools/client/netmonitor/test/browser_net_thumbnail-click.js

@@ -1,40 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-/**
- * Test that clicking on the file thumbnail opens the response details tab.
- */
-
-add_task(function* () {
-  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
-  let { document } = monitor.panelWin;
-
-  yield performRequestsAndWait();
-
-  let wait = waitForDOM(document, "#response-panel");
-
-  let request = document.querySelectorAll(".request-list-item")[5];
-  let icon = request.querySelector(".requests-list-icon");
-
-  info("Clicking thumbnail of the sixth request.");
-  EventUtils.synthesizeMouseAtCenter(icon, {}, monitor.panelWin);
-
-  yield wait;
-
-  ok(document.querySelector("#response-tab[aria-selected=true]"),
-     "Response tab is selected.");
-  ok(document.querySelector(".response-image-box"),
-     "Response image preview is shown.");
-
-  yield teardown(monitor);
-
-  function* performRequestsAndWait() {
-    let onAllEvents = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
-    yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
-      content.wrappedJSObject.performRequests();
-    });
-    yield onAllEvents;
-  }
-});