WebIDE Sidebar Mode

[J. Ryan Stinnett]

Currently WebIDE uses dropdowns for selecting project and runtime
items. We've been working on a version of the interface that removes
the dropdowns and replaces them with sidebars.

Check out a screenshot[1] of the sidebar mode to learn more.

You can try out this sidebar mode by setting the
"devtools.webide.sidebars" preference to true in about:config. (Please
close WebIDE before toggling the pref.)

We are thinking of removing the dropdown layout and switching to the
sidebar one permanently. If there are some valid concerns for keeping
it as is, please let us know - otherwise we'll plan to transition to
this soon.

Stay tuned for further UX improvements, including moving parts of
WebIDE into Firefox tabs and other frequent requests.

[1]: https://cldup.com/ukc9HfO7Qpa/61AtMj.png

Thanks,
WebIDE Team

[Dietrich Ayala]

THIS IS AWESOME.

_______________________________________________
dev-gaia mailing list
dev-...@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-gaia

[Andrew Sutherland]

On Mon, Aug 31, 2015, at 07:51 PM, J. Ryan Stinnett wrote:
> We are thinking of removing the dropdown layout and switching to the
> sidebar one permanently. If there are some valid concerns for keeping
> it as is, please let us know - otherwise we'll plan to transition to
> this soon.

Can you clarify what this does to the screen real estate of the
developer tools proper? Once I'm debugging my app, I don't really want
either of those sidebars eating up my inspector/console/debugger/etc.
real-estate. Ideally they would just live in a different state rather
than having the left and right sides of the screen have auto-hide
triggers. (Other announced/pending changes may cover this?)

Andrew

[Reza Akhavan]

> On Aug 31, 2015, at 6:33 PM, Andrew Sutherland <asuth...@asutherland.org> wrote:
>
> Once I'm debugging my app, I don't really want either of those sidebars eating up my inspector/console/debugger/etc. real-estate.

Same here, thanks for mentioning this Andrew.

[J. Ryan Stinnett]

On Mon, Aug 31, 2015 at 8:33 PM, Andrew Sutherland
<asuth...@asutherland.org> wrote:
> On Mon, Aug 31, 2015, at 07:51 PM, J. Ryan Stinnett wrote:
>> We are thinking of removing the dropdown layout and switching to the
>> sidebar one permanently. If there are some valid concerns for keeping
>> it as is, please let us know - otherwise we'll plan to transition to
>> this soon.
>
> Can you clarify what this does to the screen real estate of the

> developer tools proper? Once I'm debugging my app, I don't really want

> either of those sidebars eating up my inspector/console/debugger/etc.

> real-estate. Ideally they would just live in a different state rather
> than having the left and right sides of the screen have auto-hide
> triggers. (Other announced/pending changes may cover this?)

At the moment, once a toolbox opens, the toolbox still takes the full
width of the window, however it no longer goes full height. You can
resize the toolbox to be as tall as you like. This was done to make it
more obvious how to continue interacting with the sidebar to change
apps, etc., but perhaps something else would be better.

I'd suggest trying it out and letting us know how it feels to you.

- Ryan

[Andrew Sutherland]

On Mon, Aug 31, 2015, at 09:41 PM, J. Ryan Stinnett wrote:
> At the moment, once a toolbox opens, the toolbox still takes the full
> width of the window, however it no longer goes full height. You can
> resize the toolbox to be as tall as you like. This was done to make it
> more obvious how to continue interacting with the sidebar to change
> apps, etc., but perhaps something else would be better.
>
> I'd suggest trying it out and letting us know how it feels to you.

It feels a bit awkward currently:
* In order to maximize my inspect/console space, I have to drag the
splitter all the way up, but the splitter has a minimum size for the
sidebar/content area/sidebar so I lose some vertical real-estate and it
looks ugly.
* The sidebars are eating up the content area for the runtime
monitor/permissions table/runtime info/device preferences. I can resize
the sidebars down to nothing and then get them back, but it's definitely
more awkward than the current dropdowns.

Having said that, it's not a huge deal to me, and if there are people
currently experiencing frustration with the dropdowns disappearing on
them or something, I'd certainly err on the side of avoiding that
problem.

I feel like I've heard talk of moving the WebIDE to just be tabs in
Firefox, and that sounds ideal if it means that once I pick an app to
attach to on a specific device endpoint, a tab just opens to debug that
app with just the devtool and it doesn't need to share the screen
real-estate with any of the dropdown stuff. Maybe there could be a
breadcrumb navigation affordance like "[WebIDE] > [Device: Flame] >
[App: Email]".

Andrew

PS: I realize it's all a bit complex since these two drop-downs are a
mash-up of the otherwise orthogonal "pick a device, then pick an app /
device info screen" and "project management / editor / IDE" roles.

[J. Ryan Stinnett]

On Mon, Aug 31, 2015 at 9:14 PM, Andrew Sutherland
<asuth...@asutherland.org> wrote:
> On Mon, Aug 31, 2015, at 09:41 PM, J. Ryan Stinnett wrote:
>> At the moment, once a toolbox opens, the toolbox still takes the full
>> width of the window, however it no longer goes full height. You can
>> resize the toolbox to be as tall as you like. This was done to make it
>> more obvious how to continue interacting with the sidebar to change
>> apps, etc., but perhaps something else would be better.
>>
>> I'd suggest trying it out and letting us know how it feels to you.
>
> It feels a bit awkward currently:
> * In order to maximize my inspect/console space, I have to drag the
> splitter all the way up, but the splitter has a minimum size for the
> sidebar/content area/sidebar so I lose some vertical real-estate and it
> looks ugly.
> * The sidebars are eating up the content area for the runtime
> monitor/permissions table/runtime info/device preferences. I can resize
> the sidebars down to nothing and then get them back, but it's definitely
> more awkward than the current dropdowns.

