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

VERIFIED FIXED in Firefox 41

Status

defect
VERIFIED FIXED
4 years ago
11 months ago

People

(Reporter: dholbert, Assigned: sd001dev, Mentored)

Tracking

Trunk
Firefox 41
x86_64
Linux

Firefox Tracking Flags

(firefox40 affected, firefox41 verified)

Details

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

Attachments

(4 attachments)

Reporter

Description

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

Updated

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

Comment 1

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

Comment 2

4 years ago
Posted image screenshot of bug
Reporter

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.)
Reporter

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]
Assignee

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:
- 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
Reporter

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.
Reporter

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]
bug1154059_colorswatchfix.diff

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

Great job... thanks for taking the initiative and fixing this.
Attachment #8605031 - Flags: review?(mratcliffe) → review+
https://hg.mozilla.org/mozilla-central/rev/cc90f71c22dc
Status: NEW → RESOLVED
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 http://ftp.mozilla.org/pub/mozilla.org/firefox/candidates/41.0b3-candidates/build1/ 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!
Status: RESOLVED → VERIFIED

Updated

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