1850024 - [meta] Ease debugging pages using source maps

Status: NEW

(DevTools :: Debugger, task, P3)

Description

[Alexandre Poirot [:ochameau]]

Meta bug to track work planned for H2 2023 around source maps:
https://docs.google.com/document/d/1SgU2GxEmES35rN95UpcQeYRSnrdvSj3d9EqmAb1WFvk/edit#heading=h.omhjormbdnsz

Comment 1

[Alexandre Poirot [:ochameau]]

Attachment: Bug 1850024 - [devtools] All source-map UX prototypes in one patch.

Contains all bug's patch in a single squashed patch.

Comment 2

[Alexandre Poirot [:ochameau]]

Attached a patch to easily test all ongoing prototypes attached to all deps.

And some useful test pages:
http://techno-barje.fr/fission/sourcemap/ (nothing special, simpliest possible usecase)
http://techno-barje.fr/fission/sourcemap-invalid-json/
http://techno-barje.fr/fission/sourcemap-missing-original/

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

So I played with the patch a bit and try to think of a nice solution to integrate all the nice feature you added here

Source Tree

👍 Having the "Show only original sources" is nice

🟣 I feel like the UI would be better displayed before the sources tree (above the "Directory root" UI or maybe integrated with it?)

🟣 We should move the "Hide ignored source" setting in the same area too

🟣 When "Show only original sources" is enabled, opening a file and then clicking on the "Jump to original source" button will show the original source, but it's not reflected in the source tree. We already have a similar case with "Hide ignored source" (https://searchfox.org/mozilla-central/rev/64eef6b342bca86930caf3ba403c0f8ce621b474/devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js#383-396, see https://d2mfgivbiy2fiw.cloudfront.net/file/data/dya2arrmxjwduxomijin/PHID-FILE-pfmwcykglnctbjifqtdo/CleanShot_2023-05-26_at_16.40.48.png)

Which makes me think we might need to reword this. "Show all sources" implies you'll display everything, but maybe you want to keep original sources hidden. Might be better to switch to more ad-hoc label (Show ignored sources/Show generated sources)

Source maps settings

• Open original sources by default
  • updated when you jump to a bundle file
    • 🟣 not sure how I feel about this. Quite visible with the WIP patch as the checkbox is displayed in the sources tree, but I don't feel like we'll keep it visible at all time
• Enable source maps
  • already shown in the debugger settings
  • 🟣 not sure we should have it in 2 different places, but it probably makes sense as an entry in the "source map settings" menu

Editor toolbar

👍 Having links to go from original to generated and the other way around is nice

👍 Having a way to open the sourcemap URL is nice too

⚠️ Pretty printed files shouldn't have the "Jump to original" button

🟣 at the moment, we show the toolbar when no files are opened. Not sure we want to do that? But on the other hand, if this is the only way to enable some feature, it may be weird to hide it

🟣 From/To ${fileURL} does not feel super explicit to me

💡 Space is relatively limited in the editor toolbar and I think we could have a way to merge open source map menu + jump to original/generated button) into a single item.

Given all the other points, we might have a single icon, next to the pretty printing one, so we have room on the right to display if we want to.

The icon could have multiple state
- sourcemaps disabled (icon crossed out)
- no sourcemap (icon greyed out)
- seeing original file ("active" color/slightly different image)
- seeing bundle file (regular color/icon)
- no files opened (regular color/icon)
- error in sourcemap (orange icon/small warning icon on top of existing icon)

I was thinking we could display the original/generated label after the icon, on hover and when selecting a source (so users would know where they are when stepping between generated and original land), to re-enforce the link with the colors.

Clicking on it would show a menu with:

• Jump to original/generated source + url as a title ?
  • only when the editor is a file with valid sourcemap
• Open the sourcemap url in a new tab
• a separator to indicate that the following items impact more than the opened editor
• Enable/Disable Source maps

Does it make sense Alex? Is there anything I didn't address?

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: source maps menu icon states

Here's what it could look like

Comment 5

[Alexandre Poirot [:ochameau]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)

👍 Having the "Show only original sources" is nice

I'll keep only this setting in the Source Tree and keep all the others in the footer menu button.

🟣 I feel like the UI would be better displayed before the sources tree (above the "Directory root" UI or maybe integrated with it?)

Yes, it sounds like a good idea.

🟣 We should move the "Hide ignored source" setting in the same area too

🟣 When "Show only original sources" is enabled, opening a file and then clicking on the "Jump to original source" button will show the original source, but it's not reflected in the source tree. We already have a similar case with "Hide ignored source" (https://searchfox.org/mozilla-central/rev/64eef6b342bca86930caf3ba403c0f8ce621b474/devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js#383-396, see https://d2mfgivbiy2fiw.cloudfront.net/file/data/dya2arrmxjwduxomijin/PHID-FILE-pfmwcykglnctbjifqtdo/CleanShot_2023-05-26_at_16.40.48.png)

I think it would be nice to expand our thinking beyond ignoreList/bundles. So that we could reuse this new UI for other purposes, like hidding add-on sources.
With this in mind, I think we would have to get away from large buttons/sentences and instead preffer buttons with only words. May be something like netmonitor filtering buttons?

Source maps settings

• Open original sources by default
  • updated when you jump to a bundle file
    • 🟣 not sure how I feel about this. Quite visible with the WIP patch as the checkbox is displayed in the sources tree, but I don't feel like we'll keep it visible at all time
• Enable source maps
  • already shown in the debugger settings
  • 🟣 not sure we should have it in 2 different places, but it probably makes sense as an entry in the "source map settings" menu

Yes, I would like to remove the one in global debugger settings.

Editor toolbar

🟣 at the moment, we show the toolbar when no files are opened. Not sure we want to do that? But on the other hand, if this is the only way to enable some feature, it may be weird to hide it

I'm going to show only the SourceMap MenuButton when no file is selected.
Let's see how it feels.

🟣 From/To ${fileURL} does not feel super explicit to me

I share this feeling and it is also confusing placed next to editor's cursor location.

💡 Space is relatively limited in the editor toolbar and I think we could have a way to merge open source map menu + jump to original/generated button) into a single item.

One nice thing, when you start seeing the related original based on current cursor location is that you can see "live" changing the original file name when you navigate in a bundle. But given my previous comment about From/To... it may be overall better to get rid of it.

Does it make sense Alex? Is there anything I didn't address?

Lots of good things in your comment. I'll comments on specifics as I integrate the suggestions.