Jens Reporter
	Description • 6 years ago

See screenshot.

Various things:

1. These collapsed stacktraces bubbles look very much like the "repeat" bubbles (the "red circles with numbers") but behave very different.

2. Nit: The one-digit bubbles are too wide (6 and 8, only the 17 at bottom looks corrent)

3. The bubbles have no tooltip (title attribute). Would be great if for such things maybe eslint rules could be used (I used https://www.npmjs.com/package/eslint-plugin-jsx-a11y in some projects)

4. The mouse cursor when hovering is "text": | 
But it is a button, and should probably be "default" (or "pointer").

5. Related to 1. there is no way that indicates that clicking on the bubbles means one can collapse/expand. For other things in Devtools there's always an animated arrow when things can be collapsed / expanded. The arrow also shows if something currently is already collapsed / expanded (current state). Something similar would be great here for UX and consistency.

Maybe forward to the design department :) Points 1 and 5 would really call for another design here.

	Nicolas Chevobbe [:nchevobbe]
	Comment 1 • 6 years ago

Hello Jens, thanks for filing this issue.

There are some known problems here, so let's recap: 

1. The bubble metaphor being not so great: this is discussed in https://github.com/devtools-html/ux/issues/34 (inputs are very welcome)
2. One digit bubble being too wide: this is because we are using a grid, so every bubble in a callstack would be the same size. There's a WIP to at least have them centered.
3. No tooltip: this should be fixed when https://github.com/devtools-html/debugger.html/pull/7285#pullrequestreview-175835925 hits mozilla-central
4. Good catch, I'll fit that in the same patch I have for 3.
5. See 1 :) 

Let's keep this bug open to implement whatever new design is decided on devtools-html/ux