[WebProfilerBundle] New icons

[lmcd]

I always thought the profiler icons looked a bit mspaint-ish. I've used icons from The Entypo Pictogram Suite and things look a lot better imo. If someone wants to give the go-ahead on this, I'll submit a PR.

Before:

After:

Icons can be found here: http://www.entypo.com/

[Tobion]

Looks better. But since these icons are CC BY, it would require a link to the author on the WDT, wouldn't it?

[lmcd]

Current icons are attributed to Sensio in ICONS_LICENSE.txt

[Tobion]

I'm talking about the new ones you would like to use.

[lmcd]

Yeah I meant to suggest that perhaps the new ones could be credited in the same place. May be a good idea to contact the author if we decide to use them.

[lmcd]

Scales great at bigger resolutions too:
https://dl.dropbox.com/u/169382/wdt-big.png

[empire]

@lmcd And what about using http://fortawesome.github.com/Font-Awesome/ instead. Maybe some icon is not exist, but we can ask needed icons by submitting issues.
This icon set is great on bigger resolutions too.
Font-Awesome has better developer friendly naming when using them (<li></li> vs <i class="icon-github"></i>)

[empire]

And one more things, Font-Awesome is based on twitter bootrstrap. In the future, we can use twitter bootsrap framework for Profiler page and this Font-Awesome is compatible with.

[TroodoNmike]

I am not sure if "After" looks better. Perhaps for "Exception" and "Events" yes but others are good?

[lmcd]

@empire - the Font-Awesome set is also nice, but not quite as good in my opinion. Also the class names are achieved using CSS :before pseudo-elements... there is nothing stopping us doing the same thing. e.g. <span class="icon-exception"></span>. This way we can fall back to images for custom WDT panels.

[lmcd]

@Tobion also note that the current icons are under exactly the same CC BY license

[lmcd]

Some more profiler cleanups with entypo icons:

Before:

After:

[dlsniper]

@lmcd is there a live link to see them in action rather that the screenshots? They look great imho and would be a nice change for the WDT.
And why don't you submit a PR directly since you've done the work already and see the feedback there? ;)

[lmcd]

I'll create a PR in the next few days. This issue touches various other bundles (e.g. DoctrineBundle), making it a bit of a headache to demo.

[lmcd]

The actual toolbar with entypo icons:

Higher res:

What's the current policy on linking external assets in WebProfilerBundle? I see everything is currently inlined on the page as base64 data uris. What's the reason for this?

If we strip the woff font file of everything except the glyphs we need, it weighs in at only 4,060 bytes. This is way less than the images we're using at the moment, provides scalability at higher resolutions and can be easily inlined. The downside is that we'll lose a bunch of other useful glyphs that developers could leverage. Would be nicer if we could link the font.

Edit: also contacted Daniel Bruce from entypo. He's happy for us to use the icons and attribute via the ICONS_LICENSE.txt file.

[fabpot]

we are using base64 images to avoid any external files. This makes the webprofiler independant of Symfony, the full-stack framework, so that it can be used on Drupal or Silex (I have a working prototype that I will publish soon).

[lmcd]

Ok... I'm still a little unclear though how having external assets ties the webprofiler to Symfony. WebProfilerBundle still depends on the routing component, right? Can't we route assets through that and aggressively cache the HTTP responses?

[lmcd]

Closed by mistake, sorry.

[empire]

There is may great standard front-end frameworks like twitter bootstrap with active community. If we want to make werbprofile usable for other frameworks, I think it's good idea to build it on front-end frameworks.

[dlsniper]

@empire @fabpot mentioned a couple of times that there's no need to introduce such a thing nor a Javascript framework as well, unless there's a seriously good reason for it.

Could you mention what is currently broken and should be fixed in the WDT so that you can use it in another project? That way someone could pickup the issue and fix it.

@lmcd This indeed looks very neat, great work ;)

[empire]

@dlsniper sorry if I mentioned something wrong, that was just an idea because I've thought nature of Symfony (the full-stack framework) is a philosophy to build high cohesion loosely coupled components by community for community.
Symfony will encourage others to use it, but maybe, it does not like to use others' components (some components like bootstrap).
Maybe WebProfilerBundle need to be decoupled into sub bundles to allow changes like this issue (changing images or some issues else) will be applied easier without many code re-factoring. I agree with you, maybe, there's not seriously any/good reason for doing it now.

[lmcd]

There are other benefits to using frontend frameworks. A lot of the default styles in the profiler/exception/acmedemo pages just suck. Button/input styles are a great example. Now we could pool together as a community to redo some of the CSS to keep with the times, or we can harness the great work done by other open-source projects.

Here's an example of the bootstrap buttons being used in Symfony (with sensical gradients, up/down/hover states, resolution independence):

I plan on submitting a PR with fixed button/input styles using stuff pulled from bootstrap. Maybe the conversation can continue there.

[sstok]