Would you prefer having the toolbox be "full screen" in the WebIDE
window (the way it appears today without sidebars)? It's easy to make
this happens if people would prefer it. It would then cover the
sidebars fully, and you'd need to use the wrench icon / close the
toolbox to access the sidebars again.

We were just worried it would not be clear how to reach the sidebars
again once a toolbox appears, but I agree with you that vertical space
is wasted as it is for the moment.

> Having said that, it's not a huge deal to me, and if there are people
> currently experiencing frustration with the dropdowns disappearing on
> them or something, I'd certainly err on the side of avoiding that
> problem.

There were several people displeased with the number of clicks the
dropdowns added to their workflow in WebIDE vs. App Manager, so the
sidebars are meant to help with that. Also, I think it make things
less perplexing for new users, since all the buttons are in front of
you from the start, instead of behind mysterious buttons that reveal
dropdowns.

> I feel like I've heard talk of moving the WebIDE to just be tabs in
> Firefox, and that sounds ideal if it means that once I pick an app to
> attach to on a specific device endpoint, a tab just opens to debug that
> app with just the devtool and it doesn't need to share the screen
> real-estate with any of the dropdown stuff. Maybe there could be a
> breadcrumb navigation affordance like "[WebIDE] > [Device: Flame] >
> [App: Email]".

Your dream is coming. :)

> PS: I realize it's all a bit complex since these two drop-downs are a
> mash-up of the otherwise orthogonal "pick a device, then pick an app /
> device info screen" and "project management / editor / IDE" roles.

Yes, I think having all the buttons "on the table" at first makes it
somewhat less mysterious (for new users at least).

- Ryan

[Jeff Griffiths]

On Mon, Aug 31, 2015 at 7:14 PM, Andrew Sutherland
<asuth...@asutherland.org> wrote:
...

> I feel like I've heard talk of moving the WebIDE to just be tabs in
> Firefox, and that sounds ideal if it means that once I pick an app to
> attach to on a specific device endpoint, a tab just opens to debug that
> app with just the devtool and it doesn't need to share the screen
> real-estate with any of the dropdown stuff. Maybe there could be a
> breadcrumb navigation affordance like "[WebIDE] > [Device: Flame] >
> [App: Email]".

That's definitely an interesting idea. Do you mean, a tabbed interface
within a top-level browser tab or instead creating new browser tabs?

> PS: I realize it's all a bit complex since these two drop-downs are a
> mash-up of the otherwise orthogonal "pick a device, then pick an app /
> device info screen" and "project management / editor / IDE" roles.

>From my point of view what Ryan is proposing here is a smaller change
to make things better in the short term. I do think if we're going to
invest in development / project management features we need to
re-visit and potentially radically change the workflows.

Jeff

[Andrew Sutherland]

On Tue, Sep 1, 2015, at 11:52 AM, J. Ryan Stinnett wrote:
> Would you prefer having the toolbox be "full screen" in the WebIDE
> window (the way it appears today without sidebars)? It's easy to make
> this happens if people would prefer it. It would then cover the
> sidebars fully, and you'd need to use the wrench icon / close the
> toolbox to access the sidebars again.

Yes, if it wouldn't result in the loss of the devtools state. However,
based on what you're saying and how things work right now when I play
with it, I think there would be a compulsory loss of devtools state if
trying to access any of the other tooling. (Unless there's a way to
open multiple WebIDE's somehow? But it seems like a singleton window.)

Maybe if the splitter for the devtools is a XUL splitter, a grippy can
be put inside it and collapse used
(https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/splitter#Attributes)?
The fat grippy provides a visible affordance to get the content area
back without the visual oddity of the current minimum size for the
content area.

> There were several people displeased with the number of clicks the
> dropdowns added to their workflow in WebIDE vs. App Manager, so the
> sidebars are meant to help with that. Also, I think it make things
> less perplexing for new users, since all the buttons are in front of
> you from the start, instead of behind mysterious buttons that reveal
> dropdowns.

Yes, the discoverability seems very important. If I were a new user, I
think I would appreciate the sidebars over a journey of exploration,
especially since choosing something in the right drop-down can result in
a change in the contents of the left drop-down which would not be
visible to the user. And they probably checked the left drop-down
first.

Maybe the sidebars could get collapse-grippy's too? (Although I assume
that is now a separate HTML-based framework and collapsing-grippies are
somewhat retro... but if our only solution is to drag something to
zero-width to get the screen real-estate back, then it really does need
a collapse-grippy.)

> Your dream is coming. :)

Woo!

Andrew

[Andrew Sutherland]

On Tue, Sep 1, 2015, at 03:25 PM, Jeff Griffiths wrote:
> That's definitely an interesting idea. Do you mean, a tabbed interface
> within a top-level browser tab or instead creating new browser tabs?

New browser tabs. No need to reinvent the tabbed interface wheel,
especially when the current wheel allows TreeStyleTabs and friends to
create hierarchical nestings so that I could have the root tab be my
connection to the device, and then I could have multiple separate app
debugging tabs open under that.

Andrew