ruffle/web/packages/extension/js/popup.js

137 lines
3.3 KiB
JavaScript

import * as utils from "./utils";
import { bindBooleanOptions } from "./common";
let activeTab;
let savedOptions;
let tabOptions;
let statusIndicator;
let statusText;
let reloadButton;
// prettier-ignore
const STATUS_COLORS = {
"status_init": "gray",
"status_no_tab": "red",
"status_tabs_error": "red",
"status_message_init": "gray",
"status_result_protected": "gray",
"status_result_error": "red",
"status_result_running": "green",
"status_result_optout": "gray",
"status_result_disabled": "gray",
};
async function queryTabStatus(listener) {
listener("status_init");
let tabs;
try {
tabs = await utils.tabs.query({
currentWindow: true,
active: true,
});
if (tabs.length < 1) {
listener("status_no_tabs");
return;
}
if (tabs.length > 1) {
throw new Error(
`Got ${tabs.length} tabs in response to active tab query.`
);
}
} catch (e) {
listener("status_tabs_error");
return;
}
activeTab = tabs[0];
listener("status_message_init");
let response;
try {
response = await utils.tabs.sendMessage(activeTab.id, {});
} catch (e) {
listener("status_result_protected");
reloadButton.disabled = true;
return;
}
if (!response) {
listener("status_result_error");
return;
}
tabOptions = response.tabSettings;
if (response.loaded) {
listener("status_result_running");
} else if (tabOptions.ruffleEnable) {
listener("status_result_optout");
} else {
listener("status_result_disabled");
}
optionsChanged();
}
function objectsEqual(x, y) {
for (const [key, value] of Object.entries(x)) {
if (y[key] !== value) {
return false;
}
}
for (const [key, value] of Object.entries(y)) {
if (x[key] !== value) {
return false;
}
}
return true;
}
function optionsChanged() {
if (!tabOptions) {
return;
}
const isDifferent = !objectsEqual(savedOptions, tabOptions);
reloadButton.disabled = !isDifferent;
}
function displayTabStatus() {
queryTabStatus((status) => {
statusIndicator.style.setProperty("--color", STATUS_COLORS[status]);
statusText.textContent = utils.i18n.getMessage(status);
});
}
window.addEventListener("DOMContentLoaded", () => {
bindBooleanOptions((options) => {
savedOptions = options;
optionsChanged();
});
statusIndicator = document.getElementById("status-indicator");
statusText = document.getElementById("status-text");
const optionsButton = document.getElementById("options-button");
optionsButton.textContent = utils.i18n.getMessage("open_settings_page");
optionsButton.addEventListener("click", () => utils.openOptionsPage());
reloadButton = document.getElementById("reload-button");
reloadButton.textContent = utils.i18n.getMessage("action_reload");
reloadButton.addEventListener("click", async () => {
await utils.tabs.reload(activeTab.id);
// TODO: wait for tab to load?
setTimeout(() => {
displayTabStatus();
}, 1000);
});
displayTabStatus();
});