summaryrefslogtreecommitdiffstats
path: root/devtools/client/debugger/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/debugger/src/components')
-rw-r--r--devtools/client/debugger/src/components/Editor/Breakpoint.js2
-rw-r--r--devtools/client/debugger/src/components/Editor/Breakpoints.css27
-rw-r--r--devtools/client/debugger/src/components/Editor/Breakpoints.js114
-rw-r--r--devtools/client/debugger/src/components/Editor/DebugLine.js63
-rw-r--r--devtools/client/debugger/src/components/Editor/Editor.css25
-rw-r--r--devtools/client/debugger/src/components/Editor/Exceptions.js49
-rw-r--r--devtools/client/debugger/src/components/Editor/index.js145
-rw-r--r--devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js3
-rw-r--r--devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css1
9 files changed, 366 insertions, 63 deletions
diff --git a/devtools/client/debugger/src/components/Editor/Breakpoint.js b/devtools/client/debugger/src/components/Editor/Breakpoint.js
index 4559a20289..40de6d47c7 100644
--- a/devtools/client/debugger/src/components/Editor/Breakpoint.js
+++ b/devtools/client/debugger/src/components/Editor/Breakpoint.js
@@ -59,7 +59,7 @@ class Breakpoint extends PureComponent {
selectedSource,
} = this.props;
- // ignore right clicks
+ // ignore ctrl + click and right clicks when clicking on the breakpoint
if ((event.ctrlKey && event.button === 0) || event.button === 2) {
return;
}
diff --git a/devtools/client/debugger/src/components/Editor/Breakpoints.css b/devtools/client/debugger/src/components/Editor/Breakpoints.css
index 1269f73f82..92121e0f46 100644
--- a/devtools/client/debugger/src/components/Editor/Breakpoints.css
+++ b/devtools/client/debugger/src/components/Editor/Breakpoints.css
@@ -36,7 +36,7 @@
pointer-events: none;
}
-.editor-wrapper :not(.empty-line, .new-breakpoint)
+.editor-wrapper :not(.empty-line, .new-breakpoint .cm6-gutter-breakpoint)
> .CodeMirror-gutter-wrapper
> .CodeMirror-linenumber:hover::after {
content: "";
@@ -55,6 +55,27 @@
mask-position: right;
}
+/* Codemirror 6*/
+.cm6-gutter-breakpoint .breakpoint-marker svg {
+ fill: var(--breakpoint-fill);
+ stroke: var(--breakpoint-stroke);
+ height: 14px;
+ position: absolute;
+ right: -8px;
+ z-index: -99;
+}
+
+/* set the linenumber white when there is a breakpoint */
+.editor-wrapper:not(.skip-pausing) .new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber,
+ .editor-wrapper:not(.skip-pausing) .cm6-gutter-breakpoint {
+ color: white;
+}
+
+/* move the breakpoint below the other gutter elements */
+.new-breakpoint .CodeMirror-gutter-elt:nth-child(2) {
+ z-index: 0;
+}
+
.editor.new-breakpoint svg {
fill: var(--breakpoint-fill);
stroke: var(--breakpoint-stroke);
@@ -85,7 +106,9 @@
}
.editor.new-breakpoint.breakpoint-disabled svg,
-.blackboxed-line .editor.new-breakpoint svg {
+.blackboxed-line .editor.new-breakpoint svg,
+.cm6-gutter-breakpoint .breakpoint-marker.breakpoint-disabled svg,
+.cm6-gutter-breakpoint.blackboxed-line .breakpoint-marker svg {
fill-opacity: var(--breakpoint-disabled-opacity);
stroke-opacity: var(--breakpoint-disabled-opacity);
}
diff --git a/devtools/client/debugger/src/components/Editor/Breakpoints.js b/devtools/client/debugger/src/components/Editor/Breakpoints.js
index 6d1d088f11..ac3fe0890c 100644
--- a/devtools/client/debugger/src/components/Editor/Breakpoints.js
+++ b/devtools/client/debugger/src/components/Editor/Breakpoints.js
@@ -11,9 +11,31 @@ import {
getSelectedSource,
getFirstVisibleBreakpoints,
} from "../../selectors/index";
+import { getSelectedLocation } from "../../utils/selected-location";
import { makeBreakpointId } from "../../utils/breakpoint/index";
import { connect } from "devtools/client/shared/vendor/react-redux";
+import { fromEditorLine } from "../../utils/editor/index";
import actions from "../../actions/index";
+import { features } from "../../utils/prefs";
+const classnames = require("resource://devtools/client/shared/classnames.js");
+
+const isMacOS = Services.appinfo.OS === "Darwin";
+
+const breakpointSvg = document.createElement("div");
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+svg.setAttribute("viewBox", "0 0 60 15");
+svg.setAttribute("width", 60);
+svg.setAttribute("height", 15);
+
+const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+path.setAttributeNS(
+ null,
+ "d",
+ "M53.07.5H1.5c-.54 0-1 .46-1 1v12c0 .54.46 1 1 1h51.57c.58 0 1.15-.26 1.53-.7l4.7-6.3-4.7-6.3c-.38-.44-.95-.7-1.53-.7z"
+);
+
+svg.appendChild(path);
+breakpointSvg.appendChild(svg);
class Breakpoints extends Component {
static get propTypes() {
@@ -27,6 +49,93 @@ class Breakpoints extends Component {
showEditorEditBreakpointContextMenu: PropTypes.func,
};
}
+
+ constructor(props) {
+ super(props);
+ }
+
+ componentDidUpdate() {
+ const { selectedSource, breakpoints, editor } = this.props;
+
+ // Only for codemirror 6
+ if (!features.codemirrorNext) {
+ return;
+ }
+
+ if (!selectedSource || !breakpoints || !editor) {
+ return;
+ }
+
+ const markers = [
+ {
+ id: "gutter-breakpoint-marker",
+ lineClassName: "cm6-gutter-breakpoint",
+ condition: line => {
+ const lineNumber = fromEditorLine(selectedSource.id, line);
+ return breakpoints.some(bp => bp.location.line === lineNumber);
+ },
+ createLineElementNode: line => {
+ const lineNumber = fromEditorLine(selectedSource.id, line);
+ const breakpoint = breakpoints.find(
+ bp => bp.location.line === lineNumber
+ );
+
+ const breakpointNode = breakpointSvg.cloneNode(true);
+ breakpointNode.appendChild(document.createTextNode(lineNumber));
+ breakpointNode.className = classnames("breakpoint-marker", {
+ "breakpoint-disabled": breakpoint.disabled,
+ "has-condition": breakpoint?.options.condition,
+ "has-log": breakpoint?.options.logValue,
+ });
+ breakpointNode.onclick = event => this.onClick(event, breakpoint);
+ breakpointNode.oncontextmenu = event =>
+ this.onContextMenu(event, breakpoint);
+ return breakpointNode;
+ },
+ },
+ ];
+ editor.setLineGutterMarkers(markers);
+ }
+
+ onClick = (event, breakpoint) => {
+ const {
+ continueToHere,
+ toggleBreakpointsAtLine,
+ removeBreakpointsAtLine,
+ selectedSource,
+ } = this.props;
+
+ event.stopPropagation();
+ event.preventDefault();
+
+ // ignore right clicks when clicking on the breakpoint
+ if (event.button === 2) {
+ return;
+ }
+
+ const selectedLocation = getSelectedLocation(breakpoint, selectedSource);
+ const ctrlOrCmd = isMacOS ? event.metaKey : event.ctrlKey;
+
+ if (ctrlOrCmd) {
+ continueToHere(selectedLocation);
+ return;
+ }
+
+ if (event.shiftKey) {
+ toggleBreakpointsAtLine(!breakpoint.disabled, selectedLocation.line);
+ return;
+ }
+
+ removeBreakpointsAtLine(selectedLocation.source, selectedLocation.line);
+ };
+
+ onContextMenu = (event, breakpoint) => {
+ event.stopPropagation();
+ event.preventDefault();
+
+ this.props.showEditorEditBreakpointContextMenu(event, breakpoint);
+ };
+
render() {
const {
breakpoints,
@@ -41,6 +150,11 @@ class Breakpoints extends Component {
if (!selectedSource || !breakpoints) {
return null;
}
+
+ if (features.codemirrorNext) {
+ return null;
+ }
+
return div(
null,
breakpoints.map(breakpoint => {
diff --git a/devtools/client/debugger/src/components/Editor/DebugLine.js b/devtools/client/debugger/src/components/Editor/DebugLine.js
index 1b8e59ba64..61caae69a5 100644
--- a/devtools/client/debugger/src/components/Editor/DebugLine.js
+++ b/devtools/client/debugger/src/components/Editor/DebugLine.js
@@ -6,6 +6,7 @@ import { PureComponent } from "devtools/client/shared/vendor/react";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";
import {
toEditorPosition,
+ fromEditorLine,
getDocument,
hasDocument,
startOperation,
@@ -21,12 +22,16 @@ import {
getSourceTextContent,
getCurrentThread,
} from "../../selectors/index";
+import { isWasm } from "../../utils/wasm";
+import { features } from "../../utils/prefs";
export class DebugLine extends PureComponent {
debugExpression;
static get propTypes() {
return {
+ editor: PropTypes.object,
+ selectedSource: PropTypes.object,
location: PropTypes.object,
why: PropTypes.object,
};
@@ -34,21 +39,62 @@ export class DebugLine extends PureComponent {
componentDidMount() {
const { why, location } = this.props;
+ if (features.codemirrorNext) {
+ return;
+ }
this.setDebugLine(why, location);
}
componentWillUnmount() {
const { why, location } = this.props;
+ if (features.codemirrorNext) {
+ return;
+ }
this.clearDebugLine(why, location);
}
componentDidUpdate(prevProps) {
- const { why, location } = this.props;
-
- startOperation();
- this.clearDebugLine(prevProps.why, prevProps.location);
- this.setDebugLine(why, location);
- endOperation();
+ const { why, location, editor, selectedSource } = this.props;
+
+ if (features.codemirrorNext) {
+ if (!selectedSource) {
+ return;
+ }
+
+ if (
+ prevProps.location == this.props.location &&
+ prevProps.selectedSource?.id == selectedSource?.id
+ ) {
+ return;
+ }
+
+ const { lineClass } = this.getTextClasses(why);
+ // Remove the debug line marker when no longer paused, or the selected source
+ // is no longer the source where the pause occured.
+ if (!location || location.source.id !== selectedSource.id) {
+ editor.removeLineContentMarker("debug-line-marker");
+ } else {
+ const isSourceWasm = isWasm(selectedSource.id);
+ editor.setLineContentMarker({
+ id: "debug-line-marker",
+ lineClassName: lineClass,
+ condition(line) {
+ const lineNumber = fromEditorLine(
+ selectedSource.id,
+ line,
+ isSourceWasm
+ );
+ const editorLocation = toEditorPosition(location);
+ return editorLocation.line == lineNumber;
+ },
+ });
+ }
+ } else {
+ startOperation();
+ this.clearDebugLine(prevProps.why, prevProps.location);
+ this.setDebugLine(why, location);
+ endOperation();
+ }
}
setDebugLine(why, location) {
@@ -125,7 +171,10 @@ const mapStateToProps = state => {
return {};
}
const sourceTextContent = getSourceTextContent(state, location);
- if (!isDocumentReady(location, sourceTextContent)) {
+ if (
+ !features.codemirrorNext &&
+ !isDocumentReady(location, sourceTextContent)
+ ) {
return {};
}
return {
diff --git a/devtools/client/debugger/src/components/Editor/Editor.css b/devtools/client/debugger/src/components/Editor/Editor.css
index 0c48da019e..f28833747d 100644
--- a/devtools/client/debugger/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/src/components/Editor/Editor.css
@@ -80,19 +80,6 @@ html[dir="rtl"] .editor-mount {
line-height: var(--theme-code-line-height);
}
-/* set the linenumber white when there is a breakpoint */
-.editor-wrapper:not(.skip-pausing)
- .new-breakpoint
- .CodeMirror-gutter-wrapper
- .CodeMirror-linenumber {
- color: white;
-}
-
-/* move the breakpoint below the other gutter elements */
-.new-breakpoint .CodeMirror-gutter-elt:nth-child(2) {
- z-index: 0;
-}
-
.theme-dark .editor-wrapper .CodeMirror-line .cm-comment {
color: var(--theme-comment);
}
@@ -134,7 +121,9 @@ html[dir="rtl"] .editor-mount {
background-color: var(--debug-expression-error-background);
}
-.new-debug-line > .CodeMirror-line {
+.new-debug-line > .CodeMirror-line,
+/* For CM6 */
+.cm-editor .cm-line.new-debug-line {
background-color: transparent !important;
outline: var(--debug-line-border) solid 1px;
}
@@ -145,7 +134,9 @@ html[dir="rtl"] .editor-mount {
display: none;
}
-.new-debug-line-error > .CodeMirror-line {
+.new-debug-line-error > .CodeMirror-line,
+/* For CM6 */
+.cm-editor .cm-line.new-debug-line-error {
background-color: var(--debug-expression-error-background) !important;
outline: var(--debug-line-error-border) solid 1px;
}
@@ -196,10 +187,6 @@ html[dir="rtl"] .editor-mount {
border-left: none;
}
-.editor-wrapper .CodeMirror-foldgutter .CodeMirror-guttermarker-subtle {
- visibility: visible;
-}
-
.editor-wrapper .CodeMirror-foldgutter .CodeMirror-linenumber {
text-align: left;
padding: 0 0 0 2px;
diff --git a/devtools/client/debugger/src/components/Editor/Exceptions.js b/devtools/client/debugger/src/components/Editor/Exceptions.js
index 2fb183f135..217ec40be6 100644
--- a/devtools/client/debugger/src/components/Editor/Exceptions.js
+++ b/devtools/client/debugger/src/components/Editor/Exceptions.js
@@ -6,25 +6,72 @@ import React, { Component } from "devtools/client/shared/vendor/react";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";
import { connect } from "devtools/client/shared/vendor/react-redux";
+import {
+ toEditorPosition,
+ fromEditorLine,
+ getDocument,
+} from "../../utils/editor/index";
+import { createLocation } from "../../utils/location";
+
+import { features } from "../../utils/prefs";
+
import Exception from "./Exception";
import {
getSelectedSource,
getSelectedSourceExceptions,
} from "../../selectors/index";
-import { getDocument } from "../../utils/editor/index";
class Exceptions extends Component {
static get propTypes() {
return {
exceptions: PropTypes.array,
selectedSource: PropTypes.object,
+ editor: PropTypes.object,
};
}
+ componentDidUpdate() {
+ const { exceptions, selectedSource, editor } = this.props;
+
+ if (!features.codemirrorNext) {
+ return;
+ }
+
+ if (!selectedSource || !editor || !exceptions.length) {
+ return;
+ }
+
+ editor.setLineContentMarker({
+ id: "line-exception-marker",
+ lineClassName: "line-exception",
+ condition: line => {
+ const lineNumber = fromEditorLine(selectedSource.id, line);
+
+ const exception = exceptions.find(e => e.lineNumber == lineNumber);
+ if (!exception) {
+ return false;
+ }
+ const exceptionLocation = createLocation({
+ source: selectedSource,
+ line: exception.lineNumber,
+ // Exceptions are reported with column being 1-based
+ // while the frontend uses 0-based column.
+ column: exception.columnNumber - 1,
+ });
+ const editorLocation = toEditorPosition(exceptionLocation);
+ return editorLocation.line == lineNumber;
+ },
+ });
+ }
+
render() {
const { exceptions, selectedSource } = this.props;
+ if (features.codemirrorNext) {
+ return null;
+ }
+
if (!selectedSource || !exceptions.length) {
return null;
}
diff --git a/devtools/client/debugger/src/components/Editor/index.js b/devtools/client/debugger/src/components/Editor/index.js
index ae9bde7657..e21e05c11a 100644
--- a/devtools/client/debugger/src/components/Editor/index.js
+++ b/devtools/client/debugger/src/components/Editor/index.js
@@ -12,6 +12,7 @@ import { connect } from "devtools/client/shared/vendor/react-redux";
import { getLineText, isLineBlackboxed } from "./../../utils/source";
import { createLocation } from "./../../utils/location";
import { getIndentation } from "../../utils/indentation";
+import { isWasm } from "../../utils/wasm";
import { features } from "../../utils/prefs";
import {
@@ -50,6 +51,7 @@ import Exceptions from "./Exceptions";
import BlackboxLines from "./BlackboxLines";
import {
+ fromEditorLine,
showSourceText,
setDocument,
resetLineNumberFormat,
@@ -68,7 +70,11 @@ import {
endOperation,
} from "../../utils/editor/index";
-import { resizeToggleButton, resizeBreakpointGutter } from "../../utils/ui";
+import {
+ resizeToggleButton,
+ getLineNumberWidth,
+ resizeBreakpointGutter,
+} from "../../utils/ui";
const { debounce } = require("resource://devtools/shared/debounce.js");
const classnames = require("resource://devtools/client/shared/classnames.js");
@@ -169,7 +175,7 @@ class Editor extends PureComponent {
if (this.props.selectedSource != nextProps.selectedSource) {
this.props.updateViewport();
resizeBreakpointGutter(editor.codeMirror);
- resizeToggleButton(editor.codeMirror);
+ resizeToggleButton(getLineNumberWidth(editor.codeMirror));
}
} else {
// For codemirror 6
@@ -180,6 +186,12 @@ class Editor extends PureComponent {
}
}
+ onEditorUpdated(v) {
+ if (v.docChanged || v.geometryChanged) {
+ resizeToggleButton(v.view.dom.querySelector(".cm-gutters").clientWidth);
+ }
+ }
+
setupEditor() {
const editor = getEditor(features.codemirrorNext);
@@ -216,32 +228,18 @@ class Editor extends PureComponent {
codeMirrorWrapper.addEventListener("keydown", e => this.onKeyDown(e));
codeMirrorWrapper.addEventListener("click", e => this.onClick(e));
codeMirrorWrapper.addEventListener("mouseover", onMouseOver(codeMirror));
-
- const toggleFoldMarkerVisibility = () => {
- if (node instanceof HTMLElement) {
- node
- .querySelectorAll(".CodeMirror-guttermarker-subtle")
- .forEach(elem => {
- elem.classList.toggle("visible");
- });
- }
- };
-
- const codeMirrorGutter = codeMirror.getGutterElement();
- codeMirrorGutter.addEventListener(
- "mouseleave",
- toggleFoldMarkerVisibility
- );
- codeMirrorGutter.addEventListener(
- "mouseenter",
- toggleFoldMarkerVisibility
- );
codeMirrorWrapper.addEventListener("contextmenu", event =>
this.openMenu(event)
);
codeMirror.on("scroll", this.onEditorScroll);
this.onEditorScroll();
+ } else {
+ editor.setUpdateListener(this.onEditorUpdated);
+ editor.setGutterEventListeners({
+ click: (event, cm, line) => this.onGutterClick(cm, line, null, event),
+ contextmenu: (event, cm, line) => this.openMenu(event, line, true),
+ });
}
this.setState({ editor });
return editor;
@@ -280,6 +278,69 @@ class Editor extends PureComponent {
}
};
+ componentDidUpdate(prevProps) {
+ const {
+ selectedSource,
+ blackboxedRanges,
+ isSourceOnIgnoreList,
+ breakableLines,
+ } = this.props;
+ const { editor } = this.state;
+
+ if (!selectedSource || !editor) {
+ return;
+ }
+
+ // Sets the breakables lines for codemirror 6
+ if (features.codemirrorNext) {
+ const shouldUpdateBreakableLines =
+ prevProps.breakableLines.size !== this.props.breakableLines.size ||
+ prevProps.selectedSource?.id !== selectedSource.id;
+
+ const isSourceWasm = isWasm(selectedSource.id);
+
+ if (shouldUpdateBreakableLines) {
+ editor.setLineGutterMarkers([
+ {
+ id: "empty-line-marker",
+ lineClassName: "empty-line",
+ condition: line => {
+ const lineNumber = fromEditorLine(
+ selectedSource.id,
+ line,
+ isSourceWasm
+ );
+ return !breakableLines.has(lineNumber);
+ },
+ },
+ ]);
+ }
+
+ function condition(line) {
+ const lineNumber = fromEditorLine(selectedSource.id, line);
+
+ return isLineBlackboxed(
+ blackboxedRanges[selectedSource.url],
+ lineNumber,
+ isSourceOnIgnoreList
+ );
+ }
+
+ editor.setLineGutterMarkers([
+ {
+ id: "blackboxed-line-gutter-marker",
+ lineClassName: "blackboxed-line",
+ condition,
+ },
+ ]);
+ editor.setLineContentMarker({
+ id: "blackboxed-line-marker",
+ lineClassName: "blackboxed-line",
+ condition,
+ });
+ }
+ }
+
componentWillUnmount() {
if (!features.codemirrorNext) {
const { editor } = this.state;
@@ -396,8 +457,9 @@ class Editor extends PureComponent {
e.preventDefault();
}
};
-
- openMenu(event) {
+ // Note: The line is optional, if not passed (as is likely for codemirror 6)
+ // it fallsback to lineAtHeight.
+ openMenu(event, line) {
event.stopPropagation();
event.preventDefault();
@@ -421,13 +483,19 @@ class Editor extends PureComponent {
const target = event.target;
const { id: sourceId } = selectedSource;
- const line = lineAtHeight(editor, sourceId, event);
+ line = line ?? lineAtHeight(editor, sourceId, event);
if (typeof line != "number") {
return;
}
- if (target.classList.contains("CodeMirror-linenumber")) {
+ if (
+ // handles codemirror 6
+ (target.classList.contains("cm-gutterElement") &&
+ target.closest(".cm-gutter.cm-lineNumbers")) ||
+ // handles codemirror 5
+ target.classList.contains("CodeMirror-linenumber")
+ ) {
const location = createLocation({
line,
column: undefined,
@@ -440,7 +508,14 @@ class Editor extends PureComponent {
line
).trim();
- this.props.showEditorGutterContextMenu(event, editor, location, lineText);
+ const lineObject = { from: { line }, to: { line } };
+
+ this.props.showEditorGutterContextMenu(
+ event,
+ lineObject,
+ location,
+ lineText
+ );
return;
}
@@ -542,10 +617,6 @@ class Editor extends PureComponent {
);
};
- onGutterContextMenu = event => {
- this.openMenu(event);
- };
-
onClick(e) {
const { selectedSource, updateCursorPosition, jumpToMappedLocation } =
this.props;
@@ -717,6 +788,18 @@ class Editor extends PureComponent {
} = this.props;
const { editor } = this.state;
+ if (features.codemirrorNext) {
+ return React.createElement(
+ React.Fragment,
+ null,
+ React.createElement(Breakpoints, {
+ editor,
+ }),
+ React.createElement(DebugLine, { editor, selectedSource }),
+ React.createElement(Exceptions, { editor })
+ );
+ }
+
if (!selectedSource || !editor || !getDocument(selectedSource.id)) {
return null;
}
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
index 1f5e08cd7e..767df21bf6 100644
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
@@ -17,7 +17,6 @@ import { getSelectedLocation } from "../../../utils/selected-location";
import { createHeadlessEditor } from "../../../utils/editor/create-editor";
import { makeBreakpointId } from "../../../utils/breakpoint/index";
-import { features } from "../../../utils/prefs";
import {
getSelectedSource,
@@ -154,7 +153,7 @@ class Breakpoints extends Component {
className: "pane",
},
this.renderExceptionsOptions(),
- !features.codemirrorNext ? this.renderBreakpoints() : null
+ this.renderBreakpoints()
);
}
}
diff --git a/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css b/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css
index 12e53e6fc5..a04f080291 100644
--- a/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css
+++ b/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css
@@ -14,6 +14,7 @@
min-width: 30px;
/* Adjust outline so it's not clipped */
outline-offset: -3px;
+ flex-shrink: 0;
}
.command-bar-button:disabled {