gasolin@mozilla.com Reporter
	Description • 8 years ago

from UI spec in bug 1150496 , we'd like polish style and add tab motion for sidebar

	gasolin@mozilla.com Reporter
	Comment 1 • 8 years ago

Helen, 

I saw the tab motion in UI spec is different from the prototype for main panel, is there a more detailed tab motion spec for sidebar?

	Gabriel [:gl] (ΦωΦ)
	Comment 2 • 8 years ago

Hi Fred,

This looks like a duplicate of Bug 1253880. You are free to take it if you want.

	gasolin@mozilla.com Reporter
	Comment 3 • 8 years ago

helen, we still need clarify if main tab panel & sidebar tab panel has different tab motion design

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 4 • 8 years ago

(In reply to Fred Lin [:gasolin] from comment #3)
> helen, we still need clarify if main tab panel & sidebar tab panel has
> different tab motion design

Hey Fred,

I have designs, but I haven't gone through and created a spec sheet like I have for other designs. I'll try to whip something up so you can look over it on Monday.

Animation design will take longer—I have the beginnings of a prototype you can see in the Codepen link, but I'd like to have Fang take a look at it once the animation is in to give it her seal of approval!

http://codepen.io/helenvholmes/pen/eZQwmb

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 5 • 8 years ago

Updated the animation, going to ask Fang to take a look at it: https://cl.ly/0C2L1G191X1b

	gasolin@mozilla.com Reporter
	Comment 6 • 8 years ago

Thanks Helen! Fang said the difference of main tab & sidebar tab is the icon animation, we may able to implement it at once in bug 1253880

	Fang Shih [:fang]
	Comment 7 • 8 years ago

(In reply to Fred Lin [:gasolin] from comment #6)
> Thanks Helen! Fang said the difference of main tab & sidebar tab is the icon
> animation, we may able to implement it at once in bug 1253880

Hey Fred, and sidebar has a line below it, that's also part of the difference.

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 8 • 8 years ago

I'd like to get some review cycles started for the sidebar tabs to address questions the two of you have and information that's missing.

I'm flagging both of you for review on this PNG, but if you could actually review this Invision link instead, it will have the most up-to-date version of my designs:

https://invis.io/F68A5KHKY#/179720580_Sidebar_Tabs

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 10 • 8 years ago

Comment on attachment 8781152 [details]
Sidebar Tabs.png

When you have a moment, Brian, could you take a look at this too?

	gasolin@mozilla.com Reporter
	Comment 11 • 8 years ago

Gabriel, since main bar tab has longer dependency that need to be solved, maybe we can use this issue to work on the sidebar tab panel (which has been converted to react) first?

	Gabriel [:gl] (ΦωΦ)
	Comment 12 • 8 years ago

(In reply to Fred Lin [:gasolin] from comment #11)
> Gabriel, since main bar tab has longer dependency that need to be solved,
> maybe we can use this issue to work on the sidebar tab panel (which has been
> converted to react) first?

That sounds good. Please go ahead with working on the sidebar tab panel refresh.

	gasolin@mozilla.com Reporter
	Comment 13 • 8 years ago

now we have at most 5 sidebar panels (4 in nightly), do we have any recent plan to add more sidebar panels?

Current sidebar panel has set a minimum width (as default view when user open inspector the first time), do we like to remove the limit? 
Or could you provide the width when the `additional panel` should be shown?

Based on design, the `additional panel` is shown as a dropdown at right side, how do we handle the case that the panel title is too long?


The `additional panel` design looks very different from main tab panel's dropdown design, do you have plan to unify it, or should they be consider separately?

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 14 • 8 years ago

(In reply to Fred Lin [:gasolin] from comment #13)
> now we have at most 5 sidebar panels (4 in nightly), do we have any recent
> plan to add more sidebar panels?
We are discussing introducing a new panel named "Layout" for when CSS grid ships. You can learn more about that panel here:

https://projects.invisionapp.com/share/3X87NEBYH#/screens/179720294_Grid

Bug 1181227

> Current sidebar panel has set a minimum width (as default view when user
> open inspector the first time), do we like to remove the limit? 
> Or could you provide the width when the `additional panel` should be shown?
We should keep the min-width. There are plans to change the min-width in bug 1291972 (work in bug 1260552 also affects this size) so I've updated the Invision link to include designs for the panel at its smallest size I've heard quoted over IRC (250px) and breakpoints for when to show additional panels.

> Based on design, the `additional panel` is shown as a dropdown at right
> side, how do we handle the case that the panel title is too long?
Updated the URL with this use case, although we should chat about whether or not it's possible. (With devtools.html, we're losing the capability of having devtools UI expand into the web content, but I don't know if this is a limitation for native browser UI elements.)

> The `additional panel` design looks very different from main tab panel's
> dropdown design, do you have plan to unify it, or should they be consider
> separately?
I believe they should be considered separate, as the toolbar needs to be much more customizeable than the sidebar needs to be.

	gasolin@mozilla.com Reporter
	Comment 15 • 8 years ago

The sidebar tabs width are even to the whole sidebar width (flex-grow=1), so does the debugger and network monitor panels. 
Since de-XUL work haven't done yet, we will have inconsistent sidebar UI for a period of time if we want to introduce new look and feel with this spec.

I found network monitor already have `additional menu` which works with current even-sized tabs style, would we like to have both of them in devtools?

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 16 • 8 years ago

(In reply to Fred Lin [:gasolin] from comment #15)
> Created attachment 8782292 [details]
> network monitor additional menu
> 
> The sidebar tabs width are even to the whole sidebar width (flex-grow=1), so
> does the debugger and network monitor panels. 
> Since de-XUL work haven't done yet, we will have inconsistent sidebar UI for
> a period of time if we want to introduce new look and feel with this spec.
> 
> I found network monitor already have `additional menu` which works with
> current even-sized tabs style, would we like to have both of them in
> devtools?

I don't think we want both in devtools; I'd like to update both at the same time, since having different panel UIs at the same time is confusing. I've updated the design doc for the network panel sidebar, and left a note about how the debugger sidebar will intentionally be different.

Gabe, do you know of other places where we should be concerned about a sidebar? I looked around and couldn't find anything that seemed to fit this exact pattern.

	Gabriel [:gl] (ΦωΦ)
	Comment 17 • 8 years ago

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #16)
> (In reply to Fred Lin [:gasolin] from comment #15)
> > Created attachment 8782292 [details]
> > network monitor additional menu
> > 
> > The sidebar tabs width are even to the whole sidebar width (flex-grow=1), so
> > does the debugger and network monitor panels. 
> > Since de-XUL work haven't done yet, we will have inconsistent sidebar UI for
> > a period of time if we want to introduce new look and feel with this spec.
> > 
> > I found network monitor already have `additional menu` which works with
> > current even-sized tabs style, would we like to have both of them in
> > devtools?
> 
> I don't think we want both in devtools; I'd like to update both at the same
> time, since having different panel UIs at the same time is confusing. I've
> updated the design doc for the network panel sidebar, and left a note about
> how the debugger sidebar will intentionally be different.
> 
> Gabe, do you know of other places where we should be concerned about a
> sidebar? I looked around and couldn't find anything that seemed to fit this
> exact pattern.

So, I think it is definitely the network and inspector that has these types of sidebar tabs. Ideally, we would have to change them both to match the new proposed sidebar.

	Patrick Brosset <:pbro>
	Comment 18 • 8 years ago

Inspector bug triage (filter on CLIMBING SHOES).

	Brian Grinstead [:bgrins]
	Comment 19 • 8 years ago

Comment on attachment 8781152 [details]
Sidebar Tabs.png

This looks good to me.  Netmonitor is the only other place where we use the ToolSidebar with multiple tabs.  We do happen to use the ToolSidebar widget in the Console and Scratchpad for variable viewing but those have a single (hidden) tab and shouldn't be affected by any changes here.

	gasolin@mozilla.com Reporter
	Comment 20 • 8 years ago

Comment on attachment 8781152 [details]
Sidebar Tabs.png

overall looks good, but I'd like to make sure `additional menu` works for both  inspector and networkmonotor panel

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 21 • 8 years ago

Removed "and add tab motion", since I think that will be done in a follow-up bug. (There's enough UI work for one bug anyway.)

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 22 • 8 years ago

Taking off "devtools-toolbar" as a whiteboard to reserve that whiteboard only for work relating to the toolbar itself.

	Julien Cristau [:jcristau]
	Comment 23 • 7 years ago

Mass wontfix for bugs affecting firefox 52.