The Outline should remain in sync with the editor
Categories
(DevTools :: Debugger, enhancement, P3)
Tracking
(firefox71 fixed)
Tracking | Status | |
---|---|---|
firefox71 | --- | fixed |
People
(Reporter: jlast, Assigned: chujunlu)
References
(Blocks 1 open bug)
Details
(Keywords: good-first-bug)
Attachments
(1 obsolete file)
It would be great if the outline view stayed in sync with the editor cursor. This means that when the user clicks inside a function in the editor, the Outline would scroll to that function and focus on it.
The benefit would be that in large files, the user always has a clear idea of the class the function is in and other functions in the class.
Reporter | ||
Updated•5 years ago
|
Reporter | ||
Updated•5 years ago
|
Reporter | ||
Comment 1•5 years ago
|
||
In terms of getting started, I'd look at Outline.js which renders the UI and look at the data it receives. The data should have start and end locations so we can find the right function. We'll also want a state field for focused item and use the same blue treatment as we do elsewhere.
Comment 2•5 years ago
|
||
I worry a little bit about mental/eye fatigue this could have if you're moving around a lot. It also seems as though it could be taxing from a perf perspective. I could be wrong though.
Reporter | ||
Comment 3•5 years ago
|
||
it would be nice to see how it feels. The UX is on click, which is similar to vs code reveal in tree
in terms of perf, we should have the data in the component, so it is jut a re-render and potentially scroll. Like best case were just setting a focused class
I'd like to give this a shot!
I have a naive question for implementation: after finding the target function in the data that Outline.js receives, how do we want to proceed?
-
Update
state
and perform a re-render. Not sure how to write this yet but I assume creating a new action to inform thestate
. -
Update the DOM itself.
state
is unaware of the change. Something like this:
const funcOrClassLi = document.body.querySelectorAll("outline-list__element"); const targetLi = Array.prototype.find.call(funcOrClassLi, ele => ele.innerText.includes(targetFunctionName) ); targetLi.classList.add("focused"); targetLi.scrollIntoView();
In addition, "perf" means performance right?
Editor listens to click events and updates location;
Outline.js does a search in symbols, adds CSS class;
Add a Mochitest
Updated•5 years ago
|
Updated•5 years ago
|
Comment 7•5 years ago
|
||
bugherder |
Updated•5 years ago
|
Updated•5 years ago
|
Description
•