actions as icons in manager

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,

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 {

edit/settings.css

@@ -42,6 +42,3 @@
   display: inline-flex;
   padding: 0 .8em 0 0;
 }
-a[data-cmd=note] {
-  vertical-align: text-bottom;
-}

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-1: hsl(180, 100%, 90%);
-    --accent-3: hsl(180, 30%, 18%);
+    --accent-3: hsl(180, 30%, 25%);
     --input-bg: var(--c95);
   }
   textarea,

manage.html

@@ -75,9 +75,7 @@
   </template>
 
   <template data-id="homepageIconSmall">
-    <svg class="svg-icon" viewBox="0 0 20 20">
+    <svg class="svg-icon"><use xlink:href="#svg-icon-external"/></svg>
-      <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
-    </svg>
   </template>
 
   <template data-id="configureIcon">
@@ -89,12 +87,7 @@
   <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">
+        <svg class="svg-icon"><use xlink:href="#svg-icon-check-update"/></svg>
-          <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>
       </a>
       <a class="update" i18n="title:installUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
@@ -155,6 +148,37 @@
   <h1 id="manage-heading" i18n="manageHeading"></h1>
 
   <div id="manage-settings">
+    <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:genericHistoryLabel" 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>
+      <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">
       <details id="filters" data-pref="manage.filters.expanded">
         <summary>
@@ -268,51 +292,6 @@
       </div>
     </div>
 
-    <div class="settings-column">
-      <details id="actions" 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>
-
     <div class="settings-column">
       <details id="backup" data-pref="manage.backup.expanded">
         <summary>
@@ -376,8 +355,20 @@
     <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">
+  <symbol id="svg-icon-check-update" viewBox="0 0 20 20">
-    <path d="M0,16h7v-6H0V16z M1,11h5v4H1V11z M0,5h7V0H0V5z M1,1h5v3H1V1z M13,11v3l-4-3.5L13,7v3h2V3H8V2h8v9H13z M7,9H0V8h7V9z M7,7H0V6h7V7z"/>
+    <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>

manage/manage.css

@@ -55,7 +55,6 @@ a:hover {
   z-index: 9;
 }
 
-#update-check,
 #update-all {
   margin-bottom: .5rem;
 }
@@ -74,53 +73,50 @@ a:hover {
   margin-bottom: .3em;
 }
 
-#header a[href^="edit"] {
+#actions {
+  --num: 6;
+  --max-w: 32px;
+  display: flex;
+  justify-content: space-between;
+  max-width: calc(var(--num) * (var(--max-w) + 8px));
+}
+#actions a {
+  max-width: var(--max-w);
+  flex: 1 1;
+  text-align: center;
   text-decoration: none;
-  margin-right: 8px;
+  padding: 4px 0 5px;
+  color: var(--c20);
+  border: 1px solid var(--c85);
+  border-radius: 4px;
+  transition: background-color .15s;
+  cursor: auto;
 }
-
+#actions a:hover {
-#add-style-wrapper {
+  color: var(--cmin);
-  display: flex;
+  border-color: var(--accent-3);
-  align-items: center;
+  background-color: hsla(180, 100%, 30%, .2);
-  flex-wrap: wrap;
 }
-
+#actions svg {
-#add-style-wrapper > * {
+  cursor: auto;
-  /* in case the children are wrapped */
+  fill: var(--c20);
-  margin-bottom: .5rem;
 }
-
+#actions a:hover svg,
-#add-style-as-usercss-wrapper {
+#actions svg:hover {
-  display: flex;
+  fill: var(--cmin);
-  align-items: center;
 }
-
+#actions #write-usercss::before {
-#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
+  margin: 11px 0 0 12px;
-  fill: var(--c65);
-}
-
-#add-style-as-usercss-wrapper input {
-  bottom: 0;
-  margin: auto;
-}
-
-#add-style-as-usercss-wrapper input + svg {
-  bottom: 0;
-  margin: auto;
-  left: 2px;
-}
-
-#injection-order-button {
-  --w: 16px;
-  width: var(--w);
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-}
-#injection-order-button > svg {
   position: absolute;
-  width: var(--w);
+  font-size: 10px;
-  height: var(--w);
+  font-weight: bold;
+  background: none;
+  content: 'UC';
+  letter-spacing: -1px;
+}
+#actions #manage-options-button svg {
+  fill: transparent;
+  stroke: var(--fg);
 }
 
 #installed {
@@ -733,7 +729,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;
 }

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>

popup/popup.css

@@ -65,8 +65,8 @@ body:not(.blocked) .if-blocked,
   font-weight: bold;
 }
 
-.style-name:hover .checker:checked,
+label:hover .checker:checked,
-.style-name:hover .checker {
+label:hover .checker {
   border-color: var(--c30);
   background-color: var(--c80);
 }
@@ -448,15 +448,23 @@ a:hover .svg-icon {
 }
 
 /* 'New style' links */
-
+#write-as {
-#write-style {
+  position: absolute;
-  display: flex;
+  left: var(--outer-padding);
-  flex-direction: row;
-  flex-wrap: wrap;
 }
-
+#newStyleAsUsercss {
-#write-style-for {
+  position: static;
-  margin-right: .6ex
+}
+#newStyleAsUsercss ~ div {
+  font-weight: bold;
+  margin: -2px -1px 0;
+  padding-top: 1px;
+  text-align: center;
+  border-radius: 3px;
+}
+#newStyleAsUsercss:checked ~ div {
+  color: var(--bg);
+  background-color: var(--accent-2);
 }
 
 .write-style-link {
@@ -512,12 +520,12 @@ a:hover .svg-icon {
   display: none;
 }
 
-#write-for-frames {
+#write-for-frames:not([hidden]) {
-  position: absolute;
+  position: relative;
   width: 5px;
   height: 5px;
-  margin-left: -12px;
+  display: inline-block;
-  margin-top: 4px;
+  margin: 0 2px 2px;
   --dash: transparent 2px, currentColor 2px, currentColor 3px, transparent 3px;
   background: linear-gradient(var(--dash)), linear-gradient(90deg, var(--dash));
 }