Bug 1429721 - Ensure all netmonitor columns have a default width. r=rickychien draft
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 12 Jan 2018 08:46:03 +0000
changeset 719461 f99a6aace014ace0c57ef7463b45702a7dc3fd04
parent 719211 6705010893cd6d0a72f6adbcb81a92f052a041c2
child 745814 163c1cb75bfaa69bfb29b3ad45403165946ebc38
push id95275
push userbmo:ntim.bugs@gmail.com
push dateFri, 12 Jan 2018 08:46:52 +0000
reviewersrickychien
bugs1429721
milestone59.0a1
Bug 1429721 - Ensure all netmonitor columns have a default width. r=rickychien MozReview-Commit-ID: 9cOzW155yaf
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/constants.js
devtools/client/netmonitor/test/browser_net_columns_pref.js
devtools/client/netmonitor/test/browser_net_columns_showhide.js
devtools/client/netmonitor/test/browser_net_headers-alignment.js
devtools/client/netmonitor/test/head.js
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -324,22 +324,16 @@
 }
 
 /* Scheme column */
 
 .requests-list-scheme {
   width: 8%;
 }
 
-/* Domain column */
-
-.requests-list-domain {
-  width: 13%;
-}
-
 /* Start Time column */
 
 .requests-list-start-time {
   width: 8%;
 }
 
 /* End Time column */
 
@@ -360,17 +354,25 @@
 }
 
 /* Latency column */
 
 .requests-list-latency {
   width: 8%;
 }
 
+/* Response header columns */
+
 .requests-list-response-header {
+  width: 10%;
+}
+
+/* Domain column */
+
+.requests-list-domain {
   width: 13%;
 }
 
 .requests-list-domain.requests-list-column {
   text-align: start;
 }
 
 .requests-security-state-icon {
--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@@ -245,16 +245,17 @@ const HEADERS = [
   {
     name: "latency",
     canFilter: false,
     subMenu: "timings",
   },
   ...RESPONSE_HEADERS
     .map(header => ({
       name: header,
+      boxName: "response-header",
       canFilter: false,
       subMenu: "responseHeaders",
       noLocalization: true
     })),
   {
     name: "waterfall",
     canFilter: false,
   }
--- a/devtools/client/netmonitor/test/browser_net_columns_pref.js
+++ b/devtools/client/netmonitor/test/browser_net_columns_pref.js
@@ -40,32 +40,30 @@ add_task(function* () {
   );
 
   ok(visibleColumns.includes("status"),
     "Pref should be synced for status");
 
   function* hideColumn(column) {
     info(`Clicking context-menu item for ${column}`);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
-      document.querySelector("#requests-list-status-button") ||
-      document.querySelector("#requests-list-waterfall-button"));
+      document.querySelector(".devtools-toolbar.requests-list-headers"));
 
     let onHeaderRemoved = waitForDOM(document, `#requests-list-${column}-button`, 0);
     parent.document.querySelector(`#request-list-header-${column}-toggle`).click();
 
     yield onHeaderRemoved;
     ok(!document.querySelector(`#requests-list-${column}-button`),
        `Column ${column} should be hidden`);
   }
 
   function* showColumn(column) {
     info(`Clicking context-menu item for ${column}`);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
-      document.querySelector("#requests-list-status-button") ||
-      document.querySelector("#requests-list-waterfall-button"));
+      document.querySelector(".devtools-toolbar.requests-list-headers"));
 
     let onHeaderAdded = waitForDOM(document, `#requests-list-${column}-button`, 1);
     parent.document.querySelector(`#request-list-header-${column}-toggle`).click();
 
     yield onHeaderAdded;
     ok(document.querySelector(`#requests-list-${column}-button`),
        `Column ${column} should be visible`);
   }
--- a/devtools/client/netmonitor/test/browser_net_columns_showhide.js
+++ b/devtools/client/netmonitor/test/browser_net_columns_showhide.js
@@ -2,56 +2,66 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 /**
  * Test showing/hiding columns.
  */
 
