devtools/client/netmonitor/test/browser_net_waterfall-resize.js

   1 /* Any copyright is dedicated to the Public Domain.
   2    http://creativecommons.org/publicdomain/zero/1.0/ */
   3
   4 "use strict";
   5
   6 /**
   7  * Test that waterfall timing elements are resized when the column is resized.
   8  */
   9
  10 add_task(async function () {
  11   // Use a test page with slow requests.
  12   const { monitor } = await initNetMonitor(HTTPS_SLOW_REQUESTS_URL, {
  13     requestCount: 2,
  14   });
  15   const { document, store, windowRequire } = monitor.panelWin;
  16   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
  17   store.dispatch(Actions.batchEnable(false));
  18
  19   const onEvents = waitForNetworkEvents(monitor, 2);
  20   await reloadBrowser();
  21   await onEvents;
  22
  23   info("Resize waterfall column a first time");
  24   const waterfallHeader = document.querySelector(
  25     `#requests-list-waterfall-header-box`
  26   );
  27   const headers = document.querySelector(".requests-list-headers");
  28   const parentWidth = headers.getBoundingClientRect().width;
  29
  30   let onWaterfallResize = waitForDispatch(store, "WATERFALL_RESIZE");
  31   resizeWaterfallColumn(waterfallHeader, 30, parentWidth);
  32   await onWaterfallResize;
  33
  34   info("Mesure the initial width of a request timing element");
  35   const initialWidth = await getStableTimingBoxesWidth(document);
  36   info("Measured initialWidth: " + initialWidth);
  37
  38   info("Resize waterfall column again");
  39   onWaterfallResize = waitForDispatch(store, "WATERFALL_RESIZE");
  40   resizeWaterfallColumn(waterfallHeader, 60, parentWidth);
  41   await onWaterfallResize;
  42
  43   info("Mesure the request timing element again");
  44   const finalWidth = await getStableTimingBoxesWidth(
  45     document,
  46     width => width > 200
  47   );
  48   info("Measured finalWidth: " + finalWidth);
  49
  50   // We want to check that finalWidth is different from initialWidth, but
  51   // the size might be slightly updated so we can't use isnot to assert this.
  52   // The finalWidth should be significantly bigger, so check the difference is
  53   // at least greater than 1.
  54   Assert.greater(
  55     Math.abs(finalWidth - initialWidth),
  56     1,
  57     "The request timing element should be updated"
  58   );
  59   return teardown(monitor);
  60 });
  61
  62 /**
  63  * Timings are updated with a slight delay so wait until the dimension is
  64  * stabilized.
  65  * Measure the widths of all waterfall timing boxes.
  66  *
  67  * @param {Document} doc
  68  *     Netmonitor document.
  69  * @param {function=} predicate
  70  *     Optional predicate to avoid returning erroneous width. On windows CI,
  71  *     the second measure is hard to get right, so we use the predicate to make
  72  *     sure we retrieve the good size.
  73  * @returns {number}
  74  *     The measured width.
  75  */
  76 async function getStableTimingBoxesWidth(doc, predicate = null) {
  77   let stableWidth = -1;
  78   await waitFor(
  79     () => {
  80       // Sum the width of all displayed timings.
  81       const timingBoxes = [
  82         ...doc.querySelectorAll(".requests-list-timings-box"),
  83       ];
  84       const widths = timingBoxes.map(el => el.getBoundingClientRect().width);
  85       const width = widths.reduce((sum, w) => sum + w, 0);
  86
  87       // If the width changed, updated it and return.
  88       if (width != stableWidth) {
  89         stableWidth = width;
  90         return false;
  91       }
  92
  93       // Otherwise, check the predicate if provided.
  94       if (typeof predicate == "function") {
  95         return predicate(width);
  96       }
  97
  98       return true;
  99     },
 100     "Wait for the timings width to stabilize",
 101     500
 102   );
 103
 104   return stableWidth;
 105 }