The Web Inspectors new scope bar for the resources pane seems to be too dark. It could use some tweaking.
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.
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?
Neat trick. I like the thinner look.
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/
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).
(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.
Created attachment 41799 [details] Proposed Patch
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.
(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%;
Committed r50036: <http://trac.webkit.org/changeset/50036>
(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.)