openstyles · tophf · Feb 19, 2022 · Mar 1, 2022
diff --git a/edit.html b/edit.html
@@ -491,5 +491,5 @@ <h2><span i18n="linterIssues"></span><span id="issue-count"></span>
 
 <body id="stylus-edit">
 <script src="edit/edit.js"></script>
-  </body>
+</body>
 </html>
diff --git a/edit/base.js b/edit/base.js
@@ -90,7 +90,10 @@ const baseInit = (() => {
       ],
     };
     // switching the mode here to show the correct page ASAP, usually before DOMContentLoaded
-    const isUC = Boolean(style.usercssData || !id && prefs.get('newStyleAsUsercss'));
+    const isUC = Boolean(style.usercssData) || !id && (
+      params.get('uc') === '1' ||
+      !params.has('uc') && prefs.get('newStyleAsUsercss')
+    );
     Object.assign(editor, /** @namespace Editor */ {
       style,
       isUsercss: isUC,

diff --git a/edit/edit.css b/edit/edit.css
@@ -39,7 +39,7 @@ html.is-new-style #publish,
 .hidden {
   display: none !important;
 }
-html.is-new-style #heading::after {
+html.is-new-style #heading::before {
   content: attr(data-add);
 }
 html:not(.is-new-style) #heading::before {

diff --git a/edit/settings.css b/edit/settings.css
@@ -42,6 +42,3 @@
   display: inline-flex;
   padding: 0 .8em 0 0;
 }
-a[data-cmd=note] {
-  vertical-align: text-bottom;
-}
diff --git a/global-dark.css b/global-dark.css
@@ -20,8 +20,8 @@
     /* min/max are exposed in case we want to use an overdrive color for emphasis */
     --cmin: hsl(0, 0%, 100%);
     --cmax: hsl(0, 0%, 0%);
-    --accent-1: hsl(180, 100%, 95%);
-    --accent-3: hsl(180, 30%, 18%);
+    --accent-1: hsl(180, 100%, 90%);
+    --accent-3: hsl(180, 30%, 25%);
     --input-bg: var(--c95);
   }
   textarea,

diff --git a/manage.html b/manage.html
@@ -75,9 +75,7 @@ <h2 class="style-name">
   </template>
 
   <template data-id="homepageIconSmall">
-    <svg class="svg-icon" viewBox="0 0 20 20">
-      <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
-    </svg>
+    <svg class="svg-icon"><use xlink:href="#svg-icon-external"/></svg>
   </template>
 
   <template data-id="configureIcon">
@@ -89,12 +87,7 @@ <h2 class="style-name">
   <template data-id="updaterIcons">
     <span class="updater-icons">
       <a class="check-update" i18n="title:checkForUpdate" tabindex="0">
-        <svg class="svg-icon" viewBox="0 0 20 20">
-          <path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
-                   L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
-          <path d="M10,6c0.8,0,1.6,0.3,2.3,0.7L10,9h3.9h2.1H16V3l-2.3,2.3C12.7,4.5,11.4,4,10,4
-                   C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
-        </svg>
+        <svg class="svg-icon"><use xlink:href="#svg-icon-check-update"/></svg>
       </a>
       <a class="update" i18n="title:installUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
@@ -269,48 +262,39 @@ <h2 i18n="manageFilters">:
     </div>
 
     <div class="settings-column">
-      <details id="actions" data-pref="manage.actions.expanded">
+      <details id="actions-toggle" data-pref="manage.actions.expanded">
         <summary><h2 i18n="optionsActions"></h2></summary>
-        <div id="update-check">
-          <button id="check-all-updates" i18n="checkAllUpdates">
-            <span id="update-progress"></span>
-          </button>
-          <a id="update-history-button" 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="applyAllUpdates"></button>
-          <span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
-          <button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
-        </div>
-
-        <div id="add-style-wrapper">
-          <a href="edit.html">
-            <button id="add-style-label" i18n="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="manageNewStyleAsUsercss, title:optionsAdvancedNewStyleAsUsercss"></span>
-            <a id="usercss-wiki"
-               href="https://github.com/openstyles/stylus/wiki/Usercss"
-               i18n="title:externalUsercssDocument">
-              <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>
-        <button id="manage-options-button" i18n="openOptions"></button>
-        <button id="injection-order-button" i18n="title:styleInjectionOrder">
-          <svg class="svg-icon"><use xlink:href="#svg-icon-reorder"/></svg>
-          &nbsp;
-        </button>
       </details>
