Changeset 46828 in webkit
- Timestamp:
- Aug 5, 2009 8:27:22 PM (15 years ago)
- Location:
- trunk/WebCore
- Files:
-
- 1 added
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/WebCore/ChangeLog
r46827 r46828 1 2009-08-05 Joseph Pecoraro <joepeck02@gmail.com> 2 3 Reviewed by Timothy Hatcher. 4 5 Color is only reported in rgb() format; should toggle between rgb() and hex 6 https://bugs.webkit.org/show_bug.cgi?id=13516 7 8 New Class to Parse and Change Between Color Representations: 9 10 * inspector/front-end/Color.js: Added. 11 (WebInspector.Color): 12 13 Representations of Colors in Raw Form. (May be Lazy Loaded): 14 15 (WebInspector.Color.prototype.get shorthex): 16 (WebInspector.Color.prototype.get hex): 17 (WebInspector.Color.prototype.set hex): 18 (WebInspector.Color.prototype.get rgb): 19 (WebInspector.Color.prototype.set rgb): 20 (WebInspector.Color.prototype.get hsl): 21 (WebInspector.Color.prototype.set hsl): 22 (WebInspector.Color.prototype.get nickname): 23 (WebInspector.Color.prototype.set nickname): 24 (WebInspector.Color.prototype.get rgba): 25 (WebInspector.Color.prototype.set rgba): 26 (WebInspector.Color.prototype.get hsla): 27 (WebInspector.Color.prototype.set hsla): 28 29 Helpers and Standard String Representations: 30 31 (WebInspector.Color.prototype.hasShortHex): 32 (WebInspector.Color.prototype.toRgb): 33 (WebInspector.Color.prototype.toHsl): 34 (WebInspector.Color.prototype.toShortHex): 35 (WebInspector.Color.prototype.toHex): 36 (WebInspector.Color.prototype.toRgba): 37 (WebInspector.Color.prototype.toHsla): 38 (WebInspector.Color.prototype.toNickname): 39 40 Conversion Functions to Determine Other Representations: 41 My Sources for all algorithms and sample data: 42 Wikipedia: http://en.wikipedia.org/wiki/HSV_color_space 43 CSS Specification: http://www.w3.org/TR/css3-color/#hsla-color 44 45 (WebInspector.Color.prototype.rgbToHex): 46 (WebInspector.Color.prototype.hexToRgb): 47 (WebInspector.Color.prototype.rgbToHsl): 48 (WebInspector.Color.prototype.hslToRgb.hueToRgb): 49 (WebInspector.Color.prototype.hslToRgb): 50 (WebInspector.Color.prototype.rgbaToHsla): 51 (WebInspector.Color.prototype.hslaToRgba): 52 53 Called from the constructor, attempts to parse and will throw an error 54 if it cannot parse. If simple then the "hex" value is guarenteed. 55 If advanced then both the "rgba" and "hsla" are guarenteed. If it is 56 a nickname in any way (e.g. "transparent", "black") then this is 57 guarenteed to be set as well. 58 59 (WebInspector.Color.prototype.parse): 60 61 Clicking on the swatch will rotate through Color Representations. 62 Simple: rgb -> hsl -> nickname? -> shorthex? -> hex -> (loop around) 63 Advanced: rgba -> hsla -> nickname? -> (loop around) 64 65 * inspector/front-end/StylesSidebarPane.js: 66 (WebInspector.StylePropertyTreeElement.prototype.updateTitle.value.): 67 (WebInspector.StylePropertyTreeElement.prototype.updateTitle): 68 69 Load Color.js: 70 71 * inspector/front-end/inspector.html: 72 1 73 2009-08-05 John Abd-El-Malek <jam@chromium.org> 2 74 -
trunk/WebCore/inspector/front-end/StylesSidebarPane.js
r46732 r46828 877 877 if (value) { 878 878 // FIXME: this only covers W3C and CSS 16 valid color names 879 var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow/g); 879 var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow|transparent/g); 880 var swatch; 880 881 if (colors) { 881 882 var colorsLength = colors.length; … … 885 886 swatchElement.style.setProperty("background-color", colors[i]); 886 887 this.listItemElement.appendChild(swatchElement); 888 swatch = swatchElement; 889 } 890 } 891 892 // Rotate through Color Representations by Clicking on the Swatch 893 // Simple: rgb -> hsl -> nickname? -> shorthex? -> hex -> ... 894 // Advanced: rgba -> hsla -> nickname? -> ... 895 if (colors && colors.length === 1) { 896 var color = new WebInspector.Color(htmlValue); 897 swatch.addEventListener("click", changeColorDisplay, false); 898 swatch.addEventListener("dblclick", function(event) { 899 event.stopPropagation(); 900 }, false); 901 902 var mode = color.mode; 903 var valueElement = this.valueElement; 904 function changeColorDisplay(event) { 905 906 function changeTo(newMode, content) { 907 mode = newMode; 908 valueElement.textContent = content; 909 } 910 911 switch (mode) { 912 case "rgb": 913 changeTo("hsl", color.toHsl()); 914 break; 915 916 case "shorthex": 917 changeTo("hex", color.toHex()); 918 break; 919 920 case "hex": 921 changeTo("rgb", color.toRgb()); 922 break; 923 924 case "nickname": 925 if (color.simple) { 926 if (color.hasShortHex()) 927 changeTo("shorthex", color.toShortHex()); 928 else 929 changeTo("hex", color.toHex()); 930 } else 931 changeTo("rgba", color.toRgba()); 932 break; 933 934 case "hsl": 935 if (color.nickname) 936 changeTo("nickname", color.toNickname()); 937 else if (color.hasShortHex()) 938 changeTo("shorthex", color.toShortHex()); 939 else 940 changeTo("hex", color.toHex()); 941 break; 942 943 case "rgba": 944 changeTo("hsla", color.toHsla()); 945 break; 946 947 case "hsla": 948 if (color.nickname) 949 changeTo("nickname", color.toNickname()); 950 else 951 changeTo("rgba", color.toRgba()); 952 break; 953 } 887 954 } 888 955 } -
trunk/WebCore/inspector/front-end/WebKit.qrc
r46732 r46828 8 8 <file>CallStackSidebarPane.js</file> 9 9 <file>ChangesView.js</file> 10 <file>Color.js</file> 10 11 <file>ConsoleView.js</file> 11 12 <file>Database.js</file> -
trunk/WebCore/inspector/front-end/inspector.html
r46732 r46828 62 62 <script type="text/javascript" src="MetricsSidebarPane.js"></script> 63 63 <script type="text/javascript" src="PropertiesSidebarPane.js"></script> 64 <script type="text/javascript" src="Color.js"></script> 64 65 <script type="text/javascript" src="StylesSidebarPane.js"></script> 65 66 <script type="text/javascript" src="Panel.js"></script>
Note: See TracChangeset
for help on using the changeset viewer.