Skip to content

Commit

Permalink
Issue 3871 (Change color format)
Browse files Browse the repository at this point in the history 
http://code.google.com/p/fbug/issues/detail?id=3871
  • Loading branch information
@SebastianZ
SebastianZ committed May 29, 2012
1 parent ae56a12 commit f387900
Show file tree
Hide file tree
Showing 7 changed files with 203 additions and 15 deletions.
51 changes: 47 additions & 4 deletions extension/content/firebug/css/computedPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ define([
"firebug/lib/url",
"firebug/js/sourceLink",
"firebug/chrome/menu",
"firebug/lib/options",
"firebug/lib/string",
"firebug/lib/persist",
"firebug/css/cssReps"
],
function(Obj, Firebug, Domplate, Locale, Events, Css, Dom, Xml, Url, SourceLink, Menu,
Str, Persist, CSSInfoTip) {
Options, Str, Persist, CSSInfoTip) {

with (Domplate) {

Expand Down Expand Up @@ -95,7 +96,7 @@ CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
TD({"class": "selectorName", role: "presentation"},
"$selector.selector.text"),
TD({role: "presentation"},
SPAN({"class": "stylePropValue"}, "$selector.value")),
SPAN({"class": "stylePropValue"}, "$selector.value|formatValue")),
TD({"class": "styleSourceLink", role: "presentation"},
TAG(FirebugReps.SourceLink.tag, {object: "$selector|getSourceLink"})
)
Expand Down Expand Up @@ -134,6 +135,11 @@ CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,

formatValue: function(value)
{
if (Options.get("colorDisplay") == "hex")
value = Css.rgbToHex(value);
else if (Options.get("colorDisplay") == "hsl")
value = Css.rgbToHSL(value);

// Add a zero-width space after a comma to allow line breaking
return value.replace(/,/g, ",\u200B");
}
Expand Down Expand Up @@ -296,6 +302,14 @@ CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
this.styleOpened[style.property] = Css.hasClass(styleNode, "opened");
},

setColorDisplay: function(type)
{
Options.set("colorDisplay", type);

var menuItem = Firebug.chrome.$("colorDisplay"+type.charAt(0).toUpperCase()+type.slice(1));
menuItem.setAttribute("checked", "true");
},

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
// Events

Expand Down Expand Up @@ -427,6 +441,7 @@ CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
var optionMap = {
showUserAgentCSS: 1,
computedStylesDisplay: 1,
colorDisplay: 1,
showMozillaSpecificStyles: 1
};

Expand Down Expand Up @@ -456,7 +471,35 @@ CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
},
Menu.optionMenu("Show_Mozilla_specific_styles",
"showMozillaSpecificStyles",
"computed.option.tip.Show_Mozilla_Specific_Styles")
"computed.option.tip.Show_Mozilla_Specific_Styles"),
"-",
{
label: "computed.option.label.Colors_As_Hex",
tooltiptext: "computed.option.tip.Colors_As_Hex",
type: "radio",
name: "colorDisplay",
id: "colorDisplayHex",
command: Obj.bindFixed(this.setColorDisplay, this, "hex"),
checked: Options.get("colorDisplay") == "hex"
},
{
label: "computed.option.label.Colors_As_RGB",
tooltiptext: "computed.option.tip.Colors_As_RGB",
type: "radio",
name: "colorDisplay",
id: "colorDisplayRGB",
command: Obj.bindFixed(this.setColorDisplay, this, "rgb"),
checked: Options.get("colorDisplay") == "rgb"
},
{
label: "computed.option.label.Colors_As_HSL",
tooltiptext: "computed.option.tip.Colors_As_HSL",
type: "radio",
name: "colorDisplay",
id: "colorDisplayHSL",
command: Obj.bindFixed(this.setColorDisplay, this, "hsl"),
checked: Options.get("colorDisplay") == "hsl"
}
);

return items;
Expand Down Expand Up @@ -535,7 +578,7 @@ CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
toggleDisplay: function()
{
var display = Firebug.computedStylesDisplay == "alphabetical" ? "grouped" : "alphabetical";
Firebug.Options.set("computedStylesDisplay", display);
Options.set("computedStylesDisplay", display);
},

