doc: rename possibly confusing variable and CSS class

A "selector" usually refers to a CSS selector, when here it refers to a
checkbox.
PR-URL: #49536
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
Reviewed-By: Tierney Cyren <hello@bnb.im>
Reviewed-By: Chemi Atlow <chemi@atlow.co.il>

Author: aduh95

doc/api_assets/api.js

@@ -142,12 +142,12 @@
 button.addEventListener('click',(el)=>{
 constparentNode=el.target.parentNode;
 
-constflavorSelector=parentNode.querySelector('.js-flavor-selector');
+constflavorToggle=parentNode.querySelector('.js-flavor-toggle');
 
 letcode='';
 
-if(flavorSelector){
-if(flavorSelector.checked){
+if(flavorToggle){
+if(flavorToggle.checked){
 code=parentNode.querySelector('.mjs').textContent;
 }else{
 code=parentNode.querySelector('.cjs').textContent;

doc/api_assets/style.css

@@ -950,7 +950,7 @@ kbd {
 display: block;
 }
 
-.js-flavor-selector {
+.js-flavor-toggle {
 -webkit-appearance: none;
 appearance: none;
 float: right;
@@ -963,14 +963,14 @@ kbd {
 cursor: pointer;
 margin:0;
 }
-.js-flavor-selector:checked {
+.js-flavor-toggle:checked {
 background-image: url(./js-flavor-esm.svg);
 }
-.js-flavor-selector:not(:checked) ~ .mjs,
-.js-flavor-selector:checked~ .cjs {
+.js-flavor-toggle:not(:checked) ~ .mjs,
+.js-flavor-toggle:checked~ .cjs {
 display: none;
 }
-.dark-mode .js-flavor-selector {
+.dark-mode .js-flavor-toggle {
 filter:invert(1);
 }
 
@@ -1001,7 +1001,7 @@ kbd {
 }
 
 @supports (aspect-ratio:1/1) {
- .js-flavor-selector {
+ .js-flavor-toggle {
 height:1.5em;
 width: auto;
 aspect-ratio:2719/384;
@@ -1058,24 +1058,24 @@ kbd {
 #apicontent {
 overflow: hidden;
  }
- .js-flavor-selector {
+ .js-flavor-toggle {
 display: none;
  }
- .js-flavor-selector+* {
+ .js-flavor-toggle+* {
 margin-bottom:2rem;
 padding-bottom:2rem;
 border-bottom:1px solid var(--color-text-primary);
  }
- .js-flavor-selector~* {
+ .js-flavor-toggle~* {
 display: block !important;
 background-position: top right;
 background-size:142px20px;
 background-repeat: no-repeat;
  }
- .js-flavor-selector~ .cjs {
+ .js-flavor-toggle~ .cjs {
 background-image: url(./js-flavor-cjs.svg);
  }
- .js-flavor-selector~ .mjs {
+ .js-flavor-toggle~ .mjs {
 background-image: url(./js-flavor-esm.svg);
  }
 }

test/doctool/test-doctool-html.mjs

@@ -138,11 +138,11 @@ const testData = [
 },
 {
 file: fixtures.path('document_with_esm_and_cjs_code_snippet.md'),
-html: '<input class="js-flavor-selector" type="checkbox" checked',
+html: '<input class="js-flavor-toggle" type="checkbox" checked',
 },
 {
 file: fixtures.path('document_with_cjs_and_esm_code_snippet.md'),
-html: '<input class="js-flavor-selector" type="checkbox" aria-label',
+html: '<input class="js-flavor-toggle" type="checkbox" aria-label',
 },
 ];
 

tools/doc/buildCSSForFlavoredJS.mjs

@@ -45,7 +45,7 @@ export default function buildCSSForFlavoredJS(dynamicSizes) {
 `@media(max-width:${getMarginLeft(charCount)+getPaddingLeft(charCount)+
 charCount*ESTIMATED_CHAR_WIDTH+TOGGLE_WIDTH+
 getPaddingRight(charCount)+getMarginRight(charCount)}px){`+
-`.with-${charCount}-chars>.js-flavor-selector{`+
+`.with-${charCount}-chars>.js-flavor-toggle{`+
 'float:none;'+
 'margin:0 0 1em auto;'+
 '}'+

tools/doc/html.mjs

@@ -250,7 +250,7 @@ export function preprocessElements({ filename }) {
 constactualCharCount=Math.max(charCountFirstTwoLines,previousNode.charCountFirstTwoLines);
 (dynamicSizes[filename]??=newSet()).add(actualCharCount);
 node.value=`<pre class="with-${actualCharCount}-chars">`+
-'<input class="js-flavor-selector" type="checkbox"'+
+'<input class="js-flavor-toggle" type="checkbox"'+
 // If CJS comes in second, ESM should display by default.
 (node.lang==='cjs' ? ' checked' : '')+
 ' aria-label="Show modern ES modules syntax">'+