ui.js (1988B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ 4 5 /* Checks to see if the root element is available and 6 * if the element is visible. We check the width of the element 7 * because it is more reliable than either checking a focus state or 8 * the visibleState or hidden property. 9 */ 10 export function isVisible() { 11 const el = document.querySelector("#mount"); 12 return !!(el && el.getBoundingClientRect().width > 0); 13 } 14 15 /* Gets the line numbers width in the code editor 16 */ 17 export function getLineNumberWidth(editor) { 18 const { gutters } = editor.display; 19 const lineNumbers = gutters.querySelector(".CodeMirror-linenumbers"); 20 return lineNumbers?.clientWidth; 21 } 22 23 /** 24 * Forces the breakpoint gutter to be the same size as the line 25 * numbers gutter. Editor CSS will absolutely position the gutter 26 * beneath the line numbers. This makes it easy to be flexible with 27 * how we overlay breakpoints. 28 */ 29 export function resizeBreakpointGutter(editor) { 30 const { gutters } = editor.display; 31 const breakpoints = gutters.querySelector(".breakpoints"); 32 if (breakpoints) { 33 breakpoints.style.width = `${getLineNumberWidth(editor)}px`; 34 } 35 } 36 37 /** 38 * Updates CSS variables to reflect the current dimensions of the editor 39 * and its gutter. 40 * This is used to force the left toggle button in source header to be the same size 41 * as the line numbers gutter, and to properly position the conditional panel. 42 */ 43 export function updateEditorSizeCssVariables(cmEditorEl) { 44 document.documentElement.style.setProperty( 45 "--cm-gutter-width", 46 `${cmEditorEl.querySelector(".cm-gutters").clientWidth}px` 47 ); 48 document.documentElement.style.setProperty( 49 "--cm-editor-scroller-width", 50 // We want the scroller width *without* a possible vertical scrollbar 51 `${cmEditorEl.querySelector(".cm-scroller").clientWidth}px` 52 ); 53 }