Inline Preview: The debug line no longer fills the width of the editor
Categories
(DevTools :: Debugger, defect, P2)
Tracking
(firefox71 fixed)
Tracking | Status | |
---|---|---|
firefox71 | --- | fixed |
People
(Reporter: dhyey35, Assigned: davidwalsh)
References
Details
(Whiteboard: [debugger-mvp])
Attachments
(4 files)
When there are many inline previews on a single line the codemirror doc adds too much horizontal scrolling. Checkout the gif
Updated•5 years ago
|
Assignee | ||
Updated•5 years ago
|
Comment 2•5 years ago
|
||
Here is a hacky way to control the width of previews
diff --git a/devtools/client/debugger/src/components/Editor/InlinePreview.css b/devtools/client/debugger/src/components/Editor/InlinePreview.css
index b5e1aeb680e8..6e42586ebaad 100644
--- a/devtools/client/debugger/src/components/Editor/InlinePreview.css
+++ b/devtools/client/debugger/src/components/Editor/InlinePreview.css
@@ -5,6 +5,7 @@
.inline-preview {
position: relative;
margin-top: calc(var(--theme-code-line-height) * -11px);
+ overflow: hidden;
}
.inline-preview-outer {
@@ -14,6 +15,7 @@
border-radius: 3px;
font-size: 10px;
margin-right: 5px;
+ white-space: nowrap;
}
.inline-preview-label {
diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
index 47d3dec02e01..d97732bd9624 100644
--- a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
+++ b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
@@ -81,7 +81,9 @@ class InlinePreviewRow extends PureComponent<Props> {
const left = this.getPreviewPosition(editor, line);
if (!prevProps || this.lastLeft !== left) {
this.lastLeft = left;
+ const sizerWdth = parseInt(dbg.getCM().display.sizer.style.minWidth);
this.IPWidget.node.style.left = `${left}px`;
+ this.IPWidget.node.style.maxWidth = `${sizerWdth - left - 10}px`;
}
We could improve this in a couple of ways:
- pass in codemirror
- get the display width via a codemirror api
- we will need to re-render when the editor size changes such as sidebar widths or toolbox widths changing...
We could also find more proper codemirror APIs because left and maxWidth are definitely hacks...
Assignee | ||
Comment 3•5 years ago
|
||
I think the issue is that the .Codemirror-Sizer
element isn't accounting for the inline previews, and thus the debug line is getting cut off.
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Comment 4•5 years ago
|
||
I'm obsessed with figuring this out so I took a fresh look again today. A few notes:
-
The
Codemirror-Sizer
element dictates the length of the debug line via its calculatedmin-width
style. This property appears to be calculated by (the number of characters on a line) * (character width). Switching tosetBookmark
helps visually to avoid a costlyleft
calculation for the inline preview but its width has no bearing on CodeMirror's calculation -- CodeMirror doesn't account for it. -
Dhyey's use of
addLineWidget
is the same as Chrome. I don't see any other tricks or CSS properties. They inject the line-widget with calculatedleft
property. -
Chrome is also broken due to inline preview (image attached)
I have a slightly off the wall idea. In devtools/client/debugger/src/components/Editor/InlinePreviews.js
, before the editor.codeMirror.operation
call, we:
- Loop through each line, calculate the number of characters in the preview(s) names and values, then inject that number of invisible spaces at the end of the line using
doc.replaceRange
, padding it with extra spaces to make up for the CSS padding - Remove the spaces upon unmount.
No matter what we do, it's going to be unscientific, unfortunately. I also thought about injecting the inline previews as normal text via replaceRange
but then we lose our styling abilities :/
Comment 5•5 years ago
|
||
yeah - i think the hack with replaceRange is fine. It is a fine work around until codemirror has internal support for it.
Assignee | ||
Comment 6•5 years ago
|
||
Updated•5 years ago
|
Comment 8•5 years ago
|
||
bugherder |
Updated•5 years ago
|
Description
•