938616 - webconsole UI updates while in split mode with other panels

Status: RESOLVED FIXED

(DevTools :: Console, defect, P2)

Description

[Brian Grinstead [:bgrins]]

Here is (kind of) what the split console will look like: https://bugzilla.mozilla.org/attachment.cgi?id=828842.  There are some UI cleanup items we should land in this release with it.

Some thoughts from msucan about the the split console UI: https://bugzilla.mozilla.org/show_bug.cgi?id=862558#c27.

We should have:

- a button for new split console.
- a smaller console toolbar when the console is displayed at the bottom.

Note that the new comps in Bug  (like https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/[e-mail]) already have a smaller console.  We will need to decide if this is enough, or if we need an even smaller top toolbar.

Regardless, this bug should land with Firefox 28, so depending on the progress on Bug 916766 we may want to just do something simple with the existing toolbar when it is in split mode.

Comment 1

[Brian Grinstead [:bgrins]]

Darrin, do you have any thoughts on adding a button to toggle the split console?  Should we add one, where should it go, and what should it look like?

Comment 2

[Paul Rouget [:paul]]

> We will need to decide if this is enough, or if we need an even smaller top toolbar.

I'd prefer if we can avoid duplicating code. Let's not have a different design for the split-console. And at some point, we will use JSTerm instead of the console, so it's a temporary thing.

I see 3 options:
1) we just land this as it is (big buttons)
2) we wait until we redesigned the web console toolbar
3) we remove the toolbar in split-mode (in split mode, people want just to evaluate JS I guess)

Comment 3

[Victor Porof [:vporof][:vp]]

fwiw, i like option 3.

Comment 4

[Brian Grinstead [:bgrins]]

(In reply to Paul Rouget [:paul] from comment #2)
> > We will need to decide if this is enough, or if we need an even smaller top toolbar.
> 
> I'd prefer if we can avoid duplicating code. Let's not have a different
> design for the split-console. And at some point, we will use JSTerm instead
> of the console, so it's a temporary thing.
> 
> I see 3 options:
> 1) we just land this as it is (big buttons)
> 2) we wait until we redesigned the web console toolbar
> 3) we remove the toolbar in split-mode (in split mode, people want just to
> evaluate JS I guess)

I'm thinking we land it as-is and do whatever changes here as a follow up.

I've never been a big fan of (3), since I think that actually complicates the UX - if your logs weren't showing up b/c a filter wasn't selected, then we need to somehow tell them to go over to the 'real' console panel and enable them.

I'm kind of leaning towards (2).  In the meantime we could probably update the button height in the toolbar to match screens in Bug 916766, without fully implementing the whole design (which seems to have some behavior changes with it wrt filters).

Comment 5

[Brian Grinstead [:bgrins]]

Darrin, can you make an icon for the split console UI for us to add as a command button?  The other command-* buttons can be seen here: https://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/devtools/.

Comment 6

[Darrin Henein [:darrin]]

Attachment: command-console.png

I made an icon (attached), can you show me a screenshot of it in the toolbar so I can ui-review it in place?

Comment 7

[Brian Grinstead [:bgrins]]

Attachment: splitconsole-button.png

> I made an icon (attached), can you show me a screenshot of it in the toolbar
> so I can ui-review it in place?

Here is a screenshot of the button in both on and off states

Comment 8

[Darrin Henein [:darrin]]

Attachment: command-console.png r2

Going to be picky here... this icon in this attachment is 1px taller and 1px shifted down (within the same 16px area). Can you also toggle the paintbrush icon in the screenshot so I can make sure the active state is consistent?

Comment 9

[Brian Grinstead [:bgrins]]

Attachment: splitconsole-button1.png

OK, updated to the new icon, and have a screenshot next to paint flashing enabled.

Comment 10

[Darrin Henein [:darrin]]

Comment on attachment 8338729 [details]
splitconsole-button1.png

Looks good to me :) Thanks!

Comment 11

[Brian Grinstead [:bgrins]]

Attachment: webconsole-ui-updates-WIP.patch

Work in progress patch that adds a command button for the split console.  

* Added gcli command for "splitconsole on", "splitconsole off", and "splitconsole toggle".
* Modified toggleSplitConsole to take a bool to force on or off
* The "splitconsole toggle" command button listens to toolbox events for split console and tool selected to show current state.  I've tested this with in different host states and across multiple tabs, but need to add in a test for this, and double check that it isn't going to cause any problems.

Comment 12

[Brian Grinstead [:bgrins]]

Attachment: webconsole-ui-updates.patch

Patch updated with tests and hidden gcli command.  Will need one string localized for the tooltip text on the button.  Ongoing try push: https://tbpl.mozilla.org/?tree=Try&rev=eb25a9426dc0.

Comment 13

[Brian Grinstead [:bgrins]]

Comment on attachment 8341857 [details] [diff] [review]
webconsole-ui-updates.patch

Mihai,
Can you take a look at this patch? Darrin has already done a UI review on the button itself.

Comment 14

[Mihai Sucan [:msucan]]

Comment on attachment 8341857 [details] [diff] [review]
webconsole-ui-updates.patch

Review of attachment 8341857 [details] [diff] [review]:
-----------------------------------------------------------------

Brian, thanks for the patch - glad to see this close to being done.

Patch looks good, but the icon is not rendered on Linux. You only updated toolbox.css for osx. The same problem might be valid for Windows builds as well.

Comment 15

[Brian Grinstead [:bgrins]]

(In reply to Mihai Sucan [:msucan] from comment #14)
> Comment on attachment 8341857 [details] [diff] [review]
> webconsole-ui-updates.patch
> 
> Review of attachment 8341857 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Brian, thanks for the patch - glad to see this close to being done.
> 
> Patch looks good, but the icon is not rendered on Linux. You only updated
> toolbox.css for osx. The same problem might be valid for Windows builds as
> well.

My mistake - marking as dependent on Bug 941673 so that the CSS only needs to be added in one place.

Comment 16

[Brian Grinstead [:bgrins]]

Attachment: webconsole-ui-updates.patch

The button should be showing up now.  The patch is actually simpler now as well - I made the gcli command hidden, and only added the single splitconsole command.

Pushed to try: https://tbpl.mozilla.org/?tree=Try&rev=9a26c078b1a9.

Comment 17

[Mihai Sucan [:msucan]]

Comment on attachment 8343769 [details] [diff] [review]
webconsole-ui-updates.patch

Looks good to me. Glad to see this is landing!

Comment 18

[Brian Grinstead [:bgrins]]

https://hg.mozilla.org/integration/fx-team/rev/fc277a7f8d60
https://tbpl.mozilla.org/?tree=Fx-Team&rev=fc277a7f8d60

Comment 19

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/fc277a7f8d60