From f13b7b72cac621957921c8b2c2ffd08953ef9554 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Mon, 2 Jul 2018 12:07:33 -0400
Subject: [PATCH] Responsive layout

Give me a minute.
---
 edit.html            | 234 +++++++++++++++------------
 global.css           |   4 +
 install-usercss.html |  70 ++++----
 manage.html          | 375 ++++++++++++++++++++++---------------------
 4 files changed, 361 insertions(+), 322 deletions(-)

diff --git a/edit.html b/edit.html
index 1c940d97..3f50d87f 100644
--- a/edit.html
+++ b/edit.html
@@ -101,14 +101,20 @@
           <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
         </div>
         <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
-        <button class="remove-applies-to" i18n-text="appliesRemove"></button>
-        <button class="add-applies-to" i18n-text="appliesAdd"></button>
+        <div class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove">
+          <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
+        </div>
+        <div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd">
+          <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
+        </div>
       </li>
     </template>
 
     <template data-id="appliesToEverything">
       <li class="applies-to-everything" i18n-text="appliesToEverything">
-        <button class="add-applies-to" i18n-text="appliesSpecify"></button>
+        <div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd">
+          <svg id="svg-icon-add" class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
+        </div>
       </li>
     </template>
 
@@ -124,10 +130,12 @@
           </label>
           <ul class="applies-to-list"></ul>
         </div>
-        <button class="remove-section" i18n-text="sectionRemove"></button>
-        <button class="add-section" i18n-text="sectionAdd"></button>
-        <button class="beautify-section" i18n-text="styleBeautify"></button>
-        <button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
+        <div class="edit-actions">
+          <button class="remove-section" i18n-text="sectionRemove"></button>
+          <button class="add-section" i18n-text="sectionAdd"></button>
+          <button class="beautify-section" i18n-text="styleBeautify"></button>
+          <button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
+        </div>
       </div>
     </template>
 
@@ -276,109 +284,117 @@
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </h2>
-          <button id="from-mozilla" i18n-text="importLabel"></button>
-          <button id="to-mozilla" i18n-text="exportLabel"></button>
+          <div id="mozilla-format-buttons">
+            <button id="from-mozilla" i18n-text="importLabel"></button>
+            <button id="to-mozilla" i18n-text="exportLabel"></button>
+          </div>
         </div>
       </section>
       <details id="options" data-pref="editor.options.expanded">
         <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
-        <div class="option">
-          <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
-            <input id="editor.lineWrapping" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label id="smartIndent-label" i18n-text="cm_smartIndent">
-            <input id="editor.smartIndent" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
-            <input id="editor.indentWithTabs" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
-            <input id="editor.autoCloseBrackets" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_autocompleteOnTyping">
-            <input id="editor.autocompleteOnTyping" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_selectByTokens"
-                 i18n-title="cm_selectByTokensTooltip">
-            <input id="editor.selectByTokens" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_colorpicker">
-            <input id="editor.colorpicker" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-          <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
-            <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
-          </a>
-        </div>
-        <div class="option usercss-only">
-          <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
-            <input id="editor.appliesToLineWidget" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option aligned">
-          <label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
-          <input id="editor.tabSize" type="number" min="0">
-        </div>
-        <div class="option aligned">
-          <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
-          <div class="select-resizer">
-            <select id="editor.keyMap"></select>
-            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-          </div>
-          <a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
-            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-          </a>
-        </div>
-        <div class="option aligned">
-          <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
-          <div class="select-resizer">
-            <select id="editor.theme"></select>
-            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-          </div>
-        </div>
-        <div class="option aligned">
-          <label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
-          <div class="select-resizer">
-            <select id="editor.matchHighlight">
-              <option i18n-text="cm_matchHighlightToken" value="token">
-              <option i18n-text="cm_matchHighlightSelection" value="selection">
-              <option i18n-text="genericDisabledLabel" value="">
-            </select>
-            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-          </div>
-        </div>
-        <div class="option aligned">
-          <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
-            <div class="select-resizer">
-              <select id="editor.linter">
-                <option value="csslint" selected>CSSLint</option>
-                <option value="stylelint">Stylelint</option>
-                <option value="" i18n-text="genericDisabledLabel"></option>
-              </select>
-              <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        <div id="options-wrapper">
+          <div class="options-column">
+            <div class="option">
+              <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
+                <input id="editor.lineWrapping" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
             </div>
