1154059 - color circles are clipped on top, in devtools "computed style" view

Status: VERIFIED FIXED

(DevTools :: General, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. View attached testcase.
 2. Right-click the bordered area and choose "inspect element"
 3. Click "Computed" tab to see computed style.
 4. Look at the background-color and various "border-*-color" entries.

ACTUAL RESULTS: The circles showing the colors are clipped (flattened) on top.

EXPECTED RESULTS: Nice round circles.

Comment 1

[Daniel Holbert [:dholbert]]

Notably: in the "Rules" view (w/ specified style), there are similar color circles which are *not* clipped.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screnshot of "rules" pane, showing better rendering

(Here's a screenshot of the "rules" / specified-style pane, which has better color circles. In this screenshot, the lower circle is a bit flattened, but at least its border is completely visible, unlike in the earlier screenshot of the bug.)

Comment 4

[Daniel Holbert [:dholbert]]

I'm guessing this bug is due to "height" or "line-height" being a little bit too small in this devtools pane -- or equivalently, these circles being too large for the given [line-]height.

Comment 5

[sd001dev]

Hi, I would like to work on this. I am new to open source contributions so it will be fine if someone could guide me through.

Comment 6

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(In reply to sd001dev from comment #5)
> Hi, I would like to work on this. I am new to open source contributions so
> it will be fine if someone could guide me through.

Awesome, to get started you will need to learn to build Firefox. Have a look through this page:
- https://wiki.mozilla.org/DevTools/Hacking

Then when you have built Firefox I can point you in the right direction to get you started with fixing the bug.

I know it looks complicated but once you have everything set up right you will be amazed at how quickly some bugs can be fixed.

If you need any help just ping me on irc.mozilla.org #devtools

Comment 7

[Daniel Holbert [:dholbert]]

You also should make sure you can reproduce the bug on your system. If you can't reproduce it, it's hard to know if you've fixed it. :)

(When I filed the bug, I believe I'd reproduced it on Linux & Windows, but not on Mac, so there may be some platform/system-dependency here.)

Comment 8

[cedric raudin]

Any updates on this bug? I would like to work on it.

Comment 9

[Daniel Holbert [:dholbert]]

cedric, thanks for your interest!  Please read the past few bug comments (if not the whole bug) before commenting on bugs, though.

As you can see from comment 5, sd001dev already volunteered to take this bug this morning, so you probably want to find a different bug to take on. Good luck!

( --> Assigning to sd001dev, to prevent others from seeing this bug as unassigned & chiming in asking about taking it on)

Comment 10

[Aaron Raimist [:aaronraimist]]

Attachment: bug1154059_colorswatchfix.diff

I would like to take this since work on this seems to have stalled. This patch makes the color swatches in the Rules View and Computed View slightly smaller and aligns them to the middle.

Comment 11

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Comment on attachment 8605031 [details] [diff] [review]
bug1154059_colorswatchfix.diff

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

Great job... thanks for taking the initiative and fixing this.

Comment 12

[Pulsebot]

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

Comment 13

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/cc90f71c22dc

Comment 14

[Rezaul Huque Nayeem]

Reproduced on Firefox nightly 40.0a1 (2015-04-13)(build id : 20150413030203) with windows 7 64 bit

The bug's fix is verified on latest beta 41.0b2 (Build ID : 20150817163452)
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0

Comment 15

[Chandrakant Dhutadmal]

Checked this bug on -

Windows 8.1 Pro, 32 bit OS, X64 based processor
Intel i7-3770 CPU
RAM: 4.00 GB

It shows nice round circles in "Computed" tab in http://ftp.mozilla.org/pub/mozilla.org/firefox/candidates/41.0b3-candidates/build1/ build.

Comment 16

[Nazir Ahmed Sabbir [:NaSb]]

I found this issue in Nightly 40.0a1 (2015-04-13) (Build ID: 20150413030203) on Linux x64 by following comment 0's instruction!

This Bug is now verified as fixed on Latest Firefox Beta 41.0b3
Build ID : 20150820142145
User Agent : Mozilla/5.0 (X11; Linux x86_64; rv:41.0) Gecko/20100101 Firefox/41.0

As it is also verified on Windows (Comment 14), Marking it as verified!