mspaint-ish? really. 😄 then you have to be a very good designer to create something like that in ms paint.

Ontopic: 👍

[lmcd]

@sstok - that was unfair of me. mspaint was a low-blow, considering the current set isn't all that bad. However, I do think the new ones would be an improvement.

[thewholelifetolearn]

There is also another Font that come out compatible with Bootstrap but can also be used independently:
http://aristath.github.com/elusive-iconfont/index.html
The purpose of this font is that you don't have to declare the "owner/attribution" on the project using the font.
I find the icons have a nice look and can be used in many situations.

I find the idea of adding Bootstrap good too as I think it is used very often.

[inoryy]

I actually like original ones more :/

👎

[jakzal]

👎

Most of the original ones look better.

If we still want the new icons, let's at least keep the ghost for exceptions :)

[bamarni]

I agree, please keep the ghost

[wouterj]

I'm 👎 too. The original ones are way better and definitely not 'mspaint-isch'.

[lmcd]

I'm totally surprised there isn't more support for this change. I personally think they're a lot cleaner, crisp and more consistent - particularly at higher resolutions (see below for example). Seems obvious to me, but I guess it's all subjective.

Old:

New:

I started on logo glyphs but will abandon this for now if the change isn't backed by the community.

Update: Had lots of time on my hands today and managed to get Symfony and PHP logo glyphs done using the Entypo GitHub icon as a template. See above.

[umpirsky]

I like new icons, but would vote for keeping the ghost and old emails icon.

[fabpot]

The other possibility would be to create a font out of the current icons.

[wouterj]

I like @fabpot's idea. I vote for creating an icon font for the these icons:

• the old config icon
• I don't like both request icons, we should think of a better one
• the old exception icon
• the new events icon
• the old logs icon
• the old timeline icon
• the old routing icon
• the old security icon
• the new emails icon (because that looks better with a font, we can't use different colors for one icon in a icon font)
• the new doctrine icon (the same reason os with the emails icon)
• the old minimize icon

[lmcd]

Some thoughts:

• Mixing icons from different old/new sets is a bad idea. Consistency/design language goes out the window.
• Designing new icons is a bad idea - we're developers not designers. There are plenty of icon sets out there that suit our needs perfectly - entypo being one of them and Font Awesome being another great example.
• Turning the existing icons into a font is easier said than done. Having toyed with adding new logo glyphs today, I can say that it is a complicated process. Plus I'm doubting the old icons from Sensio are vectorised (I may be wrong), which means someone is going to have to redraw all these in Inkscape/Illustrator - all because of some sentimental community attachment to the ghost (which somehow represents an exception?)
• The icon sets mentioned above each contain ~250 beautiful glyphs. This gives developers plenty of choice if they wish to extend the Web Profiler with a panel of their own.

[nihunde]

how about this? i retraced it, or at least the ghost. I will gladly provide you with the svg, but i cant attach svg here

[pborreli]

@nihunde typo occured => occurred

[nihunde]

@pborreli oh sorry, my mistake. It was more to illustrate that i retraced it and 3d-printed it.

[inoryy]

looks like that ghost is giving us middle fingers when enlarged :D Which actually makes sense!

[hice3000]

Are there thoughts about using a frontend-framework anymore? I like bootstrap very much, and it will perfectly fit the current design structure.

[stof]

@hice3000 We cannot bundle Bootstrap into Symfony

• it is under the Apache license, which is more restrictive than the MIT license used by Symfony
• the toolbar itself must not load a CSS framework on the page (it would mess up with the page itself unless you rewrite the framework to prefix all classes, as scoped styles are not yet supported by browsers)

[lmcd]

Doesn't the Apache license just require attribution?

[wouterj]

including an Apache license into the Symfony core means it's incompatible with Gpl V2 (iirc) licenses.

see also: https://github.com/symfony/symfony-standard/issues/442#issuecomment-15669331

[stof]

@wouterj exactly. and so it would forbid using it with Drupal

[lmcd]

@wouterj, @stof Ah

[lmcd]

For anyone interested, see also: twbs/bootstrap#2054

[cordoval]

@stof but drupal i don't think they use our profiler and stuff don't they?

in any case, what is the status of this? :D i like @Inori appreciation of the middle fingers of the ghost.

I though like the new icons since we need a change with v2.5 👶

I even wonder if there is a possibility of themeing the WDT and such icons so we can switch to whatever theme we like.

[lmcd]

Bootstrap is now MIT FYI. I'm working on a PR to bring some bootstrap niceties to the Web Profiler

[wouterj]

Well, did you look at the other reason aswell? It would be quite hard to maintain an up to date bootstrap when we need to edit every style that's in there, so it wouldn't conflict with the page.

[lmcd]

Namespacing the whole of bootstrap using LESS is trivial (one line of code). Also, I still firmly believe we should lift the limitation on inclusion of external assets. We can easily use routing and an asset controller to resolve this.

[fabpot]

Closing now as no consensus can be found on this one.