Bug 28186 – Web Inspector scope bar not quite right

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Sam Weinig]

The Web Inspectors new scope bar for the resources pane seems to be too dark.  It could use some tweaking.

[Anthony Ricaud]

I tried to find some resources to get it right but can't find them. I ended up using a demo that Matt Lillek gave me.

No problem for tweaking the color, I just don't know  the exact colors. If you have any pointer, I'll be glad to update that.

[Joseph Pecoraro]

Ahh, I know the one thing that has been really bothering me about this is how bold the "white text" looks when something is selected.  I finally found a solution thanks to http://orderedlist.com/articles/thining-text-in-safari-under-snow-leopard:

  -webkit-text-stroke:1px transparent;

It works like magic! Apply that to the selected/hover states and the text gets thinner without affecting the width of elements. Here is the before (top) and after (bottom):
http://grab.by/6hC

All thats left would be tweaking the colors. How do you guys feel about the thinner text?

[Timothy Hatcher]

Neat trick. I like the thinner look.

[Joseph Pecoraro]

Also interesting with this text-stroke property you can get get some really fine grained thicknesses.  If you think the text in the above was too thin, then you can try the following from 0.1px up to 0.9px to get the perfect feel:

  -webkit-text-stroke: 0.1px white;

Note that in the "1px transparent" the 1 was essentially a dummy value.

Here is some more info about text stroke (which was news to me):
http://webkit.org/blog/85/introducing-text-stroke/

[Matt Lilek]

Created attachment 40195 [details]
smaller font mockup

Does anyone else think that the 12px text looks out of place?  Everything else in the inspector is 10 or 11px and the scope bar's larger size just looks awkward to me.  Xcode uses 11px text in the scope bar in its build results window and I think it looks good in the inspector too (see attached screenshot).

[Timothy Hatcher]

(In reply to comment #5)
> Created an attachment (id=40195) [details]
> smaller font mockup
> 
> Does anyone else think that the 12px text looks out of place?  Everything else
> in the inspector is 10 or 11px and the scope bar's larger size just looks
> awkward to me.  Xcode uses 11px text in the scope bar in its build results
> window and I think it looks good in the inspector too (see attached
> screenshot).

I agree but the selected white text looks too thin. Maybe try 0.5px or smaller.

[Timothy Hatcher]

Created attachment 41799 [details]
Proposed Patch

[Timothy Hatcher]

I didn't use -webkit-text-stroke because that disabled sub-pixel antialiasing. I think we can live with slightly bolder fonts, at the 11px height.

Comment on attachment 41799 [details]
Proposed Patch

> -#console-filter div.divider, #resources-filter div.divider {
> -    margin-left: 5px;
> -    margin-right: 5px;
> -    /* Only want a border-left here because border on both sides
> -    made the divider too thick */
> -    border-left: 1px solid gray;
> -    display: inline;
> +.scope-bar .divider {
> +    margin: 1px 9px 0 8px;
> +    border-left: 1px solid rgba(0, 0, 0, 0.4);
> +    height: 16px;
> +    width: 0;
> +    vertical-align: middle;
> +    display: inline-block;
>  }

Now that this element is an inline block, I think it would be better to just give it 1px width and a background-color instead of 0 width and a 1px border.

[Joseph Pecoraro]

(In reply to comment #8)
> I didn't use -webkit-text-stroke because that disabled sub-pixel antialiasing.
> I think we can live with slightly bolder fonts, at the 11px height.

As an aside, for the designers out there, another trick is opacity: 99%;

[Timothy Hatcher]

Committed r50036: <http://trac.webkit.org/changeset/50036>

[Timothy Hatcher]

(In reply to comment #10)
> (In reply to comment #8)
> > I didn't use -webkit-text-stroke because that disabled sub-pixel antialiasing.
> > I think we can live with slightly bolder fonts, at the 11px height.
> 
> As an aside, for the designers out there, another trick is opacity: 99%;

The opacity: 99% trick is just turning off subpixel-antialiasing (and slight alpha.)