-          <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
-            <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
-          </a>
+            <div class="option">
+              <label id="smartIndent-label" i18n-text="cm_smartIndent">
+                <input id="editor.smartIndent" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
+                <input id="editor.indentWithTabs" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
+                <input id="editor.autoCloseBrackets" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_autocompleteOnTyping">
+                <input id="editor.autocompleteOnTyping" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_selectByTokens"
+                     i18n-title="cm_selectByTokensTooltip">
+                <input id="editor.selectByTokens" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_colorpicker">
+                <input id="editor.colorpicker" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+              <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
+                <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
+              </a>
+            </div>
+            <div class="option usercss-only">
+              <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
+                <input id="editor.appliesToLineWidget" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+          </div>
+          <div class="options-column">
+            <div class="option aligned">
+              <label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
+              <input id="editor.tabSize" type="number" min="0">
+            </div>
+            <div class="option aligned">
+              <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
+              <div class="select-resizer">
+                <select id="editor.keyMap"></select>
+                <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+              </div>
+              <a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
+                <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+              </a>
+            </div>
+            <div class="option aligned">
+              <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
+              <div class="select-resizer">
+                <select id="editor.theme"></select>
+                <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+              </div>
+            </div>
+            <div class="option aligned">
+              <label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
+              <div class="select-resizer">
+                <select id="editor.matchHighlight">
+                  <option i18n-text="cm_matchHighlightToken" value="token">
+                  <option i18n-text="cm_matchHighlightSelection" value="selection">
+                  <option i18n-text="genericDisabledLabel" value="">
+                </select>
+                <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+              </div>
+            </div>
+            <div class="option aligned">
+              <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
+                <div class="select-resizer">
+                  <select id="editor.linter">
+                    <option value="csslint" selected>CSSLint</option>
+                    <option value="stylelint">Stylelint</option>
+                    <option value="" i18n-text="genericDisabledLabel"></option>
+                  </select>
+                  <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+                </div>
+              <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
+                <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
+              </a>
+            </div>
+          </div>
         </div>
       </details>
       <details id="lint" class="hidden" data-pref="editor.lint.expanded">
@@ -438,6 +454,14 @@
       <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
         <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
       </symbol>
+      
+      <symbol id="svg-icon-plus" viewBox="0 0 8 8">
+        <path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
+      </symbol>
+      
+      <symbol id="svg-icon-minus" viewBox="0 0 8 8">
+        <path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
+      </symbol>
 
     </svg>
 