+      <div id="actions">
+        <a id="check-all-updates" i18n="title:checkAllUpdates" tabindex="0">
+          <svg class="svg-icon"><use xlink:href="#svg-icon-check-update"/></svg>
+          <span id="update-progress"></span>
+        </a>
+        <a id="update-history-button" i18n="title:updateCheckHistory" tabindex="0">
+          <svg class="svg-icon" viewBox="0 0 20 20">
+            <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>
+        <a id="manage-options-button" i18n="title:openOptions" tabindex="0">
+          <svg class="svg-icon"><use xlink:href="#svg-icon-config"/></svg>
+        </a>
+        <a id="injection-order-button" i18n="title:styleInjectionOrder" tabindex="0">
+          <svg class="svg-icon" viewBox="0 0 20 20">
+            <path d="M2,18h8v-6H2V18z M4,14h4v2H4V14z M2,7h8V1H2V7z M4,3h4v2H4V3z M15,13v3l-4-3.5L15,9v3h2V5h-6V4h7v9H15z M10,11H2v-1h8V11zM10,9H2V8h8V9z"/>
+          </svg>
+        </a>
+        <a href="edit.html?uc=0" i18n="title:addStyleLabel" tabindex="0">
+          <svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
+        </a>
+        <a href="edit.html?uc=1" id="write-usercss" i18n="title:optionsAdvancedNewStyleAsUsercss" tabindex="0">
+          <svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
+        </a>
+      </div>
+      <p id="update-all">
+        <button id="apply-all-updates" class="hidden" i18n="applyAllUpdates"></button>
+        <span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
+        <button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
+      </p>
     </div>
 
     <div class="settings-column">
@@ -376,8 +360,20 @@ <h2 id="backup-title" i18n="backupButtons"><!-- removing space
     <path d="M13.3,12.8l1.5-2.6l-2.2-1.5c0-0.2,0.1-0.5,0.1-0.7c0-0.2,0-0.5-0.1-0.7l2.2-1.5l-1.5-2.6l-2.4,1.2 c-0.4-0.3-0.8-0.5-1.2-0.7L9.5,1h-3L6.3,3.7C5.9,3.8,5.5,4.1,5.1,4.4L2.7,3.2L1.2,5.8l2.2,1.5c0,0.2-0.1,0.5-0.1,0.7 c0,0.2,0,0.5,0.1,0.7l-2.2,1.5l1.5,2.6l2.4-1.2c0.4,0.3,0.8,0.5,1.2,0.7L6.5,15h3l0.2-2.7c0.4-0.2,0.8-0.4,1.2-0.7L13.3,12.8z  M8,10.3c-1.3,0-2.3-1-2.3-2.3c0-1.3,1-2.3,2.3-2.3c1.3,0,2.3,1,2.3,2.3C10.3,9.3,9.3,10.3,8,10.3z"/>
   </symbol>
 
-  <symbol id="svg-icon-reorder" viewBox="0 0 16 16">
-    <path d="M0,16h7v-6H0V16z M1,11h5v4H1V11z M0,5h7V0H0V5z M1,1h5v3H1V1z M13,11v3l-4-3.5L13,7v3h2V3H8V2h8v9H13z M7,9H0V8h7V9z M7,7H0V6h7V7z"/>
+  <symbol id="svg-icon-check-update" viewBox="0 0 20 20">
+    <path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
+             L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
+    <path d="M10,6c0.8,0,1.6,0.3,2.3,0.7L10,9h3.9h2.1H16V3l-2.3,2.3C12.7,4.5,11.4,4,10,4
+             C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
+  </symbol>
+
+  <symbol id="svg-icon-add" viewBox="0 0 20 20">
+    <rect x="9" y="2" width="2" height="16"/>
+    <rect x="2" y="9" width="16" height="2"/>
+  </symbol>
+
+  <symbol id="svg-icon-external" viewBox="0 0 20 20">
+    <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
   </symbol>
 </svg>
 </template>

diff --git a/manage/manage.css b/manage/manage.css
@@ -55,11 +55,6 @@ a:hover {
   z-index: 9;
 }
 
-#update-check,
-#update-all {
-  margin-bottom: .5rem;
-}
-
 #check-all-updates {
   max-width: calc(100% - 30px);
 }
@@ -70,57 +65,80 @@ a:hover {
 }
 
 #header h1 {
