Embed options in manager
This commit is contained in:
narcolepticinsomniac
parent
2ea5290ea0
commit
b7e6e371e5
|
|
@ -398,11 +398,7 @@
|
|||
"message": "Управление",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Прозорец за настройките",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Настройки",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -749,4 +745,4 @@
|
|||
"message": "този адрес",
|
||||
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -723,11 +723,7 @@
|
|||
"message": "Spravovat",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Možnosti rozhraní",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Možnosti",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1318,4 +1314,4 @@
|
|||
"message": "Nahrávání souboru…",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -897,11 +897,7 @@
|
|||
"message": "Verwalten",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Optionen",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Optionen",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1512,4 +1508,4 @@
|
|||
"message": "Lade Styles hoch...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -927,11 +927,7 @@
|
|||
"message": "Manage",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Options UI",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Options",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -897,11 +897,7 @@
|
|||
"message": "Administrar",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Interfaz de opciones",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Opciones",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1524,4 +1520,4 @@
|
|||
"message": "Subiendo el archivo....",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -815,11 +815,7 @@
|
|||
"message": "Halda",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Valikute liides",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Valikud",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1426,4 +1422,4 @@
|
|||
"message": "Faili üleslaadimine...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -913,11 +913,7 @@
|
|||
"message": "Gestion",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Paramètres d'interface graphique",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Paramètres",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1524,4 +1520,4 @@
|
|||
"message": "Envoi du fichier…",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -591,11 +591,7 @@
|
|||
"message": "ניהול",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "אפשרויות UI",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "אפשרויות",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -969,4 +965,4 @@
|
|||
"message": "הקישור הנוכחי",
|
||||
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -677,11 +677,7 @@
|
|||
"message": "Kezelés",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "A beállítások felülete",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Beállítások",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1252,4 +1248,4 @@
|
|||
"message": "ehhez az URL-hez",
|
||||
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -639,11 +639,7 @@
|
|||
"message": "Gestisci gli stili installati",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Opzioni UI",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Opzioni",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1066,4 +1062,4 @@
|
|||
"message": "questo URL",
|
||||
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -913,11 +913,7 @@
|
|||
"message": "管理",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "オプション UI",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "オプション",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1548,4 +1544,4 @@
|
|||
"message": "スタイルをアップロード中...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -901,11 +901,7 @@
|
|||
"message": "Beheren",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Opties",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Opties",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1532,4 +1528,4 @@
|
|||
"message": "Bestand uploaden...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -917,11 +917,7 @@
|
|||
"message": "Zarządzaj",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Opcje interfejsu",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Opcje",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1556,4 +1552,4 @@
|
|||
"message": "Wysyłanie stylów...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -241,11 +241,7 @@
|
|||
"message": "Nenhum estilo instalado para este site.",
|
||||
"description": "Text displayed when no styles are installed for the current site"
|
||||
},
|
||||
"openManage": {
|
||||
"message": "Gerenciar estilos instalados",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Opções",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -471,4 +467,4 @@
|
|||
"message": "Enviando arquivo...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -673,11 +673,7 @@
|
|||
"message": "Gerir",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "interface de Opções",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Opções",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1244,4 +1240,4 @@
|
|||
"message": "este URL",
|
||||
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -617,11 +617,7 @@
|
|||
"message": "Managerul",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "UI cu opțiuni",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Opțiuni",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1160,4 +1156,4 @@
|
|||
"message": "acest URL",
|
||||
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -921,11 +921,7 @@
|
|||
"message": "Менеджер",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Настройки",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Настройки",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1560,4 +1556,4 @@
|
|||
"message": "Загрузка файла...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -871,11 +871,7 @@
|
|||
"message": "Hantera installerade stilar",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "Alternativ UI",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "Alternativ",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1490,4 +1486,4 @@
|
|||
"message": "Skickar filen...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -917,11 +917,7 @@
|
|||
"message": "管理样式",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "设置用户界面",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "设置用户界面",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1556,4 +1552,4 @@
|
|||
"message": "正在上传文件...",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -917,11 +917,7 @@
|
|||
"message": "管理已安裝樣式",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
"message": "選項介面",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"openOptions": {
|
||||
"message": "選項",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
|
|
@ -1556,4 +1552,4 @@
|
|||
"message": "正在上傳檔案……",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,6 +177,9 @@ browserCommands = {
|
|||
openManage() {
|
||||
openURL({url: 'manage.html'});
|
||||
},
|
||||
openOptions() {
|
||||
openURL({url: 'manage.html?#stylus-options'});
|
||||
},
|
||||
styleDisableAll(info) {
|
||||
prefs.set('disableAll', info ? info.checked : !prefs.get('disableAll'));
|
||||
},
|
||||
|
|
@ -197,6 +200,10 @@ contextMenus = {
|
|||
title: 'openStylesManager',
|
||||
click: browserCommands.openManage,
|
||||
},
|
||||
'open-options': {
|
||||
title: 'openOptions',
|
||||
click: browserCommands.openOptions,
|
||||
},
|
||||
'editor.contextDelete': {
|
||||
presentIf: () => !FIREFOX && prefs.get('editor.contextDelete'),
|
||||
title: 'editDeleteText',
|
||||
|
|
|
|||
|
|
@ -270,6 +270,9 @@ const APPLY = (() => {
|
|||
}
|
||||
|
||||
function fetchParentDomain() {
|
||||
if (/-extension/.test(location.protocol)) {
|
||||
parentDomain = 'stylus';
|
||||
}
|
||||
if (parentDomain) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ if (!CHROME && !chrome.browserAction.openPopup) {
|
|||
const URLS = {
|
||||
ownOrigin: chrome.runtime.getURL(''),
|
||||
|
||||
// FIXME delete?
|
||||
optionsUI: [
|
||||
chrome.runtime.getURL('options.html'),
|
||||
'chrome://extensions/?options=' + chrome.runtime.id,
|
||||
|
|
@ -222,6 +223,9 @@ function openURL({
|
|||
url = url.includes('://') ? url : chrome.runtime.getURL(url);
|
||||
// [some] chromium forks don't handle their fake branded protocols
|
||||
url = url.replace(/^(opera|vivaldi)/, 'chrome');
|
||||
// ignore filtered manager URLs with params
|
||||
const manageMatch = /manage\.html(\?#stylus-options)?$/.test(url);
|
||||
const editMatch = /edit\.html/.test(url);
|
||||
// FF doesn't handle moz-extension:// URLs (bug)
|
||||
// FF decodes %2F in encoded parameters (bug)
|
||||
// API doesn't handle the hash-fragment part
|
||||
|
|
@ -233,12 +237,42 @@ function openURL({
|
|||
url.replace(/%2F.*/, '*').replace(/#.*/, '') :
|
||||
url.replace(/#.*/, '');
|
||||
|
||||
return queryTabs({url: urlQuery, currentWindow}).then(maybeSwitch);
|
||||
return manageMatch || editMatch ? queryTabs().then(maybeSwitch) :
|
||||
queryTabs({url: urlQuery, currentWindow}).then(maybeSwitch);
|
||||
|
||||
function maybeSwitch(tabs = []) {
|
||||
const urlWithSlash = url + '/';
|
||||
const urlFF = FIREFOX && url.replace(/%2F/g, '/');
|
||||
const tab = tabs.find(({url: u}) => u === url || u === urlFF || u === urlWithSlash);
|
||||
const urlOptions = manageMatch ? URLS.ownOrigin + 'manage.html?#stylus-options' : null;
|
||||
const urlManage = manageMatch ? URLS.ownOrigin + 'manage.html' : null;
|
||||
let tab = tabs.find(({url: u}) => u === url || u === urlFF || u === urlWithSlash || u === urlOptions || u === urlManage);
|
||||
if (!tab && prefs.get('openEditInWindow') && chrome.windows && editMatch) {
|
||||
chrome.windows.create(
|
||||
Object.assign({
|
||||
url: url
|
||||
}, prefs.get('windowPosition', {}))
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (manageMatch) {
|
||||
if (tab) {
|
||||
const toggleOptions = url === urlOptions ? 'options-open' : 'options-close';
|
||||
chrome.tabs.sendMessage(tab.id, {
|
||||
'name': 'options',
|
||||
'data': toggleOptions
|
||||
});
|
||||
}
|
||||
getActiveTab()
|
||||
.then(currentTab => {
|
||||
const closePopup = tab && FIREFOX && currentTab.windowId !== tab.windowId ? false : true;
|
||||
if (closePopup) {
|
||||
chrome.runtime.sendMessage({
|
||||
'name': 'popup',
|
||||
'data': 'close-popup'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!tab) {
|
||||
return getActiveTab().then(maybeReplace);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -358,7 +358,7 @@
|
|||
</div>
|
||||
|
||||
<div id="options-buttons">
|
||||
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
|
||||
<button id="manage-options-button" i18n-text="openOptions"></button>
|
||||
<button id="manage-shortcuts-button" class="chromium-only"
|
||||
i18n-text="shortcuts"
|
||||
i18n-title="shortcutsNote"></button>
|
||||
|
|
|
|||
|
|
@ -1109,6 +1109,22 @@ input[id^="manage.newUI"] {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#stylus-embedded-options {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border: 0;
|
||||
z-index: 2147483647 !important;
|
||||
background-color: hsla(0, 0%, 0%, .45);
|
||||
animation: fadein .25s ease-in-out;
|
||||
}
|
||||
|
||||
#stylus-embedded-options.fadeout {
|
||||
animation: fadeout .25s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -58,6 +58,10 @@ Promise.all([
|
|||
msg.onExtension(onRuntimeMessage);
|
||||
|
||||
function onRuntimeMessage(msg) {
|
||||
if (msg === 'options-open' || msg === 'options-close') {
|
||||
toggleOptions(msg);
|
||||
return;
|
||||
}
|
||||
switch (msg.method) {
|
||||
case 'styleUpdated':
|
||||
case 'styleAdded':
|
||||
|
|
@ -80,7 +84,7 @@ function onRuntimeMessage(msg) {
|
|||
function initGlobalEvents() {
|
||||
installed = $('#installed');
|
||||
installed.onclick = handleEvent.entryClicked;
|
||||
$('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
|
||||
$('#manage-options-button').onclick = () => history.replaceState('', document.title, location.href + '?#stylus-options');
|
||||
{
|
||||
const btn = $('#manage-shortcuts-button');
|
||||
btn.onclick = btn.onclick || (() => openURL({url: URLS.configureCommands}));
|
||||
|
|
@ -700,3 +704,53 @@ function highlightEditedStyle() {
|
|||
requestAnimationFrame(() => scrollElementIntoView(entry));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function embedOptions() {
|
||||
const options = $('#stylus-embedded-options');
|
||||
if (!options) {
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.id = 'stylus-embedded-options';
|
||||
iframe.src = '/options.html';
|
||||
document.documentElement.appendChild(iframe);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function removeOptions() {
|
||||
const options = $('#stylus-embedded-options');
|
||||
if (options) options.remove()
|
||||
}
|
||||
|
||||
// wait for possible filter params to be removed
|
||||
onDOMready().then(() => {
|
||||
chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
|
||||
if (changeInfo.url) {
|
||||
if (location.hash === '#stylus-options') {
|
||||
embedOptions();
|
||||
} else {
|
||||
const options = $('#stylus-embedded-options');
|
||||
if (options) {
|
||||
options.contentWindow.document.body.classList.add('scaleout');
|
||||
options.classList.add('fadeout');
|
||||
animateElement(options, {
|
||||
className: 'fadeout',
|
||||
onComplete: removeOptions,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function toggleOptions(msg) {
|
||||
if (msg === 'options-open' && location.hash !== '#stylus-options') {
|
||||
history.replaceState('', document.title, location.href + '?#stylus-options');
|
||||
} else if (msg === 'options-close' && location.hash === '#stylus-options') {
|
||||
history.replaceState('', document.title, location.origin + location.pathname);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (location.hash === '#stylus-options') embedOptions();
|
||||
|
|
|
|||
|
|
@ -125,10 +125,6 @@
|
|||
"default_popup": "popup.html"
|
||||
},
|
||||
"default_locale": "en",
|
||||
"options_ui": {
|
||||
"page": "options.html",
|
||||
"chrome_style": false
|
||||
},
|
||||
"applications": {
|
||||
"gecko": {
|
||||
"id": "{7a7a4a92-a2a0-41d1-9fd7-1e92480d612d}",
|
||||
|
|
|
|||
25
options.html
25
options.html
|
|
@ -33,6 +33,13 @@
|
|||
</head>
|
||||
|
||||
<body id="stylus-options">
|
||||
|
||||
<div id="options-header">
|
||||
<div id="options-title">
|
||||
<div id="options-close-icon"><svg viewBox="0 0 20 20" class="svg-icon"><path d="M11.69,10l4.55,4.55-1.69,1.69L10,11.69,5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z"></path></svg></div>
|
||||
Stylus</div>
|
||||
</div>
|
||||
|
||||
<div id="options">
|
||||
|
||||
<div class="block">
|
||||
|
|
@ -203,15 +210,15 @@
|
|||
</div>
|
||||
|
||||
<div class="block" id="actions">
|
||||
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
|
||||
<button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
|
||||
<div data-cmd="check-updates">
|
||||
<button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">
|
||||
<span id="update-progress"></span>
|
||||
</button>
|
||||
<div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
|
||||
</div>
|
||||
<button data-cmd="open-keyboard" class="chromium-only" i18n-text="shortcuts" i18n-title="shortcutsNote"></button>
|
||||
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
|
||||
<button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
|
||||
<div data-cmd="check-updates">
|
||||
<button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">
|
||||
<span id="update-progress"></span>
|
||||
</button>
|
||||
<div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
|
||||
</div>
|
||||
<button data-cmd="open-keyboard" class="chromium-only" i18n-text="shortcuts" i18n-title="shortcutsNote"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +1,80 @@
|
|||
html.opera {
|
||||
html {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html.opera body {
|
||||
width: auto;
|
||||
height: 100vh;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
background: none;
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
min-width: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
max-width: 800px;
|
||||
width: max-content;
|
||||
overflow-x: hidden;
|
||||
max-height: calc(100vh - 32px);
|
||||
border: 1px solid #999;
|
||||
box-shadow: 0px 5px 15px 3px hsla(0, 0%, 0%, .35);
|
||||
animation: scalein .25s ease-in-out;
|
||||
}
|
||||
|
||||
@supports (-moz-appearance:none) {
|
||||
body {
|
||||
--addons-page-left-padding: 6px;
|
||||
/* compensate 'html.firefox .block' padding-left */
|
||||
width: calc(100% - var(--addons-page-left-padding));
|
||||
/* match the default FF theme */
|
||||
background-color: #f9f9fa;
|
||||
}
|
||||
html.firefox .block {
|
||||
padding-left: var(--addons-page-left-padding);
|
||||
}
|
||||
body.scaleout {
|
||||
animation: scaleout .25s ease-in-out;
|
||||
}
|
||||
|
||||
#options {
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#options-close-icon .svg-icon {
|
||||
fill: #666;
|
||||
transition: fill .5s;
|
||||
}
|
||||
|
||||
#options-close-icon:hover .svg-icon {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
#options-close-icon {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
#options-close-icon .svg-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#options-title {
|
||||
font-weight: bold;
|
||||
background-color: rgb(145, 208, 198);
|
||||
padding: .75rem 26px .75rem calc(30% + 4px);
|
||||
font-size: 22px;
|
||||
letter-spacing: .5px;
|
||||
position: relative;
|
||||
min-height: 42px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
#options-title::before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding: 0 32px 32px 0;
|
||||
background: url(/images/icon/32.png);
|
||||
position: absolute;
|
||||
left: 26px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.firefox .chromium-only,
|
||||
|
|
@ -152,23 +196,20 @@ input[type="color"] {
|
|||
#actions {
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
padding: 1em;
|
||||
flex-wrap: wrap;
|
||||
padding: .5em 1em 1em;
|
||||
white-space: nowrap;
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.firefox #actions,
|
||||
.opera #actions {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#actions button {
|
||||
width: auto;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
#actions button:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
[data-cmd="check-updates"] button {
|
||||
|
|
@ -298,13 +339,16 @@ html:not(.firefox):not(.opera) #updates {
|
|||
fill: #000;
|
||||
}
|
||||
|
||||
#message-box.note > div {
|
||||
max-width: calc(100vw - 6rem);
|
||||
#message-box.note {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.opera #message-box.note,
|
||||
.firefox #message-box.note {
|
||||
background-color: transparent;
|
||||
#message-box.note > div {
|
||||
max-width: calc(100% - 5rem);
|
||||
top: unset;
|
||||
right: unset;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes fadeinout {
|
||||
|
|
@ -336,6 +380,21 @@ html:not(.firefox):not(.opera) #updates {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sync-options .actions {
|
||||
padding-top: 6px;
|
||||
.sync-options .actions button {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
@keyframes scalein {
|
||||
0% {
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleout {
|
||||
100% {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@ if (FIREFOX && 'update' in (chrome.commands || {})) {
|
|||
}
|
||||
|
||||
// actions
|
||||
$('#options-close-icon').onclick = () => {
|
||||
window.top.history.replaceState('', window.top.document.title, window.top.location.origin + window.top.location.pathname);
|
||||
}
|
||||
|
||||
document.onclick = e => {
|
||||
const target = e.target.closest('[data-cmd]');
|
||||
if (!target) {
|
||||
|
|
@ -292,3 +296,14 @@ function customizeHotkeys() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.onkeydown = event => {
|
||||
if (event.keyCode === 27) {
|
||||
window.top.history.replaceState('', window.top.document.title, window.top.location.origin + window.top.location.pathname);
|
||||
}
|
||||
}
|
||||
|
||||
// FF is slow to allow focus, particularly when launched via manager button
|
||||
setTimeout(() => {
|
||||
window.focus();
|
||||
}, 100);
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@
|
|||
<div id="popup-options">
|
||||
<button id="popup-manage-button" i18n-text="openManage"
|
||||
data-href="manage.html" i18n-title="popupManageTooltip"></button>
|
||||
<button id="popup-options-button" i18n-text="openOptionsPopup"></button>
|
||||
<button id="popup-options-button" i18n-text="openOptions"></button>
|
||||
<button id="popup-wiki-button"
|
||||
i18n-text="linkStylusWiki"
|
||||
i18n-title="linkGetHelp"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
let installed;
|
||||
let tabURL;
|
||||
let unsupportedURL;
|
||||
const handleEvent = {};
|
||||
|
||||
const ENTRY_ID_PREFIX_RAW = 'style-';
|
||||
|
|
@ -28,6 +29,8 @@ getActiveTab()
|
|||
.then(([results]) => {
|
||||
if (!results) {
|
||||
// unsupported URL;
|
||||
unsupportedURL = true;
|
||||
$('#popup-manage-button').removeAttribute('title');
|
||||
return;
|
||||
}
|
||||
showStyles(results.map(r => Object.assign(r.data, r)));
|
||||
|
|
@ -48,6 +51,10 @@ if (CHROME_HAS_BORDER_BUG) {
|
|||
}
|
||||
|
||||
function onRuntimeMessage(msg) {
|
||||
if (msg === 'close-popup') {
|
||||
window.close();
|
||||
return;
|
||||
}
|
||||
switch (msg.method) {
|
||||
case 'styleAdded':
|
||||
case 'styleUpdated':
|
||||
|
|
@ -99,7 +106,7 @@ function initPopup() {
|
|||
});
|
||||
|
||||
$('#popup-options-button').onclick = () => {
|
||||
chrome.runtime.openOptionsPage();
|
||||
API.openURL({url: 'manage.html?#stylus-options'});
|
||||
window.close();
|
||||
};
|
||||
|
||||
|
|
@ -142,10 +149,12 @@ function initPopup() {
|
|||
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
|
||||
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
|
||||
const renderToken = s => s[0] === '<'
|
||||
? $create('strong', {
|
||||
? $create('a', {
|
||||
textContent: s.slice(1, -1),
|
||||
onclick: handleEvent.copyContent,
|
||||
tabIndex: -1,
|
||||
href: '#',
|
||||
className: 'copy',
|
||||
tabIndex: 0,
|
||||
title: t('copy'),
|
||||
})
|
||||
: s;
|
||||
|
|
@ -527,17 +536,9 @@ Object.assign(handleEvent, {
|
|||
},
|
||||
|
||||
openLink(event) {
|
||||
if (!chrome.windows || !prefs.get('openEditInWindow', false)) {
|
||||
handleEvent.openURLandHide.call(this, event);
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
chrome.windows.create(
|
||||
Object.assign({
|
||||
url: this.href
|
||||
}, prefs.get('windowPosition', {}))
|
||||
);
|
||||
close();
|
||||
API.openURL({url: this.href});
|
||||
if (!(FIREFOX && prefs.get('openEditInWindow'))) window.close();
|
||||
},
|
||||
|
||||
maybeEdit(event) {
|
||||
|
|
@ -576,10 +577,18 @@ Object.assign(handleEvent, {
|
|||
.then(() => msg.sendTab(tab.id, message));
|
||||
}
|
||||
})
|
||||
.then(window.close);
|
||||
.then(() => {
|
||||
// Chromium needs help closing popup when opening new windows, not same window tabs
|
||||
// FF needs help closing popup when opening same window tabs, not new windows
|
||||
// edit URLs are ignored by pref - manager URls are passed to openURL() to check if tab exists
|
||||
// which sends a message to close popup after determining it's not a different FF window
|
||||
// because closing popup interferes with activating different windows in FF
|
||||
if (this.dataset.href !== 'manage.html') window.close();
|
||||
});
|
||||
},
|
||||
|
||||
openManager(event) {
|
||||
if (event.button === 2 && unsupportedURL) return;
|
||||
event.preventDefault();
|
||||
if (!this.eventHandled) {
|
||||
this.eventHandled = true;
|
||||
|
|
@ -590,7 +599,8 @@ Object.assign(handleEvent, {
|
|||
},
|
||||
|
||||
copyContent(event) {
|
||||
const target = event.target;
|
||||
event.preventDefault();
|
||||
const target = document.activeElement;
|
||||
const message = $('.copy-message');
|
||||
navigator.clipboard.writeText(target.textContent);
|
||||
target.classList.add('copied');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user