diff --git a/global.css b/global.css
index 76e689c5..4ff4da33 100644
--- a/global.css
+++ b/global.css
@@ -2,6 +2,10 @@ button {
   -webkit-appearance: none;
   -moz-appearance: none;
   user-select: none;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   padding: 2px 7px;
   border: 1px solid hsl(0, 0%, 62%);
   font: 400 13.3333px Arial;
diff --git a/install-usercss.html b/install-usercss.html
index 759c6231..0858ee02 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -45,40 +45,44 @@
 </head>
 <body id="stylus-install-usercss">
   <div class="container">
-    <div class="header">
-      <h1>
-        <span class="meta-name"></span>
-        <small class="meta-version"></small>
-      </h1>
-      <div class="actions">
-        <h2 class="installed" i18n-text="installButtonInstalled"></h2>
-        <button class="install" i18n-text="installButton"></button>
-        <p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
-        <label class="set-update-url">
-          <input type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <span></span>
-          <p></p>
-        </label>
-        <label class="live-reload">
-          <input type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <span i18n-text="liveReloadLabel"></span>
-        </label>
+    <div id="header">
+      <div id="header-content-wrapper">
+        <h1>
+          <span class="meta-name"></span>
+          <small class="meta-version"></small>
+        </h1>
+        <div class="actions">
+          <h2 class="installed" i18n-text="installButtonInstalled"></h2>
+          <button class="install" i18n-text="installButton"></button>
+          <p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
+          <label class="set-update-url">
+            <input type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <span></span>
+            <p></p>
+          </label>
+          <label class="live-reload">
+            <input type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <span i18n-text="liveReloadLabel"></span>
+          </label>
+        </div>
+        <p class="meta-description"></p>
+        <div>
+          <h3 i18n-text="author"></h3>
+          <span class="meta-author"></span>
+        </div>
+        <div>
+          <h3 i18n-text="license"></h3>
+          <span class="meta-license"></span>
+        </div>
+        <div class="external-link"></div>
+        <div id="applies-to-wrapper">
+          <h3 i18n-text="appliesLabel"></h3>
+          <ul class="applies-to">
+          </ul>
+        </div>
       </div>
-      <p class="meta-description"></p>
-      <div>
-        <h3 i18n-text="author"></h3>
-        <span class="meta-author"></span>
-      </div>
-      <div>
-        <h3 i18n-text="license"></h3>
-        <span class="meta-license"></span>
-      </div>
-      <h3 i18n-text="appliesLabel"></h3>
-      <ul class="applies-to">
-      </ul>
-      <div class="external-link"></div>
     </div>
     <div class="main">
       <div class="warnings"></div>
diff --git a/manage.html b/manage.html
index 985a3efa..d4faff0f 100644
--- a/manage.html
+++ b/manage.html
@@ -171,197 +171,204 @@
 
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
-
-  <details id="filters" data-pref="manage.filters.expanded">
-    <summary>
-      <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
-      <a id="reset-filters" href="#" tabindex="0">
-        <svg class="svg-icon" viewBox="0 0 20 20">
-          <title i18n-text="genericResetLabel"></title>
-          <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
-                           5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
-        </svg>
-      </a>
-    </summary>
-
-    <div class="filter-selection">
-      <label>
-        <div class="checkmate">
-          <input id="manage.onlyEnabled" type="checkbox"
-                 data-filter=".enabled"
-                 data-filter-hide=".disabled">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </div>
-      </label>
-      <div class="select-resizer">
-        <select id="manage.onlyEnabled.invert">
-          <option i18n-text="manageOnlyEnabled" value="false"></option>
-          <option i18n-text="manageOnlyDisabled" value="true"></option>
-        </select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-    </div>
-
-    <div class="filter-selection">
-      <label>
-        <div class="checkmate">
-          <input id="manage.onlyLocal" type="checkbox"
-                 data-filter=":not(.updatable):not(.update-done)"
-                 data-filter-hide=".updatable, .update-done">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </div>
-      </label>
-      <div class="select-resizer">
-        <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
-          <option i18n-text="manageOnlyLocal" value="false"></option>
-          <option i18n-text="manageOnlyExternal" value="true"></option>
-        </select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-    </div>
-
-    <div class="filter-selection">
-      <label>
-        <div class="checkmate">
-          <input id="manage.onlyUsercss" type="checkbox"
-                 data-filter=".usercss"
-                 data-filter-hide=":not(.usercss)">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </div>
-      </label>
-      <div class="select-resizer">
-        <select id="manage.onlyUsercss.invert">
-          <option i18n-text="manageOnlyUsercss" value="false"></option>
-          <option i18n-text="manageOnlyNonUsercss" value="true"></option>
-        </select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-    </div>
-
-    <label id="only-updates" class="hidden">
-      <input type="checkbox"
-             data-filter=".can-update, .update-problem, .update-done"
-             data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
-      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-      <span i18n-text="manageOnlyUpdates"></span>
-    </label>
-
-    <div id="search-wrapper">
-      <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
-             data-filter=":not(.not-matching)"
-             data-filter-hide=".not-matching">
-      <a href="#" id="search-help" tabindex="0">
-        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-      </a>
-    </div>
-
-  </details>
-
-  <div id="sort-wrapper">
-    <div class="sorter-selection" i18n-title="sortLabel">
-      <select id="manage.newUI.sort"></select>
-      <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-    </div>
-    <a href="#" id="sorter-help" tabindex="0">
-      <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-    </a>
-  </div>
-
-  <p class="nowrap">
-    <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
-    <a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
-      <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
-        <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
-      </svg>
-    </a>
-  </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>
-    <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
-  </p>
-
-  <div id="add-style-wrapper">
-    <a href="edit.html">
-      <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1" class="nowrap"></button>
-    </a>
-    <label id="add-style-as-usercss-wrapper">
-      <input type="checkbox" id="newStyleAsUsercss">
-      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-      <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
-      <a id="usercss-wiki"
-         href="https://github.com/openstyles/stylus/wiki/Usercss"
-         i18n-title="externalUsercssDocument"
-         tabindex="0">
-        <svg class="svg-icon" viewBox="0 0 20 20">
-          <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
-        </svg>
-      </a>
-    </label>
-  </div>
-
-  <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"/>
+  
+  <div id="manage-settings">
+    <div class="settings-column">
+      <details id="filters" data-pref="manage.filters.expanded">
+        <summary>
+          <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
+          <a id="reset-filters" href="#" tabindex="0">
+            <svg class="svg-icon" viewBox="0 0 20 20">
+              <title i18n-text="genericResetLabel"></title>
+              <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
+                               5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
             </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">
+        </summary>
+      
+        <div class="filter-selection">
+          <label>
+            <div class="checkmate">
+              <input id="manage.onlyEnabled" type="checkbox"
+                     data-filter=".enabled"
+                     data-filter-hide=".disabled">
               <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            </label>
+            </div>
+          </label>
+          <div class="select-resizer">
+            <select id="manage.onlyEnabled.invert">
+              <option i18n-text="manageOnlyEnabled" value="false"></option>
+              <option i18n-text="manageOnlyDisabled" value="true"></option>
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
         </div>
+      
+        <div class="filter-selection">
+          <label>
+            <div class="checkmate">
+              <input id="manage.onlyLocal" type="checkbox"
+                     data-filter=":not(.updatable):not(.update-done)"
+                     data-filter-hide=".updatable, .update-done">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </div>
+          </label>
+          <div class="select-resizer">
+            <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
+              <option i18n-text="manageOnlyLocal" value="false"></option>
+              <option i18n-text="manageOnlyExternal" value="true"></option>
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
+        </div>
+      
+        <div class="filter-selection">
+          <label>
+            <div class="checkmate">
+              <input id="manage.onlyUsercss" type="checkbox"
+                     data-filter=".usercss"
+                     data-filter-hide=":not(.usercss)">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </div>
+          </label>
+          <div class="select-resizer">
+            <select id="manage.onlyUsercss.invert">
+              <option i18n-text="manageOnlyUsercss" value="false"></option>
+              <option i18n-text="manageOnlyNonUsercss" value="true"></option>
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
+        </div>
+      
+        <label id="only-updates" class="hidden">
+          <input type="checkbox"
+                 data-filter=".can-update, .update-problem, .update-done"
+                 data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          <span i18n-text="manageOnlyUpdates"></span>
+        </label>
+      
+        <div id="search-wrapper">
+          <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
+                 data-filter=":not(.not-matching)"
+                 data-filter-hide=".not-matching">
+          <a href="#" id="search-help" tabindex="0">
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          </a>
+        </div>
+        <div id="sort-wrapper">
+          <div class="sorter-selection" i18n-title="sortLabel">
+            <select id="manage.newUI.sort"></select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
+          <a href="#" id="sorter-help" tabindex="0">
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          </a>
+        </div>
+      
+      </details>
+      
+      <div id="style-actions">
+        <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">
+            <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
+              <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
+            </svg>
+          </a>
+        </div>
+        
+        <div id="update-all">
+          <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
+          <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
+          <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
+        </div>
+        
+        <div id="add-style-wrapper">
+          <a href="edit.html">
+            <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
+          </a>
+          <label id="add-style-as-usercss-wrapper">
+            <input type="checkbox" id="newStyleAsUsercss">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
+            <a id="usercss-wiki"
+               href="https://github.com/openstyles/stylus/wiki/Usercss"
+               i18n-title="externalUsercssDocument"
+               tabindex="0">
+              <svg class="svg-icon" viewBox="0 0 20 20">
+                <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+              </svg>
+            </a>
+          </label>
+        </div>
       </div>
-     <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
-
-    <p>
-      <button id="manage-options-button" i18n-text="openOptionsManage"></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>
-    </p>
-
-  </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>
-    <p>
-      <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
-      <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
-    </p>
-  </details>
-
-  <p id="manage-text">
-    <span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
-    <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
-    <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
-  </p>
+    
+    <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="openOptionsManage"></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>
+        <div id="backup-buttons">
+          <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
+          <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
+        </div>
+      </details>
+      
+      <div id="manage-text">
+        <span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
+        <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
+        <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
+      </div>
+    </div>
+  </div>
 
 </div>