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 <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

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",

front_end/core/root/Runtime.ts

@@ -337,14 +337,6 @@ export function loadResourcePromise(url: string): Promise<string> {
 // This must be constructed after the query parameters have been parsed.
 export const experiments = new ExperimentsSupport();
 
-export const cachedResources = new Map<string, string>();
-
-// 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 {

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",
   ]

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<void> {
+export async function setup(): Promise<void> {
   const setting = {
     get() {
       return 'default';
     },
   } as Common.Settings.Setting<string>;
   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);
 }

front_end/ui/components/helpers/get-stylesheet.ts

@@ -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<string, {sheets: CSSStyleSheet[]}>();
-
-/**
- * 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',
-];

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,
 };

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);
   }

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);
   }
 

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 {

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;
   }

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);
 }

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;

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(() => {