Pass the correct sourceURLs to DevTools for constructed stylesheets #29408
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
wpt-pr-bot
approved these changes
Jun 17, 2021
chromium-wpt-export-bot
changed the title
chromium-wpt-export-bot
force-pushed
the
chromium-export-cl-2964539
branch
3 times, most recently
from
f692102 to
a80fc71
Compare
A CSSStyleSheet imported as a CSS module script has the constructed flag set (https://wicg.github.io/construct-stylesheets/#cssstylesheet-constructed-flag). This is because it is useful to treat imported CSSStyleSheets the same way as stylesheets created via `new`. For example we want to be able to add both to document.adoptedStyleSheets, and we want both to treat @import rules the same way. However, we want DevTools to display them differently. Sheets created with `new` don't have a source file to show, but imported sheets do, so we want the latter to be shown more like "normal" stylesheets. To enable DevTools to tell these types of constructed stylesheets apart, start passing an empty sourceURL to DevTools for constructed stylesheets created by `new`. The corresponding frontend change https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2964580 will check for an empty sourceURL to determine whether to try to link the stylesheet to a source file or not. Additionally, a CSSStyleSheet for a module import now stores the URL of the module request as its base URL. This is later passed to DevTools as the source URL of the stylesheet. This works because the base URL and source URL for a CSS module script are always the same. This also happens to fix a bug with resolution of relative URLs in CSS modules. The previous behavior was to resolve these using the URL of the importing document. The new, correct, behavior is to resolve them using the URL of the stylesheet resource. Bug: 1219441 Change-Id: I48de349e1f7c8e10a329bff016cef68ac9901bb6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2964539 Reviewed-by: Andrey Kosyakov <[email protected]> Reviewed-by: Kouhei Ueno <[email protected]> Reviewed-by: Alex Rudenko <[email protected]> Reviewed-by: Sigurd Schneider <[email protected]> Commit-Queue: Dan Clark <[email protected]> Cr-Commit-Position: refs/heads/master@{#894456}
chromium-wpt-export-bot
force-pushed
the
chromium-export-cl-2964539
branch
from
a80fc71 to
d6c0330
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A CSSStyleSheet imported as a CSS module script has the constructed
flag set
(https://wicg.github.io/construct-stylesheets/#cssstylesheet-constructed-flag).
This is because it is useful to treat imported CSSStyleSheets the same
way as stylesheets created via
new. For example we want to be ableto add both to document.adoptedStyleSheets, and we want both to treat
@import rules the same way.
However, we want DevTools to display them differently. Sheets
created with
newdon't have a source file to show, but importedsheets do, so we want the latter to be shown more like "normal"
stylesheets.
To enable DevTools to tell these types of constructed stylesheets apart,
start passing an empty sourceURL to DevTools for constructed stylesheets
created by
new. The corresponding frontend changehttps://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2964580
will check for an empty sourceURL to determine whether to try to link
the stylesheet to a source file or not.
Additionally, a CSSStyleSheet for a module import now stores the
URL of the module request as its base URL. This is later passed to
DevTools as the source URL of the stylesheet. This works because the
base URL and source URL for a CSS module script are always the same.
This also happens to fix a bug with resolution of relative URLs in
CSS modules. The previous behavior was to resolve these using the URL
of the importing document. The new, correct, behavior is to resolve
them using the URL of the stylesheet resource.
Bug: 1219441
Change-Id: I48de349e1f7c8e10a329bff016cef68ac9901bb6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2964539
Reviewed-by: Andrey Kosyakov <[email protected]>
Reviewed-by: Kouhei Ueno <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Sigurd Schneider <[email protected]>
Commit-Queue: Dan Clark <[email protected]>
Cr-Commit-Position: refs/heads/master@{#894456}