1614028 - Redesign the Sources>Directory Root UI

Status: RESOLVED FIXED

(DevTools :: Debugger, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: set-directory-root-current-ui.png

When using the "Set directory root" feature in the context menu in Sources, the resulting UI is not super obvious. Some issues:

1. It's not obvious how to go back to the general view. (Currently we can click the whole "header" row to go back. It has a tooltip on hover: "Remove directory root".)
2. We're losing visual information on what kind of element was selected as the root: a domain, an extension, a folder?
3. When we select a folder which has a generic name ("js", "dist", "components"), we lose domain and path information.
4. Visual polish: the icon size and spacing could be more consistent with other Debugger UI.

Comment 1

[Florens Verschelde :fvsch]

Attachment: mockup-1.png

A mock-up I did a few months ago:

• Rather than "Home > [selected]" which implies a parent-child relationship, use a common "Title and back button" navigation pattern.
• On hover on the back button, we should keep the "Remove directory root" tooltip.
• On hover on the title, we could show the full URL to the selected root (e.g. https://example.com/selected/folder/)

Source: Figma doc

Comment 2

[Florens Verschelde :fvsch]

Question: to help with ambiguous root names (e.g. "dist", "js"), should we show more information? We could use the full URL, clipped on the left:

| ⬅︎ | https://www.gatsbyjs.org/blog   |

for a longer URL:

| ⬅︎ | …17-09-13-why-is-gatsby-so-fast |

Pros:

• Show relevant information quicker
• More information for short directory names

Cons:

• Noisier
• URLs not ideal for extensions

Comment 3

[Holger Benl [:hbenl]]

Attachment: Bug 1614028 - [devtools] Redesign the directory root UI. r=#devtools-reviewers,ochameau

• use the back icon instead of the home icon and a different separator
• show the directory root's full URL and thread name in the tooltip

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e86f6f08cbc1
[devtools] Redesign the directory root UI. r=devtools-reviewers,nchevobbe

Comment 5

[Norisz Fay [:noriszfay]]

Backed out for causing dt failures on browser_dbg-project-root.js, browser_parsable_css.js

Backout link

Push with failures

Failure log / Failure log 2

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7451144df2ea
[devtools] Redesign the directory root UI. r=devtools-reviewers,nchevobbe

Comment 7

[Atila Butkovits]

Backed out for causing failures at browser_dbg-quick-open.js.

Backout link: https://hg-edge.mozilla.org/integration/autoland/rev/0963e7a5fc887251dc9a434f22f1ab7ab08f5517

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=7451144df2ea01c0fdcf515dd4e2dd1c660a871a&selectedTaskRun=Dzgrz3MqQzCJuk8IFrCvhQ.0

Failure log: https://treeherder.mozilla.org/logviewer?job_id=504073961&repo=autoland&lineNumber=6847

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/082f956a13e5
[devtools] Redesign the directory root UI. r=devtools-reviewers,nchevobbe

Comment 9

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/082f956a13e5