| Summary: | Web Inspector: Make formatted nodes more consistent with formatted objects | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Nikita Vasilyev <nvasilyev> | ||||||||||||||
| Component: | Web Inspector | Assignee: | Nikita Vasilyev <nvasilyev> | ||||||||||||||
| Status: | RESOLVED FIXED | ||||||||||||||||
| Severity: | Normal | CC: | commit-queue, graouts, joepeck, jonowells, mattbaker, nvasilyev, timothy, webkit-bug-importer | ||||||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||||||
| Version: | 528+ (Nightly build) | ||||||||||||||||
| Hardware: | All | ||||||||||||||||
| OS: | All | ||||||||||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=142069 | ||||||||||||||||
| Attachments: |
|
||||||||||||||||
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" |
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