My favorites | Sign in
Project Home Wiki Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 5507: Allow displaying original color values
2 people starred this issue and may be notified of changes. Back to list
 
Reported by firebug....@xoxy.net, May 29, 2012
Two problems with the color value format (hex vs rgb)

First the format is inconsistent inside Firebug itself. While the "Style" tab always displays hex values the "Computed" tab always displays rgb values.
Furthermore and more important this doesn't reflect what is set in the css file. For the Style tab everything is converted to hex and for the Computed tab it's converted to rgb.

Steps to reproduce:

1. Open the attached test file colortest.html
2. Expand the head and style block on the left to see the real styles set in the file
3. Inspect the two lines and switch between Style and Computed tab to see the conversion

Expected result:
a. Both tabs should display the same format
b. Per default  the value in the tabs should reflect what is set in the css file for each rule. So the class .rgbdefined should be displayed in rgb while the class .hexdefined should be displayed in hex.

If this is fixed an enhancement could be a forced conversion as it is proposed in  Issue 3871 .

Tested with Firefox Aurora 14.0a2 (2012-05-28) and Firebug 1.10.0a9 on Windows XP.



colortest.html
483 bytes   View   Download
May 30, 2012
Project Member #1 sebastia...@gmail.com
I unified the display of the values together with the changes for  issue 3871 .

So this issue should just be related to allow displaying the initial value set in the CSS file.
Unfortunately Firefox doesn't return that value. Instead the values are just available in rgb(a) format. So I am not sure if we can get that info.

Simple test case:
1. Open Firebug on this page
2. Switch to the CSS panel
3. Select "core.css" from the Location Menu
4. Right-click on the first rule (body) and choose "Inspect in DOM Panel"
   => Firebug will switch to the DOM panel and display the DOM properties related to the body rule.
5. Expand the "style" property and scroll down to the "backgroundColor" property

=> It will have "rgb(255, 255, 255)" as value even when it was set to "#fff" inside the CSS file.

Sebastian
Status: Triaged
Cc: sebastia...@gmail.com
Labels: Type-Enhancement css 1.10-a9 Test-case-available
Aug 1, 2012
Project Member #2 sebastia...@gmail.com
(No comment was entered for this change.)
Labels: style
Aug 13, 2012
Project Member #3 sebastia...@gmail.com
 Issue 5686  has been merged into this issue.
Cc: odva...@gmail.com sroussey
Aug 13, 2012
Project Member #4 sebastia...@gmail.com
Steven mentioned in  issue 5686  that the dev tools team started to work on this:

https://wiki.mozilla.org/DevTools/Features/CSSSourceMap

That issue also has another test case.

Sebastian
Summary: Allow displaying original color values
Apr 22, 2013
Project Member #5 sebastia...@gmail.com
To make this issue better findable I want to note that it is about showing colors as they were authored in the related file.

Sebastian
Sep 2, 2013
Project Member #6 sebastia...@gmail.com
Created branch " issue5507 "[1] to work on this.

Sebastian

[1] https://github.com/firebug/firebug/commits/issue5507
Status: Started
Owner: sebastia...@gmail.com
Cc: -sebastia...@gmail.com
Sep 2, 2013
Project Member #7 simon.lindholm10
What's your plan for getting the original color values?
Cc: simon.lindholm10
Sep 2, 2013
Project Member #8 sebastia...@gmail.com
Parsing the cached CSS and getting the related property values using inIDOMUtils.getRuleLine()[1] and inIDOMUtils.getRuleColumn()[2].
I already made some progress, though it's quite complicated to get the values, because the API is not optimal for that.
So I need to parse the properties from the text by myself, which is somewhat slow and can be inaccurate e.g. in case there are several properties with the same name.

What I'd need is some API to directly get the original values. Do you know if there is already something? Or should we ask Mozilla for that?

Sebastian

[1] https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/inIDOMUtils#getRuleLine%28%29
[2] https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/inIDOMUtils#getRuleColumn%28%29
Sep 2, 2013
Project Member #9 simon.lindholm10
I see. Yes, ugly, but mostly doable. A fun case is where a rule has been modified by Firebug (so we need to keep a cache and update it on CSS editing). Also note that it would still be impossible to get CSS values set through `.style.something`.

