Closed Bug 1574581 Opened 5 years ago Closed 5 years ago

The Outline should remain in sync with the editor

Categories

(DevTools :: Debugger, enhancement, P3)

enhancement

Tracking

(firefox71 fixed)

RESOLVED FIXED
Firefox 71
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.

https://www.loom.com/share/9d0a7dca4a56446c95a7d72159659559

Priority: -- → P3
Keywords: good-first-bug

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.

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.

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?

  1. Update state and perform a re-render. Not sure how to write this yet but I assume creating a new action to inform the state.

  2. 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

Attachment #9094187 - Attachment description: Bug 1574581: Outline should remain in sync with the editor r:jlast → Bug 1574581: Outline should remain in sync with the editor WIP r:jlast
Attachment #9094187 - Attachment description: Bug 1574581: Outline should remain in sync with the editor WIP r:jlast → Bug 1574581 - Outline should remain in sync with the editor WIP r=jlast
Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/862aa4678802
Outline should remain in sync with the editor WIP
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71
Assignee: nobody → chujunlu
Depends on: 1585241
Depends on: 1585238
Depends on: 1585390
Attachment #9094187 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: