Created attachment 247653 [details] [Image] Style bugs 1. ► for nodes (<body>, #document) are smaller than for objects (Window, arrays) 2. ► is vertically misaligned with text of nodes 3. ► is horizontally misaligned with the rest of the collection items
<rdar://problem/20002315>
background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal); Any reason we use -webkit-canvas over regular images? I want to use `content: image(some_image.svg)` and I don’t know how to make -webkit-canvas work with the content CSS property.
(In reply to comment #2) > background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal); > > Any reason we use -webkit-canvas over regular images? > > I want to use `content: image(some_image.svg)` and I don’t know how to make > -webkit-canvas work with the content CSS property. You should be able to use -webkit-canvas anywhere you can use url(). We do this to generate the image states and avoid having too many SVG documents around.
Sorry, `content: -webkit-canvas(disclosure-triangle-tiny-closed-normal)` does work, the problem was somewhere else.
Is this fixed now?
No, it isn’t. Which disclosure triangles show we use, the big or the small ones? I like the small one a little bit more.
s/show we use/should we use/ Typing is hard.
The larger ones will match the size used for object trees and message expansion. DOM trees might require a font size bump to match too.
Created attachment 251142 [details] [Animated GIF] DOM Tree: small/big disclosure triangles Big disclosure triangles look a bit heavy, in my opinion. I liked the small ones more.
A few questions regarding -webkit-canvas: – Where can I find a list of all available images? – How do I add one? I don’t need to do it right now, but it would be nice to know for future.
Created attachment 251145 [details] [Animated GIF] Before/after the patch
Created attachment 251147 [details] Patch (big triangles for everything)
Comment on attachment 251147 [details] Patch (big triangles for everything) Does the DOM tree view look okay still after this?
(In reply to comment #13) > Comment on attachment 251147 [details] > Patch (big triangles for everything) > > Does the DOM tree view look okay still after this? Yes, it looks the same as on https://bug-142159-attachments.webkit.org/attachment.cgi?id=251142 (after state), except on the image the disclosure triangle is gray and not white. I fixed that in the patch.
Can we get the indent to match what it was before? The DOM tree indentation was/should be exactly 4 spaces. That way the monospace font lines up from row to row. It also matches text as it is rendered if you type it in an editor. We should maintain that.
I meant two spaces.
(Another way to say this: I expected only the arrows to change, and maybe the whole tree to shift right 1 or 2 pixels. But the indentation is compounding as the tree gets deeper.)
(In reply to comment #10) > A few questions regarding -webkit-canvas: > > – Where can I find a list of all available images? Not really easy, but you can grep from -webkit-canvas in the CSS files. You can also grep for generateColoredImagesForCSS or generateEmbossedImages in the JS files. > – How do I add one? I don’t need to do it right now, but it would be nice to > know for future. Use generateColoredImagesForCSS or generateEmbossedImages. We might be getting away from doing this in the near future and just using styled SVGs instead.
Created attachment 251217 [details] Patch (big triangles for everything)
Created attachment 251218 [details] [Image] Two-space indent
Comment on attachment 251217 [details] Patch (big triangles for everything) Clearing flags on attachment: 251217 Committed r183062: <http://trac.webkit.org/changeset/183062>
All reviewed patches have been landed. Closing bug.
Comment on attachment 251217 [details] Patch (big triangles for everything) View in context: https://bugs.webkit.org/attachment.cgi?id=251217&action=review > Source/WebInspectorUI/ChangeLog:26 > + pixels block makes it look bloory on non-retina screen, because: Typo: "bloory" probably meant to be "blurry"