Icons and overall design

[Templarian]

http://img35.imageshack.us/img35/8008/designc.png

So as we were discussing in IRC, maybe it would be a good idea to get
a nicer more consistent look going on.

(that is a layered PNG, feel free to mess around with it)

[johnjbarton]

I don't know the context of this post, but I like the inspect and
pause buttons. I am less convinced about the iconic tabs, esp. since
the HTML and CSS icons are essentially text inside of a colored box.
If visual cue is the goal, maybe the tab can be colored instead.

jjb

[Templarian]

Actually, most agree with you about removing those icons on the tabs
(They are just out of the silk icon pack).

I don't really know if the icons benefit on the tabs so probably best
to remove those. The general idea was matching the tabs UI style and
removing a few pixels off the top of the firebug, and making the
inspect icon a bit more obvious.

What do you guys think about the idea of changing the bottom right up
arrow to something else more descriptive.

Thanks for looking at it.

[Hernan Rodriguez Colmeiro]

Err... I get a 403 - Forbidden in imageshack :(

Hernán

[Templarian]

Orginal(with icons): http://img43.imageshack.us/img43/1705/hmmf.png
Update: http://img43.imageshack.us/img43/1563/designm.png

Thats odd, I submitted a reply yesterday with a new image and it never
showed up. Also not sure why exactly that last image is now showing a
403.

[Hernan Rodriguez Colmeiro]

On Thu, May 28, 2009 at 09:22, Templarian <ad...@templarian.com> wrote:
> Orginal(with icons): http://img43.imageshack.us/img43/1705/hmmf.png
> Update: http://img43.imageshack.us/img43/1563/designm.png

I like the update, but I think button's color should stay on the red family :)

Hernán

[Templarian]

Yea, when I was changing it I even though it didn't look right.

http://img11.imageshack.us/img11/8471/designy.png

Hmm... It does look a lot cleaner.

Also we need a rollover for the bottom right button. Just noticed it
doesn't have a rollover tooltip like the rest of the buttons.

[johnjbarton]

See also:
http://code.google.com/p/fbug/issues/detail?id=1799

jjb

[Templarian]

http://img43.imageshack.us/img43/585/designw.png

Busy at work today, give me a second and later I'll put up one with
better undock and minimize buttons.

[Templarian]

http://img40.imageshack.us/img40/9914/designd.png

I kind of like the new red icons, a bit more descriptive.

[Rob Campbell]

I like this quite a bit.

For context, this came up in discussion in IRC yesterday and
Templarian went ahead and started mocking these up. This new iteration
is pretty slick.

[Hernan Rodriguez Colmeiro]

On Thu, May 28, 2009 at 16:19, Rob Campbell <robmca...@gmail.com> wrote:
>
> I like this quite a bit.
>
> For context, this came up in discussion in IRC yesterday and
> Templarian went ahead and started mocking these up. This new iteration
> is pretty slick.

I think the same as Rob, firebug's renewed face seems pretty nice.

Hernán

[Templarian]

Taking curtis' advice from a second ago:
http://img7.imageshack.us/img7/1769/designxif.png

[johnjbarton]

I think the double boxes are clearer for detach. I can't figure out
the arrow pointing in to the box thing.

As you are evaluating choices here, two things to keep in mind:
1.5 will have a lot more tabs
The net panel's options-all-on-the-toolbar is the direction we want
for panel options.

jjb

[jay403]

This is great work I really like it.
The only thing is : FamFamFam Silk icons are all over the internet. It
seems that a lot of people are using this icons.

[Philippe Wittenbergh]

On May 29, 2009, at 5:20 AM, Templarian wrote:

> Taking curtis' advice from a second ago:
> http://img7.imageshack.us/img7/1769/designxif.png

This is heading in a nice direction. I agree with John Barton that the
'detach' is not clear, though.

Also: bear in mind that those icon have to be seen on different
platforms. The yellowish 'pause' icon would be harder to see on OS X
for example.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/

[Templarian]

Thanks guys so far. I'm actually only using 1 silk icon. The rest are
modified versions.

"The net panel's options-all-on-the-toolbar is the direction we want
for panel options."

I don't understand. Can you reword it?

Update: http://img43.imageshack.us/img43/2167/designv.png
(For the more tabs, we can make the fonts smaller/less padding and it
would still look good)

[Templarian]

I was actually only designing it for windows, worst case scenario we
could probably move the play/pause stuff to the skins. In either case
I removed the yellow, everyone thought it looks ugly. :P

On May 29, 8:24 am, Philippe Wittenbergh <ph.wittenbe...@gmail.com>
wrote:

[Jan Odvarko]

> "The net panel's options-all-on-the-toolbar is the direction we want
> for panel options."
> I don't understand. Can you reword it?

This is a long time issue. The goal here is to get rid of the panel
options menu (it's the small triangle next to panel's label). It would
be nice to have all these options directly available on panel's
toolbar and not hidden behind a popup menu. The Net panel serves as a
good example, since all the filter options are already on the
toolbar.

The problem is that e.g. the Console panel has a lot of options + long
labels like: "Show JavaScript Warnings". If these options were
converted to some toolbar buttons (with labels) there wouldn't be
enough horizontal space.

But in the case where we would have an icon for each option, a button
would be pretty thin and they would all fit into the toolbar and the
current labels would be use just for tooltips...

Honza

[Templarian]

I understand now, I'll try and work on something, also since they will
be visually indented to show if they are enabled or not, it will make
them more obvious to newer users.

Will take a bit of brainstorming to get some nice icons, but it's very
doable.

Some are easy like the CSS/HTML stuff. They will just to to the left
of the edit button on those.

[Templarian]

http://img35.imageshack.us/img35/4706/designf.png

Here are the red buttons you will see added in 31.