Options UI discoverability and other fixes

#34

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
     }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_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"
-    }
 }

_locales/zh_TW/messages.json

@@ -415,11 +415,5 @@
 	"description": {
 		"message": "用Stylus（一個用戶樣式管理器）重塑網頁。 Stylus 讓你能為诸多主流網站輕鬆的安裝主題和皮膚。",
 		"description": "Extension description"
-	},
+	}
-    "bckpInstStyles": {
-        "message": "Export Styles"
-    },
-    "retrieveBckp": {
-        "message": "Import Styles"
-    }
 }

manage.html

@@ -1,225 +1,257 @@
 <html>
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-		<title i18n-text="manageTitle"></title>
-		<style>
-			body {
-				margin: 0;
-				font: 12px arial,sans-serif;
-			}
-			a, a:visited {
-				color: #555;
-				-webkit-transition: color 0.5s;
-			}
-			a:hover {
-				color: #999;
-			}
-			#header {
-				height: 100%;
-				width: 250px;
-				position: fixed;
-				top: 0;
-				padding: 15px;
-				border-right: 1px dashed #AAA;
-				-webkit-box-shadow: 0 0 50px -18px black;
-			}
-			#header h1 {
-				margin-top: 0;
-			}
-			#installed {
-				position: relative;
-				margin-left: 280px;
-			}
-			[style-id] {
-				margin: 10px;
-				padding: 0 15px;
-			}
-			[style-id] {
-				border-top: 2px solid gray;
-			}
-			#installed::after {
-				content: "";
-				position: absolute;
-				top: 0;
-				width: 100%; height: 2px;
-				background-color: #fff;
-			}
-			img[src*="world"] {
-				width: 16px;
-				height: 16px;
-				vertical-align: middle;
-				image-rendering: -webkit-optimize-contrast;
-			}
-			.applies-to {
-				word-break: break-word;
-			}
-			.applies-to, .actions {
-				padding-left: 15px;
-			}
-			.applies-to-extra {
-				font-weight: bold;
-			}
-			.disabled h2::after {
-				content: " (Disabled)";
-			}
-			.disabled {
-				opacity: 0.5;
-			}
-			.disabled .disable {
-				display: none;
-			}
-			.enabled .enable {
-				display: none;
-			}
 
-			/* Default, no update buttons */
+<head>
-			.update, .check-update {
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-				display: none;
+    <title i18n-text="manageTitle"></title>
-			}
+    <style>
-			/* Check update button for things that can*/
+        body {
-			*[style-update-url] .check-update {
+            margin: 0;
-				display: inline;
+            font: 12px arial, sans-serif;
-			}
+        }
-			/* Update check in progress */
+        a,
-			.checking-update .check-update {
+        a:visited {
-				display: none;
+            color: #555;
-			}
+            -webkit-transition: color 0.5s;
-			/* Updates available */
+        }
-			.can-update .update {
+        a:hover {
-				display: inline;
+            color: #999;
-			}
+        }
-			.can-update .check-update {
+        #header {
-				display: none;
+            height: 100%;
-			}
+            width: 250px;
-			/* Updates not available */
+            position: fixed;
-			.no-update .check-update {
+            top: 0;
-				display: none;
+            padding: 15px;
-			}
+            border-right: 1px dashed #AAA;
-			/* Updates done */
+            -webkit-box-shadow: 0 0 50px -18px black;
-			.update-done .check-update {
+        }
-				display: none;
+        #header h1 {
-			}
+            margin-top: 0;
-			.hidden {display: none}
+        }
+        #installed {
+            position: relative;
+            margin-left: 280px;
+        }
+        [style-id] {
+            margin: 10px;
+            padding: 0 15px;
+        }
+        [style-id] {
+            border-top: 2px solid gray;
+        }
+        #installed::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 2px;
+            background-color: #fff;
+        }
+        img[src*="world"] {
+            width: 16px;
+            height: 16px;
+            vertical-align: middle;
+            image-rendering: -webkit-optimize-contrast;
+        }
+        .applies-to {
+            word-break: break-word;
+        }
+        .applies-to,
+        .actions {
+            padding-left: 15px;
+        }
+        .applies-to-extra {
+            font-weight: bold;
+        }
+        .disabled h2::after {
+            content: " (Disabled)";
+        }
+        .disabled {
+            opacity: 0.5;
+        }
+        .disabled .disable {
+            display: none;
+        }
+        .enabled .enable {
+            display: none;
+        }
+        /* Default, no update buttons */
+        
+        .update,
+        .check-update {
+            display: none;
+        }
+        /* Check update button for things that can*/
+        
+        *[style-update-url] .check-update {
+            display: inline;
+        }
+        /* Update check in progress */
+        
+        .checking-update .check-update {
+            display: none;
+        }
+        /* Updates available */
+        
+        .can-update .update {
+            display: inline;
+        }
+        .can-update .check-update {
+            display: none;
+        }
+        /* Updates not available */
+        
+        .no-update .check-update {
+            display: none;
+        }
+        /* Updates done */
+        
+        .update-done .check-update {
+            display: none;
+        }
+        .hidden {
+            display: none
+        }
+        @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;
+        }
+    </style>
 