-  margin-top: 0;
-  margin-bottom: .3em;
-}
-
-#header a[href^="edit"] {
-  text-decoration: none;
-  margin-right: 8px;
+  margin: 0;
 }
 
-#add-style-wrapper {
+#actions {
+  --num: 6;
+  --max-w: 32px;
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: calc(var(--num) * (var(--max-w) + 8px));
 }
-
-#add-style-wrapper > * {
-  /* in case the children are wrapped */
-  margin-bottom: .5rem;
+#actions a {
+  max-width: var(--max-w);
+  flex: 1 1;
+  text-align: center;
+  text-decoration: none;
+  padding: 4px 0 5px;
+  color: var(--c20);
+  border: 1px solid var(--c85);
+  border-radius: 4px;
+  transition: background-color .15s;
+  cursor: auto;
 }
-
-#add-style-as-usercss-wrapper {
-  display: flex;
-  align-items: center;
+#actions a:hover {
+  color: var(--cmin);
+  background-color: hsla(0, 0%, 50%, .2);
 }
-
-#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
-  fill: var(--c65);
+#actions svg {
+  cursor: auto;
+  fill: var(--c20);
 }
-
-#add-style-as-usercss-wrapper input {
-  bottom: 0;
-  margin: auto;
+#actions a:hover svg,
+#actions svg:hover {
+  fill: var(--cmin);
 }
-
-#add-style-as-usercss-wrapper input + svg {
-  bottom: 0;
-  margin: auto;
-  left: 2px;
+#actions #write-usercss::before {
+  margin: 11px 0 0 12px;
+  position: absolute;
+  font-size: 10px;
+  font-weight: bold;
+  background: none;
+  content: 'UC';
+  letter-spacing: -1px;
 }
-
-#injection-order-button {
-  --w: 16px;
-  width: var(--w);
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
+#actions #manage-options-button svg {
+  fill: transparent;
+  stroke: var(--fg);
 }
-#injection-order-button > svg {
+#actions-toggle:not([open]) {
   position: absolute;
-  width: var(--w);
-  height: var(--w);
+  margin-top: 4px;
+}
+#actions-toggle:not([open]) h2 {
+  display: none;
+}
+#actions-toggle[open] + div {
+  display: block;
+  text-align: left;
+  --max-w: none;
+}
+#actions-toggle[open] + div > a {
+  display: block;
+  text-align: left;
+  border: none;
+  margin: 0 0 0 -4px;
+  padding: 1px 0 1px 4px;
+  border-radius: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+#actions-toggle[open] + div > a::after {
+  content: attr(data-title);
+  margin-left: .5em;
+  vertical-align: middle;
 }
 
 #installed {
@@ -733,7 +751,9 @@ button .svg-icon,
 #apply-all-updates:after {
   content: " (" attr(data-value) ")";
 }
-
+#apply-all-updates:not(.hidden) + #update-all-no-updates {
+  display: none !important;
+}
 .update-in-progress #check-all-updates {
   position: relative;
 }

diff --git a/manage/manage.js b/manage/manage.js
@@ -78,6 +78,7 @@ newUI.renderClass();
   sorter.init();
   router.update();
   prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI());
+  prefs.subscribe('manage.actions.expanded', toggleActionTitles, {runNow: true});
   switchUI({styleOnly: true});
   // translate CSS manually
   document.styleSheets[0].insertRule(
@@ -105,6 +106,15 @@ newUI.renderClass();
     '/manage/incremental-search',
     '/manage/updater-ui',
   ]);
+
+  function toggleActionTitles(_, isOpen) {
+    const from = `${isOpen ? '' : 'data-'}title`;
+    const to = `${isOpen ? 'data-' : ''}title`;
+    for (const el of $$(`#actions [${from}]`)) {
+      el.setAttribute(to, el.getAttribute(from));
+      el.removeAttribute(from);
+    }
+  }
 })();
 
 msg.onExtension(onRuntimeMessage);

diff --git a/popup.html b/popup.html
@@ -197,6 +197,11 @@
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
     </label>
     <div id="write-style" class="if-not-blocked">
+      <label id="write-as" i18n="title:optionsAdvancedNewStyleAsUsercss">
+        <input id="newStyleAsUsercss" type="checkbox">
+        <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        <div>U</div>
+      </label>
       <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
       <span id="write-style-for" i18n="writeStyleFor"></span>
     </div>
-Original file line number
+Diff line change
@@ Expand Up @@
     <body id="stylus-edit">
     <script src="edit/edit.js"></script>
-      </body>
+    </body>
     </html>