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

VERIFIED FIXED in Firefox 41


4 years ago
11 months ago


(Reporter: dholbert, Assigned: sd001dev, Mentored)


Firefox 41

Firefox Tracking Flags

(firefox40 affected, firefox41 verified)


(Whiteboard: [good first bug][lang=css][bugday-20150819])


(4 attachments)



4 years ago
Posted file testcase 1
 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.


4 years ago
Summary: color circle clipped in devtools computed style view → color circles are clipped on top, in devtools "computed style" view

Comment 1

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

Comment 2

4 years ago
Posted image screenshot of bug

Comment 3

4 years ago
(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

4 years ago
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.
Mentor: mratcliffe
Whiteboard: [good first bug][lang=css]

Comment 5

4 years ago
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.
(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:

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 #devtools

Comment 7

4 years ago
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

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

Comment 9

4 years ago
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)
Assignee: nobody → sd001dev
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.
Attachment #8605031 - Flags: review?(mratcliffe)
Comment on attachment 8605031 [details] [diff] [review]

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

Great job... thanks for taking the initiative and fixing this.
Attachment #8605031 - Flags: review?(mratcliffe) → review+
Last Resolved: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 41
QA Whiteboard: [good first verify]
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
Whiteboard: [good first bug][lang=css] → [good first bug][lang=css][bugday-20150819]
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 build.
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!


11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.