-			@media(max-width:675px) {
+    <template data-id="style">
-				#header {
+        <div>
-					height: auto;
+            <h2 class="style-name"></h2>
-					position: inherit;
+            <p class="applies-to"></p>
-					width: auto;
+            <p class="actions">
-					border-right: none;
+                <a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>
-				}
+                <button class="enable" i18n-text="enableStyleLabel"></button>
+                <button class="disable" i18n-text="disableStyleLabel"></button>
+                <button class="delete" i18n-text="deleteStyleLabel"></button>
+                <button class="check-update" i18n-text="checkForUpdate"></button>
+                <button class="update" i18n-text="installUpdate"></button>
+                <span class="update-note"></span>
+            </p>
+        </div>
+    </template>
 
-				#installed {
+    <template data-id="styleHomepage">
-					margin-left: 0;
+        <a target="_blank">
-				}
+            <img src="world_go.png" alt="*">
+        </a>
+    </template>
 
-				[style-id] {
+    <script src="localization.js"></script>
-					margin: 0;
+    <script src="health.js"></script>
-				}
+    <script src="storage.js"></script>
-			}
+    <script src="messaging.js"></script>
+    <script src="apply.js"></script>
+    <script src="manage.js"></script>
+</head>
 
-			#header {
+<body id="stylus-manage">
-				overflow: auto;
+    <div id="header">
-				height: calc(100vh - 30px)
+        <h1 id="manage-heading" i18n-text="manageHeading"></h1>
-			}
+        <fieldset>
+            <legend id="filters" i18n-text="manageFilters"></legend>
+            <div>
+                <input id="manage.onlyEnabled" type="checkbox">
+                <label id="manage.onlyEnabled-label" for="manage.onlyEnabled" i18n-text="manageOnlyEnabled"></label>
+            </div>
+            <div>
+                <input id="manage.onlyEdited" type="checkbox">
+                <label id="manage.onlyEdited-label" for="manage.onlyEdited" i18n-text="manageOnlyEdited"></label>
+            </div>
+            <div>
+                <input id="search" type="search" i18n-placeholder="searchStyles">
+            </div>
+        </fieldset>
+        <p>
+            <button id="check-all-updates" i18n-text="checkAllUpdates"></button>
+        </p>
+        <p>
+            <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
+            <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
+        </p>
+        <p>
+            <a href="edit.html">
+                <button id="add-style-label" i18n-text="addStyleLabel"></button>
+            </a>
+        </p>
+        <div id="options">
+            <h2 id="options-heading" i18n-text="optionsHeading"></h2>
+            <div>
+                <input id="show-badge" type="checkbox">
+                <label id="show-badge-label" for="show-badge" i18n-text="prefShowBadge"></label>
+            </div>
+            <div>
+                <input id="popup.stylesFirst" type="checkbox">
+                <label id="stylesFirst-label" for="popup.stylesFirst" i18n-text="popupStylesFirst"></label>
+            </div>
+            <div id="more-options">
+                <h3 id="options-subheading" i18n-text="optionsSubheading"></h3>
+                <button id="manage-options-button" i18n-text="openOptionsManage"></button>
+                <button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
+                <p>
+                    <button id="editor-styles-button" i18n-text="editorStylesButton"></button>
+                </p>
+            </div>
+        </div>
+        <div id="backup">
+            <h2 id="backup" i18n-text="backupButtons"></h2>
+            <span id="backup-message" i18n-text="backupMessage"></span>
+            <p>
+                <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
+                <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
+            </p>
+        </div>
+        <p id="manage-text" i18n-html="manageText"></p>
+    </div>
+    <div id="installed"></div>
+    <script src="openOptions.js"></script>
+    <script src="backup/fileSaveLoad.js"></script>
+</body>
 
