From 9a2cab60dd690e0c7e5041c73e9b0383e8002b3e Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Tue, 28 Feb 2017 18:57:03 -0500 Subject: [PATCH] Options UI discoverability and other fixes #34 --- _locales/ar/messages.json | 10 +- _locales/cs/messages.json | 10 +- _locales/de/messages.json | 10 +- _locales/el/messages.json | 10 +- _locales/en/messages.json | 10 +- _locales/fi/messages.json | 10 +- _locales/fr/messages.json | 8 +- _locales/it/messages.json | 10 +- _locales/ja/messages.json | 8 +- _locales/nl/messages.json | 10 +- _locales/pt_BR/messages.json | 10 +- _locales/ru/messages.json | 10 +- _locales/sr/messages.json | 10 +- _locales/sv/messages.json | 10 +- _locales/sv_SE/messages.json | 5 +- _locales/te/messages.json | 10 +- _locales/tr/messages.json | 10 +- _locales/zh/messages.json | 8 +- _locales/zh_CN/messages.json | 10 +- _locales/zh_TW/messages.json | 8 +- manage.html | 468 +++++++++++++++++++---------------- openOptions.js | 10 +- popup.css | 8 +- popup.html | 109 ++++---- popup.js | 8 +- 25 files changed, 370 insertions(+), 420 deletions(-) diff --git a/_locales/ar/messages.json b/_locales/ar/messages.json index 3c4a8888..8b44cbbd 100644 --- a/_locales/ar/messages.json +++ b/_locales/ar/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "إدارة الأنماط المثبتة.", + "message": "إدارة الأنماط المثبتة", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "يمكنك تغيير نمط الويب باستخدام Stylus، وهي أداة لإدارة أنماط المستخدم. وتتيح Stylus لك بسهولة تثبيت المظاهر والأشكال الخارجية لكل من Google، وFacebook وYouTube وOrkut فضلاً عن الكثير جدًا من مواقع الويب الأخرى.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/cs/messages.json b/_locales/cs/messages.json index 1d8db532..f436db00 100644 --- a/_locales/cs/messages.json +++ b/_locales/cs/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Spravovat nainstalovné styly.", + "message": "Spravovat nainstalovné styly", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Přestylujte web pomocí Stylus, manažeru uživatelských stylů. Stylus vám umožní nainstalovat témata a skiny pro mnoho populárních webů.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/de/messages.json b/_locales/de/messages.json index a1c8d8e1..f656393a 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Installierte Styles verwalten.", + "message": "Installierte Styles verwalten", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Gestalten Sie das Web mit Stylus, einem Manager für Benutzer-Styles, um. Stylus lässt Sie ganz einfach Themes und Skins für viele beliebte Webseiten installieren.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/el/messages.json b/_locales/el/messages.json index ee7e6825..5efd10e5 100644 --- a/_locales/el/messages.json +++ b/_locales/el/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Διαχείριση εγκατεστημένων στυλ.", + "message": "Διαχείριση εγκατεστημένων στυλ", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Επαναπροσδιορίση του διαδίκτυου με το Stylus, έναν διαχειριστή στυλ. Το Stylus σας επιτρέπει να εγκαταστήσετε εύκολα themes και skins για πολλές δημοφιλείς ιστοσελίδες.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/en/messages.json b/_locales/en/messages.json index aeb6b5d0..340622a5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -156,6 +156,10 @@ "message": "Goto line (or line:col)", "description": "Go to line or line:column on Ctrl-G in style code editor" }, + "editorStylesButton": { + "message": "Find editor styles", + "description": "Find styles for the editor" + }, "editStyleHeading": { "message": "Edit Style", "description": "Title of the page for editing styles" @@ -262,7 +266,7 @@ "description": "Text displayed when no styles are installed for the current site" }, "openManage": { - "message": "Manage installed styles.", + "message": "Manage installed styles", "description": "Link to open the manage page." }, "openOptionsManage": { @@ -449,10 +453,10 @@ "description": "Text for link in toolbar pop-up to write a new style for the current URL" }, "bckpInstStyles": { - "message": "Export Styles" + "message": "Export styles" }, "retrieveBckp": { - "message": "Import Styles" + "message": "Import styles" }, "optionsBadgeNormal": { "message": "Badge background color" diff --git a/_locales/fi/messages.json b/_locales/fi/messages.json index 30b44be0..2fd9e969 100644 --- a/_locales/fi/messages.json +++ b/_locales/fi/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Hallitse asennettuja tyylejä.", + "message": "Hallitse asennettuja tyylejä", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Uudelleen stailaa netti Stylusillä, käyttäjän tyyli hallintapaneelilla. Stylus antaa sinun helposti asentaa teemoja ja skinejä palvelluille kuten Google, Facebook, YouTube, Orkut, ja monelle, monelle muulle sivustolle.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json index 99c88313..87f1811d 100644 --- a/_locales/fr/messages.json +++ b/_locales/fr/messages.json @@ -415,11 +415,5 @@ "description": { "message": "Changez l'apparence du Web grâce à Stylus, un outil de gestion des styles utilisateur. Stylus vous permet d'installer facilement des thèmes et des habillages pour Google, Facebook, YouTube, orkut et bien d'autres sites encore.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/it/messages.json b/_locales/it/messages.json index 109bbbcf..50d2c835 100644 --- a/_locales/it/messages.json +++ b/_locales/it/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Gestisci gli stili installati.", + "message": "Gestisci gli stili installati", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Modifica lo stile del Web con Stylus, un gestore di stili utente. Stylus consente di installare facilmente temi e skin per Google, Facebook, YouTube, Orkut e moltissimi altri siti.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json index 84a750b1..981b4df8 100644 --- a/_locales/ja/messages.json +++ b/_locales/ja/messages.json @@ -415,11 +415,5 @@ "description": { "message": "Stylus はユーザー スタイルを管理するツールで、ウェブのスタイルを変更することができます。Stylus を利用すると、Google、Facebook、YouTube、orkut など、さまざまなサイトに対応したテーマやスキンを簡単にインストールできます。", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json index 39e35d98..0905ceb2 100644 --- a/_locales/nl/messages.json +++ b/_locales/nl/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Geïnstalleerde stijlen beheren.", + "message": "Geïnstalleerde stijlen beheren", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Voorzie het web van een ander uiterlijk met Stylus, een gebruikersstijlbeheerder. Stylus stelt u in staat om eenvoudig thema's en stijlen te installeren voor vele populaire websites.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/pt_BR/messages.json b/_locales/pt_BR/messages.json index 087dda8f..53452a15 100644 --- a/_locales/pt_BR/messages.json +++ b/_locales/pt_BR/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Gerenciar estilos instalados.", + "message": "Gerenciar estilos instalados", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Mude o estilo da web com o Stylus, um gerenciador de estilos do usuário. O Stylus permite instalar facilmente temas e skins para Google, Facebook, YouTube, Orkut e muitos, muitos outros sites.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json index 8cb5125e..d5067a42 100644 --- a/_locales/ru/messages.json +++ b/_locales/ru/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Управление установленными стилями.", + "message": "Управление установленными стилями", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Настраивайте стили веб-сайтов с помощью менеджера стилей Stylus. Он позволяет легко установить темы и изменить внешний вид сайтов Google, Facebook, YouTube, Orkut и множества других веб-страниц.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/sr/messages.json b/_locales/sr/messages.json index 8fe8fa57..c9b3913e 100644 --- a/_locales/sr/messages.json +++ b/_locales/sr/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Управљај инсталираним стиловима.", + "message": "Управљај инсталираним стиловима", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Измените стил интернет мреже управљачем корисничких стилова. Stylus вам омогућава да лако инсталирате теме и скинове за многе популарне сајтове.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/sv/messages.json b/_locales/sv/messages.json index d6fe255d..97fbe9c6 100644 --- a/_locales/sv/messages.json +++ b/_locales/sv/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Hantera installerade stilar.", + "message": "Hantera installerade stilar", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Style:a om webben med Stylus, en användarstils-hanterare. Stylus låter dig enkelt installera teman och skal för många populära sidor.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/sv_SE/messages.json b/_locales/sv_SE/messages.json index 344c3d6a..34a0a2d8 100644 --- a/_locales/sv_SE/messages.json +++ b/_locales/sv_SE/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Hantera installerade stilar.", + "message": "Hantera installerade stilar", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -418,8 +418,5 @@ }, "bckpInstStyles": { "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" } } diff --git a/_locales/te/messages.json b/_locales/te/messages.json index 2d74bfc6..16ed6424 100644 --- a/_locales/te/messages.json +++ b/_locales/te/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Manage installed styles.", + "message": "Manage installed styles", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Restyle the web with Stylus, a user styles manager. Stylus lets you easily install themes and skins for many popular sites.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/tr/messages.json b/_locales/tr/messages.json index 4a87bc9e..83453eee 100644 --- a/_locales/tr/messages.json +++ b/_locales/tr/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "Yüklü stilleri yönet.", + "message": "Yüklü stilleri yönet", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Kullanıcı stil yöneticisi Stylus ile Web'in stilini yenileyin. Stylus Google, Facebook, YouTube, Orkut ve diğer pek çok site için temalar ve görünüm yüklemenize imkân tanır.", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/zh/messages.json b/_locales/zh/messages.json index 56a2dd6b..82a6a84c 100644 --- a/_locales/zh/messages.json +++ b/_locales/zh/messages.json @@ -415,11 +415,5 @@ "description": { "message": "Stylus，一个用户样式管理器，帮助您重新定义网页样式。Stylus易于为Google，Facebook，Youtube，Orkut以及其它各类型网站安装样式和主题。", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json index a98cef57..8b772618 100644 --- a/_locales/zh_CN/messages.json +++ b/_locales/zh_CN/messages.json @@ -264,7 +264,7 @@ "description": "Label for 'applies to' fields on the edit/add screen" }, "openManage": { - "message": "管理已安装的样式。", + "message": "管理已安装的样式", "description": "Link to open the manage page." }, "updateCheckFailBadResponseCode": { @@ -415,11 +415,5 @@ "description": { "message": "Stylus 是一个调整网页外观的用户样式管理器。它可让您轻松地为许多热门网站网站安装主题和皮肤。", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index f2ad7a7e..18e2c92e 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -415,11 +415,5 @@ "description": { "message": "用Stylus（一個用戶樣式管理器）重塑網頁。 Stylus 讓你能為诸多主流網站輕鬆的安裝主題和皮膚。", "description": "Extension description" - }, - "bckpInstStyles": { - "message": "Export Styles" - }, - "retrieveBckp": { - "message": "Import Styles" - } + } } diff --git a/manage.html b/manage.html index 5962ebbc..6cda0684 100644 --- a/manage.html +++ b/manage.html @@ -1,225 +1,257 @@ - - - - - @media(max-width:675px) { - #header { - height: auto; - position: inherit; - width: auto; - border-right: none; - } + - #installed { - margin-left: 0; - } + - [style-id] { - margin: 0; - } - } + + + + + + + - #header { - overflow: auto; - height: calc(100vh - 30px) - } + + +
+ + + - fieldset { - border-width: 1px; - border-radius: 6px; - margin: 1em 0; - } - .enabled-only > .disabled, .edited-only > [style-update-url] { - display: none; - } - - #search { - width: calc(100% - 4px); - margin: 0.25rem 4px 0; - border-radius: 0.25rem; - padding-left: 0.25rem; - border-width: 1px; - } - - #import ul { - margin-left: 0; - padding-left: 0; - list-style: none; - } - #import li { - margin-bottom: .5em; - } - #import pre { - background:#eee; - overflow: auto; - margin: 0 0 .5em 0; - } - - - - - - - - - - - - - - - - -
- - - - + \ No newline at end of file diff --git a/openOptions.js b/openOptions.js index c4c9d89a..6d4f1f06 100644 --- a/openOptions.js +++ b/openOptions.js @@ -8,8 +8,14 @@ document.querySelector('#manage-options-button').addEventListener("click", funct } }); -document.querySelector('#shortcuts-button').addEventListener("click", function() { +document.querySelector('#manage-shortcuts-button').addEventListener("click", function() { chrome.tabs.create({ 'url': 'chrome://extensions/configureCommands' }); -}); \ No newline at end of file +}); + +document.querySelector('#editor-styles-button').addEventListener("click", function() { + chrome.tabs.create({ + 'url': 'https://userstyles.org/styles/browse/chrome-extension' + }); +}); diff --git a/popup.css b/popup.css index 11daa2e4..d81a3f18 100644 --- a/popup.css +++ b/popup.css @@ -6,11 +6,17 @@ body { input[type=checkbox] { outline: none; } +#disable-all-wrapper { + padding: 0.2em 0 0.7em; +} +#disable-all-wrapper .main-controls { + padding-top: 0.1em; +} #no-styles { font-style: italic; } #popup-shortcuts-button { - margin-left: 4px; + margin-left: 3px; } .checker { display: inline; diff --git a/popup.html b/popup.html index 68760d89..d72c0148 100644 --- a/popup.html +++ b/popup.html @@ -1,56 +1,65 @@ - - - - + + + - - - - - + + + + + + + + - -
- -
- -
-
-
- -
-
- -
-
-
-
-
-
- -

-
-
- - - +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ +
+ +
+

+
+
+
+ - + + \ No newline at end of file diff --git a/popup.js b/popup.js index a9e1d2c2..47cc4861 100644 --- a/popup.js +++ b/popup.js @@ -199,7 +199,7 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { } }); -["find-styles-link", "open-manage-link"].forEach(function(id) { +["find-styles-link"].forEach(function(id) { document.getElementById(id).addEventListener("click", openLink, false); }); @@ -208,6 +208,10 @@ document.getElementById("disableAll").addEventListener("change", function(event) }); setupLivePrefs(["disableAll"]); +document.querySelector('#popup-manage-button').addEventListener("click", function() { + window.open(chrome.runtime.getURL('manage.html')); +}); + document.querySelector('#popup-options-button').addEventListener("click", function() { if (chrome.runtime.openOptionsPage) { // Supported (Chrome 42+) @@ -222,4 +226,4 @@ document.querySelector('#popup-shortcuts-button').addEventListener("click", func chrome.tabs.create({ 'url': 'chrome://extensions/configureCommands' }); -}); \ No newline at end of file +});