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 <[email protected]> Reviewed-By: Tierney Cyren <[email protected]> Reviewed-By: Chemi Atlow <[email protected]>
nodejs · Sep 28, 2023 · 8e033c3 · 8e033c3
1 parent 4126a6e
commit 8e033c3
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 18 deletions.
diff --git a/doc/api_assets/api.js b/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;

diff --git a/doc/api_assets/style.css b/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);
   }
 }
diff --git a/test/doctool/test-doctool-html.mjs b/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',
   },
 ];
 

diff --git a/tools/doc/buildCSSForFlavoredJS.mjs b/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;' +
       '}' +

diff --git a/tools/doc/html.mjs b/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">' +