Fix .tsmb-icon-close to not rely on inline style attribute
#3
Conversation
This file contains 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
Krinkle
force-pushed
the
close-without-unsafe-inline
branch
from
d4e8a11
to
54afc52
Compare
This makes the web component compatible with a stict CSP setting, without granting `style-src unsafe-inline`, and without hardcoding a hash of the exact `display: none;` value.
timmywil
approved these changes
Aug 23, 2024
Krinkle
added a commit
that referenced
this pull request
Aug 24, 2024
Prevent future regressions. Ref #3. Ref jquery/infrastructure-puppet#54
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This makes the web component compatible with a stict CSP setting, without granting
style-src unsafe-inline, and without hardcoding a hash of the exactdisplay: none;value.This has been there since the initial commit. This was factored out of the QUnit website theme originally, and I think I had an idea at some point to make it generated by an HTML template (e.g. Mustache, or something else in Ruby or PHP) where the HTML form should render correctly even without CSS or JS present, so that it is safe to embed in content that may be rendered in e.g. an RSS Feed reader, or Safari Reader mode, without a confusing "x" rendered there when site resources aren't applied. I ended up abandoning this in favour of making it a web component with minimal HTML markup, and instead render anything that only matters to JS, inside JS. This makes it easier to install and upgrade as well.
Anyway, that means we don't need this inline style. We can expect that if a context requested the JS, it also requested the CSS. And we support JS in fewer browsers than the CSS (progressive enhancement, cut the mustard), not the other way around.
Alternatives
I considered the
hiddenattribute, but this doesn't work for<svg>. And, would have the downside of requiring us to hardcodeblockwhich is totally fine for this, but ever so slightly something I'd generally avoid in favour of only encoding how to hide it, since how to show it is already known by default and may vary between different elements.Ref jquery/infrastructure-puppet#54.
Ref jquery/infrastructure-puppet#57.