core-ai-bot commented 3 years ago

Issue by pthiess Friday Sep 05, 2014 at 22:02 GMT Originally opened as https://github.com/adobe/brackets/issues/8996

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.

core-ai-bot commented 3 years ago

Comment by pthiess Friday Sep 12, 2014 at 23:48 GMT

Successor of Trello card 564

core-ai-bot commented 3 years ago

Comment by peterflynn Thursday Sep 18, 2014 at 05:16 GMT

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)

core-ai-bot commented 3 years ago

Comment by larz0 Thursday Sep 18, 2014 at 19:42 GMT