DevTools: update style in debugger sidepane |
||||
Issue descriptionThe debugging side pane in DevTools is the main control for debugging workflows. We can improve the UI by: - moving the paused reason/exception to a more visible place, e.g. the top of the callstack - stop using multiple gray colors - no underline on links - better style the async dividers (async, setTimeout, raf, promises) - fix flickering of the pane when stepping
,
Oct 5 2016
May we have a screenshot with deeper stack traces?
,
Oct 5 2016
And some 'before' shots for comparison with what we have today. Now that I see stackStyle3.png next to what we have today, it's a bit harder to separate lines when they wrap. This would be nice with middle-truncating links.
,
Oct 5 2016
I think we can do better with the line wrapping. Right now, if a stack frame doesn't fit on a single line, it actually looks like 2 separate frames. My recommendation: if a frame and its source don't fit on a single line, split it across 2 lines, with the frame on the first line and the source on the second. For example, instead of this: +----------------------------------------------------------+ | ReallyLongObjectName.withRea really-long-script-name.js | | llyLongMethodName | +----------------------------------------------------------+ Try this: +----------------------------------------------------------+ | ReallyLongObjectName.withReallyLongMethodName | | really-long-script-name.js | +----------------------------------------------------------+ This will keep the call stack scannable when looking down the left edge. But make sure the source always has some space to the left, so it's doesn't become flush with the function name.
,
Oct 13 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d commit 2ae84df4a969c7b0f17f66a25e29fb59cc484a4d Author: luoe <luoe@chromium.org> Date: Thu Oct 13 01:29:24 2016 DevTools: update styles for debugger's CallStackSidebarPane - async links now format the same as non-async links - updated gray color - async dividers aligned to the left - line separators only appear for async dividers BUG= 652461 Review-Url: https://codereview.chromium.org/2389333002 Cr-Commit-Position: refs/heads/master@{#424929} [modify] https://crrev.com/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d/third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/async-call-stack-url-expected.txt [modify] https://crrev.com/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d/third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/async-call-stack-url.html [add] https://crrev.com/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d/third_party/WebKit/LayoutTests/inspector/sources/debugger/resources/unformatted-async.js [modify] https://crrev.com/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d/third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js [modify] https://crrev.com/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d/third_party/WebKit/Source/devtools/front_end/sources/UIList.js [modify] https://crrev.com/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d/third_party/WebKit/Source/devtools/front_end/sources/uiList.css [modify] https://crrev.com/2ae84df4a969c7b0f17f66a25e29fb59cc484a4d/third_party/WebKit/Source/devtools/front_end/ui/viewContainers.css
,
Nov 3 2016
Since the last bug is to fix flickering, I will update the title to be more searchable.
,
Nov 12 2016
Remaining items: - avoid flickering when stepping in debugger - introduce a dynamic truncation component so that links in the sidepane will truncate in the middle but always have a visible part to the right of the ellipsis
,
Mar 28 2017
Marking this as fixed since the original style update already landed. The 2nd remaining item was also captured by another filed bug: http://crbug.com/692376 |
||||
►
Sign in to add a comment |
||||
Comment 1 by l...@chromium.org
, Oct 4 201640.8 KB
40.8 KB View Download