From 862388521afd78ce1cb70aad357f4986565056bb Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Wed, 4 Oct 2023 14:23:16 -0700 Subject: [PATCH 1/4] tests(devtools): remove usage of frontend globals --- core/scripts/pptr-run-devtools.js | 49 ++++++++++++++----------------- 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/core/scripts/pptr-run-devtools.js b/core/scripts/pptr-run-devtools.js index 705cfd84f217..742cf5c7c4c7 100644 --- a/core/scripts/pptr-run-devtools.js +++ b/core/scripts/pptr-run-devtools.js @@ -145,33 +145,26 @@ function addSniffer(receiver, methodName, override) { } async function waitForLighthouseReady() { + // @ts-expect-error import + const {ViewManager, DockController} = await import('./devtools-frontend/front_end/ui/legacy/legacy.js'); + // @ts-expect-error import + const {LighthousePanel} = await import('./devtools-frontend/front_end/panels/lighthouse/lighthouse.js'); + // @ts-expect-error import + const {TargetManager} = await import('./devtools-frontend/front_end/core/sdk/sdk.js'); + // @ts-expect-error import + const {AdvancedApp} = await import('./devtools-frontend/front_end/panels/emulation/emulation.js'); + // Undocking later in the function can cause hiccups when Lighthouse enables device emulation. - // @ts-expect-error global - UI.dockController.setDockSide('undocked'); + DockController.DockController.instance().setDockSide('undocked'); + + await ViewManager.ViewManager.instance().showView('lighthouse'); - // @ts-expect-error global - const viewManager = UI.viewManager || (UI.ViewManager.ViewManager || UI.ViewManager).instance(); - const views = viewManager.views || viewManager._views; - const panelName = views.has('lighthouse') ? 'lighthouse' : 'audits'; - await viewManager.showView(panelName); + const panel = LighthousePanel.LighthousePanel.instance(); - // @ts-expect-error global - const panel = UI.panels.lighthouse || UI.panels.audits; const button = panel.contentElement.querySelector('button'); if (button.disabled) throw new Error('Start button disabled'); - // Give the main target model a moment to be available. - // Otherwise, 'SDK.TargetManager.TargetManager.instance().mainTarget()' is null. - // @ts-expect-error global - if (self.runtime && self.runtime.loadLegacyModule) { - // This exposes TargetManager via self.SDK. - try { - // @ts-expect-error global - await self.runtime.loadLegacyModule('core/sdk/sdk-legacy.js'); - } catch {} - } - // @ts-expect-error global - const targetManager = SDK.targetManager || (SDK.TargetManager.TargetManager || SDK.TargetManager).instance(); + const targetManager = TargetManager.TargetManager.instance(); if (targetManager.primaryPageTarget() === null) { if (targetManager?.observeTargets) { await new Promise(resolve => targetManager.observeTargets({ @@ -186,16 +179,16 @@ async function waitForLighthouseReady() { } // Ensure the emulation model is ready before Lighthouse starts by enabling device emulation. - // @ts-expect-error global - const {deviceModeView} = Emulation.AdvancedApp.instance(); + const {deviceModeView} = AdvancedApp.AdvancedApp.instance(); if (!deviceModeView.isDeviceModeOn()) { deviceModeView.toggleDeviceMode(); } } async function runLighthouse() { - // @ts-expect-error global - const panel = UI.panels.lighthouse || UI.panels.audits; + // @ts-expect-error import + const {LighthousePanel} = await import('./devtools-frontend/front_end/panels/lighthouse/lighthouse.js'); + const panel = LighthousePanel.LighthousePanel.instance(); /** @type {Promise<{lhr: LH.Result, artifacts: LH.Artifacts}>} */ const resultPromise = new Promise((resolve, reject) => { @@ -234,8 +227,10 @@ async function runLighthouse() { } function enableDevToolsThrottling() { - // @ts-expect-error global - const panel = UI.panels.lighthouse || UI.panels.audits; + // @ts-expect-error import + const {LighthousePanel} = await import('./devtools-frontend/front_end/panels/lighthouse/lighthouse.js'); + const panel = LighthousePanel.LighthousePanel.instance(); + const toolbarRoot = panel.contentElement.querySelector('.lighthouse-settings-pane .toolbar').shadowRoot; toolbarRoot.querySelector('option[value="devtools"]').selected = true; toolbarRoot.querySelector('select').dispatchEvent(new Event('change')); From 51b8659947b207dae536eea4316ddec2146804a6 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Wed, 4 Oct 2023 14:30:19 -0700 Subject: [PATCH 2/4] fix --- core/scripts/pptr-run-devtools.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/core/scripts/pptr-run-devtools.js b/core/scripts/pptr-run-devtools.js index 742cf5c7c4c7..affafee27549 100644 --- a/core/scripts/pptr-run-devtools.js +++ b/core/scripts/pptr-run-devtools.js @@ -104,7 +104,8 @@ async function waitForFunction(session, fn, deps) { while (true) { try { return await evaluateInSession(session, fn, deps); - } catch { + } catch (e) { + console.error(e); await new Promise(r => setTimeout(r, 500)); } } @@ -146,13 +147,13 @@ function addSniffer(receiver, methodName, override) { async function waitForLighthouseReady() { // @ts-expect-error import - const {ViewManager, DockController} = await import('./devtools-frontend/front_end/ui/legacy/legacy.js'); + const {ViewManager, DockController} = await import('./ui/legacy/legacy.js'); // @ts-expect-error import - const {LighthousePanel} = await import('./devtools-frontend/front_end/panels/lighthouse/lighthouse.js'); + const {LighthousePanel} = await import('./panels/lighthouse/lighthouse.js'); // @ts-expect-error import - const {TargetManager} = await import('./devtools-frontend/front_end/core/sdk/sdk.js'); + const {TargetManager} = await import('./core/sdk/sdk.js'); // @ts-expect-error import - const {AdvancedApp} = await import('./devtools-frontend/front_end/panels/emulation/emulation.js'); + const {AdvancedApp} = await import('./panels/emulation/emulation.js'); // Undocking later in the function can cause hiccups when Lighthouse enables device emulation. DockController.DockController.instance().setDockSide('undocked'); @@ -187,7 +188,7 @@ async function waitForLighthouseReady() { async function runLighthouse() { // @ts-expect-error import - const {LighthousePanel} = await import('./devtools-frontend/front_end/panels/lighthouse/lighthouse.js'); + const {LighthousePanel} = await import('./panels/lighthouse/lighthouse.js'); const panel = LighthousePanel.LighthousePanel.instance(); /** @type {Promise<{lhr: LH.Result, artifacts: LH.Artifacts}>} */ @@ -226,9 +227,9 @@ async function runLighthouse() { return resultPromise; } -function enableDevToolsThrottling() { +async function enableDevToolsThrottling() { // @ts-expect-error import - const {LighthousePanel} = await import('./devtools-frontend/front_end/panels/lighthouse/lighthouse.js'); + const {LighthousePanel} = await import('./panels/lighthouse/lighthouse.js'); const panel = LighthousePanel.LighthousePanel.instance(); const toolbarRoot = panel.contentElement.querySelector('.lighthouse-settings-pane .toolbar').shadowRoot; From 56b63653258a61a90e296ebd916771259c7864b6 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Wed, 4 Oct 2023 14:34:49 -0700 Subject: [PATCH 3/4] ope --- core/scripts/pptr-run-devtools.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/scripts/pptr-run-devtools.js b/core/scripts/pptr-run-devtools.js index affafee27549..00ab1e6f1e74 100644 --- a/core/scripts/pptr-run-devtools.js +++ b/core/scripts/pptr-run-devtools.js @@ -104,8 +104,7 @@ async function waitForFunction(session, fn, deps) { while (true) { try { return await evaluateInSession(session, fn, deps); - } catch (e) { - console.error(e); + } catch { await new Promise(r => setTimeout(r, 500)); } } From cda129a831de08223d43a5b5dd0bde6dfdb08b4d Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Wed, 4 Oct 2023 14:49:50 -0700 Subject: [PATCH 4/4] sample --- .../fixtures/user-flows/reports/sample-flow-result.json | 9 +++++++++ core/test/results/sample_v2.json | 3 +++ 2 files changed, 12 insertions(+) diff --git a/core/test/fixtures/user-flows/reports/sample-flow-result.json b/core/test/fixtures/user-flows/reports/sample-flow-result.json index 43ab24ddef6d..47d605d8e48d 100644 --- a/core/test/fixtures/user-flows/reports/sample-flow-result.json +++ b/core/test/fixtures/user-flows/reports/sample-flow-result.json @@ -1765,6 +1765,9 @@ "score": null, "scoreDisplayMode": "informative", "displayValue": "3 long tasks found", + "metricSavings": { + "TBT": 143 + }, "details": { "type": "table", "headings": [ @@ -9659,6 +9662,9 @@ "score": null, "scoreDisplayMode": "informative", "displayValue": "1 long task found", + "metricSavings": { + "TBT": 122.83299999999986 + }, "details": { "type": "table", "headings": [ @@ -19213,6 +19219,9 @@ "score": null, "scoreDisplayMode": "informative", "displayValue": "2 long tasks found", + "metricSavings": { + "TBT": 13 + }, "details": { "type": "table", "headings": [ diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json index 01dac7b23c55..80bf627e1fac 100644 --- a/core/test/results/sample_v2.json +++ b/core/test/results/sample_v2.json @@ -2502,6 +2502,9 @@ "score": null, "scoreDisplayMode": "informative", "displayValue": "2 long tasks found", + "metricSavings": { + "TBT": 1220.691999999999 + }, "details": { "type": "table", "headings": [