From d4e3f3d23b7e00a07edf94aa1bf8faa4daaf49dc Mon Sep 17 00:00:00 2001 From: Tim van der Lippe Date: Thu, 2 Dec 2021 12:56:14 +0000 Subject: [PATCH] Cleanup cached resources These resources were taken from the "resources" as defined in the now-removed `module.json` files. This allows us to cleanup a fair bit of infra related to setting up these files. R=jacktfranklin@chromium.org Bug: 1190991 Change-Id: I742df97c3104c76a23e76014f71f24541d237fad Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3313062 Commit-Queue: Tim Van der Lippe Reviewed-by: Jack Franklin --- config/gni/devtools_grd_files.gni | 1 - front_end/core/root/Runtime.ts | 8 ---- front_end/ui/components/helpers/BUILD.gn | 1 - .../helpers/component-server-setup.ts | 13 +----- .../ui/components/helpers/get-stylesheet.ts | 45 ------------------- front_end/ui/components/helpers/helpers.ts | 2 - front_end/ui/legacy/GlassPane.ts | 2 +- front_end/ui/legacy/Treeoutline.ts | 2 +- front_end/ui/legacy/Widget.ts | 2 +- front_end/ui/legacy/XWidget.ts | 5 --- front_end/ui/legacy/utils/append-style.ts | 15 +------ .../create-shadow-root-with-core-styles.ts | 12 ++--- .../front_end/test_setup/test_setup.ts | 41 ----------------- 13 files changed, 13 insertions(+), 136 deletions(-) delete mode 100644 front_end/ui/components/helpers/get-stylesheet.ts diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index c0a5ba80c3..7f2f9d5336 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -1313,7 +1313,6 @@ grd_files_debug_sources = [ "front_end/ui/components/helpers/custom-elements.js", "front_end/ui/components/helpers/directives.js", "front_end/ui/components/helpers/get-root-node.js", - "front_end/ui/components/helpers/get-stylesheet.js", "front_end/ui/components/helpers/scheduled-render.js", "front_end/ui/components/helpers/set-css-property.js", "front_end/ui/components/icon_button/Icon.js", diff --git a/front_end/core/root/Runtime.ts b/front_end/core/root/Runtime.ts index 84e146a750..b1086017d7 100644 --- a/front_end/core/root/Runtime.ts +++ b/front_end/core/root/Runtime.ts @@ -337,14 +337,6 @@ export function loadResourcePromise(url: string): Promise { // This must be constructed after the query parameters have been parsed. export const experiments = new ExperimentsSupport(); -export const cachedResources = new Map(); - -// Only exported for LightHouse, which uses it in `report-generator.js`. -// Do not use this global in DevTools' implementation. -// TODO(crbug.com/1127292): remove this global -// @ts-ignore -globalThis.EXPORTED_CACHED_RESOURCES_ONLY_FOR_LIGHTHOUSE = cachedResources; - // TODO(crbug.com/1167717): Make this a const enum again // eslint-disable-next-line rulesdir/const_enum export enum ExperimentName { diff --git a/front_end/ui/components/helpers/BUILD.gn b/front_end/ui/components/helpers/BUILD.gn index 34f068a6fb..24d81397d1 100644 --- a/front_end/ui/components/helpers/BUILD.gn +++ b/front_end/ui/components/helpers/BUILD.gn @@ -14,7 +14,6 @@ devtools_module("helpers") { "custom-elements.ts", "directives.ts", "get-root-node.ts", - "get-stylesheet.ts", "scheduled-render.ts", "set-css-property.ts", ] diff --git a/front_end/ui/components/helpers/component-server-setup.ts b/front_end/ui/components/helpers/component-server-setup.ts index 07fd3ab2f2..e24eab21d0 100644 --- a/front_end/ui/components/helpers/component-server-setup.ts +++ b/front_end/ui/components/helpers/component-server-setup.ts @@ -3,28 +3,17 @@ // found in the LICENSE file. import type * as Common from '../../../core/common/common.js'; -import * as Root from '../../../core/root/root.js'; import * as ThemeSupport from '../../legacy/theme_support/theme_support.js'; -import {CSS_RESOURCES_TO_LOAD_INTO_RUNTIME} from './get-stylesheet.js'; - /** * Houses any setup required to run the component docs server. Currently this is * only populating the runtime CSS cache but may be extended in the future. */ -export async function setup(resourcesPrefix = ''): Promise { +export async function setup(): Promise { const setting = { get() { return 'default'; }, } as Common.Settings.Setting; ThemeSupport.ThemeSupport.instance({forceNew: true, setting}); - - const allPromises = CSS_RESOURCES_TO_LOAD_INTO_RUNTIME.map(resourcePath => { - return fetch(resourcesPrefix + '/front_end/' + resourcePath).then(response => response.text()).then(cssText => { - Root.Runtime.cachedResources.set(resourcePath, cssText); - }); - }); - - await Promise.all(allPromises); } diff --git a/front_end/ui/components/helpers/get-stylesheet.ts b/front_end/ui/components/helpers/get-stylesheet.ts deleted file mode 100644 index 890d0c1d2e..0000000000 --- a/front_end/ui/components/helpers/get-stylesheet.ts +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright 2020 The Chromium Authors. All rights reserved. -// Use of this source code is governed by a BSD-style license that can be -// found in the LICENSE file. - -import * as Root from '../../../core/root/root.js'; - -const sheetsCache = new Map(); - -/** - * Helper for importing a legacy stylesheet into a component. - * - * Given a path to a stylesheet, it returns a CSSStyleSheet that can then be - * adopted by your component. - */ -export function legacyGetStyleSheets(path: string): CSSStyleSheet[] { - const cachedResult = sheetsCache.get(path); - if (cachedResult) { - return cachedResult.sheets; - } - - const content = Root.Runtime.cachedResources.get(path) || ''; - if (!content) { - throw new Error(`${path} not preloaded.`); - } - const originalStylesheet = new CSSStyleSheet(); - originalStylesheet.replaceSync(content); - sheetsCache.set(path, {sheets: [originalStylesheet]}); - return [originalStylesheet]; -} - -/* - * This is now legacy. Please do not add any more CSS Files to this list. Refer to - * https://crbug.com/1106746 for the new way of implementing CSS in DevTools. - * - * The legacyGetStylesheet helper in components reads styles out of the runtime cache. - * In a proper build this is populated but in test runs because we don't load - * all of DevTools it's not. Therefore we fetch the required CSS files and populate - * the cache before any tests are run. - * - * The out/Release/gen/front_end URL is prepended so within the Karma config we can proxy - * them through to the right place, respecting Karma's ROOT_DIRECTORY setting. - */ -export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [ - 'panels/application/serviceWorkerUpdateCycleView.css', -]; diff --git a/front_end/ui/components/helpers/helpers.ts b/front_end/ui/components/helpers/helpers.ts index d3adb4b79c..29e6032c38 100644 --- a/front_end/ui/components/helpers/helpers.ts +++ b/front_end/ui/components/helpers/helpers.ts @@ -6,7 +6,6 @@ import * as ComponentServerSetup from './component-server-setup.js'; import * as CustomElements from './custom-elements.js'; import * as Directives from './directives.js'; import * as GetRootNode from './get-root-node.js'; -import * as LegacyGetStylesheet from './get-stylesheet.js'; import * as ScheduledRender from './scheduled-render.js'; import * as SetCSSProperty from './set-css-property.js'; @@ -15,7 +14,6 @@ export { CustomElements, Directives, GetRootNode, - LegacyGetStylesheet, ScheduledRender, SetCSSProperty, }; diff --git a/front_end/ui/legacy/GlassPane.ts b/front_end/ui/legacy/GlassPane.ts index dfbdb3d367..51beee2f50 100644 --- a/front_end/ui/legacy/GlassPane.ts +++ b/front_end/ui/legacy/GlassPane.ts @@ -55,7 +55,7 @@ export class GlassPane { return this.widgetInternal.isShowing(); } - registerRequiredCSS(cssFile: string|{cssContent: string}): void { + registerRequiredCSS(cssFile: {cssContent: string}): void { // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746 this.widgetInternal.registerRequiredCSS(cssFile); } diff --git a/front_end/ui/legacy/Treeoutline.ts b/front_end/ui/legacy/Treeoutline.ts index 201a5a5f7e..b3c86584bb 100644 --- a/front_end/ui/legacy/Treeoutline.ts +++ b/front_end/ui/legacy/Treeoutline.ts @@ -399,7 +399,7 @@ export class TreeOutlineInShadow extends TreeOutline { this.renderSelection = true; } - registerRequiredCSS(cssFile: string|{cssContent: string}): void { + registerRequiredCSS(cssFile: {cssContent: string}): void { Utils.appendStyle(this.shadowRoot, cssFile); } diff --git a/front_end/ui/legacy/Widget.ts b/front_end/ui/legacy/Widget.ts index ae22fde5f7..10f082fd1b 100644 --- a/front_end/ui/legacy/Widget.ts +++ b/front_end/ui/legacy/Widget.ts @@ -458,7 +458,7 @@ export class Widget { this.doResize(); } - registerRequiredCSS(cssFile: string|{cssContent: string}): void { + registerRequiredCSS(cssFile: {cssContent: string}): void { if (this.isWebComponent) { Utils.appendStyle((this.shadowRoot as DocumentFragment), cssFile); } else { diff --git a/front_end/ui/legacy/XWidget.ts b/front_end/ui/legacy/XWidget.ts index cd5ef67cb0..81eae5ad74 100644 --- a/front_end/ui/legacy/XWidget.ts +++ b/front_end/ui/legacy/XWidget.ts @@ -3,7 +3,6 @@ // found in the LICENSE file. import * as ComponentHelpers from '../components/helpers/helpers.js'; -import * as Utils from './utils/utils.js'; import {XElement} from './XElement.js'; @@ -55,10 +54,6 @@ export class XWidget extends XElement { return this.visible; } - registerRequiredCSS(cssFile: string): void { - Utils.appendStyle(this.shadowRootInternal || this, cssFile); - } - setOnShown(callback: (() => void)|null): void { this.onShownCallback = callback; } diff --git a/front_end/ui/legacy/utils/append-style.ts b/front_end/ui/legacy/utils/append-style.ts index e615abd5f2..661f2f7f1b 100644 --- a/front_end/ui/legacy/utils/append-style.ts +++ b/front_end/ui/legacy/utils/append-style.ts @@ -2,19 +2,8 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import * as Root from '../../../core/root/root.js'; - -export function appendStyle(node: Node, cssReference: string|{cssContent: string}): void { - let content: string; - if (typeof cssReference === 'string') { - content = Root.Runtime.cachedResources.get(cssReference) || ''; - if (!content) { - console.error(cssReference + ' not preloaded. Check module.json'); - } - } else { - content = cssReference.cssContent; - } +export function appendStyle(node: Node, {cssContent}: {cssContent: string}): void { const styleElement = document.createElement('style'); - styleElement.textContent = content; + styleElement.textContent = cssContent; node.appendChild(styleElement); } diff --git a/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts b/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts index 4a71500ed6..7300e22bfb 100644 --- a/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts +++ b/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts @@ -7,7 +7,7 @@ import {focusChanged} from './focus-changed.js'; import {injectCoreStyles} from './inject-core-styles.js'; interface Options { - cssFile?: string|CSSStyleSheet[]|{cssContent: string}; + cssFile?: CSSStyleSheet[]|{cssContent: string}; delegatesFocus?: boolean; } @@ -22,10 +22,12 @@ export function createShadowRootWithCoreStyles(element: Element, options: Option const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus}); injectCoreStyles(shadowRoot); - if (typeof cssFile === 'string' || (cssFile !== undefined && 'cssContent' in cssFile)) { - appendStyle(shadowRoot, cssFile); - } else if (cssFile) { - shadowRoot.adoptedStyleSheets = cssFile; + if (cssFile) { + if ('cssContent' in cssFile) { + appendStyle(shadowRoot, cssFile); + } else { + shadowRoot.adoptedStyleSheets = cssFile; + } } shadowRoot.addEventListener('focus', focusChanged, true); return shadowRoot; diff --git a/test/unittests/front_end/test_setup/test_setup.ts b/test/unittests/front_end/test_setup/test_setup.ts index ca65caedb0..f3ac4e10af 100644 --- a/test/unittests/front_end/test_setup/test_setup.ts +++ b/test/unittests/front_end/test_setup/test_setup.ts @@ -7,55 +7,14 @@ * loads and injects all *.js files it finds. */ import type * as Common from '../../../../front_end/core/common/common.js'; -import * as Root from '../../../../front_end/core/root/root.js'; -import * as ComponentHelpers from '../../../../front_end/ui/components/helpers/helpers.js'; import * as ThemeSupport from '../../../../front_end/ui/legacy/theme_support/theme_support.js'; import {resetTestDOM} from '../helpers/DOMHelpers.js'; beforeEach(resetTestDOM); -interface KarmaConfig { - config: {targetDir: string}; -} - before(async function() { - /* This value comes from the `client.targetDir` setting in `karma.conf.js` */ - // eslint-disable-next-line @typescript-eslint/naming-convention - const {targetDir} = ((globalThis as unknown as {__karma__: KarmaConfig}).__karma__).config; - /* Larger than normal timeout because we've seen some slowness on the bots */ this.timeout(10000); - - /* - * This is now legacy. We only use this to load in the required legacy CSS files. Refer to - * https://crbug.com/1106746 for the new way of implementing CSS in DevTools. - * - * The legacyGetStylesheet helper in components reads styles out of the runtime cache. - * In a proper build this is populated but in test runs because we don't load - * all of DevTools it's not. Therefore we fetch the required CSS files and populate - * the cache before any tests are run. - * - * The out/Release/gen/front_end URL is prepended so within the Karma config we can proxy - * them through to the right place, respecting Karma's ROOT_DIRECTORY setting. - */ - const allPromises = ComponentHelpers.LegacyGetStylesheet.CSS_RESOURCES_TO_LOAD_INTO_RUNTIME.map(resourcePath => { - const pathWithKarmaPrefix = `/base/${targetDir}/front_end/${resourcePath}`; - return fetch(pathWithKarmaPrefix) - .then(response => { - if (response.status > 399) { - throw new Error(`Error preloading CSS file: ${pathWithKarmaPrefix}: ${response.status}`); - } - return response.text(); - }) - .then(cssText => { - Root.Runtime.cachedResources.set(resourcePath, cssText); - }); - }); - return Promise.all(allPromises); -}); - -after(() => { - Root.Runtime.cachedResources.clear(); }); beforeEach(() => {