1 files changed, 279 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/test/browser_net_headers-resize.js b/devtools/client/netmonitor/test/browser_net_headers-resize.js
new file mode 100644
index 0000000000..dc1aadb470
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_headers-resize.js
@@ -0,0 +1,279 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests resizing of columns in NetMonitor.
+ */
+add_task(async function () {
+  await testForGivenDir("ltr");
+
+  await testForGivenDir("rtl");
+});
+
+async function testForGivenDir(dir) {
+  if (dir === "rtl") {
+    await pushPref("intl.l10n.pseudo", "bidi");
+  } else {
+    await pushPref("intl.l10n.pseudo", "");
+  }
+
+  // Reset visibleColumns so we only get the default ones
+  // and not all that are set in head.js
+  Services.prefs.clearUserPref("devtools.netmonitor.visibleColumns");
+  const initialColumnData = Services.prefs.getCharPref(
+    "devtools.netmonitor.columnsData"
+  );
+  let visibleColumns = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.visibleColumns")
+  );
+
+  // Init network monitor
+  const { monitor } = await initNetMonitor(SIMPLE_URL, {
+    requestCount: 1,
+  });
+  info("Starting test... ");
+
+  const { document, windowRequire, store } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  store.dispatch(Actions.batchEnable(false));
+
+  // Wait for network events (to have some requests in the table)
+  const wait = waitForNetworkEvents(monitor, 1);
+  await reloadBrowser();
+  await wait;
+
+  const headers = document.querySelector(".requests-list-headers");
+  const parentWidth = headers.getBoundingClientRect().width;
+
+  // 1. Change File column from 25% (default) to 20%
+  // Size column should then change from 5% (default) to 10%
+  // When File width changes, contentSize should compensate the change.
+  info("Resize file & check changed prefs...");
+  const fileHeader = document.querySelector(`#requests-list-file-header-box`);
+
+  resizeColumn(fileHeader, 20, parentWidth, dir);
+
+  // after resize - get fresh prefs for tests
+  let columnsData = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.columnsData")
+  );
+  checkColumnsData(columnsData, "file", 20);
+  checkColumnsData(columnsData, "contentSize", 10);
+  checkSumOfVisibleColumns(columnsData, visibleColumns);
+
+  // 2. Change Waterfall column width and check that the size
+  // of waterfall changed correctly and all the other columns changed size.
+  info("Resize waterfall & check changed prefs...");
+  const waterfallHeader = document.querySelector(
+    `#requests-list-waterfall-header-box`
+  );
+  // before resizing waterfall -> save old columnsData for later testing
+  const oldColumnsData = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.columnsData")
+  );
+  resizeWaterfallColumn(waterfallHeader, 30, parentWidth, dir); // 30 fails currently!
+
+  // after resize - get fresh prefs for tests
+  columnsData = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.columnsData")
+  );
+
+  checkColumnsData(columnsData, "waterfall", 30);
+  checkSumOfVisibleColumns(columnsData, visibleColumns);
+  checkAllColumnsChanged(columnsData, oldColumnsData, visibleColumns);
+
+  // 3. Check that all rows have the right column sizes.
+  info("Checking alignment of columns and headers...");
+  const requestsContainer = document.querySelector(".requests-list-row-group");
+  testColumnsAlignment(headers, requestsContainer);
+
+  // 4. Hide all columns but size and waterfall
+  // and check that they resize correctly. Then resize
+  // waterfall to 50% => size should take up 50%
+  info("Hide all but 2 columns - size & waterfall and check resizing...");
+  await hideMoreColumns(monitor, [
+    "status",
+    "method",
+    "domain",
+    "file",
+    "initiator",
+    "type",
+    "transferred",
+  ]);
+
+  resizeWaterfallColumn(waterfallHeader, 50, parentWidth, dir);
+  // after resize - get fresh prefs for tests
+  columnsData = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.columnsData")
+  );
+  visibleColumns = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.visibleColumns")
+  );
+
+  checkColumnsData(columnsData, "contentSize", 50);
+  checkColumnsData(columnsData, "waterfall", 50);
+  checkSumOfVisibleColumns(columnsData, visibleColumns);
+
+  // 5. Hide all columns but domain and file
+  // and resize domain to 50% => file should be 50%
+  info("Hide all but 2 columns - domain & file and check resizing...");
+  await showMoreColumns(monitor, ["domain", "file"]);
+  await hideMoreColumns(monitor, ["contentSize", "waterfall"]);
+
+  const domainHeader = document.querySelector(
+    `#requests-list-domain-header-box`
+  );
+  resizeColumn(domainHeader, 50, parentWidth, dir);
+
+  // after resize - get fresh prefs for tests
+  columnsData = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.columnsData")
+  );
+
+  visibleColumns = JSON.parse(
+    Services.prefs.getCharPref("devtools.netmonitor.visibleColumns")
+  );
+
+  checkColumnsData(columnsData, "domain", 50);
+  checkColumnsData(columnsData, "file", 50);
+  checkSumOfVisibleColumns(columnsData, visibleColumns);
+
+  // Done: clean up.
+  Services.prefs.setCharPref(
+    "devtools.netmonitor.columnsData",
+    initialColumnData
+  );
+  return teardown(monitor);
+}
+
+async function hideMoreColumns(monitor, arr) {
+  for (let i = 0; i < arr.length; i++) {
+    await hideColumn(monitor, arr[i]);
+  }
+}
+
+async function showMoreColumns(monitor, arr) {
+  for (let i = 0; i < arr.length; i++) {
+    await showColumn(monitor, arr[i]);
+  }
+}
+
+function resizeColumn(columnHeader, newPercent, parentWidth, dir) {
+  const newWidthInPixels = (newPercent * parentWidth) / 100;
+  const win = columnHeader.ownerDocument.defaultView;
+  const currentWidth = columnHeader.getBoundingClientRect().width;
+  const mouseDown = dir === "rtl" ? 0 : currentWidth;
+  const mouseMove =
+    dir === "rtl" ? currentWidth - newWidthInPixels : newWidthInPixels;
+
+  EventUtils.synthesizeMouse(
+    columnHeader,
+    mouseDown,
+    1,
+    { type: "mousedown" },
+    win
+  );
+  EventUtils.synthesizeMouse(
+    columnHeader,
+    mouseMove,
+    1,
+    { type: "mousemove" },
+    win
+  );
+  EventUtils.synthesizeMouse(
+    columnHeader,
+    mouseMove,
+    1,
+    { type: "mouseup" },
+    win
+  );
+}
+
+function resizeWaterfallColumn(columnHeader, newPercent, parentWidth, dir) {
+  const newWidthInPixels = (newPercent * parentWidth) / 100;
+  const win = columnHeader.ownerDocument.defaultView;
+  const mouseDown =
+    dir === "rtl"
+      ? columnHeader.getBoundingClientRect().right
+      : columnHeader.getBoundingClientRect().left;
+  const mouseMove =
+    dir === "rtl"
+      ? mouseDown +
+        (newWidthInPixels - columnHeader.getBoundingClientRect().width)
+      : mouseDown +
+        (columnHeader.getBoundingClientRect().width - newWidthInPixels);
+
+  EventUtils.synthesizeMouse(
+    columnHeader.parentElement,
+    mouseDown,
+    1,
+    { type: "mousedown" },
+    win
+  );
+  EventUtils.synthesizeMouse(
+    columnHeader.parentElement,
+    mouseMove,
+    1,
+    { type: "mousemove" },
+    win
+  );
+  EventUtils.synthesizeMouse(
+    columnHeader.parentElement,
+    mouseMove,
+    1,
+    { type: "mouseup" },
+    win
+  );
+}
+
+function checkColumnsData(columnsData, column, expectedWidth) {
+  const widthInPref = Math.round(getWidthFromPref(columnsData, column));
+  is(widthInPref, expectedWidth, "Column " + column + " has expected size.");
+}
+
+function checkSumOfVisibleColumns(columnsData, visibleColumns) {
+  let sum = 0;
+  visibleColumns.forEach(column => {
+    sum += getWidthFromPref(columnsData, column);
+  });
+  sum = Math.round(sum);
+  is(sum, 100, "All visible columns cover 100%.");
+}
+
+function getWidthFromPref(columnsData, column) {
+  const widthInPref = columnsData.find(function (element) {
+    return element.name === column;
+  }).width;
+  return widthInPref;
+}
+
+function checkAllColumnsChanged(columnsData, oldColumnsData, visibleColumns) {
+  const oldWaterfallWidth = getWidthFromPref(oldColumnsData, "waterfall");
+  const newWaterfallWidth = getWidthFromPref(columnsData, "waterfall");
+  visibleColumns.forEach(column => {
+    // do not test waterfall against waterfall
+    if (column !== "waterfall") {
+      const oldWidth = getWidthFromPref(oldColumnsData, column);
+      const newWidth = getWidthFromPref(columnsData, column);
+
+      // Test that if waterfall is smaller all other columns are bigger
+      if (oldWaterfallWidth > newWaterfallWidth) {
+        is(
+          oldWidth < newWidth,
+          true,
+          "Column " + column + " has changed width correctly."
+        );
+      }
+      // Test that if waterfall is bigger all other columns are smaller
+      if (oldWaterfallWidth < newWaterfallWidth) {
+        is(
+          oldWidth > newWidth,
+          true,
+          "Column " + column + " has changed width correctly."
+        );
+      }
+    }
+  });
+}