manage: make #find-editor-styles a link; remove global options

* "Find styles" is a link so we make it one, just like in the popup.
* We have a dedicated global options UI so it makes no sense to subset only two of them on the manage page, moreover both options are unrelated to managing styles.

manage.css

@@ -142,26 +142,22 @@ summary {
 }
 
 /* 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;
 }
@@ -171,13 +167,11 @@ summary {
 }
 
 /* Updates not available */
-
 .no-update .check-update {
   display: none;
 }
 
 /* Updates done */
-
 .update-done .check-update {
   display: none;
 }
@@ -187,6 +181,11 @@ summary {
   animation: highlight 10s cubic-bezier(0,.82,.47,.98);
 }
 
+#find-editor-styles {
+  display: block;
+  margin-top: .5em;
+}
+
 @keyframes highlight {
   from {
     background-color: rgba(128, 128, 128, .5);
@@ -318,6 +317,10 @@ fieldset {
     display: inline-block;
   }
 
+  #find-editor-styles {
+    display: inline-block;
+  }
+
   #backup {
     margin-right: 1em;
   }

manage.html

@@ -87,22 +87,10 @@
   </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>
+    <button id="manage-options-button" i18n-text="openOptionsManage"></button>
+    <button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
+    <a id="find-editor-styles" i18n-text="editorStylesButton"
+       href="https://userstyles.org/styles/browse/chrome-extension" target="_blank"></a>
   </div>
   <div id="backup">
     <h2 id="backup-title" i18n-text="backupButtons"></h2>

manage.js

@@ -31,9 +31,7 @@ function initGlobalEvents() {
   $('#search').oninput = searchStyles;
   $('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
   $('#manage-shortcuts-button').onclick = configureCommands.open;
-  $('#editor-styles-button').onclick = () => openURL({
-    url: 'https://userstyles.org/styles/browse/chrome-extension',
-  });
+  $('#find-editor-styles').onclick = EntryOnClick.external;
 
   // focus search field on / key
   document.onkeypress = event => {
@@ -55,8 +53,6 @@ function initGlobalEvents() {
   setupLivePrefs([
     'manage.onlyEnabled',
     'manage.onlyEdited',
-    'show-badge',
-    'popup.stylesFirst'
   ]);
 
   [
@@ -127,6 +123,7 @@ function createStyleElement({style, name}) {
   if (style.url) {
     const homepage = template.styleHomepage.cloneNode(true);
     homepage.href = style.url;
+    homepage.onclick = EntryOnClick.external;
     styleName.appendChild(document.createTextNode(' '));
     styleName.appendChild(homepage);
   }
@@ -249,6 +246,11 @@ class EntryOnClick {
       }
     });
   }
+
+  static external(event) {
+    openURL({url: event.target.closest('a').href});
+    event.preventDefault();
+  }
 }