Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-16 13:56:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset e329450e4d25 (bug 1332085) for browser_color-widget-01.js failures

Browse Source 
CLOSED TREE
This commit is contained in:
Phil Ringnalda 2017-01-21 12:22:06 -08:00
parent 63d58feb4a
commit 4dec450e6f
6 changed files with 22 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
devtools/client/locales/en-US/colorwidget.properties
View File

@ -1,11 +0,0 @@
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
# LOCALIZATION NOTE These strings are used in the CSS Color Editor Widget
# which can be found in a tooltip that appears in the Rules View when clicking
# on a color swatch displayed next to CSS declarations like 'color: #FFF'.
# LOCALIZATION NOTE (colorNameLabel): The label for the current color
# widget's color name field
colorNameLabel=Color Name:

1
devtools/client/shared/test/browser.ini
View File

@ -25,7 +25,6 @@ support-files =
[browser_css_angle.js]
[browser_css_color.js]
[browser_color-widget-01.js]
[browser_cubic-bezier-01.js]
[browser_cubic-bezier-02.js]
[browser_cubic-bezier-03.js]

132
devtools/client/shared/test/browser_color-widget-01.js
View File

@ -1,132 +0,0 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the color widget color picker works correctly.
const {ColorWidget} = require("devtools/client/shared/widgets/ColorWidget.js");
const TEST_URI = `data:text/html,
<link rel="stylesheet" href="chrome://devtools/content/shared/widgets/color-widget.css" type="text/css"/>
<div id="color-widget-container" />`;
add_task(function* () {
let [host,, doc] = yield createHost("bottom", TEST_URI);
let container = doc.getElementById("color-widget-container");
yield testCreateAndDestroyShouldAppendAndRemoveElements(container);
yield testPassingAColorAtInitShouldSetThatColor(container);
yield testSettingAndGettingANewColor(container);
yield testChangingColorShouldEmitEvents(container);
yield testSettingColorShoudUpdateTheUI(container);
yield testChangingColorShouldUpdateColorNameDisplay(container);
host.destroy();
});
function testCreateAndDestroyShouldAppendAndRemoveElements(container) {
ok(container, "We have the root node to append ColorWidget to");
is(container.childElementCount, 0, "Root node is empty");
let s = new ColorWidget(container, [255, 126, 255, 1]);
s.show();
ok(container.childElementCount > 0, "ColorWidget has appended elements");
s.destroy();
is(container.childElementCount, 0, "Destroying ColorWidget removed all nodes");
}
function testPassingAColorAtInitShouldSetThatColor(container) {
let initRgba = [255, 126, 255, 1];
let s = new ColorWidget(container, initRgba);
s.show();
let setRgba = s.rgb;
is(initRgba[0], setRgba[0], "ColorWidget initialized with the right color");
is(initRgba[1], setRgba[1], "ColorWidget initialized with the right color");
is(initRgba[2], setRgba[2], "ColorWidget initialized with the right color");
is(initRgba[3], setRgba[3], "ColorWidget initialized with the right color");
s.destroy();
}
function testSettingAndGettingANewColor(container) {
let s = new ColorWidget(container, [0, 0, 0, 1]);
s.show();
let colorToSet = [255, 255, 255, 1];
s.rgb = colorToSet;
let newColor = s.rgb;
is(colorToSet[0], newColor[0], "ColorWidget set with the right color");
is(colorToSet[1], newColor[1], "ColorWidget set with the right color");
is(colorToSet[2], newColor[2], "ColorWidget set with the right color");
is(colorToSet[3], newColor[3], "ColorWidget set with the right color");
s.destroy();
}
function testChangingColorShouldEmitEvents(container) {
return new Promise(resolve => {
let s = new ColorWidget(container, [255, 255, 255, 1]);
s.show();
s.once("changed", (event, rgba, color) => {
ok(true, "Changed event was emitted on color change");
is(rgba[0], 128, "New color is correct");
is(rgba[1], 64, "New color is correct");
is(rgba[2], 64, "New color is correct");
is(rgba[3], 1, "New color is correct");
is(`rgba(${rgba.join(", ")})`, color, "RGBA and css color correspond");
s.destroy();
resolve();
});
// Simulate a drag move event by calling the handler directly.
s.onDraggerMove(s.dragger.offsetWidth / 2, s.dragger.offsetHeight / 2);
});
}
function testSettingColorShoudUpdateTheUI(container) {
let s = new ColorWidget(container, [255, 255, 255, 1]);
s.show();
let dragHelperOriginalPos = [s.dragHelper.style.top, s.dragHelper.style.left];
let alphaHelperOriginalPos = s.alphaSliderHelper.style.left;
s.rgb = [50, 240, 234, .2];
s.updateUI();
ok(s.alphaSliderHelper.style.left != alphaHelperOriginalPos, "Alpha helper has moved");
ok(s.dragHelper.style.top !== dragHelperOriginalPos[0], "Drag helper has moved");
ok(s.dragHelper.style.left !== dragHelperOriginalPos[1], "Drag helper has moved");
s.rgb = [240, 32, 124, 0];
s.updateUI();
is(s.alphaSliderHelper.style.left, -(s.alphaSliderHelper.offsetWidth / 2) + "px",
"Alpha range UI has been updated again");
s.destroy();
}
function testChangingColorShouldUpdateColorNameDisplay(container) {
let s = new ColorWidget(container, [255, 255, 255, 1]);
s.show();
s.updateUI();
is(s.colorName.textContent, "white", "Color Name should be white");
s.rgb = [0, 0, 0, 1];
s.updateUI();
is(s.colorName.textContent, "black", "Color Name should be black");
s.rgb = [0, 0, 1, 1];
s.updateUI();
is(s.colorName.textContent, "---", "Color Name should be ---");
s.destroy();
}

