Bug 1429721 - Ensure all netmonitor columns have a default width. r=rickychien

MozReview-Commit-ID: 9cOzW155yaf

--HG--
extra : rebase_source : f99a6aace014ace0c57ef7463b45702a7dc3fd04

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

@@ -329,12 +329,6 @@
   width: 8%;
 }
 
-/* Domain column */
-
-.requests-list-domain {
-  width: 13%;
-}
-
 /* Start Time column */
 
 .requests-list-start-time {
@@ -365,7 +359,15 @@
   width: 8%;
 }
 
+/* Response header columns */
+
 .requests-list-response-header {
+  width: 10%;
+}
+
+/* Domain column */
+
+.requests-list-domain {
   width: 13%;
 }
 

devtools/client/netmonitor/src/constants.js

@@ -250,6 +250,7 @@ const HEADERS = [
   ...RESPONSE_HEADERS
     .map(header => ({
       name: header,
+      boxName: "response-header",
       canFilter: false,
       subMenu: "responseHeaders",
       noLocalization: true

devtools/client/netmonitor/test/browser_net_columns_pref.js

@@ -45,8 +45,7 @@ add_task(function* () {
   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();
@@ -59,8 +58,7 @@ add_task(function* () {
   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();

devtools/client/netmonitor/test/browser_net_columns_showhide.js

@@ -7,35 +7,45 @@
  * 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`);
 
@@ -43,10 +53,10 @@ function* testWhiteSpaceContextMenuItem(column, document, parent) {
   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`);
 
@@ -66,13 +76,13 @@ function* testVisibleColumnContextMenuItem(column, document, parent) {
   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`);
 
@@ -81,10 +91,10 @@ function* testHiddenColumnContextMenuItem(column, document, parent) {
     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",
@@ -96,7 +106,7 @@ function* toggleAndCheckColumnVisibility(column, document, parent) {
   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`);

devtools/client/netmonitor/test/browser_net_headers-alignment.js

@@ -7,41 +7,29 @@
  * 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();
+  await waitForRequestsToOverflowContainer(monitor, requestsContainer);
 
-  // Get first request line, not child 0 as this is the headers
-  let firstRequestLine = requestsContainer.childNodes[1];
-
-  // 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();
   });
 
@@ -52,16 +40,16 @@ add_task(function* () {
     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;
     }
   }
-});
+}

devtools/client/netmonitor/test/head.js

@@ -4,7 +4,8 @@
 /* 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";
 
@@ -689,6 +690,22 @@ function waitForContentMessage(name) {
   });
 }
 
+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.
  *