Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Markdown] [ Web/API] Fix usages of <div class="hidden"> containing code blocks #7901

Closed
wbamberg opened this issue Aug 14, 2021 · 3 comments · Fixed by #7922
Closed

[Markdown] [ Web/API] Fix usages of <div class="hidden"> containing code blocks #7901

wbamberg opened this issue Aug 14, 2021 · 3 comments · Fixed by #7922
Labels
needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.

Comments

@wbamberg
Copy link
Collaborator

Part of #7898.

In preparing Web/API docs for Markdown conversion we'd like to remove occurrences of <div class="hidden">. There are two main usages of this pattern:

  1. to include comments for editors, like the comments attached to interactive examples
  2. to hide code blocks that the author wants to participate in live samples, but doesn't want the reader to see

This issue to about removing instances of the second category. The fix in this case is to:

  • move the hidden class from the <div> and attach it directly to the <pre> blocks that the <div> contains
  • delete any other stuff in the <div>, having checked that it's not important*
  • remove the <div> tags

This will work in Markdown because we support info strings on code blocks, and we will support hidden as a value in there: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Markdown_in_MDN#example_code_blocks.

For example, given this (from https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#examples):

<h2 id="Examples">Examples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">
...CSS content skipped for brevity...
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
...HTML content skipped for brevity...
</pre>

<div class="hidden">
<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">
...JS content skipped for brevity...
</pre>
</div>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples", 260, 290)}}</p>

...we would instead do:

<h2 id="Examples">Examples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">
...CSS content skipped for brevity...
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
...HTML content skipped for brevity...
</pre>

<pre class="brush: js hidden">
...JS content skipped for brevity...
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples", 260, 290)}}</p>
  • Note "delete any other stuff in the <div>, having checked that it's not important". The only case I can think of here is where the other stuff, such as headings, is providing an ID that the live sample can reference. Then deleting the heading will break the live sample.
@wbamberg wbamberg added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Aug 14, 2021
@wbamberg wbamberg mentioned this issue Aug 14, 2021
Closed
13 tasks
@wbamberg
Copy link
Collaborator Author

wbamberg commented Aug 14, 2021 •
edited
Loading

These are all the pages in Web/API in which a class="hidden" element contains at least one <pre> block, and are therefore probably in this category:

https://developer.mozilla.org/en-us/docs/web/api/background_tasks_api
https://developer.mozilla.org/en-us/docs/web/api/broadcastchannel/message_event
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/advanced_animations
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/applying_styles_and_colors
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/basic_animations
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/compositing
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/drawing_shapes
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/drawing_text
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/transformations
https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/using_images
https://developer.mozilla.org/en-us/docs/web/api/canvaspattern/settransform
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/addhitregion
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/arc
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/fillstyle
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/globalalpha
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/linecap
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/linedashoffset
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/linejoin
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/miterlimit
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/scrollpathintoview
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/strokestyle
https://developer.mozilla.org/en-us/docs/web/api/css_painting_api/guide
https://developer.mozilla.org/en-us/docs/web/api/css_properties_and_values_api/guide
https://developer.mozilla.org/en-us/docs/web/api/css_typed_om_api/guide
https://developer.mozilla.org/en-us/docs/web/api/document/domcontentloaded_event
https://developer.mozilla.org/en-us/docs/web/api/document/readystatechange_event
https://developer.mozilla.org/en-us/docs/web/api/document_object_model/whitespace
https://developer.mozilla.org/en-us/docs/web/api/effecttiming/fill
https://developer.mozilla.org/en-us/docs/web/api/element/auxclick_event
https://developer.mozilla.org/en-us/docs/web/api/element/compositionend_event
https://developer.mozilla.org/en-us/docs/web/api/element/compositionstart_event
https://developer.mozilla.org/en-us/docs/web/api/element/compositionupdate_event
https://developer.mozilla.org/en-us/docs/web/api/element/copy_event
https://developer.mozilla.org/en-us/docs/web/api/element/cut_event
https://developer.mozilla.org/en-us/docs/web/api/element/error_event
https://developer.mozilla.org/en-us/docs/web/api/element/paste_event
https://developer.mozilla.org/en-us/docs/web/api/filereader/abort_event
https://developer.mozilla.org/en-us/docs/web/api/filereader/load_event
https://developer.mozilla.org/en-us/docs/web/api/filereader/loadend_event
https://developer.mozilla.org/en-us/docs/web/api/filereader/loadstart_event
https://developer.mozilla.org/en-us/docs/web/api/filereader/progress_event
https://developer.mozilla.org/en-us/docs/web/api/geolocation_api/using_the_geolocation_api
https://developer.mozilla.org/en-us/docs/web/api/globaleventhandlers/onanimationcancel
https://developer.mozilla.org/en-us/docs/web/api/globaleventhandlers/onanimationiteration
https://developer.mozilla.org/en-us/docs/web/api/globaleventhandlers/onanimationstart
https://developer.mozilla.org/en-us/docs/web/api/html_dom_api/microtask_guide
https://developer.mozilla.org/en-us/docs/web/api/htmldialogelement/cancel_event
https://developer.mozilla.org/en-us/docs/web/api/htmldialogelement/close_event
https://developer.mozilla.org/en-us/docs/web/api/htmlelement/change_event
https://developer.mozilla.org/en-us/docs/web/api/htmlmediaelement/loadstart_event
https://developer.mozilla.org/en-us/docs/web/api/htmlmediaelement/progress_event
https://developer.mozilla.org/en-us/docs/web/api/intersection_observer_api
https://developer.mozilla.org/en-us/docs/web/api/media_streams_api/constraints
https://developer.mozilla.org/en-us/docs/web/api/mediadevices/getsupportedconstraints
https://developer.mozilla.org/en-us/docs/web/api/mediadevices/ondevicechange
https://developer.mozilla.org/en-us/docs/web/api/mediaquerylist/media
https://developer.mozilla.org/en-us/docs/web/api/mediastream_recording_api/recording_a_media_element
https://developer.mozilla.org/en-us/docs/web/api/mediastreamconstraints/audio
https://developer.mozilla.org/en-us/docs/web/api/mediastreamconstraints/video
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/aspectratio
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/autogaincontrol
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/channelcount
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/deviceid
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/echocancellation
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/facingmode
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/groupid
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/height
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/latency
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/noisesuppression
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/samplerate
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/samplesize
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/volume
https://developer.mozilla.org/en-us/docs/web/api/mediatracksupportedconstraints/width
https://developer.mozilla.org/en-us/docs/web/api/navigation_timing_api/using_navigation_timing
https://developer.mozilla.org/en-us/docs/web/api/node/isequalnode
https://developer.mozilla.org/en-us/docs/web/api/node/issamenode
https://developer.mozilla.org/en-us/docs/web/api/path2d/path2d
https://developer.mozilla.org/en-us/docs/web/api/range/commonancestorcontainer
https://developer.mozilla.org/en-us/docs/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode
https://developer.mozilla.org/en-us/docs/web/api/web_audio_api/simple_synth
https://developer.mozilla.org/en-us/docs/web/api/webgl_api/by_example/hello_glsl
https://developer.mozilla.org/en-us/docs/web/api/webgl_api/by_example/hello_vertex_attributes
https://developer.mozilla.org/en-us/docs/web/api/webgl_api/by_example/raining_rectangles
https://developer.mozilla.org/en-us/docs/web/api/webgl_api/by_example/scissor_animation
https://developer.mozilla.org/en-us/docs/web/api/webgl_api/by_example/textures_from_code
https://developer.mozilla.org/en-us/docs/web/api/window/error_event
https://developer.mozilla.org/en-us/docs/web/api/window/load_event
https://developer.mozilla.org/en-us/docs/web/api/window/matchmedia
https://developer.mozilla.org/en-us/docs/web/api/window/pageyoffset
https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest/abort_event
https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest/error_event
https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest/load_event
https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest/loadend_event
https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest/loadstart_event
https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest/progress_event

@dukecat0
Copy link
Contributor

I'll work on this issue.

@dukecat0 dukecat0 mentioned this issue Aug 14, 2021
Merged
@dukecat0
Copy link
Contributor

I've opened #7922 with a fix.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix usages of <div class="hidden"> containing code blocks
2 participants
@wbamberg @dukecat0