18
devtools/client/shared/widgets/ColorWidget.js
View File

@ -10,12 +10,6 @@
"use strict";
const EventEmitter = require("devtools/shared/event-emitter");
const {rgbToColorName} = require("devtools/shared/css/color").colorUtils;
const { LocalizationHelper } = require("devtools/shared/l10n");
const STRINGS_URI = "devtools/client/locales/colorwidget.properties";
const L10N = new LocalizationHelper(STRINGS_URI);
const XHTML_NS = "http://www.w3.org/1999/xhtml";
/**
@ -44,8 +38,6 @@ const XHTML_NS = "http://www.w3.org/1999/xhtml";
function ColorWidget(parentEl, rgb) {
EventEmitter.decorate(this);
let colorNameLabel = L10N.getStr("colorNameLabel");
this.element = parentEl.ownerDocument.createElementNS(XHTML_NS, "div");
this.parentEl = parentEl;
@ -71,10 +63,6 @@ function ColorWidget(parentEl, rgb) {
<div class="colorwidget-alpha-handle colorwidget-slider-control"></div>
</div>
</div>
<div class="colorwidget-colorname">
<label class="colorwidget-colorname-label">${colorNameLabel}</label>
<span class="colorwidget-colorname-value"></span>
</div>
`;
this.onElementClick = this.onElementClick.bind(this);
@ -95,8 +83,6 @@ function ColorWidget(parentEl, rgb) {
this.alphaSliderHelper = this.element.querySelector(".colorwidget-alpha-handle");
ColorWidget.draggable(this.alphaSliderInner, this.onAlphaSliderMove.bind(this));
this.colorName = this.element.querySelector(".colorwidget-colorname-value");
if (rgb) {
this.rgb = rgb;
this.updateUI();
@ -339,9 +325,6 @@ ColorWidget.prototype = {
let alphaGradient = "linear-gradient(to right, " + rgbAlpha0 + ", " +
rgbNoAlpha + ")";
this.alphaSliderInner.style.background = alphaGradient;
let colorName = rgbToColorName(rgb[0], rgb[1], rgb[2]);
this.colorName.textContent = colorName || "---";
},
destroy: function () {
@ -354,6 +337,5 @@ ColorWidget.prototype = {
this.alphaSlider = this.alphaSliderInner = this.alphaSliderHelper = null;
this.parentEl = null;
this.element = null;
this.colorName = null;
}
};

7
devtools/server/actors/highlighters/eye-dropper.js
View File

@ -507,7 +507,12 @@ function toColorString(rgb, format) {
let [h, s, l] = rgbToHsl(rgb);
return "hsl(" + h + ", " + s + "%, " + l + "%)";
case "name":
let str = rgbToColorName(r, g, b) || hexString(rgb);
let str;
try {
str = rgbToColorName(r, g, b);
} catch (e) {
str = hexString(rgb);
}
return str;
default:
return hexString(rgb);

25
devtools/shared/css/color.js
View File

@ -169,14 +169,17 @@ CssColor.prototype = {
return invalidOrSpecialValue;
}
let tuple = this._getRGBATuple();
try {
let tuple = this._getRGBATuple();
if (tuple.a !== 1) {
if (tuple.a !== 1) {
return this.hex;
}
let {r, g, b} = tuple;
return rgbToColorName(r, g, b);
} catch (e) {
return this.hex;
}
let {r, g, b} = tuple;
return rgbToColorName(r, g, b) || this.hex;
},
get hex() {
@ -534,11 +537,11 @@ function classifyColor(value) {
var cssRGBMap;
/**
* Given a color, return its name, if it has one. Otherwise
* return an empty string.
* Given a color, return its name, if it has one. Throws an exception
* if the color does not have a name.
*
* @param {Number} r, g, b The color components.
* @return {String} the name of the color or an empty string
* @return {String} the name of the color
*/
function rgbToColorName(r, g, b) {
if (!cssRGBMap) {
@ -550,7 +553,11 @@ function rgbToColorName(r, g, b) {
}
}
}
return cssRGBMap[JSON.stringify([r, g, b, 1])] || "";
let value = cssRGBMap[JSON.stringify([r, g, b, 1])];
if (!value) {
throw new Error("no such color");
}
return value;
}
// Translated from nsColor.cpp.