RESOLVED FIXED 142159
Web Inspector: Make formatted nodes more consistent with formatted objects 
https://bugs.webkit.org/show_bug.cgi?id=142159
Summary Web Inspector: Make formatted nodes more consistent with formatted objects
Nikita Vasilyev
Reported 2015-03-01 22:08:11 PST
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
Attachments
[Image] Style bugs (39.45 KB, image/png)
2015-03-01 22:08 PST, Nikita Vasilyev 		no flags
Details
[Animated GIF] DOM Tree: small/big disclosure triangles (175.04 KB, image/gif)
2015-04-19 22:49 PDT, Nikita Vasilyev 		no flags
Details
[Animated GIF] Before/after the patch (69.83 KB, image/gif)
2015-04-19 23:25 PDT, Nikita Vasilyev 		no flags
Details
Patch (big triangles for everything) (4.50 KB, patch)
2015-04-19 23:29 PDT, Nikita Vasilyev 		timothy: review+
DetailsFormatted DiffDiff
Patch (big triangles for everything) (5.53 KB, patch)
2015-04-20 22:09 PDT, Nikita Vasilyev 		no flags
DetailsFormatted DiffDiff
[Image] Two-space indent (41.31 KB, image/png)
2015-04-20 22:10 PDT, Nikita Vasilyev 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2015-03-01 22:08:23 PST
<rdar://problem/20002315>
Nikita Vasilyev
Comment 2 2015-03-02 00:16:48 PST
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.
Timothy Hatcher
Comment 3 2015-03-02 06:30:30 PST
(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.
Nikita Vasilyev
Comment 4 2015-03-02 06:38:26 PST
Sorry, `content: -webkit-canvas(disclosure-triangle-tiny-closed-normal)` does work, the problem was somewhere else.
Joseph Pecoraro
Comment 5 2015-04-09 16:55:43 PDT
Is this fixed now?
Nikita Vasilyev
Comment 6 2015-04-10 23:33:25 PDT
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.
Nikita Vasilyev
Comment 7 2015-04-10 23:34:29 PDT
s/show we use/should we use/ Typing is hard.
Timothy Hatcher
Comment 8 2015-04-11 06:58:14 PDT
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.
Nikita Vasilyev
Comment 9 2015-04-19 22:49:21 PDT
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.
Nikita Vasilyev
Comment 10 2015-04-19 22:56:03 PDT
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.
Nikita Vasilyev
Comment 11 2015-04-19 23:25:37 PDT
Created attachment 251145 [details] [Animated GIF] Before/after the patch
Nikita Vasilyev
Comment 12 2015-04-19 23:29:11 PDT
Created attachment 251147 [details] Patch (big triangles for everything)
Timothy Hatcher
Comment 13 2015-04-20 03:07:59 PDT
Comment on attachment 251147 [details] Patch (big triangles for everything) Does the DOM tree view look okay still after this?
Nikita Vasilyev
Comment 14 2015-04-20 03:18:30 PDT
(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.
Timothy Hatcher
Comment 15 2015-04-20 07:13:48 PDT
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.
Timothy Hatcher
Comment 16 2015-04-20 07:15:07 PDT
I meant two spaces.
Timothy Hatcher
Comment 17 2015-04-20 07:18:31 PDT
(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.)
Timothy Hatcher
Comment 18 2015-04-20 07:38:58 PDT
(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.
Nikita Vasilyev
Comment 19 2015-04-20 22:09:10 PDT
Created attachment 251217 [details] Patch (big triangles for everything)
Nikita Vasilyev
Comment 20 2015-04-20 22:10:14 PDT
Created attachment 251218 [details] [Image] Two-space indent
WebKit Commit Bot
Comment 21 2015-04-21 06:02:26 PDT
Comment on attachment 251217 [details] Patch (big triangles for everything) Clearing flags on attachment: 251217 Committed r183062: <http://trac.webkit.org/changeset/183062>
WebKit Commit Bot
Comment 22 2015-04-21 06:02:33 PDT
All reviewed patches have been landed. Closing bug.
Joseph Pecoraro
Comment 23 2015-04-21 10:52:21 PDT
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"
Note You need to log in before you can comment on or make changes to this bug.