Skip to content

Commit

Permalink
several bug correction, refractoring
Browse files Browse the repository at this point in the history
  • Loading branch information
lingua committed Jun 9, 2014
1 parent 81e1a05 commit 3ddcc72
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 98 deletions.
3 changes: 2 additions & 1 deletion data/js/form.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,8 @@ addon.port.on("click-components", function(tabResult) {
component = backgroundIsTested;

var openUrl = "http://contrast-finder.tanaguru.com/result.html?foreground=%23"
+ foreground.textContent.replace("#", "") + "&background=%23" + background.textContent.replace("#", "")
+ foreground.textContent.replace("#", "") + "&background=%23"
+ background.textContent.replace("#", "")
+ "&isBackgroundTested=" + backgroundIsTested + "&ratio="
+ ratio + "&algo=HSV";

Expand Down
144 changes: 48 additions & 96 deletions lib/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,18 @@ var tabUtils = require('sdk/tabs/utils');
var tab = tabUtils.getActiveTab(chromewin);
chromewin = tab.linkedBrowser.contentWindow;

var { Hotkey } = require("sdk/hotkeys");
var { ToggleButton } = require("sdk/ui/button/toggle");
var cm = require("sdk/context-menu");
var array = require('sdk/util/array');
var data = require("sdk/self").data;
var windows = require("sdk/windows").browserWindows;
var tabs = require("sdk/tabs");
var self = require("sdk/self");
var color = require("./color-utils.js");
var ratio = require("./ratio-utils.js");

var color = require("./utils/color-utils.js");
var ratio = require("./utils/ratio-utils.js");
var tabFunc = require("./sidebar/tabs.js");
var pickerFunc = require("./sidebar/picker.js");
var workers = [];
var fgPickerInProgressTabs = [];
var bgPickerInProgressTabs = [];
Expand All @@ -25,62 +28,32 @@ function detachWorker(worker, workerArray) {
}
}

// set if the tabWorker is destroyed
var isDestroy = false;
var isDestroyfgPicker = false;
var isDestroybgPicker = false;
var isDestroy = true;
var isDestroyfgPicker = true;
var isDestroybgPicker = true;

var lastContrastState = null;
var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'Tanaguru Contrast Finder',
url: data.url("contrast-finder-module.html"),
onAttach: function (worker) {
button.state("window", { checked: true });
worker.port.emit("lang");
var tabWorker = null;
var tabfgPickerWorker = null;
var tabbgPickerWorker = null;
workers.push(worker);
tabs.on("open", function() {
chromewin = windowUtils.getMostRecentBrowserWindow();
tab = tabUtils.getActiveTab(chromewin);
chromewin = tab.linkedBrowser.contentWindow;
worker.port.emit("stop-selector");
worker.port.emit("stop-fgPicker");
worker.port.emit("stop-bgPicker");
});
tabs.on("ready", function() {
chromewin = windowUtils.getMostRecentBrowserWindow();
tab = tabUtils.getActiveTab(chromewin);
chromewin = tab.linkedBrowser.contentWindow;
worker.port.emit("stop-selector");
worker.port.emit("stop-fgPicker");
worker.port.emit("stop-bgPicker");
});
tabs.on("activate", function() {
chromewin = windowUtils.getMostRecentBrowserWindow();
tab = tabUtils.getActiveTab(chromewin);
chromewin = tab.linkedBrowser.contentWindow;
stateButton(worker);
});
tabs.on("open", function() { onOpenAndReadyTab(worker); });
tabs.on("ready", function() { onOpenAndReadyTab(worker); });
tabs.on("activate", function() { onActivateTab(worker); });
worker.port.on("picker-ratio", function(stringResult) {
var tabResult = stringResult.split(";");
tabResult[5] = "PICKER";
var isValidRatio = ratio.isValidRatio(tabResult[0], tabResult[1], tabResult[3]);
if (isValidRatio)
tabResult[2] = "valid-ratio";
else
tabResult[2] = "invalid-ratio";
if (tabResult[4] === "CLICK")
worker.port.emit("click-components", tabResult);
else if ((lastContrastState == null || lastContrastState !== tabResult[2])
&& tabResult[4] === "LIVE")
worker.port.emit("live-components", tabResult);
lastContrastState = tabResult[2];
lastContrastState = pickerFunc.pickerRatio(worker, stringResult,
lastContrastState, ratio);
});
worker.port.on('fgPicker-checked', function() {
lastContrastState = null;
isDestroyfgPicker = false;
initializeOnChecked();
tabfgPickerWorker = tabs.activeTab.attach({
contentScriptFile: data.url("js/picker-module.js")
});
Expand All @@ -94,8 +67,8 @@ var sidebar = require("sdk/ui/sidebar").Sidebar({
currentActionInProgressTab(tabfgPickerWorker, fgPickerInProgressTabs, "checked-picker");
});
worker.port.on('bgPicker-checked', function() {
lastContrastState = null;
isDestroybgPicker = false;
initializeOnChecked();
tabbgPickerWorker = tabs.activeTab.attach({
contentScriptFile: data.url("js/picker-module.js")
});
Expand Down Expand Up @@ -140,29 +113,10 @@ var sidebar = require("sdk/ui/sidebar").Sidebar({
"stop-selector");
});
worker.on('detach', function () {
button.state("window", {
checked: false
});
if (isDestroy == false) {
if (tabWorker !== null) {
tabWorker.port.emit("selector-unchecked");
tabWorker.destroy();
isDestroy = true;
}
}
if (isDestroyfgPicker == false) {
if (tabfgPickerWorker !== null) {
tabfgPickerWorker.port.emit("unchecked-picker");
tabfgPickerWorker.destroy();
isDestroyfgPicker = true;
}
}
if (isDestroybgPicker == false) {
if (tabbgPickerWorker !== null) {
tabbgPickerWorker.port.emit("unchecked-picker");
tabbgPickerWorker.destroy();
isDestroybgPicker = true;
}
if (windows.activeWindow) {
button.state("window", { checked: false });
pickerFunc.destroyWorker(isDestroy, isDestroyfgPicker, isDestroybgPicker,
tabWorker, tabfgPickerWorker, tabbgPickerWorker);
}
detachWorker(this, workers);
});
Expand Down Expand Up @@ -190,6 +144,13 @@ var button = ToggleButton({
}
});

var showHotKey = Hotkey({
combo: "alt-shift-c",
onPress: function() {
button.click();
}
});

cm.Menu({
label: "Tanaguru Contrast-Finder",
context: cm.URLContext("*"),
Expand Down Expand Up @@ -236,40 +197,31 @@ function destroyTabWorker(worker, progressTabs, uncheckedEmit, stopButtonEmit) {
currentTabWorker.destroy();
return true;
}
}
}
worker.port.emit(stopButtonEmit);
}

function stateButton(worker) {
var isCurrentTabHasSelectionInProgress = getStateProgressTab(selectionInProgressTabs);
var isCurrentTabHasfgPickerInProgress = getStateProgressTab(fgPickerInProgressTabs);
var isCurrentTabHasbgPickerInProgress = getStateProgressTab(bgPickerInProgressTabs);
emitButtonState(worker,
isCurrentTabHasSelectionInProgress,
"start-selector-button",
"stop-selector");
emitButtonState(worker,
isCurrentTabHasfgPickerInProgress,
"start-fgPicker-button",
"stop-fgPicker");
emitButtonState(worker,
isCurrentTabHasbgPickerInProgress,
"start-bgPicker-button",
"stop-bgPicker");
function initializeOnChecked() {
lastContrastState = null;
}

function emitButtonState(worker, isTabInProgress, emitStringStart, emitStringStop) {
if (isTabInProgress)
worker.port.emit(emitStringStart);
else
worker.port.emit(emitStringStop)
function onActivateTab(worker) {
updateWindowSetting();
tabFunc.stateButton(
worker,
selectionInProgressTabs,
fgPickerInProgressTabs,
bgPickerInProgressTabs,
tabs);
}

function getStateProgressTab(progressTab) {
for (var i=0;i<progressTab.length;i++){
if (progressTab[i].tabId === tabs.activeTab.id) {
return true;
}
}
return false;
function onOpenAndReadyTab(worker) {
updateWindowSetting();
tabFunc.emitStopMessages(worker);
}

function updateWindowSetting() {
chromewin = windowUtils.getMostRecentBrowserWindow();
tab = tabUtils.getActiveTab(chromewin);
chromewin = tab.linkedBrowser.contentWindow;
}
37 changes: 37 additions & 0 deletions lib/sidebar/picker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
function pickerRatio(worker, stringResult, lastContrastState, ratio)
{
var tabResult = stringResult.split(";");
tabResult[5] = "PICKER";
var isValidRatio = ratio.isValidRatio(tabResult[0], tabResult[1], tabResult[3]);
if (isValidRatio)
tabResult[2] = "valid-ratio";
else
tabResult[2] = "invalid-ratio";
if (tabResult[4] === "CLICK")
worker.port.emit("click-components", tabResult);
else if ((lastContrastState == null || lastContrastState !== tabResult[2])
&& tabResult[4] === "LIVE")
worker.port.emit("live-components", tabResult);
return tabResult[2];
}

function destroyWorker(isDestroy, isDestroyfgPicker, isDestroybgPicker,
tabWorker, tabfgPickerWorker, tabbgPickerWorker) {
workerToDestroy(isDestroy, tabWorker, "selector-unchecked");
workerToDestroy(isDestroyfgPicker, tabfgPickerWorker, "unchecked-picker");
workerToDestroy(isDestroybgPicker, tabbgPickerWorker, "unchecked-picker");
}

function workerToDestroy(workerState, tabWorker, emitString) {
if (workerState == false) {
if (tabWorker !== null) {
tabWorker.port.emit(emitString);
tabWorker.destroy();
workerState = true;
}
}
}


exports.pickerRatio = pickerRatio;
exports.destroyWorker = destroyWorker;
45 changes: 45 additions & 0 deletions lib/sidebar/tabs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
function stateButton(worker,
selectionInProgressTabs,
fgPickerInProgressTabs,
bgPickerInProgressTabs, tabs) {
var isCurrentTabHasSelectionInProgress = getStateProgressTab(selectionInProgressTabs, tabs);
var isCurrentTabHasfgPickerInProgress = getStateProgressTab(fgPickerInProgressTabs, tabs);
var isCurrentTabHasbgPickerInProgress = getStateProgressTab(bgPickerInProgressTabs, tabs);
emitButtonState(worker,
isCurrentTabHasSelectionInProgress,
"start-selector-button",
"stop-selector");
emitButtonState(worker,
isCurrentTabHasfgPickerInProgress,
"start-fgPicker-button",
"stop-fgPicker");
emitButtonState(worker,
isCurrentTabHasbgPickerInProgress,
"start-bgPicker-button",
"stop-bgPicker");
}

function emitButtonState(worker, isTabInProgress, emitStringStart, emitStringStop) {
if (isTabInProgress)
worker.port.emit(emitStringStart);
else
worker.port.emit(emitStringStop)
}

function getStateProgressTab(progressTab, tabs) {
for (var i=0;i<progressTab.length;i++){
if (progressTab[i].tabId === tabs.activeTab.id) {
return true;
}
}
return false;
}

function emitStopMessages(worker) {
worker.port.emit("stop-selector");
worker.port.emit("stop-fgPicker");
worker.port.emit("stop-bgPicker");
}

exports.stateButton = stateButton;
exports.emitStopMessages = emitStopMessages;
26 changes: 26 additions & 0 deletions lib/utils/color-utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
return componentToHex(r) + componentToHex(g) + componentToHex(b);
}

/* I can't call the chrome window from the content script. So, I call this from the
// main script.
//http://stackoverflow.com/questions/23888525/
//firefox-drawwindow-canvas-function-using-the-add-on-sdk/23893077
*/
function getCanvasColor(positionTab, chromewin) {
var canvas = chromewin.document.createElementNS('http://www.w3.org/1999/xhtml',
'canvas');
canvas.width = 1;
canvas.height = 1;
var context = canvas.getContext("2d");
context.drawWindow(chromewin, positionTab[0], positionTab[1], 1, 1, "white");
return context.getImageData(0, 0, 1, 1).data;
}

exports.rgbToHex = rgbToHex;
exports.getCanvasColor = getCanvasColor;
50 changes: 50 additions & 0 deletions lib/utils/ratio-utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
function isValidRatio(fgColor, bgColor, minRatio) {
return minRatio < getContrastRatio(fgColor, bgColor);
}

function getContrastRatio(fgColor, bgColor) {
var fgLuminosity = getLuminosity(fgColor);
var bgLuminosity = getLuminosity(bgColor);
if (fgLuminosity > bgLuminosity) {
return computeContrast(fgLuminosity, bgLuminosity);
} else {
return computeContrast(bgLuminosity, fgLuminosity);
}
};

function hexToRgb(hex) {
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;

return "rgb(" + r + ", " + g + ", " + b + ")";
}

function getLuminosity(color) {
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(hexToRgb(color));
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var luminosity =
getComposantValue(red) * 0.2126
+ getComposantValue(green) * 0.7152
+ getComposantValue(blue) * 0.0722;
return luminosity;
}

function getComposantValue(composant) {
var rsgb = composant / 255;
if (rsgb <= 0.03928) {
return rsgb / 12.92;
} else {
return Math.pow(((rsgb + 0.055) / 1.055), 2.4);
}
}

function computeContrast(lighter, darker) {
return ((lighter + 0.05) / (darker + 0.05));
}

exports.getContrastRatio = getContrastRatio;
exports.isValidRatio = isValidRatio;
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@
"description": "Speed and ease the use of Contrast-Finder to find good colors for contrasts in web accessibility (a11y). Right-clic on a given part of text, select whether you want to improve the foreground or background color, and validate.",
"author": "Open-S",
"license": "AGPL",
"version": "0.3"
"version": "0.3.1"
}

0 comments on commit 3ddcc72

Please sign in to comment.