summaryrefslogtreecommitdiffstats
path: root/devtools/client/debugger/src/utils/ui.js
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--devtools/client/debugger/src/utils/ui.js48
1 files changed, 48 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/utils/ui.js b/devtools/client/debugger/src/utils/ui.js
new file mode 100644
index 0000000000..eab5bb1e07
--- /dev/null
+++ b/devtools/client/debugger/src/utils/ui.js
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+/* Checks to see if the root element is available and
+ * if the element is visible. We check the width of the element
+ * because it is more reliable than either checking a focus state or
+ * the visibleState or hidden property.
+ */
+export function isVisible() {
+ const el = document.querySelector("#mount");
+ return !!(el && el.getBoundingClientRect().width > 0);
+}
+
+/* Gets the line numbers width in the code editor
+ */
+export function getLineNumberWidth(editor) {
+ const { gutters } = editor.display;
+ const lineNumbers = gutters.querySelector(".CodeMirror-linenumbers");
+ return lineNumbers?.clientWidth;
+}
+
+/**
+ * Forces the breakpoint gutter to be the same size as the line
+ * numbers gutter. Editor CSS will absolutely position the gutter
+ * beneath the line numbers. This makes it easy to be flexible with
+ * how we overlay breakpoints.
+ */
+export function resizeBreakpointGutter(editor) {
+ const { gutters } = editor.display;
+ const breakpoints = gutters.querySelector(".breakpoints");
+ if (breakpoints) {
+ breakpoints.style.width = `${getLineNumberWidth(editor)}px`;
+ }
+}
+
+/**
+ * Forces the left toggle button in source header to be the same size
+ * as the line numbers gutter.
+ */
+export function resizeToggleButton(editor) {
+ const toggleButton = document.querySelector(
+ ".source-header .toggle-button-start"
+ );
+ if (toggleButton) {
+ toggleButton.style.width = `${getLineNumberWidth(editor)}px`;
+ }
+}