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) => {
         const parentNode = el.target.parentNode;
 
-        const flavorSelector = parentNode.querySelector('.js-flavor-selector');
+        const flavorToggle = parentNode.querySelector('.js-flavor-toggle');
 
         let code = '';
 
-        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: 142px 20px;
     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 }) {
             const actualCharCount = Math.max(charCountFirstTwoLines, previousNode.charCountFirstTwoLines);
             (dynamicSizes[filename] ??= new Set()).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">' +