Closed Bug 858493 Opened 7 years ago Closed 7 years ago

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

Categories

(DevTools :: Inspector, defect)

defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 25

People

(Reporter: vporof, Assigned: paul)

References

Details

Attachments

(5 files, 4 obsolete files)

Attached image screenshot (obsolete) —
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
See also bug 855523.
Blocks: 836233
Duplicate of this bug: 880665
Assignee: nobody → paul
Attached patch Patch v1 (obsolete) — Splinter Review
- 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.
Attachment #770757 - Flags: feedback?(scrapmachines)
Duplicate of this bug: 835805
Attached image SVG file (for future work) (obsolete) —
This patch is compatible with multiple font sizes.
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 :)
Attachment #770757 - Flags: feedback?(scrapmachines) → feedback-
Maybe we can get Stephen to review the controls.png and update those icons too :)
Attached patch Patch v2 (obsolete) — Splinter Review
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.
Attachment #770757 - Attachment is obsolete: true
Attachment #771987 - Flags: review?(jwalker)
>> 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.
Attachment #771987 - Flags: review?(jwalker)
Attached patch Patch v2.1Splinter Review
Attachment #771987 - Attachment is obsolete: true
Attachment #771994 - Flags: review?(jwalker)
Attached image screenshot before/after
Attachment #733805 - Attachment is obsolete: true
Attachment #770759 - Attachment is obsolete: true
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.
Attachment #771994 - Flags: review?(jwalker) → review+
Whiteboard: [land-in-fx-team]
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.
Whiteboard: [land-in-fx-team]
Attached patch Patch v2.2Splinter Review
Fixed the computed view padding.
Attachment #772113 - Flags: review+
Whiteboard: [land-in-fx-team]
https://hg.mozilla.org/integration/fx-team/rev/1edfab742d5f
Whiteboard: [land-in-fx-team] → [fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/1edfab742d5f
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 25
Duplicate of this bug: 911520
Duplicate of this bug: 911517
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.