sortProperties: function(props)
Expand Down
47 changes: 44 additions & 3 deletions extension/content/firebug/css/cssPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ define([
"firebug/lib/persist",
"firebug/lib/system",
"firebug/chrome/menu",
"firebug/lib/options",
"firebug/css/cssReps",
"firebug/editor/editor",
"firebug/editor/editorSelector",
Expand All @@ -29,7 +30,7 @@ define([
],
function(Obj, Firebug, Domplate, FirebugReps, Locale, Events, Wrapper, Url,
SourceLink, Css, Dom, Win, Search, Str, Arr, Fonts, Xml, Persist, System, Menu,
CSSInfoTip) {
Options, CSSInfoTip) {

with (Domplate) {

Expand Down Expand Up @@ -539,7 +540,11 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
name = this.translateName(name, value);
if (name)
{
value = Css.stripUnits(Css.rgbToHex(value));
if (Options.get("colorDisplay") == "hex")
value = Css.rgbToHex(value);
else if (Options.get("colorDisplay") == "hsl")
value = Css.rgbToHSL(value);
value = Css.stripUnits(value);
important = important ? " !important" : "";

var prop = {name: name, value: value, important: important, disabled: disabled};
Expand Down Expand Up @@ -583,6 +588,14 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
return name;
},

setColorDisplay: function(type)
{
Options.set("colorDisplay", type);

var menuItem = Firebug.chrome.$("colorDisplay"+type.charAt(0).toUpperCase()+type.slice(1));
menuItem.setAttribute("checked", "true");
},

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //

editElementStyle: function()
Expand Down Expand Up @@ -945,7 +958,7 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,

updateOption: function(name, value)
{
if (name == "expandShorthandProps")
if (name == "expandShorthandProps" || name == "colorDisplay")
this.refresh();
},

Expand All @@ -961,6 +974,34 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
Menu.optionMenu("Expand_Shorthand_Properties", "expandShorthandProps",
"css.option.tip.Expand_Shorthand_Properties"),
"-",
{
label: "computed.option.label.Colors_As_Hex",
tooltiptext: "computed.option.tip.Colors_As_Hex",
type: "radio",
name: "colorDisplay",
id: "colorDisplayHex",
command: Obj.bindFixed(this.setColorDisplay, this, "hex"),
checked: Options.get("colorDisplay") == "hex"
},
{
label: "computed.option.label.Colors_As_RGB",
tooltiptext: "computed.option.tip.Colors_As_RGB",
type: "radio",
name: "colorDisplay",
id: "colorDisplayRGB",
command: Obj.bindFixed(this.setColorDisplay, this, "rgb"),
checked: Options.get("colorDisplay") == "rgb"
},
{
label: "computed.option.label.Colors_As_HSL",
tooltiptext: "computed.option.tip.Colors_As_HSL",
type: "radio",
name: "colorDisplay",
id: "colorDisplayHSL",
command: Obj.bindFixed(this.setColorDisplay, this, "hsl"),
checked: Options.get("colorDisplay") == "hsl"
},
"-",
{
label: "Refresh",
tooltiptext: "panel.tip.Refresh",
Expand Down
50 changes: 45 additions & 5 deletions extension/content/firebug/css/stylePanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,14 @@ CSSStylePanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
Firebug.chrome.select(rule, "stylesheet");
},

setColorDisplay: function(type)
{
Options.set("colorDisplay", type);

var menuItem = Firebug.chrome.$("colorDisplay"+type.charAt(0).toUpperCase()+type.slice(1));
menuItem.setAttribute("checked", "true");
},

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
// extends Panel

Expand Down Expand Up @@ -534,11 +542,15 @@ CSSStylePanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,

updateOption: function(name, value)
{
if (name == "showUserAgentCSS" || name == "expandShorthandProps" ||
name == "onlyShowAppliedStyles")
{
var optionMap = {
showUserAgentCSS: 1,
expandShorthandProps: 1,
colorDisplay: 1,
showMozillaSpecificStyles: 1
};

if (name in optionMap)
this.refresh();
}
},

getOptionsMenuItems: function()
Expand All @@ -549,7 +561,35 @@ CSSStylePanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
Menu.optionMenu("Show_User_Agent_CSS", "showUserAgentCSS",
"style.option.tip.Show_User_Agent_CSS"),
Menu.optionMenu("Expand_Shorthand_Properties", "expandShorthandProps",
"css.option.tip.Expand_Shorthand_Properties")
"css.option.tip.Expand_Shorthand_Properties"),
"-",
{
label: "computed.option.label.Colors_As_Hex",
tooltiptext: "computed.option.tip.Colors_As_Hex",
type: "radio",
name: "colorDisplay",
id: "colorDisplayHex",
command: Obj.bindFixed(this.setColorDisplay, this, "hex"),
checked: Options.get("colorDisplay") == "hex"
},
{
label: "computed.option.label.Colors_As_RGB",
tooltiptext: "computed.option.tip.Colors_As_RGB",
type: "radio",
name: "colorDisplay",
id: "colorDisplayRGB",
command: Obj.bindFixed(this.setColorDisplay, this, "rgb"),
checked: Options.get("colorDisplay") == "rgb"
},
{
label: "computed.option.label.Colors_As_HSL",
tooltiptext: "computed.option.tip.Colors_As_HSL",
type: "radio",
name: "colorDisplay",
id: "colorDisplayHSL",
command: Obj.bindFixed(this.setColorDisplay, this, "hsl"),
checked: Options.get("colorDisplay") == "hsl"
}
];

if (Dom.domUtils && this.selection)
Expand Down
50 changes: 49 additions & 1 deletion extension/content/firebug/lib/css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -700,11 +700,59 @@ Css.rgbToHex = function(value)
{
return value.replace(/\brgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/gi,
function(_, r, g, b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + (b << 0)).
return "#" + ((1 << 24) + (r << 16) + (g << 8) + (b << 0)).
toString(16).substr(-6).toUpperCase();
});
}

Css.rgbToHSL = function(value)
{
return value.replace(/\brgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*(\d.\d+))?\)/gi,
function(_, r, g, b, _, a) {
var h = 0;
var s = 0;
var l = 0;

r = r/255;
g = g/255;
b = b/255;

var v = Math.max(Math.max(r, g), b);
var m = Math.min(Math.min(r, g), b);

l = (m+v)/2;
if (l <= 0)
return value;

var vm = v - m;
s = vm;
if (s > 0)
s /= (l <= 0.5 ? v+m : 2-v-m);
else
return value;

r2 = (v-r)/vm;
g2 = (v-g)/vm;
b2 = (v-b)/vm;

if (r == v)
h = (g == m ? 5+b2 : 1-g2);
else if (g == v)
h = (b == m ? 1+r2 : 3-b2);
else
h = (r == m ? 3+g2 : 5-r2);

h = Math.round(h * 60);
s = Math.round(s * 100);
l = Math.round(l * 100);

if (a)
return "hsla("+h+", "+s+"%, "+l+"%, "+a+")";
else
return "hsl("+h+", "+s+"%, "+l+"%)";
});
}