-			fieldset {
+</html>
-				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;
-			}
-
-		</style>
-
-		<template data-id="style">
-			<div>
-				<h2 class="style-name"></h2>
-				<p class="applies-to"></p>
-				<p class="actions">
-					<a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>
-					<button class="enable" i18n-text="enableStyleLabel"></button>
-					<button class="disable" i18n-text="disableStyleLabel"></button>
-					<button class="delete" i18n-text="deleteStyleLabel"></button>
-					<button class="check-update" i18n-text="checkForUpdate"></button>
-					<button class="update" i18n-text="installUpdate"></button>
-					<span class="update-note"></span>
-				</p>
-			</div>
-		</template>
-
-		<template data-id="styleHomepage">
-			<a target="_blank">
-				<img src="world_go.png" alt="*">
-			</a>
-		</template>
-
-		<script src="localization.js"></script>
-		<script src="health.js"></script>
-		<script src="storage.js"></script>
-		<script src="messaging.js"></script>
-		<script src="apply.js"></script>
-		<script src="manage.js"></script>
-	</head>
-	<body id="stylus-manage">
-		<div id="header">
-			<h1 id="manage-heading" i18n-text="manageHeading"></h1>
-			<fieldset>
-				<legend id="filters" i18n-text="manageFilters"></legend>
-				<div><input id="manage.onlyEnabled" type="checkbox"><label id="manage.onlyEnabled-label" for="manage.onlyEnabled" i18n-text="manageOnlyEnabled"></label></div>
-				<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited" i18n-text="manageOnlyEdited"></label></div>
-				<div><input id="search" type="search" i18n-placeholder="searchStyles"></div>
-			</fieldset>
-			<p><button id="check-all-updates" i18n-text="checkAllUpdates"></button></p>
-			<p>
-				<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
-				<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
-			</p>
-			<p><a href="edit.html"><button id="add-style-label" i18n-text="addStyleLabel"></button></a></p>
-			<div id="options">
-				<h2 id="options-heading" i18n-text="optionsHeading"></h2>
-				<div><input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge" i18n-text="prefShowBadge"></label></div>
-				<div><input id="popup.stylesFirst" type="checkbox"><label id="stylesFirst-label" for="popup.stylesFirst" i18n-text="popupStylesFirst"></label></div>
-				<div id="more-options">
-			    <h3 id="options-subheading" i18n-text="optionsSubheading"></h3>
-			    <button id="manage-options-button" i18n-text="openOptionsManage"></button>
-				<button id="shortcuts-button" i18n-text="openOptionsShortcuts"></button>
-			</div>
-			</div>
-			<div id="backup">
-				<h2 id="backup" i18n-text="backupButtons"></h2>
-				<span id="backup-message" i18n-text="backupMessage"><br><br></span>
-				<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
-				<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
-			</div>
-			<p id="manage-text" i18n-html="manageText"></p>
-		</div>
-		<div id="installed"></div>
-		<script src="openOptions.js"></script>
-		<script src="backup/fileSaveLoad.js"></script>
-	</body>
-</html>

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'
     });
-});
+});
+
+document.querySelector('#editor-styles-button').addEventListener("click", function() {
+    chrome.tabs.create({
+        'url': 'https://userstyles.org/styles/browse/chrome-extension'
+    });
+});

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;

popup.html

@@ -1,56 +1,65 @@
 <html>
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-		<link rel="stylesheet" href="popup.css">
 
-		<template data-id="style">
+<head>
-			<div>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-				<div class="left-gutter">
+    <link rel="stylesheet" href="popup.css">
-					<input class="checker" type="checkbox">
-				</div>
-				<div class="main-controls">
-					<label class="style-name"></label>
-					<div class="actions">
-						<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
-						<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
-						<a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>
-						<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
-					</div>
-				</div>
-			</div>
-		</template>
 
-		<script src="localization.js"></script>
+    <template data-id="style">
-		<script src="health.js"></script>
+        <div>
-		<script src="storage.js"></script>
+            <div class="left-gutter">
-		<script src="messaging.js"></script>
+                <input class="checker" type="checkbox">
-		<script src="apply.js"></script>
+            </div>
+            <div class="main-controls">
+                <label class="style-name"></label>
+                <div class="actions">
+                    <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
+                    <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
+                    <a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>
+                    <a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <script src="localization.js"></script>
+    <script src="health.js"></script>
+    <script src="storage.js"></script>
+    <script src="messaging.js"></script>
+    <script src="apply.js"></script>
 </head>
+
 <body id="stylish-popup">
-
+    <div id="unavailable">
-	<div id="unavailable"><div class="main-controls"><span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span></div></div>
+        <div class="main-controls"><span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
-
+        </div>
-	<div id="installed"></div>
+    </div>
-
+    <div id="installed"></div>
-	<div class="actions">
+    <div class="actions">
-		<div id="disable-all-wrapper">
+        <div id="disable-all-wrapper">
-			<div class="left-gutter">
+            <div class="left-gutter">
-				<input id="disableAll" type="checkbox">
+                <input id="disableAll" type="checkbox">
-			</div>
+            </div>
-			<div class="main-controls">
+            <div class="main-controls">
-				<label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
+                <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
-			</div>
+            </div>
-		</div>
+        </div>
-		<div class="left-gutter"></div>
+        <div class="left-gutter"></div>
-		<div class="main-controls">
+        <div class="main-controls">
-			<div id="find-styles"><a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a></div>
+            <div id="manage-styles">
-			<div id="manage-styles"><a id="open-manage-link" href="manage.html" i18n-text="openManage"></a></div>
+                <button id="popup-manage-button" i18n-text="openManage"></button>
-			<div id="popup-options"><button id="popup-options-button" i18n-text="openOptionsPopup"><button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button></div>
+            </div>
-			<div id="write-style"><span id="write-style-for" i18n-text="writeStyleFor"><br></span></div>
+            <div id="popup-options">
-		</div>
+                <button id="popup-options-button" i18n-text="openOptionsPopup">
-	</div>
+                    <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
-
+            </div>
-	<script src="popup.js"></script>
+            <div id="find-styles">
-
+                <a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
+            </div>
+            <div id="write-style"><span id="write-style-for" i18n-text="writeStyleFor"><br></span>
+            </div>
+        </div>
+    </div>
+    <script src="popup.js"></script>
 </body>
-</html>
+
+</html>

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'
     });
-});
+});