rework and move newUI+theme to options.html (#1050)

* rework and move newUI+theme to options.html

* rephrase/clarify the find styles label

* switch to USO-archive

* search for 'Stylus' keyword to filter out Stylish crud

* use archive's default search order
This commit is contained in:
tophf 2020-10-02 18:10:52 +03:00 committed by GitHub
parent 3f6c85637c
commit c416fa7ca0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 106 additions and 248 deletions

View File

@ -217,10 +217,6 @@
}
}
},
"editorStylesButton": {
"message": "Стилове за редактора",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Включване",
"description": "Label for the button to enable a style"

View File

@ -305,10 +305,6 @@
}
}
},
"editorStylesButton": {
"message": "Najít styly pro editor",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Povolit",
"description": "Label for the button to enable a style"

View File

@ -309,10 +309,6 @@
}
}
},
"editorStylesButton": {
"message": "Editor Styles finden",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Aktivieren",
"description": "Label for the button to enable a style"

View File

@ -319,10 +319,6 @@
},
"description": "Title of the page for editing styles"
},
"editorStylesButton": {
"message": "Find editor styles",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Enable",
"description": "Label for the button to enable a style"
@ -1012,6 +1008,9 @@
"optionsResetButton": {
"message": "Reset options"
},
"optionsStylusThemes": {
"message": "Find a Stylus UI theme"
},
"optionsSubheading": {
"message": "More Options",
"description": "Subheading for options section on manage page."

View File

@ -313,10 +313,6 @@
}
}
},
"editorStylesButton": {
"message": "Buscar estilos del editor",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Activar",
"description": "Label for the button to enable a style"

View File

@ -313,10 +313,6 @@
}
}
},
"editorStylesButton": {
"message": "Leia redaktori stiile",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Luba",
"description": "Label for the button to enable a style"

View File

@ -321,10 +321,6 @@
}
}
},
"editorStylesButton": {
"message": "Trouver des styles pour léditeur",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Activer",
"description": "Label for the button to enable a style"

View File

@ -321,10 +321,6 @@
}
}
},
"editorStylesButton": {
"message": "מצא עיצובים לעורך",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "אפשר",
"description": "Label for the button to enable a style"

View File

@ -309,10 +309,6 @@
}
}
},
"editorStylesButton": {
"message": "A szerkesztő stílusainak keresése",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Engedélyezés",
"description": "Label for the button to enable a style"

View File

@ -273,10 +273,6 @@
}
}
},
"editorStylesButton": {
"message": "Cerca stili editor",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Attiva",
"description": "Label for the button to enable a style"

View File

@ -313,10 +313,6 @@
}
}
},
"editorStylesButton": {
"message": "エディタのスタイルを見つける",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "有効化",
"description": "Label for the button to enable a style"

View File

@ -317,10 +317,6 @@
}
}
},
"editorStylesButton": {
"message": "편집기 스타일 찾기",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "활성화",
"description": "Label for the button to enable a style"

View File

@ -317,10 +317,6 @@
}
}
},
"editorStylesButton": {
"message": "Editorstijlen zoeken",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Inschakelen",
"description": "Label for the button to enable a style"

View File

@ -321,10 +321,6 @@
}
}
},
"editorStylesButton": {
"message": "Znajdź style edytora",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Włącz",
"description": "Label for the button to enable a style"

View File

@ -301,10 +301,6 @@
}
}
},
"editorStylesButton": {
"message": "Encontrar estilos para o editor",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Ativar",
"description": "Label for the button to enable a style"

View File

@ -269,10 +269,6 @@
}
}
},
"editorStylesButton": {
"message": "Găsiți teme pentru editor",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Activați",
"description": "Label for the button to enable a style"

View File

@ -321,10 +321,6 @@
}
}
},
"editorStylesButton": {
"message": "Сменить тему Стилус",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Включить",
"description": "Label for the button to enable a style"

View File

@ -309,10 +309,6 @@
}
}
},
"editorStylesButton": {
"message": "Hitta redaktörsstilar",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Aktivera",
"description": "Label for the button to enable a style"

View File

@ -309,10 +309,6 @@
}
}
},
"editorStylesButton": {
"message": "Editör stili bul",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "Etkinleştir",
"description": "Label for the button to enable a style"

View File

@ -321,10 +321,6 @@
}
}
},
"editorStylesButton": {
"message": "查找编辑器样式",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "启用",
"description": "Label for the button to enable a style"

View File

@ -321,10 +321,6 @@
}
}
},
"editorStylesButton": {
"message": "找到編輯器樣式",
"description": "Find styles for the editor"
},
"enableStyleLabel": {
"message": "啟用",
"description": "Label for the button to enable a style"

View File

@ -28,9 +28,9 @@ self.prefs = self.INJECTED === 1 ? self.prefs : (() => {
'manage.onlyLocal.invert': false, // display only externally installed styles
'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
// UI element state: expanded/collapsed
'manage.actions.expanded': true,
'manage.backup.expanded': true,
'manage.filters.expanded': true,
'manage.options.expanded': true,
// the new compact layout doesn't look good on Android yet
'manage.newUI': !navigator.appVersion.includes('Android'),
'manage.newUI.favicons': false, // show favicons for the sites in applies-to

View File

@ -278,8 +278,11 @@
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</div>
</div>
<div id="style-actions">
<div class="settings-column">
<details id="actions" data-pref="manage.actions.expanded">
<summary><h2 i18n-text="optionsActions"></h2></summary>
<div id="update-check">
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
<a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
@ -313,57 +316,12 @@
</a>
</label>
</div>
</div>
<button id="manage-options-button" i18n-text="openOptions"></button>
</details>
</div>
<div class="settings-column">
<details id="options" data-pref="manage.options.expanded">
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
<label>
<input id="manage.newUI" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="manageNewUI"></span>
</label>
<div id="newUIoptions">
<div>
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
<input id="manage.newUI.favicons" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
<svg class="svg-icon select-arrow">
<title i18n-text="optionsSubheading"></title>
<use xlink:href="#svg-icon-select-arrow"/>
</svg>
</a>
</label>
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
<div>
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
<input id="manage.newUI.faviconsGray" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
</div>
</div>
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
</div>
<div id="options-buttons">
<button id="manage-options-button" i18n-text="openOptions"></button>
<button id="manage-shortcuts-button" class="chromium-only"
i18n-text="shortcuts"
i18n-title="shortcutsNote"></button>
<a id="find-editor-styles"
href="https://userstyles.org/styles/browse/chrome-extension"
i18n-title="editorStylesButton"
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
</div>
</details>
<details id="backup" data-pref="manage.backup.expanded">
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
<span id="backup-message" i18n-text="backupMessage"></span>

View File

@ -285,14 +285,6 @@ a:hover {
margin-top: .5rem;
}
#options-buttons {
display: flex;
flex-wrap: wrap;
padding-top: .1rem;
}
#options-buttons > a,
#options-buttons > button,
#backup-buttons button {
margin: 0 .2rem .5rem 0;
}
@ -695,65 +687,6 @@ a:hover {
filter: grayscale(0);
}
#newUIoptions {
display: none;
}
.newUI #newUIoptions {
display: initial;
}
#newUIoptions > * {
display: flex;
align-items: center;
margin-bottom: auto;
flex-wrap: wrap;
position: relative;
}
#newUIoptions input[type="number"] {
width: 3em;
margin-right: .5em;
}
#newUIoptions [data-toggle-on-click="#faviconsHelp"] {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
}
#newUIoptions [data-toggle-on-click] > svg {
position: static;
}
#newUIoptions [data-toggle-on-click]:not([open]) > svg {
/* note: without ">" FF52 also transforms the nested svg inside <use> */
transform: rotate(-90deg);
}
html:not(.newUI) #newUIoptions + * {
margin-top: .5em;
}
input[id^="manage.newUI"] {
margin-left: 0;
}
#faviconsHelp {
overflow-y: auto;
font-size: 90%;
padding: 1ex 0 2ex 16px;
}
#faviconsHelp div {
display: flex;
align-items: center;
margin-top: 1ex;
}
/* Default, no update buttons */
.updater-icons .update,
.updater-icons .check-update {
@ -1078,6 +1011,10 @@ input[id^="manage.newUI"] {
animation: fadeout .25s ease-in-out;
}
.settings-column {
margin-top: 1rem;
}
@keyframes fadein {
from {
opacity: 0;

View File

@ -5,7 +5,7 @@ global messageBox getStyleWithNoCode
objectDiff
configDialog
sorter msg prefs API onDOMready $ $$ $create template setupLivePrefs
URLS enforceInputRange t tWordBreak formatDate
t tWordBreak formatDate
getOwnTab getActiveTab openURL animateElement sessionStorageHash debounce
scrollElementIntoView CHROME VIVALDI FIREFOX router
bulkChangeTime:true bulkChangeQueue
@ -19,15 +19,24 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
const BULK_THROTTLE_MS = 100;
// define pref-mapped ids separately
const newUI = {
enabled: prefs.get('manage.newUI'),
favicons: prefs.get('manage.newUI.favicons'),
faviconsGray: prefs.get('manage.newUI.faviconsGray'),
targets: prefs.get('manage.newUI.targets'),
renderClass() {
document.documentElement.classList.toggle('newUI', newUI.enabled);
},
enabled: null, // the global option should come first
favicons: null,
faviconsGray: null,
targets: null,
};
// ...add utility functions
Object.assign(newUI, {
ids: Object.keys(newUI),
prefGroup: 'manage.newUI',
prefKeyForId: id => id === 'enabled' ? newUI.prefGroup : `${newUI.prefGroup}.${id}`,
renderClass: () => document.documentElement.classList.toggle('newUI', newUI.enabled),
});
// ...read the actual values
for (const id of newUI.ids) {
newUI[id] = prefs.get(newUI.prefKeyForId(id));
}
newUI.renderClass();
const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
@ -88,10 +97,6 @@ function initGlobalEvents() {
installed.onclick = handleEvent.entryClicked;
$('#manage-options-button').onclick = () => router.updateHash('#stylus-options');
$('#sync-styles').onclick = () => router.updateHash('#stylus-options');
{
const btn = $('#manage-shortcuts-button');
btn.onclick = btn.onclick || (() => openURL({url: URLS.configureCommands}));
}
$$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
// show date installed & last update on hover
installed.addEventListener('mouseover', handleEvent.lazyAddEntryTitle);
@ -113,19 +118,11 @@ function initGlobalEvents() {
};
});
// triggered automatically by setupLivePrefs() below
enforceInputRange($('#manage.newUI.targets'));
// N.B. triggers existing onchange listeners
setupLivePrefs();
sorter.init();
prefs.subscribe([
'manage.newUI',
'manage.newUI.favicons',
'manage.newUI.faviconsGray',
'manage.newUI.targets',
], () => switchUI());
prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI());
switchUI({styleOnly: true});
@ -488,7 +485,7 @@ Object.assign(handleEvent, {
const y = Math.max(0, top);
const first = document.elementFromPoint(x, y);
const lastOffset = first.offsetTop + window.innerHeight;
const numTargets = prefs.get('manage.newUI.targets');
const numTargets = newUI.targets;
let entry = first && first.closest('.entry') || installed.children[0];
while (entry && entry.offsetTop <= lastOffset) {
favicons.push(...$$('img', entry).slice(0, numTargets).filter(img => img.dataset.src));
@ -618,10 +615,8 @@ function switchUI({styleOnly} = {}) {
const current = {};
const changed = {};
let someChanged = false;
// ensure the global option is processed first
for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) {
const id = el.id.replace(/^manage\.newUI\.?/, '') || 'enabled';
const value = el.type === 'checkbox' ? el.checked : Number(el.value);
for (const id of newUI.ids) {
const value = prefs.get(newUI.prefKeyForId(id));
const valueChanged = value !== newUI[id] && (id === 'enabled' || current.enabled);
current[id] = value;
changed[id] = valueChanged;

View File

@ -41,6 +41,16 @@
<div id="options">
<div class="block">
<h1 i18n-text="cm_theme"></h1>
<div class="items">
<label>
<a i18n-text="optionsStylusThemes" target="_blank"
href="https://33kk.github.io/uso-archive/?category=chrome-extension&search=Stylus"></a>
</label>
</div>
</div>
<div class="block">
<h1 i18n-text="optionsCustomizeIcon"></h1>
<div class="items">
@ -125,6 +135,45 @@
</div>
</div>
<div class="block">
<h1 i18n-text="openManage"></h1>
<div class="items">
<label>
<span i18n-text="manageNewUI"></span>
<span class="onoffswitch">
<input type="checkbox" id="manage.newUI" class="slider">
<span></span>
</span>
</label>
<label>
<span i18n-text="manageFavicons">
<a data-cmd="note"
i18n-title="manageFaviconsHelp"
href="#"
class="svg-inline-wrapper"
tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</span>
<span class="onoffswitch">
<input type="checkbox" id="manage.newUI.favicons" class="slider">
<span></span>
</span>
</label>
<label>
<span i18n-text="manageFaviconsGray"></span>
<span class="onoffswitch">
<input type="checkbox" id="manage.newUI.faviconsGray" class="slider">
<span></span>
</span>
</label>
<label>
<span i18n-text="manageMaxTargets"></span>
<input id="manage.newUI.targets" type="number" min="1" max="99">
</label>
</div>
</div>
<div class="block" id="updates">
<h1 i18n-text="optionsCustomizeUpdate"></h1>
<div class="items">

View File

@ -6,7 +6,7 @@
setupLivePrefs();
setupRadioButtons();
enforceInputRange($('#popupWidth'));
$$('input[min], input[max]').forEach(enforceInputRange);
setTimeout(splitLongTooltips);
if (CHROME_HAS_BORDER_BUG) {