use details to toggle action's captions

manage.html

@@ -148,37 +148,6 @@
   <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>
@@ -292,6 +261,42 @@
       </div>
     </div>
 
+    <div class="settings-column">
+      <details id="actions-toggle" data-pref="manage.actions.expanded">
+        <summary><h2 i18n="optionsActions"></h2></summary>
+      </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">
       <details id="backup" data-pref="manage.backup.expanded">
         <summary>

manage/manage.css

@@ -55,10 +55,6 @@ a:hover {
   z-index: 9;
 }
 
-#update-all {
-  margin-bottom: .5rem;
-}
-
 #check-all-updates {
   max-width: calc(100% - 30px);
 }
@@ -69,8 +65,7 @@ a:hover {
 }
 
 #header h1 {
-  margin-top: 0;
+  margin: 0;
-  margin-bottom: .3em;
 }
 
 #actions {
@@ -94,8 +89,7 @@ a:hover {
 }
 #actions a:hover {
   color: var(--cmin);
-  border-color: var(--accent-3);
+  background-color: hsla(0, 0%, 50%, .2);
-  background-color: hsla(180, 100%, 30%, .2);
 }
 #actions svg {
   cursor: auto;
@@ -118,6 +112,34 @@ a:hover {
   fill: transparent;
   stroke: var(--fg);
 }
+#actions-toggle:not([open]) {
+  position: absolute;
+  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 {
   position: relative;

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);