OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2011 Brian Grinstead All rights reserved. | 2 * Copyright (C) 2011 Brian Grinstead All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions | 5 * modification, are permitted provided that the following conditions |
6 * are met: | 6 * are met: |
7 * | 7 * |
8 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * 2. Redistributions in binary form must reproduce the above copyright | 10 * 2. Redistributions in binary form must reproduce the above copyright |
(...skipping 164 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
175 * @param {!Event} event | 175 * @param {!Event} event |
176 * @this {WebInspector.Spectrum} | 176 * @this {WebInspector.Spectrum} |
177 */ | 177 */ |
178 function positionColor(event) | 178 function positionColor(event) |
179 { | 179 { |
180 var hsva = this._hsv.slice(); | 180 var hsva = this._hsv.slice(); |
181 hsva[1] = Number.constrain((event.x - this._colorOffset.left) / this.dra
gWidth, 0, 1); | 181 hsva[1] = Number.constrain((event.x - this._colorOffset.left) / this.dra
gWidth, 0, 1); |
182 hsva[2] = Number.constrain(1 - (event.y - this._colorOffset.top) / this.
dragHeight, 0, 1); | 182 hsva[2] = Number.constrain(1 - (event.y - this._colorOffset.top) / this.
dragHeight, 0, 1); |
183 this._innerSetColor(hsva, "", undefined, WebInspector.Spectrum._ChangeS
ource.Other); | 183 this._innerSetColor(hsva, "", undefined, WebInspector.Spectrum._ChangeS
ource.Other); |
184 } | 184 } |
185 } | 185 }; |
186 | 186 |
187 WebInspector.Spectrum._ChangeSource = { | 187 WebInspector.Spectrum._ChangeSource = { |
188 Input: "Input", | 188 Input: "Input", |
189 Model: "Model", | 189 Model: "Model", |
190 Other: "Other" | 190 Other: "Other" |
191 } | 191 }; |
192 | 192 |
193 /** @enum {symbol} */ | 193 /** @enum {symbol} */ |
194 WebInspector.Spectrum.Events = { | 194 WebInspector.Spectrum.Events = { |
195 ColorChanged: Symbol("ColorChanged"), | 195 ColorChanged: Symbol("ColorChanged"), |
196 SizeChanged: Symbol("SizeChanged") | 196 SizeChanged: Symbol("SizeChanged") |
197 }; | 197 }; |
198 | 198 |
199 WebInspector.Spectrum._colorChipSize = 24; | 199 WebInspector.Spectrum._colorChipSize = 24; |
200 WebInspector.Spectrum._itemsPerPaletteRow = 8; | 200 WebInspector.Spectrum._itemsPerPaletteRow = 8; |
201 | 201 |
(...skipping 567 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
769 pathBuilder.push(pathBuilder.length ? "L" : "M"); | 769 pathBuilder.push(pathBuilder.length ? "L" : "M"); |
770 pathBuilder.push(s * width); | 770 pathBuilder.push(s * width); |
771 pathBuilder.push((1 - v) * height); | 771 pathBuilder.push((1 - v) * height); |
772 } | 772 } |
773 | 773 |
774 if (s < 1 + dS) { | 774 if (s < 1 + dS) { |
775 s -= dS; | 775 s -= dS; |
776 candidateHSVA[V] = 1; | 776 candidateHSVA[V] = 1; |
777 s = approach(S, s, true); | 777 s = approach(S, s, true); |
778 if (s !== null) | 778 if (s !== null) |
779 pathBuilder = pathBuilder.concat(["L", s * width, -1]) | 779 pathBuilder = pathBuilder.concat(["L", s * width, -1]); |
780 } | 780 } |
781 | 781 |
782 this._contrastRatioLine.setAttribute("d", pathBuilder.join(" ")); | 782 this._contrastRatioLine.setAttribute("d", pathBuilder.join(" ")); |
783 }, | 783 }, |
784 | 784 |
785 _updateUI: function() | 785 _updateUI: function() |
786 { | 786 { |
787 var h = WebInspector.Color.fromHSVA([this._hsv[0], 1, 1, 1]); | 787 var h = WebInspector.Color.fromHSVA([this._hsv[0], 1, 1, 1]); |
788 this._colorElement.style.backgroundColor = /** @type {string} */ (h.asSt
ring(WebInspector.Color.Format.RGB)); | 788 this._colorElement.style.backgroundColor = /** @type {string} */ (h.asSt
ring(WebInspector.Color.Format.RGB)); |
789 if (Runtime.experiments.isEnabled("colorContrastRatio")) { | 789 if (Runtime.experiments.isEnabled("colorContrastRatio")) { |
(...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
889 { | 889 { |
890 var rgbColor = /** @type {!DOMAgent.RGBA} */ (event.data); | 890 var rgbColor = /** @type {!DOMAgent.RGBA} */ (event.data); |
891 var rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0)
/ 100]; | 891 var rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0)
/ 100]; |
892 var color = WebInspector.Color.fromRGBA(rgba); | 892 var color = WebInspector.Color.fromRGBA(rgba); |
893 this._innerSetColor(color.hsva(), "", undefined, WebInspector.Spectrum._
ChangeSource.Other); | 893 this._innerSetColor(color.hsva(), "", undefined, WebInspector.Spectrum._
ChangeSource.Other); |
894 InspectorFrontendHost.bringToFront(); | 894 InspectorFrontendHost.bringToFront(); |
895 }, | 895 }, |
896 | 896 |
897 | 897 |
898 __proto__: WebInspector.VBox.prototype | 898 __proto__: WebInspector.VBox.prototype |
899 } | 899 }; |
900 | 900 |
901 /** @typedef {{ title: string, colors: !Array.<string>, mutable: boolean }} */ | 901 /** @typedef {{ title: string, colors: !Array.<string>, mutable: boolean }} */ |
902 WebInspector.Spectrum.Palette; | 902 WebInspector.Spectrum.Palette; |
903 WebInspector.Spectrum.GeneratedPaletteTitle = "Page colors"; | 903 WebInspector.Spectrum.GeneratedPaletteTitle = "Page colors"; |
904 | 904 |
905 /** | 905 /** |
906 * @constructor | 906 * @constructor |
907 * @param {function(!WebInspector.Spectrum.Palette)} callback | 907 * @param {function(!WebInspector.Spectrum.Palette)} callback |
908 */ | 908 */ |
909 WebInspector.Spectrum.PaletteGenerator = function(callback) | 909 WebInspector.Spectrum.PaletteGenerator = function(callback) |
910 { | 910 { |
911 this._callback = callback; | 911 this._callback = callback; |
912 /** @type {!Map.<string, number>} */ | 912 /** @type {!Map.<string, number>} */ |
913 this._frequencyMap = new Map(); | 913 this._frequencyMap = new Map(); |
914 var stylesheetPromises = []; | 914 var stylesheetPromises = []; |
915 for (var target of WebInspector.targetManager.targets(WebInspector.Target.Ca
pability.DOM)) { | 915 for (var target of WebInspector.targetManager.targets(WebInspector.Target.Ca
pability.DOM)) { |
916 var cssModel = WebInspector.CSSModel.fromTarget(target); | 916 var cssModel = WebInspector.CSSModel.fromTarget(target); |
917 for (var stylesheet of cssModel.allStyleSheets()) | 917 for (var stylesheet of cssModel.allStyleSheets()) |
918 stylesheetPromises.push(new Promise(this._processStylesheet.bind(thi
s, stylesheet))); | 918 stylesheetPromises.push(new Promise(this._processStylesheet.bind(thi
s, stylesheet))); |
919 } | 919 } |
920 Promise.all(stylesheetPromises) | 920 Promise.all(stylesheetPromises) |
921 .catchException(null) | 921 .catchException(null) |
922 .then(this._finish.bind(this)); | 922 .then(this._finish.bind(this)); |
923 } | 923 }; |
924 | 924 |
925 WebInspector.Spectrum.PaletteGenerator.prototype = { | 925 WebInspector.Spectrum.PaletteGenerator.prototype = { |
926 /** | 926 /** |
927 * @param {string} a | 927 * @param {string} a |
928 * @param {string} b | 928 * @param {string} b |
929 * @return {number} | 929 * @return {number} |
930 */ | 930 */ |
931 _frequencyComparator: function(a, b) | 931 _frequencyComparator: function(a, b) |
932 { | 932 { |
933 return this._frequencyMap.get(b) - this._frequencyMap.get(a); | 933 return this._frequencyMap.get(b) - this._frequencyMap.get(a); |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
993 var regexResult = text.match(/((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{6}|#
[0-9a-f]{3})/g) || []; | 993 var regexResult = text.match(/((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{6}|#
[0-9a-f]{3})/g) || []; |
994 for (var c of regexResult) { | 994 for (var c of regexResult) { |
995 var frequency = this._frequencyMap.get(c) || 0; | 995 var frequency = this._frequencyMap.get(c) || 0; |
996 this._frequencyMap.set(c, ++frequency); | 996 this._frequencyMap.set(c, ++frequency); |
997 } | 997 } |
998 resolve(null); | 998 resolve(null); |
999 } | 999 } |
1000 | 1000 |
1001 stylesheet.requestContent().then(parseContent.bind(this)); | 1001 stylesheet.requestContent().then(parseContent.bind(this)); |
1002 } | 1002 } |
1003 } | 1003 }; |
1004 | 1004 |
1005 WebInspector.Spectrum.MaterialPaletteShades = { | 1005 WebInspector.Spectrum.MaterialPaletteShades = { |
1006 "#F44336": ["#FFEBEE", "#FFCDD2", "#EF9A9A", "#E57373", "#EF5350", "#F44336"
, "#E53935", "#D32F2F", "#C62828", "#B71C1C"], | 1006 "#F44336": ["#FFEBEE", "#FFCDD2", "#EF9A9A", "#E57373", "#EF5350", "#F44336"
, "#E53935", "#D32F2F", "#C62828", "#B71C1C"], |
1007 "#E91E63": ["#FCE4EC", "#F8BBD0", "#F48FB1", "#F06292", "#EC407A", "#E91E63"
, "#D81B60", "#C2185B", "#AD1457", "#880E4F"], | 1007 "#E91E63": ["#FCE4EC", "#F8BBD0", "#F48FB1", "#F06292", "#EC407A", "#E91E63"
, "#D81B60", "#C2185B", "#AD1457", "#880E4F"], |
1008 "#9C27B0": ["#F3E5F5", "#E1BEE7", "#CE93D8", "#BA68C8", "#AB47BC", "#9C27B0"
, "#8E24AA", "#7B1FA2", "#6A1B9A", "#4A148C"], | 1008 "#9C27B0": ["#F3E5F5", "#E1BEE7", "#CE93D8", "#BA68C8", "#AB47BC", "#9C27B0"
, "#8E24AA", "#7B1FA2", "#6A1B9A", "#4A148C"], |
1009 "#673AB7": ["#EDE7F6", "#D1C4E9", "#B39DDB", "#9575CD", "#7E57C2", "#673AB7"
, "#5E35B1", "#512DA8", "#4527A0", "#311B92"], | 1009 "#673AB7": ["#EDE7F6", "#D1C4E9", "#B39DDB", "#9575CD", "#7E57C2", "#673AB7"
, "#5E35B1", "#512DA8", "#4527A0", "#311B92"], |
1010 "#3F51B5": ["#E8EAF6", "#C5CAE9", "#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5"
, "#3949AB", "#303F9F", "#283593", "#1A237E"], | 1010 "#3F51B5": ["#E8EAF6", "#C5CAE9", "#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5"
, "#3949AB", "#303F9F", "#283593", "#1A237E"], |
1011 "#2196F3": ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3"
, "#1E88E5", "#1976D2", "#1565C0", "#0D47A1"], | 1011 "#2196F3": ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3"
, "#1E88E5", "#1976D2", "#1565C0", "#0D47A1"], |
1012 "#03A9F4": ["#E1F5FE", "#B3E5FC", "#81D4FA", "#4FC3F7", "#29B6F6", "#03A9F4"
, "#039BE5", "#0288D1", "#0277BD", "#01579B"], | 1012 "#03A9F4": ["#E1F5FE", "#B3E5FC", "#81D4FA", "#4FC3F7", "#29B6F6", "#03A9F4"
, "#039BE5", "#0288D1", "#0277BD", "#01579B"], |
1013 "#00BCD4": ["#E0F7FA", "#B2EBF2", "#80DEEA", "#4DD0E1", "#26C6DA", "#00BCD4"
, "#00ACC1", "#0097A7", "#00838F", "#006064"], | 1013 "#00BCD4": ["#E0F7FA", "#B2EBF2", "#80DEEA", "#4DD0E1", "#26C6DA", "#00BCD4"
, "#00ACC1", "#0097A7", "#00838F", "#006064"], |
1014 "#009688": ["#E0F2F1", "#B2DFDB", "#80CBC4", "#4DB6AC", "#26A69A", "#009688"
, "#00897B", "#00796B", "#00695C", "#004D40"], | 1014 "#009688": ["#E0F2F1", "#B2DFDB", "#80CBC4", "#4DB6AC", "#26A69A", "#009688"
, "#00897B", "#00796B", "#00695C", "#004D40"], |
1015 "#4CAF50": ["#E8F5E9", "#C8E6C9", "#A5D6A7", "#81C784", "#66BB6A", "#4CAF50"
, "#43A047", "#388E3C", "#2E7D32", "#1B5E20"], | 1015 "#4CAF50": ["#E8F5E9", "#C8E6C9", "#A5D6A7", "#81C784", "#66BB6A", "#4CAF50"
, "#43A047", "#388E3C", "#2E7D32", "#1B5E20"], |
1016 "#8BC34A": ["#F1F8E9", "#DCEDC8", "#C5E1A5", "#AED581", "#9CCC65", "#8BC34A"
, "#7CB342", "#689F38", "#558B2F", "#33691E"], | 1016 "#8BC34A": ["#F1F8E9", "#DCEDC8", "#C5E1A5", "#AED581", "#9CCC65", "#8BC34A"
, "#7CB342", "#689F38", "#558B2F", "#33691E"], |
1017 "#CDDC39": ["#F9FBE7", "#F0F4C3", "#E6EE9C", "#DCE775", "#D4E157", "#CDDC39"
, "#C0CA33", "#AFB42B", "#9E9D24", "#827717"], | 1017 "#CDDC39": ["#F9FBE7", "#F0F4C3", "#E6EE9C", "#DCE775", "#D4E157", "#CDDC39"
, "#C0CA33", "#AFB42B", "#9E9D24", "#827717"], |
1018 "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B"
, "#FDD835", "#FBC02D", "#F9A825", "#F57F17"], | 1018 "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B"
, "#FDD835", "#FBC02D", "#F9A825", "#F57F17"], |
1019 "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107"
, "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"], | 1019 "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107"
, "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"], |
1020 "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800"
, "#FB8C00", "#F57C00", "#EF6C00", "#E65100"], | 1020 "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800"
, "#FB8C00", "#F57C00", "#EF6C00", "#E65100"], |
1021 "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722"
, "#F4511E", "#E64A19", "#D84315", "#BF360C"], | 1021 "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722"
, "#F4511E", "#E64A19", "#D84315", "#BF360C"], |
1022 "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548"
, "#6D4C41", "#5D4037", "#4E342E", "#3E2723"], | 1022 "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548"
, "#6D4C41", "#5D4037", "#4E342E", "#3E2723"], |
1023 "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E"
, "#757575", "#616161", "#424242", "#212121"], | 1023 "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E"
, "#757575", "#616161", "#424242", "#212121"], |
1024 "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B"
, "#546E7A", "#455A64", "#37474F", "#263238"] | 1024 "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B"
, "#546E7A", "#455A64", "#37474F", "#263238"] |
1025 }; | 1025 }; |
1026 | 1026 |
1027 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, mat
chUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteSha
des) }; | 1027 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, mat
chUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteSha
des) }; |
OLD | NEW |