summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor/test/browser_net_prefs-reload.js
blob: 523c4dc805b07b4decd8b565169aed3043decf1f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

/**
 * Tests if the prefs that should survive across tool reloads work.
 */

add_task(async function () {
  let { monitor } = await initNetMonitor(SIMPLE_URL, { requestCount: 1 });
  const Actions = monitor.panelWin.windowRequire(
    "devtools/client/netmonitor/src/actions/index"
  );
  info("Starting test... ");

  // This test reopens the network monitor a bunch of times, for different
  // hosts (bottom, side, window). This seems to be slow on debug builds.
  requestLongerTimeout(3);

  // Use these getters instead of caching instances inside the panel win,
  // since the tool is reopened a bunch of times during this test
  // and the instances will differ.
  const getDoc = () => monitor.panelWin.document;
  const getPrefs = () =>
    monitor.panelWin.windowRequire("devtools/client/netmonitor/src/utils/prefs")
      .Prefs;
  const getStore = () => monitor.panelWin.store;
  const getState = () => getStore().getState();

  const prefsToCheck = {
    filters: {
      // A custom new value to be used for the verified preference.
      newValue: ["html", "css"],
      // Getter used to retrieve the current value from the frontend, in order
      // to verify that the pref was applied properly.
      validateValue: () =>
        Object.entries(getState().filters.requestFilterTypes)
          .filter(([type, check]) => check)
          .map(([type, check]) => type),
      // Predicate used to modify the frontend when setting the new pref value,
      // before trying to validate the changes.
      modifyFrontend: value =>
        value.forEach(e =>
          getStore().dispatch(Actions.toggleRequestFilterType(e))
        ),
    },
    networkDetailsWidth: {
      newValue: ~~(Math.random() * 200 + 100),
      validateValue: () =>
        getDoc().querySelector(".monitor-panel .split-box .controlled")
          .clientWidth,
      modifyFrontend(value) {
        getDoc().querySelector(
          ".monitor-panel .split-box .controlled"
        ).style.width = `${value}px`;
      },
    },
    networkDetailsHeight: {
      newValue: ~~(Math.random() * 300 + 100),
      validateValue: () =>
        getDoc().querySelector(".monitor-panel .split-box .controlled")
          .clientHeight,
      modifyFrontend(value) {
        getDoc().querySelector(
          ".monitor-panel .split-box .controlled"
        ).style.height = `${value}px`;
      },
    },
    /* add more prefs here... */
  };

  await testBottom();
  await testSide();
  await testWindow();

  info("Moving toolbox back to the bottom...");
  await monitor.toolbox.switchHost("bottom");
  return teardown(monitor);

  function storeFirstPrefValues() {
    info("Caching initial pref values.");

    for (const name in prefsToCheck) {
      const currentValue = getPrefs()[name];
      prefsToCheck[name].firstValue = currentValue;
    }
  }

  function validateFirstPrefValues(isVerticalSplitter) {
    info("Validating current pref values to the UI elements.");

    for (const name in prefsToCheck) {
      if (
        (isVerticalSplitter && name === "networkDetailsHeight") ||
        (!isVerticalSplitter && name === "networkDetailsWidth")
      ) {
        continue;
      }

      const currentValue = getPrefs()[name];
      const { firstValue, validateValue } = prefsToCheck[name];

      is(
        firstValue.toString(),
        currentValue.toString(),
        "Pref " + name + " should be equal to first value: " + currentValue
      );
      is(
        validateValue().toString(),
        currentValue.toString(),
        "Pref " + name + " should validate: " + currentValue
      );
    }
  }

  function modifyFrontend(isVerticalSplitter) {
    info("Modifying UI elements to the specified new values.");

    for (const name in prefsToCheck) {
      if (
        (isVerticalSplitter && name === "networkDetailsHeight") ||
        (!isVerticalSplitter && name === "networkDetailsWidth")
      ) {
        continue;
      }

      const currentValue = getPrefs()[name];
      const { firstValue, newValue, validateValue } = prefsToCheck[name];
      const modFrontend = prefsToCheck[name].modifyFrontend;

      modFrontend(newValue);
      info("Modified UI element affecting " + name + " to: " + newValue);

      is(
        firstValue.toString(),
        currentValue.toString(),
        "Pref " +
          name +
          " should still be equal to first value: " +
          currentValue
      );
      isnot(
        newValue.toString(),
        currentValue.toString(),
        "Pref " +
          name +
          " should't yet be equal to second value: " +
          currentValue
      );
      is(
        validateValue().toString(),
        newValue.toString(),
        "The UI element affecting " + name + " should validate: " + newValue
      );
    }
  }

  function validateNewPrefValues(isVerticalSplitter) {
    info("Invalidating old pref values to the modified UI elements.");

    for (const name in prefsToCheck) {
      if (
        (isVerticalSplitter && name === "networkDetailsHeight") ||
        (!isVerticalSplitter && name === "networkDetailsWidth")
      ) {
        continue;
      }

      const currentValue = getPrefs()[name];
      const { firstValue, newValue, validateValue } = prefsToCheck[name];

      isnot(
        firstValue.toString(),
        currentValue.toString(),
        "Pref " + name + " should't be equal to first value: " + currentValue
      );
      is(
        newValue.toString(),
        currentValue.toString(),
        "Pref " + name + " should now be equal to second value: " + currentValue
      );
      is(
        validateValue().toString(),
        newValue.toString(),
        "The UI element affecting " + name + " should validate: " + newValue
      );
    }
  }

  function resetFrontend(isVerticalSplitter) {
    info("Resetting UI elements to the cached initial pref values.");

    for (const name in prefsToCheck) {
      if (
        (isVerticalSplitter && name === "networkDetailsHeight") ||
        (!isVerticalSplitter && name === "networkDetailsWidth")
      ) {
        continue;
      }

      const currentValue = getPrefs()[name];
      const { firstValue, newValue, validateValue } = prefsToCheck[name];
      const modFrontend = prefsToCheck[name].modifyFrontend;

      modFrontend(firstValue);
      info("Modified UI element affecting " + name + " to: " + firstValue);

      isnot(
        firstValue.toString(),
        currentValue.toString(),
        "Pref " +
          name +
          " should't yet be equal to first value: " +
          currentValue
      );
      is(
        newValue.toString(),
        currentValue.toString(),
        "Pref " +
          name +
          " should still be equal to second value: " +
          currentValue
      );
      is(
        validateValue().toString(),
        firstValue.toString(),
        "The UI element affecting " + name + " should validate: " + firstValue
      );
    }
  }

  async function restartNetMonitorAndSetupEnv() {
    const newMonitor = await restartNetMonitor(monitor, { requestCount: 1 });
    monitor = newMonitor.monitor;

    const networkEvent = waitForNetworkEvents(monitor, 1);
    await reloadBrowser();
    await networkEvent;

    const wait = waitForDOM(getDoc(), ".network-details-bar");
    getStore().dispatch(Actions.toggleNetworkDetails());
    await wait;
  }

  async function testBottom() {
    await restartNetMonitorAndSetupEnv();

    info("Testing prefs reload for a bottom host.");
    storeFirstPrefValues();

    // Validate and modify while toolbox is on the bottom.
    validateFirstPrefValues(true);
    modifyFrontend(true);

    await restartNetMonitorAndSetupEnv();

    // Revalidate and reset frontend while toolbox is on the bottom.
    validateNewPrefValues(true);
    resetFrontend(true);

    await restartNetMonitorAndSetupEnv();

    // Revalidate.
    validateFirstPrefValues(true);
  }

  async function testSide() {
    await restartNetMonitorAndSetupEnv();

    info("Moving toolbox to the right...");

    await monitor.toolbox.switchHost("right");

    // Switching hosts is not correctly waiting when DevTools run in content frame
    // See Bug 1571421.
    await wait(1000);

    info("Testing prefs reload for a right host.");
    storeFirstPrefValues();

    // Validate and modify frontend while toolbox is on the side.
    validateFirstPrefValues(false);
    modifyFrontend(false);

    await restartNetMonitorAndSetupEnv();

    // Revalidate and reset frontend while toolbox is on the side.
    validateNewPrefValues(false);
    resetFrontend(false);

    await restartNetMonitorAndSetupEnv();

    // Revalidate.
    validateFirstPrefValues(false);
  }

  async function testWindow() {
    await restartNetMonitorAndSetupEnv();

    info("Moving toolbox into a window...");

    await monitor.toolbox.switchHost("window");

    // Switching hosts is not correctly waiting when DevTools run in content frame
    // See Bug 1571421.
    await wait(1000);

    info("Testing prefs reload for a window host.");
    storeFirstPrefValues();

    // Validate and modify frontend while toolbox is in a window.
    validateFirstPrefValues(true);
    modifyFrontend(true);

    await restartNetMonitorAndSetupEnv();

    // Revalidate and reset frontend while toolbox is in a window.
    validateNewPrefValues(true);
    resetFrontend(true);

    await restartNetMonitorAndSetupEnv();

    // Revalidate.
    validateFirstPrefValues(true);
  }
});