Provide a way to show dynamically inserted stylesheets, especially @font-face declarations |
|||
Issue descriptionWhile investigating a font bug ( issue 583450 ) on https://blogs.adobe.com/CCJKType/2015/06/typekit-dynamic-kits.html I dug in to see how the fonts for the CJK example in the center of the page are inserted. Turns out the TypeKit JS inserts additional stylesheets into the page, one for the classes that are applied to the CJK examples, and one for the @font-face declarations used in those. document.styleSheets[2].cssRules[0]: CSSStyleRule {selectorText: ".tk-adobe-clean", style: CSSStyleDeclaration, type: 1, cssText: ".tk-adobe-clean { font-family: adobe-clean, sans-serif; }", parentRule: null…} document.styleSheets[3].cssRules[0].cssText: "@font-face { font-family: adobe-clean; font-style: normal; font-weight: 300; unicode-range: U+20-7E, U+A0-FF, U+152-153, U+178, U+2BC, U+2DC, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122; src: url("data:font/opentype;base64,d09GMk9UVE8A[...] } I needed to check which unicode-range: values are used for these fonts. But I did not find a way to show these @font-face declarations in the Inspector anywhere. The dynamically inserted stylesheets do not show up in the resource panel. This is related to issue 557471 that I reported earlier.
,
Mar 22 2016
Thanks caseq@, I took a look at inspecting DevTools themselves, and i see a set of stylesheets under (no domain), etc.
However, may I reopen this? The TypeKit JS dynamically inserts custom generated rules into a newly created CSSStyleSheet JS object using insertRule() (where S is a style element, created with document.createElement("style"):
S.sheet.insertRule('@font-face{font-family:"' + a.family + '";font-style:' + a.style + ";font-weight:" + a.weight + ";unicode-range:" + a.unicodeRange + ";src:" + b + ";}", 0);
How would those made visible in the Sources panel? Where would the sourceURL hint have to go in this case (if that's supported)? I believe the sourceURL augmentation only works with stylesheets that are injected using createElement, then setting .innerText on them, with the sourceURL comment at the end, is that right?
At the moment, I believe, stylesheets as above, created with insertRule, can only be inspected via the console through traversing the document.styleSheets object manually, e.g.
document.styleSheets[3].cssRules[7]. Through the DevTools UI, I have no means of navigating to the .tk-adobe-clean class declaration, or to the @font-face declaration for font-family: adobe clean.
,
Jun 20 2016
@drott: it seems like CSSOM (document.styleSheets) is the best tool for the job. We can't surface entire runtime CSS model in dedicated UI - it would not scale.
,
Jun 21 2016
Agree that exposing the whole CSSOM world would not scale - but my focus was on in some form showing the source/origin of used fonts. In the Computed Style panel, at the bottom only a font name is shown and whether it's local or remote. My intention was to improve font matching debugging by showing additional information about the font-face declaration for the selected font. Perhaps this feedback can be taken into consideration for further improvements later - thanks.
,
Jun 23 2016
You could do that as a part of the devtools code - we have much more flexibility internally and are not hesitant providing more information about fonts. |
|||
►
Sign in to add a comment |
|||
Comment 1 by caseq@chromium.org
, Mar 17 2016Owner: pfeldman@chromium.org
Status: WontFix (was: Untriaged)