Closed Bug 1154059 Opened 8 years ago Closed 8 years ago

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


(DevTools :: General, defect)

Not set


(firefox40 affected, firefox41 verified)

Firefox 41
Tracking Status
firefox40 --- affected
firefox41 --- verified


(Reporter: dholbert, Assigned: sd001dev, Mentored)


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


(4 files)

Attached 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.
Summary: color circle clipped in devtools computed style view → color circles are clipped on top, in devtools "computed style" view
Notably: in the "Rules" view (w/ specified style), there are similar color circles which are *not* clipped.
Attached image screenshot of bug
(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.)
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]
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
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.)
Any updates on this bug? I would like to work on it.
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+
Closed: 8 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!
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.