1620545 - Console - move the Multi-line mode button in the bar above

Status: NEW

(DevTools :: Console, defect, P3)

Description

[Cristian Fogel [:cfogel]]

Attachment: multilineBTN.gif

Affected versions

• 73.0.1, 74.0, 75.0a1 (2020-03-05)

Affected platforms

• Windows 10, macOS 10.15, Ubuntu 18.04;

Steps to reproduce

1. Launch Firefox, enable DevTools, select the Console tab;
2. Zoom/Resize the DevTools-Console section - see the recording attached for a better understanding;

Enhancement suggestion

• move the button on the bar above, there would be enough space between the filter and Settings/Clear button;
• probably could have it, be the same button to toggle the multi/single line mode instead of 2 independent buttons;

Actual result

• multiple scroll bars appear;
• button gets truncated when zoom/resize occur;

Regression range

• will check and provide one asap;

Additional notes

• attached recording with the issue;

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

that's something we discussed with Florens as well in the past: remove the icon in the input and have a more well known "expand" icon in the toolbar

Comment 2

[Florens Verschelde :fvsch]

There's two separate topics IMO:

1. How do we handle a very constrained toolbox height?

Looking at the GIF, and after a few tests: when there is not enough room to display both the JSTerm and the EagerEvaluation component, the JSTerm container shrinks (despite having a min-height around 22px -> in my tests the Inspector was reporting it as shrinking to e.g. 17px).
Adding a flex-shrink: 0 seems to help.

2. Does it make more sense to have the "Editor mode" button in the toolbar?

I like it personally, but since we shipped with one design for a few cycles I wouldn't change it without more input from a designer or PO. Two ideas:

• It would be great to either do mockups or prototype the feature directly in code and do some screenshots or video captures to review the changes.
• I'm also wondering if this change could be coordinated with something similar in Network, to see if we can align the "left pane" experience in Console, Network and Debugger.

One anecdotal data point is that the Chrome console has a left sidebar that can be toggled with a generic "Expand" button (so the same thing Nicolas & I suggested), but I've almost never seen users actually explore it or have it visible. Using that design, would we make our features (Editor mode, Request blocking, etc.) less discoverable?

We could also align with what Network did, and use an always-visible button in the middle of the toolbar, and an extra "Collapse" button in the sidebar.

Comment 3

[Florens Verschelde :fvsch]

The first part, the min-height thing, may have regressed in bug 1616343.

Comment 4

[Cristian Fogel [:cfogel]]

Attachment: Screen Shot 2020-03-11 at 10.51.29.png

One more thing that would be worth adding here, noticed on macOS 10.13.6 that pushing the button brings up the focus decoration that spans over the whole width of the row.