// ********************************************************************************************* //
// CSS Info

Expand Down
1 change: 1 addition & 0 deletions extension/content/firebug/lib/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const prefNames = // XXXjjb TODO distribute to modules
"showUserAgentCSS",
"expandShorthandProps",
"cssEditMode",
"colorDisplay",

// Computed
"computedStylesDisplay",
Expand Down
12 changes: 12 additions & 0 deletions extension/locale/en-US/firebug.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,18 @@ style.option.tip.Only_Show_Applied_Styles=Just show styles applied to the elemen
Show_User_Agent_CSS=Show User Agent CSS
style.option.tip.Show_User_Agent_CSS=Also show the CSS defined by the user agent

# LOCALIZATION NOTE (computed.option.label.Colors_As_Hex, computed.option.tip.Colors_As_Hex,
# computed.option.label.Colors_As_RGB, computed.option.tip.Colors_As_RGB,
# computed.option.label.Colors_As_HSL, computed.option.tip.Colors_As_HSL):
# CSS panel, Style side panel and Computed side panel option (located in tab's option menu).
# Allows switching the display of CSS colors between hex, rgb(a) and hsl(a) format
computed.option.label.Colors_As_Hex=Colors As Hex
computed.option.tip.Colors_As_Hex=Show colors in hexadecimal format
computed.option.label.Colors_As_RGB=Colors As RGB
computed.option.tip.Colors_As_RGB=Show colors in RGB format
computed.option.label.Colors_As_HSL=Colors As HSL
computed.option.tip.Colors_As_HSL=Show colors in HSL format

# LOCALIZATION NOTE (style.option.label.active, style.option.tip.active):
# Style side panel option tooltip (located in tab's option menu). If the option is set to true,
# the Style side panel will simulate the element being activated and therefore display
Expand Down
7 changes: 5 additions & 2 deletions extension/modules/loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,9 +262,12 @@ FirebugLoader.defaultPrefs = {
"onlyShowAppliedStyles": false,
"showUserAgentCSS": false,
"expandShorthandProps": false,
"showMozillaSpecificStyles": false,
"computedStylesDisplay": "grouped",
"cssEditMode": "Source",
"colorDisplay": "hex",

// Computed
"computedStylesDisplay": "grouped",
"showMozillaSpecificStyles": false,

// Script
"breakOnErrors": false,
Expand Down

0 comments on commit f387900

Please sign in to comment.