Migration to <style> complete

[Benedikt Meurer]

Hey folks,

With a bit of delay we finished the migration of our CSS loading approach to always inject explicitly via <style> tags, with the exception of some global CSS files that are added via <link> elements to the document (crbug/391381439, goo.gle/devtools-unified-css-design).

Going forward we don't use document.adoptedStyleSheets or element.shadowRoot.adoptedStyleSheets anymore. In particular with the way we envision to create UI in DevTools in the future, we need to inject the <style> tag as part of the template in the View function, such that it can be screenshot tested (if needed).

A great example of how this should work can be found in RequestHTMLView.ts:

import requestHTMLViewStyles from './requestHTMLView.css.js';

...

export const DEFAULT_VIEW: View = (input, _output, target) => {
  // clang-format off
  render(html`
    <style>${requestHTMLViewStyles}</style>
    <div class="html request-view">

    ...
    </div>`,
    target, {host: input});
  // clang-format on
};

Please reach out if you have any questions.

cheers,

Benedikt

--

Benedikt Meurer

Chromium Tooling TL

bme...@chromium.org

Google Germany GmbH

Erika-Mann-Straße 33

80636 München

Geschäftsführer: Paul Manicle, Liana Sebastian

Registergericht und -nummer: Hamburg, HRB 86891

Sitz der Gesellschaft: Hamburg

Diese E-Mail ist vertraulich. Falls Sie diese fälschlicherweise erhalten haben sollten, leiten Sie diese bitte nicht an jemand anderes weiter, löschen Sie alle Kopien und Anhänge davon und lassen Sie mich bitte wissen, dass die E-Mail an die falsche Person gesendet wurde. 

     

This e-mail is confidential. If you received this communication by mistake, please don't forward it to anyone else, please erase all copies and attachments, and please let me know that it has gone to the wrong person.