installer: show action buttons for installed styles (#1322)

_locales/en/messages.json

@@ -585,7 +585,7 @@
     "description": "Label for install button"
   },
   "installButtonInstalled": {
-    "message": "Style installed",
+    "message": "Style is installed",
     "description": "Text displayed when the style is successfully installed"
   },
   "installButtonReinstall": {

install-usercss.html

@@ -33,7 +33,7 @@
           <small class="meta-version"></small>
         </h1>
         <div class="actions">
-          <h2 class="installed" i18n-text="installButtonInstalled"></h2>
+          <h2 hidden class="installed" i18n-text="installButtonInstalled"></h2>
           <button class="install" i18n-text="installButton"></button>
           <a class="configure-usercss" i18n-title="configureStyle" tabindex="0">
             <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
@@ -50,6 +50,11 @@
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
             <span i18n-text="liveReloadLabel"></span>
           </label>
+          <p hidden class="installed-actions">
+            <a href="manage.html" tabindex="0"><button i18n-text="openManage"></button></a>
+            <a href="edit.html?id=" tabindex="0"><button i18n-text="editStyleLabel"></button></a>
+            <a id="delete" tabindex="0"><button i18n-text="deleteStyleLabel"></button></a>
+          </p>
         </div>
         <p class="meta-description"></p>
         <div>

install-usercss/install-usercss.css

@@ -213,16 +213,21 @@ h1 small {
   filter: hue-rotate(-18deg) brightness(.7) contrast(2);
 }
 
-.install.installed,
-h2.installed {
+.install.installed {
   display: none;
 }
 
 h2.installed.active {
   display: inline-block;
   font-weight: bold;
-  margin-bottom: 1ex;
   margin-top: 0;
+  color: darkcyan;
+}
+h2.installed.active ~ .configure-usercss svg {
+  fill: hsl(180, 100%, 20%);
+}
+h2.installed.active ~ .configure-usercss:hover svg {
+  fill: hsl(180, 100%, 30%);
 }
 
 .actions label input {

install-usercss/install-usercss.js

@@ -208,6 +208,7 @@ function updateMeta(style, dup = installedDup) {
   setTimeout(() => $$remove('.lds-spinner'), 1000);
   showError('');
   requestAnimationFrame(adjustCodeHeight);
+  if (dup) enablePostActions();
 
   function makeAuthor(text) {
     const match = text.match(/^(.+?)(?:\s+<(.+?)>)?(?:\s+\((.+?)\))?$/);
@@ -298,21 +299,26 @@ function install(style) {
   $('.set-update-url input[type=checkbox]').disabled = true;
   $('.set-update-url').title = style.updateUrl ?
     t('installUpdateFrom', style.updateUrl) : '';
-
+  enablePostActions();
   updateMeta(style);
+}
 
-  if (!liveReload.enabled && !prefs.get('openEditInWindow')) {
-    location.href = '/edit.html?id=' + style.id;
-  } else {
-    API.openEditor({id: style.id});
-    if (!liveReload.enabled) {
+function enablePostActions() {
+  const {id} = installed || installedDup;
+  sessionStorage.justEditedStyleId = id;
+  $('h2.installed').hidden = !installed;
+  $('.installed-actions').hidden = false;
+  $('.installed-actions a[href*="edit.html"]').search = `?id=${id}`;
+  $('#delete').onclick = async () => {
+    if (await messageBox.confirm(t('deleteStyleConfirm'), 'danger center', t('confirmDelete'))) {
+      await API.styles.delete(id);
       if (tabId < 0 && history.length > 1) {
         history.back();
       } else {
         closeCurrentTab();
       }
     }
-  }
+  };
 }
 
 async function getAppliesTo(style) {