Skip to content

Commit

Permalink
fixes to ui
Browse files Browse the repository at this point in the history
  • Loading branch information
Claudio De Angelis committed Dec 30, 2018
1 parent 17c1880 commit 70324c7
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 100 deletions.
2 changes: 2 additions & 0 deletions css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ body{
#httpsWrap{
margin-left: 20px;
margin-top: 4px;
position: absolute;
left: 143px;
}

#formWrapper{
Expand Down
7 changes: 4 additions & 3 deletions javascript/helpers/sendRequests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,14 @@ const testConnection = async () => {
const testFileFetch = async (fileSource) => {
const fileSourceTest = fileSource.replace('/files/', '/exists/');

const res = await fetch(fileSourceTest).catch(((err) => { console.log(err); }));;
const res = await fetch(fileSourceTest).catch(((err) => { console.log(err); }));
console.log(res);
if (res && res.ok) {
const json = await res.json();

if (json.fileExists === 'true') {
setDOMElementProperty('injectFile', 'checked', true);
setDOMElementProperty('error', 'innerText', '');
// setDOMElementProperty('injectFile', 'checked', true);
// setDOMElementProperty('error', 'innerText', '');
return true;
} else {
setDOMElementProperty('injectFile', 'checked', false);
Expand Down
68 changes: 66 additions & 2 deletions javascript/helpers/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,33 @@ const getTabId = async () => {
return thisTab;
};


const sendMessageToContent = async (args) => {
const tabID = await getTabId();
const sendMessage = new Promise((resolve, reject) => {
chrome.tabs.sendMessage(tabID, args, res => {
resolve(res);
});
});
return await sendMessage.then(res => res);
};

const sendMessageToBackground = (msg) => {
chrome.runtime.sendMessage(msg, res => console.log(`Response from background: ${res}`));
};

const checkIsUrl = (string) => {
const urlPattern = /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i;
return urlPattern.test(string);
};

const checkIsNotEmptyUrl = () => {
const {
fileSource,
} = getLocalStorage();
return fileSource !== null && fileSource !== undefined && fileSource !== '';
}

const actionForm = (action) => {
let disabled, backgroundColor;
switch (action) {
Expand All @@ -74,9 +96,10 @@ const actionForm = (action) => {
input.style.backgroundColor = backgroundColor;
input.style.transition = "all .5s";
if (input.type === 'checkbox') {
if(!input.checked){
console.log(input);
if (!input.checked) {
input.parentElement.parentElement.style.opacity = opacity;
input.parentElement.parentElement.style.transition = "all .3s";
input.parentElement.parentElement.style.transition = "all .3s";
} else {
input.parentElement.style.color = textColor;
}
Expand All @@ -87,3 +110,44 @@ const actionForm = (action) => {
});

};

const setFormValuesFromStorage = () => {
const {
injectionDelay,
fileSource,
localhostPort,
hotReload,
https,
watchJSON,
} = getLocalStorage();

if (fileSource) setDOMElementProperty('fileSource', 'value', fileSource);

if (injectionDelay) setDOMElementProperty('injectionDelay', 'value', injectionDelay);

if (localhostPort) setDOMElementProperty('localhostPort', 'value', localhostPort);

if (hotReload !== null) setDOMElementProperty('hotReload', 'checked', hotReload);

if (https !== null) setDOMElementProperty('https', 'checked', https);

if (watchJSON !== null) setDOMElementProperty('watchJSON', 'checked', watchJSON);
};


const initializeHotReload = (fileSource, localhostPort, https, thisTab, hotReload, watchJSON) => {
if (fileSource && fileSource !== '' && fileSource !== undefined) {
sendMessageToBackground({ action: "reload", localhostPort, https, thisTab, fileSource, hotReload, watchJSON });
}
return;
};

const copyString = (string) => {
return '' + string;
};

const createLocalhostPath = (fileSource, https, localhostPort, ) => {
const uriEncodedFileSource = encodeURIComponent(fileSource);
const protocol = https ? 'https' : 'http';
return `${protocol}://localhost:${localhostPort}/files/${uriEncodedFileSource}`;
};
195 changes: 100 additions & 95 deletions javascript/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,50 +11,37 @@ document.addEventListener('DOMContentLoaded', async () => {

await testConnection();

await testInjectorStatus();

const {
thisTab,
injectionDelay,
fileSource,
localhostPort,
hotReload,
https,
watchJSON,
} = getLocalStorage();

// console.log(watchJSON);

// console.log(thisTab, injectionDelay, fileSource, localhostPort, hotReload, https, watchJSON);

if (fileSource) setDOMElementProperty('fileSource', 'value', fileSource);

if (injectionDelay) setDOMElementProperty('injectionDelay', 'value', injectionDelay);
setFormValuesFromStorage();

if (localhostPort) setDOMElementProperty('localhostPort', 'value', localhostPort);
setLocalStorage();

if (hotReload !== null) setDOMElementProperty('hotReload', 'checked', hotReload);
let params = await initializeContentMessageAction({ action: 'requestStatus' });

if (https !== null) setDOMElementProperty('https', 'checked', https);
handleParamsForGraphic(params);

if (watchJSON !== null) setDOMElementProperty('watchJSON', 'checked', watchJSON);
setupFormAction(params);

setLocalStorage();

document.querySelectorAll('input').forEach(element => element.addEventListener('blur', () => {
setLocalStorage();
}));


document.getElementById('binIcon').addEventListener('click', () => {
document.getElementById('binIcon').addEventListener('click', async () => {
const {
localhostPort,
https,
} = getLocalStorage();

chrome.runtime.sendMessage({ action: 'clearData', localhostPort, https });
sendMessageToBackground({ action: 'clearData', localhostPort, https });

clearLocalStorage();
sendMessageToContent({ action: 'clearLocalStorage' });

const params = await initializeContentMessageAction({ action: 'clearLocalStorage' });

handleParamsForGraphic(params);

setDOMElementProperty('fileSource', 'value', '');
});

Expand Down Expand Up @@ -107,75 +94,25 @@ document.addEventListener('DOMContentLoaded', async () => {

switch (injectFile) {
case true:
toggleInjectFile({formState: 'disable', messageAction: 'setFileSource'});
toggleInjectFile({ formState: 'disable', messageAction: 'setFileSource' });
break;
case false:
default:
toggleInjectFile({formState: 'enable', messageAction: 'stopInjection'});
toggleInjectFile({ formState: 'enable', messageAction: 'stopInjection' });
break;
}

});

});

const testInjectorStatus = async () => {
await sendMessageToContent({ action: 'requestStatus' });
};

const sendMessageToContent = async (args) => {

const tabID = await getTabId();
await chrome.tabs.sendMessage(tabID, args, async res => await handleResponse(res));

};

const handleResponse = async (res) => {
const isInjectorActive = res && res.isInjectorActive ? res.isInjectorActive : 'false';
const fssConnected = await testConnection();
const areWatchersConsistent = await testWatchers();

switch (isInjectorActive) {
case 'true':
setDOMElementProperty('injectorBadge', 'backgroundColor', '#1beabd');
setDOMElementProperty('injectorText', 'innerText', 'INJECTION ACTIVE');

if (fssConnected && areWatchersConsistent) {
setDOMElementProperty('injectFile', 'checked', true)
chrome.browserAction.setBadgeBackgroundColor({ color: [68, 189, 169, 100] });
chrome.browserAction.setBadgeText({ text: "ON" });
actionForm('disable');
}
// else setDOMElementProperty('injectFile', 'checked', false);

break;
case 'false':
default:
setDOMElementProperty('injectorBadge', 'backgroundColor', '#FF4600');
setDOMElementProperty('injectorText', 'innerText', 'INACTIVE');

setDOMElementProperty('injectFile', 'checked', false);
setDOMElementProperty('error', 'innerText', '');
chrome.browserAction.setBadgeBackgroundColor({ color: [255, 70, 0, 100] });
chrome.browserAction.setBadgeText({ text: "OFF" });
actionForm('enable');
break;
}

};

const initializeHotReload = (fileSource, localhostPort, https, thisTab, hotReload, watchJSON) => {
if (fileSource && fileSource !== '' && fileSource !== undefined) {
chrome.runtime.sendMessage({ action: "reload", localhostPort, https, thisTab, fileSource, hotReload, watchJSON }, res => console.log(res));
}
return;
};

const toggleInjectFile = async (args) => {
const {
formState,
messageAction
} = args;
const isConnectionActive = testConnection();
const isConnectionActive = await testConnection();
if (isConnectionActive) {
setLocalStorage();

Expand All @@ -187,34 +124,102 @@ const toggleInjectFile = async (args) => {
watchJSON,
} = getLocalStorage();

let { fileSource, hotReload, } = getLocalStorage();
let {
fileSource,
hotReload,
} = getLocalStorage();

const filePath = copyString(fileSource);

const filePath = '' + fileSource;
const isUrl = checkIsUrl(fileSource);

if (!isUrl) {
const uriEncodedFileSource = encodeURIComponent(fileSource);
const protocol = https ? 'https' : 'http';
fileSource = `${protocol}://localhost:${localhostPort}/files/${uriEncodedFileSource}`;
}
if (!isUrl) { fileSource = createLocalhostPath(fileSource, https, localhostPort) };

if (isUrl || (!isUrl /*&& testConnection()*/ && await testFileFetch(fileSource))) {
if (checkIsNotEmptyUrl() && (isUrl || (!isUrl && await testFileFetch(fileSource)))) {

hotReload = messageAction === 'stopInjection' ? false : hotReload;

if(!isUrl) initializeHotReload(filePath, localhostPort, https, thisTab, hotReload, watchJSON);
if (!isUrl) initializeHotReload(filePath, localhostPort, https, thisTab, hotReload, watchJSON);

actionForm(formState);
await sendMessageToContent({ action: messageAction, fileSource, injectionDelay, hotReload, watchJSON });
}
chrome.browserAction.setBadgeBackgroundColor({ color: [68, 189, 169, 100] });
chrome.browserAction.setBadgeText({ text: "ON" });

const params = await initializeContentMessageAction({ action: messageAction, fileSource, injectionDelay, hotReload, watchJSON });

handleParamsForGraphic(params);

} else if (!checkIsNotEmptyUrl()) {
setDOMElementProperty('error', 'innerText', 'file path can\'t be empty');
setDOMElementProperty('injectFile', 'checked', false);
actionForm('enable');
}
} else {
setDOMElementProperty('injectFile', 'checked', false);
setDOMElementProperty('error', 'innerText', 'filesystem-server not connected');
chrome.browserAction.setBadgeBackgroundColor({ color: [255, 70, 0, 100] });
chrome.browserAction.setBadgeText({ text: "OFF" });
// chrome.browserAction.setBadgeBackgroundColor({ color: [255, 70, 0, 100] });
// chrome.browserAction.setBadgeText({ text: "OFF" });
}

};

const initializeContentMessageAction = async (args) => {

const response = await sendMessageToContent(args);

const { isInjectorActive, fileSource } = handleResponseFromContent(response);

const fssConnected = await testConnection();

const areWatchersConsistent = await testWatchers();

return { fssConnected, isInjectorActive, areWatchersConsistent, };

};

const handleResponseFromContent = (res) => {
const isInjectorActive = res && res.isInjectorActive ? res.isInjectorActive : 'false';
const fileSource = res && res.fileSource ? res.fileSource : null;
return { isInjectorActive, fileSource };
};


const handleParamsForGraphic = (params) => {
const {
fssConnected,
isInjectorActive,
areWatchersConsistent,
} = params;

if (isInjectorActive === 'true') {
setDOMElementProperty('injectorBadge', 'backgroundColor', '#1beabd');
setDOMElementProperty('injectorText', 'innerText', 'INJECTION ACTIVE');
} else {
setDOMElementProperty('injectorBadge', 'backgroundColor', '#FF4600');
setDOMElementProperty('injectorText', 'innerText', 'INACTIVE');
// chrome.browserAction.setBadgeBackgroundColor({ color: [255, 70, 0, 100] });
// chrome.browserAction.setBadgeText({ text: "OFF" });
}

if (fssConnected /*&& areWatchersConsistent*/ && isInjectorActive === 'true') {
// chrome.browserAction.setBadgeBackgroundColor({ color: [68, 189, 169, 100] });
// chrome.browserAction.setBadgeText({ text: "ON" });
// actionForm('disable');
} else {
// chrome.browserAction.setBadgeBackgroundColor({ color: [255, 70, 0, 100] });
// chrome.browserAction.setBadgeText({ text: "OFF" });
}

};


const setupFormAction = (params) => {
const {
areWatchersConsistent,
fssConnected,
isInjectorActive,
} = params;
if(fssConnected && isInjectorActive === 'true'){
actionForm('disable');
setDOMElementProperty('injectFile', 'checked', true);
}

}

0 comments on commit 70324c7

Please sign in to comment.