> Do you know if there is already something? Or should we ask Mozilla for that?
I'm 99% sure there isn't, and I'd also wager a guess that there's some bug open for it already (though I don't know any bug number). Obviously it'd be detrimental to performance and memory to always store original rule text, hence why it's kindof a non-trivial enhancement request.
Sep 3, 2013
Project Member #10 sebastia...@gmail.com
Sure, there are several non-trivial special cases, which would need to be covered. So I decided to create a request for a generalized API[1]. (Couldn't find an existing report for that.)

I'll wait for feedback on that report before I continue my work on this.

Sebastian

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=911906
Labels: platform
Sep 3, 2013
Project Member #11 sebastia...@gmail.com
You where right, Simon. There was already a report for that.[1]

Sebastian

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=731271
Jan 3, 2014
Project Member #12 simon.lindholm10
The API for this landed now: CSSDeclaration.getAuthoredPropertyValue().
Jan 4, 2014
Project Member #13 sebastia...@gmail.com
I saw that, too. For reference, the related API committed is available here:

https://hg.mozilla.org/mozilla-central/rev/85ce5e760457

Sebastian
Jan 5, 2014
Project Member #14 sebastia...@gmail.com
Committed in https://github.com/firebug/firebug/commit/e5576a7ad3a5c1fa8b350d1cdc843a54ba312bf0.

Sebastian
Status: Commit
Labels: FBTest-wanted
Jan 7, 2014
Project Member #15 sebastia...@gmail.com
(No comment was entered for this change.)
Labels: release-note-wanted doc-needed
Jan 9, 2014
Project Member #16 sebastia...@gmail.com
Added FBTest in https://github.com/firebug/firebug/commit/e5035bb52856f02fa27bdb1240144c3997c6fe6c.

Made "authored" the default value for the "colorDisplay" preference in https://github.com/firebug/firebug/commit/a56f02bdacac367420b924df63b0015b271d98ff.

Release note:
The new option "Colors As Authored" allows you to display CSS color values as they were defined inside the CSS. This makes it easier to compare the styles interpreted by the browser with the ones inside the original CSS file.
While this new option is now the default, you still have the possibility to switch to hexadecimal, RGB or HSL formatting.

Sebastian
Labels: -FBTest-wanted FBTest-available
Jan 24, 2014
Project Member #17 odva...@gmail.com
This issue has been fixed in Firebug 1.13 alpha 8
https://getfirebug.com/releases/firebug/1.13/firebug-1.13.0a8.xpi

Let us know if it works for you.

Thanks for the help!
Honza
Status: Fixed
Labels: fixed-1.13-a8
Feb 9, 2014
Project Member #18 simon.lindholm10
This seems to have broken a bunch of FBTests. Should we make FBTest set the pref to "Colors as Hex" by default perhaps?
Feb 9, 2014
Project Member #19 sebastia...@gmail.com
> Should we make FBTest set the pref to "Colors as Hex" by default perhaps?
No, I'll just fix the tests.

Sebastian
Feb 10, 2014
Project Member #20 simon.lindholm10
Ok. Note the 29+ requirement for the feature.
Feb 10, 2014
Project Member #21 sebastia...@gmail.com
I assume Firefox 29 will be the minimum version required for 2.0.
Honza, can you confirm that?

Sebastian
Feb 10, 2014
Project Member #22 odva...@gmail.com
> I assume Firefox 29 will be the minimum version required for 2.0.
My hope is for 29, but as we discussed at our last meeting it could be 30.
Honza

Feb 11, 2014
Project Member #23 sebastia...@gmail.com
Ok, so I fixed a bunch of FBTests related to this (within the 'jsd2' branch) and removed any version checks:
https://github.com/firebug/firebug/commit/0a96a1eaf181fba242207be23b6bf3ae7ff18d58
https://github.com/firebug/firebug/commit/fbe0efefba621f69a9242c5648ae8cbc2ddf9ea8

Sebastian
Sign in to add a comment

Powered by Google Project Hosting