Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Better solution for issue 3871 (Change color format)

  • Loading branch information...
commit 74c768185a93ce2c0c23ab4ed63598f997d72ebb 1 parent f387900
@SebastianZ SebastianZ authored
View
46 extension/content/firebug/css/computedPanel.js
@@ -10,15 +10,17 @@ define([
"firebug/lib/dom",
"firebug/lib/xml",
"firebug/lib/url",
+ "firebug/lib/array",
"firebug/js/sourceLink",
"firebug/chrome/menu",
"firebug/lib/options",
"firebug/lib/string",
"firebug/lib/persist",
+ "firebug/css/cssModule",
"firebug/css/cssReps"
],
-function(Obj, Firebug, Domplate, Locale, Events, Css, Dom, Xml, Url, SourceLink, Menu,
- Options, Str, Persist, CSSInfoTip) {
+function(Obj, Firebug, Domplate, Locale, Events, Css, Dom, Xml, Url, Arr, SourceLink, Menu,
+ Options, Str, Persist, CSSModule, CSSInfoTip) {
with (Domplate) {
@@ -302,14 +304,6 @@ 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
@@ -471,37 +465,11 @@ CSSComputedPanel.prototype = Obj.extend(Firebug.Panel,
},
Menu.optionMenu("Show_Mozilla_specific_styles",
"showMozillaSpecificStyles",
- "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"
- }
+ "computed.option.tip.Show_Mozilla_Specific_Styles")
);
+ items = Arr.extendArray(items, CSSModule.getColorDisplayOptionMenuItems());
+
return items;
},
View
48 extension/content/firebug/css/cssModule.js
@@ -9,8 +9,9 @@ define([
"firebug/lib/css",
"firebug/chrome/window",
"firebug/lib/xml",
+ "firebug/lib/options"
],
-function(Obj, Firebug, Xpcom, Events, Url, Css, Win, Xml) {
+function(Obj, Firebug, Xpcom, Events, Url, Css, Win, Xml, Options) {
// ********************************************************************************************* //
// Constants
@@ -356,7 +357,8 @@ Firebug.CSSModule = Obj.extend(Obj.extend(Firebug.Module, Firebug.EditorSelector
return m ? m[0] : "";
},
- getPropertyInfo: function(computedStyle, propName) {
+ getPropertyInfo: function(computedStyle, propName)
+ {
var propInfo = {
property: propName,
value: computedStyle.getPropertyValue(propName),
@@ -367,6 +369,48 @@ Firebug.CSSModule = Obj.extend(Obj.extend(Firebug.Module, Firebug.EditorSelector
return propInfo;
},
+ setColorDisplay: function(event, type)
+ {
+ Options.set("colorDisplay", type);
+
+ var menuItem = event.target;
+ menuItem.setAttribute("checked", "true");
+ },
+
+ getColorDisplayOptionMenuItems: function()
+ {
+ return [
+ "-",
+ {
+ label: "computed.option.label.Colors_As_Hex",
+ tooltiptext: "computed.option.tip.Colors_As_Hex",
+ type: "radio",
+ name: "colorDisplay",
+ id: "colorDisplayHex",
+ command: Obj.bind(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.bind(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.bind(this.setColorDisplay, this, "hsl"),
+ checked: Options.get("colorDisplay") == "hsl"
+ }
+ ];
+ },
+
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
// Module functions
View
105 extension/content/firebug/css/cssPanel.js
@@ -22,15 +22,15 @@ define([
"firebug/lib/system",
"firebug/chrome/menu",
"firebug/lib/options",
+ "firebug/css/cssModule",
"firebug/css/cssReps",
"firebug/editor/editor",
"firebug/editor/editorSelector",
- "firebug/chrome/searchBox",
- "firebug/css/cssModule",
+ "firebug/chrome/searchBox"
],
function(Obj, Firebug, Domplate, FirebugReps, Locale, Events, Wrapper, Url,
SourceLink, Css, Dom, Win, Search, Str, Arr, Fonts, Xml, Persist, System, Menu,
- Options, CSSInfoTip) {
+ Options, CSSModule, CSSInfoTip) {
with (Domplate) {
@@ -300,7 +300,7 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
? this.location.editStyleSheet.sheet
: this.location;
- this.currentCSSEditor = Firebug.CSSModule.getCurrentEditor();
+ this.currentCSSEditor = CSSModule.getCurrentEditor();
try
{
this.currentCSSEditor.startEditing(styleSheet, this.context, this);
@@ -308,11 +308,11 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
}
catch(exc)
{
- var mode = Firebug.CSSModule.getCurrentEditorName();
+ var mode = CSSModule.getCurrentEditorName();
if (FBTrace.DBG_ERRORS)
FBTrace.sysout("editor.startEditing ERROR "+exc, {exc: exc, name: mode,
currentEditor: this.currentCSSEditor, styleSheet: styleSheet,
- CSSModule:Firebug.CSSModule});
+ CSSModule: CSSModule});
}
}
},
@@ -588,14 +588,6 @@ 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()
@@ -666,7 +658,7 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
{
var rule = Firebug.getRepObject(row);
var propName = Dom.getChildByClass(row, "cssPropName").textContent;
- Firebug.CSSModule.deleteProperty(rule, propName, this.context);
+ CSSModule.deleteProperty(rule, propName, this.context);
// Remove the property from the selector map, if it was disabled
var ruleId = Firebug.getRepNode(row).getAttribute("ruleId");
@@ -709,7 +701,7 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
var propValue = Dom.getChildByClass(row, "cssPropValue").textContent;
var parsedValue = parsePriority(propValue);
- Firebug.CSSModule.disableProperty(Css.hasClass(row, "disabledStyle"), rule,
+ CSSModule.disableProperty(Css.hasClass(row, "disabledStyle"), rule,
propName, parsedValue, map, this.context);
this.markChange(this.name == "stylesheet");
@@ -805,7 +797,7 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
this.showToolbarButtons("fbCSSButtons", true);
- Firebug.CSSModule.updateEditButton();
+ CSSModule.updateEditButton();
// wait for loadedContext to restore the panel
if (this.context.loaded && !this.location)
@@ -970,44 +962,23 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
getOptionsMenuItems: function()
{
- return [
- 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"
- },
+ items = [
+ Menu.optionMenu("Expand_Shorthand_Properties", "expandShorthandProps",
+ "css.option.tip.Expand_Shorthand_Properties")
+ ];
+
+ items = Arr.extendArray(items, CSSModule.getColorDisplayOptionMenuItems());
+
+ items.push(
"-",
{
label: "Refresh",
tooltiptext: "panel.tip.Refresh",
command: Obj.bind(this.refresh, this)
}
- ];
+ );
+
+ return items;
},
getContextMenuItems: function(style, target)
@@ -1195,11 +1166,11 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
if (text.charAt(rangeOffset) == ",")
return;
- cssValue = Firebug.CSSModule.parseCSSFontFamilyValue(text, rangeOffset, propName);
+ cssValue = CSSModule.parseCSSFontFamilyValue(text, rangeOffset, propName);
}
else
{
- cssValue = Firebug.CSSModule.parseCSSValue(text, rangeOffset);
+ cssValue = CSSModule.parseCSSValue(text, rangeOffset);
}
if (!cssValue)
@@ -1226,9 +1197,9 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
{
var rule = Firebug.getRepObject(target);
var baseURL = this.getStylesheetURL(rule, true);
- var relURL = Firebug.CSSModule.parseURLValue(cssValue.value);
+ var relURL = CSSModule.parseURLValue(cssValue.value);
var absURL = Url.isDataURL(relURL) ? relURL : Url.absoluteURL(relURL, baseURL);
- var repeat = Firebug.CSSModule.parseRepeatValue(text);
+ var repeat = CSSModule.parseRepeatValue(text);
this.infoTipType = "image";
this.infoTipObject = absURL;
@@ -1500,7 +1471,7 @@ Firebug.CSSStyleSheetPanel.prototype = Obj.extend(Firebug.Panel,
{styleSheet: styleSheet, ruleIndex: ruleIndex});
}
- Firebug.CSSModule.deleteRule(styleSheet, ruleIndex);
+ CSSModule.deleteRule(styleSheet, ruleIndex);
if (this.context.panelName == "stylesheet")
{
@@ -1600,9 +1571,9 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
" = " + propValue);
if (previousValue)
- Firebug.CSSModule.removeProperty(rule, previousValue);
+ CSSModule.removeProperty(rule, previousValue);
- Firebug.CSSModule.setProperty(rule, value, parsedValue.value,
+ CSSModule.setProperty(rule, value, parsedValue.value,
parsedValue.priority);
}
@@ -1612,7 +1583,7 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
else if (!value)
{
// name of the property has been deleted, so remove the property.
- Firebug.CSSModule.removeProperty(rule, previousValue);
+ CSSModule.removeProperty(rule, previousValue);
}
}
else if (Dom.getAncestorByClass(target, "cssPropValue"))
@@ -1630,12 +1601,12 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
if (value && value != "null")
{
parsedValue = parsePriority(value);
- Firebug.CSSModule.setProperty(rule, propName, parsedValue.value,
+ CSSModule.setProperty(rule, propName, parsedValue.value,
parsedValue.priority);
}
else if (previousValue && previousValue != "null")
{
- Firebug.CSSModule.removeProperty(rule, propName);
+ CSSModule.removeProperty(rule, propName);
}
}
@@ -1702,7 +1673,7 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
}
else if (charCode == 59 /*";"*/ && Css.hasClass(target, "cssPropValue"))
{
- var cssValue = Firebug.CSSModule.parseCSSValue(this.input.value, this.input.selectionStart);
+ var cssValue = CSSModule.parseCSSValue(this.input.value, this.input.selectionStart);
// Simple test, if we are inside a string (see issue 4543)
var isValueInString = (cssValue.value.indexOf("\"") != -1);
@@ -1720,9 +1691,9 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
var propRow = Dom.getAncestorByClass(this.target, "cssProp");
var propName = Dom.getChildByClass(propRow, "cssPropName").textContent.toLowerCase();
if (propName == "font" || propName == "font-family")
- return Firebug.CSSModule.parseCSSFontFamilyValue(value, offset, propName);
+ return CSSModule.parseCSSFontFamilyValue(value, offset, propName);
else
- return Firebug.CSSModule.parseCSSValue(value, offset);
+ return CSSModule.parseCSSValue(value, offset);
},
getAutoCompleteList: function(preExpr, expr, postExpr, range, cycle)
@@ -1871,7 +1842,7 @@ CSSEditor.prototype = domplate(Firebug.InlineEditor.prototype,
propName = Dom.getChildByClass(propRow, "cssPropName").textContent;
}
- var range = Firebug.CSSModule.parseCSSValue(value, offset);
+ var range = CSSModule.parseCSSValue(value, offset);
var type = (range && range.type) || "";
var expr = (range ? value.substring(range.start, range.end) : "");
@@ -2131,7 +2102,7 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
// We want to do this before the insert to ease change tracking
if (oldRule)
{
- Firebug.CSSModule.deleteRule(styleSheet, ruleIndex);
+ CSSModule.deleteRule(styleSheet, ruleIndex);
}
// Firefox does not follow the spec for the update selector text case.
@@ -2161,7 +2132,7 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
try
{
- var insertLoc = Firebug.CSSModule.insertRule(styleSheet, cssText, ruleIndex);
+ var insertLoc = CSSModule.insertRule(styleSheet, cssText, ruleIndex);
rule = cssRules[insertLoc];
ruleIndex++;
@@ -2179,7 +2150,7 @@ CSSRuleEditor.prototype = domplate(Firebug.InlineEditor.prototype,
target.innerHTML = Str.escapeForCss(previousValue);
// create dummy rule to be able to recover from error
- var insertLoc = Firebug.CSSModule.insertRule(styleSheet,
+ var insertLoc = CSSModule.insertRule(styleSheet,
'selectorSavingError{}', ruleIndex);
rule = cssRules[insertLoc];
@@ -2473,7 +2444,7 @@ StyleSheetEditor.prototype = domplate(Firebug.BaseEditor,
if (FBTrace.DBG_CSS)
FBTrace.sysout("StyleSheetEditor.saveEdit", arguments);
- Firebug.CSSModule.freeEdit(this.styleSheet, value);
+ CSSModule.freeEdit(this.styleSheet, value);
},
beginEditing: function()
View
56 extension/content/firebug/css/stylePanel.js
@@ -10,6 +10,7 @@ define([
"firebug/lib/locale",
"firebug/lib/events",
"firebug/lib/url",
+ "firebug/lib/array",
"firebug/js/sourceLink",
"firebug/lib/dom",
"firebug/lib/css",
@@ -17,11 +18,12 @@ define([
"firebug/lib/array",
"firebug/lib/fonts",
"firebug/lib/options",
+ "firebug/css/cssModule",
"firebug/css/cssPanel",
"firebug/chrome/menu"
],
-function(Obj, Firebug, Firefox, Domplate, FirebugReps, Xpcom, Locale, Events, Url,
- SourceLink, Dom, Css, Xpath, Arr, Fonts, Options, CSSStyleSheetPanel, Menu) {
+function(Obj, Firebug, Firefox, Domplate, FirebugReps, Xpcom, Locale, Events, Url, Arr,
+ SourceLink, Dom, Css, Xpath, Arr, Fonts, Options, CSSModule, CSSStyleSheetPanel, Menu) {
with (Domplate) {
@@ -446,14 +448,6 @@ 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
@@ -510,7 +504,7 @@ CSSStylePanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
updateView: function(element)
{
- Firebug.CSSModule.cleanupSheets(element.ownerDocument, Firebug.currentContext);
+ CSSModule.cleanupSheets(element.ownerDocument, Firebug.currentContext);
this.updateCascadeView(element);
@@ -555,48 +549,22 @@ CSSStylePanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
getOptionsMenuItems: function()
{
- var ret = [
+ var items = [
Menu.optionMenu("Only_Show_Applied_Styles", "onlyShowAppliedStyles",
"style.option.tip.Only_Show_Applied_Styles"),
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"),
- "-",
- {
- 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"
- }
+ "css.option.tip.Expand_Shorthand_Properties")
];
+ items = Arr.extendArray(items, CSSModule.getColorDisplayOptionMenuItems());
+
if (Dom.domUtils && this.selection)
{
var self = this;
- ret.push(
+ items.push(
"-",
{
label: "style.option.label.hover",
@@ -621,7 +589,7 @@ CSSStylePanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
);
if (Dom.domUtils.hasPseudoClassLock)
{
- ret.push(
+ items.push(
{
label: "style.option.label.focus",
type: "checkbox",
@@ -636,7 +604,7 @@ CSSStylePanel.prototype = Obj.extend(CSSStyleSheetPanel.prototype,
}
}
- return ret;
+ return items;
},
getContextMenuItems: function(style, target)
View
59 extension/content/firebug/lib/css.js
@@ -707,40 +707,39 @@ Css.rgbToHex = function(value)
Css.rgbToHSL = function(value)
{
- return value.replace(/\brgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*(\d.\d+))?\)/gi,
+ return value.replace(/\brgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*(\d.\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;
+ r /= 255;
+ g /= 255;
+ 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;
+ var max = Math.max(r, g, b);
+ var min = Math.min(r, g, b);
- r2 = (v-r)/vm;
- g2 = (v-g)/vm;
- b2 = (v-b)/vm;
+ var h = 0;
+ var s = 0;
+ var l = (max+min)/2;
- 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);
+ if (max != min)
+ {
+ var delta = max - min;
+ s = l > 0.5 ? delta/(2-max-min) : delta/(max+min);
+
+ switch (max)
+ {
+ case r:
+ h = (g-b)/delta + (g < b ? 6 : 0);
+ break;
+
+ case g:
+ h = (b-r)/delta + 2;
+ break;
+
+ case b:
+ h = (r-g)/delta + 4;
+ break;
+ }
+ }
h = Math.round(h * 60);
s = Math.round(s * 100);
Please sign in to comment.
Something went wrong with that request. Please try again.