-add_task(function* () {
-  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+add_task(async function () {
+  let { monitor, tab } = await initNetMonitor(SIMPLE_URL);
   info("Starting test... ");
 
   let { document, store, parent } = monitor.panelWin;
 
+  let wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.loadURI(SIMPLE_URL);
+  await wait;
+
+  let requestsContainer = document.querySelector(".requests-list-contents");
+  ok(requestsContainer, "Container element exists as expected.");
+  let headers = document.querySelector(".requests-list-headers");
+
   let columns = store.getState().ui.columns;
   for (let column in columns) {
     if (columns[column]) {
-      yield testVisibleColumnContextMenuItem(column, document, parent);
-      yield testHiddenColumnContextMenuItem(column, document, parent);
+      await testVisibleColumnContextMenuItem(column, document, parent);
+      testColumnsAlignment(headers, requestsContainer);
+      await testHiddenColumnContextMenuItem(column, document, parent);
     } else {
-      yield testHiddenColumnContextMenuItem(column, document, parent);
-      yield testVisibleColumnContextMenuItem(column, document, parent);
+      await testHiddenColumnContextMenuItem(column, document, parent);
+      testColumnsAlignment(headers, requestsContainer);
+      await testVisibleColumnContextMenuItem(column, document, parent);
     }
   }
 
   columns = store.getState().ui.columns;
   for (let column in columns) {
     if (columns[column]) {
-      yield testVisibleColumnContextMenuItem(column, document, parent);
+      await testVisibleColumnContextMenuItem(column, document, parent);
       // Right click on the white-space for the context menu to appear
       // and toggle column visibility
-      yield testWhiteSpaceContextMenuItem(column, document, parent);
+      await testWhiteSpaceContextMenuItem(column, document, parent);
     }
   }
 });
 
-function* testWhiteSpaceContextMenuItem(column, document, parent) {
+async function testWhiteSpaceContextMenuItem(column, document, parent) {
   ok(!document.querySelector(`#requests-list-${column}-button`),
      `Column ${column} should be hidden`);
 
   info(`Right clicking on white-space in the header to get the context menu`);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelector(".devtools-toolbar.requests-list-headers"));
 
-  yield toggleAndCheckColumnVisibility(column, document, parent);
+  await toggleAndCheckColumnVisibility(column, document, parent);
 }
 
-function* testVisibleColumnContextMenuItem(column, document, parent) {
+async function testVisibleColumnContextMenuItem(column, document, parent) {
   ok(document.querySelector(`#requests-list-${column}-button`),
      `Column ${column} should be visible`);
 
   info(`Clicking context-menu item for ${column}`);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelector("#requests-list-status-button") ||
     document.querySelector("#requests-list-waterfall-button"));
 
@@ -61,43 +71,43 @@ function* testVisibleColumnContextMenuIt
      `${column} menu item should have type="checkbox" attribute`);
   is(menuItem.getAttribute("checked"), "true",
      `checked state of ${column} menu item should be correct`);
   ok(!menuItem.disabled, `disabled state of ${column} menu item should be correct`);
 
   let onHeaderRemoved = waitForDOM(document, `#requests-list-${column}-button`, 0);
   menuItem.click();
 
-  yield onHeaderRemoved;
+  await onHeaderRemoved;
 
   ok(!document.querySelector(`#requests-list-${column}-button`),
      `Column ${column} should be hidden`);
 }
 
-function* testHiddenColumnContextMenuItem(column, document, parent) {
+async function testHiddenColumnContextMenuItem(column, document, parent) {
   ok(!document.querySelector(`#requests-list-${column}-button`),
      `Column ${column} should be hidden`);
 
   info(`Clicking context-menu item for ${column}`);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelector("#requests-list-status-button") ||
     document.querySelector("#requests-list-waterfall-button"));
 
-  yield toggleAndCheckColumnVisibility(column, document, parent);
+  await toggleAndCheckColumnVisibility(column, document, parent);
 }
 
-function* toggleAndCheckColumnVisibility(column, document, parent) {
+async function toggleAndCheckColumnVisibility(column, document, parent) {
   let menuItem = parent.document.querySelector(`#request-list-header-${column}-toggle`);
 
   is(menuItem.getAttribute("type"), "checkbox",
      `${column} menu item should have type="checkbox" attribute`);
   ok(!menuItem.getAttribute("checked"),
      `checked state of ${column} menu item should be correct`);
   ok(!menuItem.disabled, `disabled state of ${column} menu item should be correct`);
 
   let onHeaderAdded = waitForDOM(document, `#requests-list-${column}-button`, 1);
   menuItem.click();
 
-  yield onHeaderAdded;
+  await onHeaderAdded;
 
   ok(document.querySelector(`#requests-list-${column}-button`),
      `Column ${column} should be visible`);
 }
--- a/devtools/client/netmonitor/test/browser_net_headers-alignment.js
+++ b/devtools/client/netmonitor/test/browser_net_headers-alignment.js
@@ -2,66 +2,54 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 /**
  * Bug 1360457 - Mis-alignment between headers and columns on overflow
  */
 
-add_task(function* () {
+add_task(async function () {
   requestLongerTimeout(4);
 
-  let { tab, monitor } = yield initNetMonitor(INFINITE_GET_URL, true);
+  let { tab, monitor } = await initNetMonitor(INFINITE_GET_URL, true);
   let { document, windowRequire, store } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Wait until the first request makes the empty notice disappear
-  yield waitForRequestListToAppear();
+  await waitForRequestListToAppear();
 
   let requestsContainer = document.querySelector(".requests-list-contents");
   ok(requestsContainer, "Container element exists as expected.");
   let headers = document.querySelector(".requests-list-headers");
   ok(headers, "Headers element exists as expected.");
 
-  yield waitForRequestsToOverflowContainer();
-
-  // Get first request line, not child 0 as this is the headers
-  let firstRequestLine = requestsContainer.childNodes[1];
+  await waitForRequestsToOverflowContainer(monitor, requestsContainer);
 
-  // Find number of columns
-  let numberOfColumns = headers.childElementCount;
-  for (let columnNumber = 0; columnNumber < numberOfColumns; columnNumber++) {
-    let aHeaderColumn = headers.childNodes[columnNumber];
-    let aRequestColumn = firstRequestLine.childNodes[columnNumber];
-    is(aHeaderColumn.getBoundingClientRect().left,
-       aRequestColumn.getBoundingClientRect().left,
-       "Headers for columns number " + columnNumber + " are aligned."
-    );
-  }
+  testColumnsAlignment(headers, requestsContainer);
 
   // Stop doing requests.
-  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+  await ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.stopRequests();
   });
 
   // Done: clean up.
   return teardown(monitor);
 
   function waitForRequestListToAppear() {
     info("Waiting until the empty notice disappears and is replaced with the list");
     return waitUntil(() => !!document.querySelector(".requests-list-contents"));
   }
+});
 
-  function* waitForRequestsToOverflowContainer() {
-    info("Waiting for enough requests to overflow the container");
-    while (true) {
-      info("Waiting for one network request");
-      yield waitForNetworkEvents(monitor, 1);
-      if (requestsContainer.scrollHeight > requestsContainer.clientHeight) {
-        info("The list is long enough, returning");
-        return;
-      }
+async function waitForRequestsToOverflowContainer(monitor, requestList) {
+  info("Waiting for enough requests to overflow the container");
+  while (true) {
+    info("Waiting for one network request");
+    await waitForNetworkEvents(monitor, 1);
+    if (requestList.scrollHeight > requestList.clientHeight) {
+      info("The list is long enough, returning");
+      return;
     }
   }
-});
+}
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -1,15 +1,16 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /* import-globals-from ../../framework/test/shared-head.js */
 /* exported Toolbox, restartNetMonitor, teardown, waitForExplicitFinish,
    verifyRequestItemTarget, waitFor, testFilterButtons, loadCommonFrameScript,
-   performRequestsInContent, waitForNetworkEvents, selectIndexAndWaitForSourceEditor */
+   performRequestsInContent, waitForNetworkEvents, selectIndexAndWaitForSourceEditor,
+   testColumnsAlignment */
 
 "use strict";
 
 // shared-head.js handles imports, constants, and utility functions
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js",
   this);
 
@@ -684,16 +685,32 @@ function waitForContentMessage(name) {
   return new Promise((resolve) => {
     mm.addMessageListener(name, function onMessage(msg) {
       mm.removeMessageListener(name, onMessage);
       resolve(msg);
     });
   });
 }
 
+function testColumnsAlignment(headers, requestList) {
+  // Get first request line, not child 0 as this is the headers
+  let firstRequestLine = requestList.childNodes[1];
+
+  // Find number of columns
+  let numberOfColumns = headers.childElementCount;
+  for (let i = 0; i < numberOfColumns; i++) {
+    let headerColumn = headers.childNodes[i];
+    let requestColumn = firstRequestLine.childNodes[i];
+    is(headerColumn.getBoundingClientRect().left,
+       requestColumn.getBoundingClientRect().left,
+       "Headers for columns number " + i + " are aligned."
+    );
+  }
+}
+
 /**
  * Select a request and switch to its response panel.
  *
  * @param {Number} index The request index to be selected
  */
 async function selectIndexAndWaitForSourceEditor(monitor, index) {
   let document = monitor.panelWin.document;
   let onResponseContent = monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_CONTENT);