Jump to HTML Code in Brackets by Selecting in Browser (Live Development)

[pthiess]

As a user, I want to be able to click on an HTML element in the browser and have Brackets jump the cursor to the HTML tag corresponding to that element (assuming it was not dynamically generated or reparented at runtime).

Requirements

• Only works in Live HTML mode running off of Bracket's Node Server
  • When running from a user's server, the button is grayed out with a tooltip that provides info about why it's grayed out.
• (Pending feedback from Larz) have a button in the browser window that enters the user into "Jump to Brackets" mode
• Button should be hidable
• Design consideration: We will eventually want to expand the functionality of the in-browser button
• Mouseover feedback that highlights the bounds of the element below the mouse cursor
• Clicking on the highlighted element jumps to that HTML in Brackets.
• Should work the same way as jump to definition/quick open where it opens the file and selects the line where that element starts.
• Brackets should be active and brought to the front.
• If the selected HTML element can't be mapped back for any reason
  • Activate Brackets and bring it to the front
  • Select the nearest parent element that we can find a match for
  • Display an error (using the Quick Edit error notification pattern) that tells the user why we couldn't find that exact element.

Open Questions/Items for Larz

• Design of the button
• Design of the mouse over affordance to highlight the element that will be jumped to.

Out of Scope

• Supporting a users' server
• CSS

See also the Jump to CSS code Trello card and this original story in the backlog for additional comments.

[pthiess]

Successor of Trello card 564

[peterflynn]

Thought: should there also be a keyboard shortcut to activate the "click-to-jump" mode? That way you can put your hand on the mouse and start moving it directly toward the DOM element of interest, rather than having to toggle a small button first, then move the mouse to the DOM element.

Chrome dev tools uses the shortcut Ctrl-Shift-C for this, fwiw.

(@larz0 @ryanstewart for thoughts)

[larz0]

@peterflynn great idea!

[PeterMacGonagan]

It's a very great idea...

[velinkoychev]

This will be a killer feature!

[lenovouser]

👍

[gemueselasagne]

This would be a game changer! Awesome idea!