858493 - Twisties in the markup panel are very off-centered and their sizes differ

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Victor Porof [:vporof][:vp]]

Attachment: screenshot

See the attached screenshot.
This causes two problems:

* clicking on a twisty doesn't guarantee that it'll stay under the mouse pointer (the "expanded" size is smaller than the "collapsed" size); this is very annoying when using the mouse because it seems that the markup view isn't responding

* it looks awful

Comment 1

[Victor Porof [:vporof][:vp]]

See also bug 855523.

Comment 3

[Paul Rouget [:paul]]

Attachment: Patch v1

- moved the expander deeper into the DOM to allow inline alignment
- removed checkbox-*.png.
- created a controls.png file that includes icon for checkboxes and twisties
- moved css files and png into shared (divided code by 3)

I haven't tested on Mac and Windows.

Comment 5

[Paul Rouget [:paul]]

Attachment: SVG file (for future work)

Comment 6

[Paul Rouget [:paul]]

This patch is compatible with multiple font sizes.

Comment 7

[Girish Sharma [:Optimizer]]

Comment on attachment 770757 [details] [diff] [review]
Patch v1

Review of attachment 770757 [details] [diff] [review]:
-----------------------------------------------------------------

Not tested on Mac, but on Windows, I get this : http://i.snag.gy/G0cV1.jpg 

3 things that come into mind apart from the obvious first one:

0) The twisties in markup panel need margin/padding
1) The twisties look too big, maybe the right angle triangle is too much ? Or maybe it needs a bit of a gradient.
2) The metro styled twisties and checkbox do not fit well with the rest of the DevTools theme (both dark and light)
3) The checkboxes look a bit ASCII :)

Comment 8

[Girish Sharma [:Optimizer]]

Maybe we can get Stephen to review the controls.png and update those icons too :)

Comment 9

[Paul Rouget [:paul]]

Attachment: Patch v2

Let's land that asap. I'd like to get this patch in Aurora as well.

~~~~~
(In reply to Girish Sharma [:Optimizer] from comment #7)
> 0) The twisties in markup panel need margin/padding

You meant the rule view I think. I prefer to save space here.

> 1) The twisties look too big, maybe the right angle triangle is too much ?
> Or maybe it needs a bit of a gradient.

I used Shorlander's mockups.

> 2) The metro styled twisties and checkbox do not fit well with the rest of
> the DevTools theme (both dark and light)
> 3) The checkboxes look a bit ASCII :)

I'm happy with this new design. It's better that what we have.

Comment 10

[Paul Rouget [:paul]]

>> 1) The twisties look too big, maybe the right angle triangle is too much ?
>> Or maybe it needs a bit of a gradient.
>I used Shorlander's mockups.

Oops, you're right, it's actually bigger than the mockups.

Comment 11

[Paul Rouget [:paul]]

Attachment: Patch v2.1

Comment 12

[Paul Rouget [:paul]]

Attachment: screenshot before/after

Comment 13

[Paul Rouget [:paul]]

Attachment: SVG file (for future work)

Comment 14

[Joe Walker [:jwalker]]

Comment on attachment 771994 [details] [diff] [review]
Patch v2.1

Review of attachment 771994 [details] [diff] [review]:
-----------------------------------------------------------------

I wonder if we should use "hg rename" to move the files around - I don't care which of the original CSS sources you use (it would make sense to use the least changed version). I've manually done one of the diffs, and didn't have a problem, but it's hard to read. Also for future archaeology, this would preserve history.

Comment 15

[Girish Sharma [:Optimizer]]

Attachment: alignment issue in Computed view

The Markup panel twisties are correctly placed now. But the Computed view twisties shift the whole line to left when toggled. See the screenshot attached for comparison.

This is Windows 7. I will also test on Mac.

Comment 16

[Paul Rouget [:paul]]

Attachment: Patch v2.2

Fixed the computed view padding.

Comment 17

[Paul Rouget [:paul]]

https://hg.mozilla.org/integration/fx-team/rev/1edfab742d5f

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/1edfab742d5f