show post-install buttons

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

@@ -1,6 +1,6 @@
 /* global $ $create $createLink $$remove showSpinner */// dom.js
 /* global API */// msg.js
-/* global deepEqual */// toolbox.js
+/* global closeCurrentTab deepEqual */// toolbox.js
 /* global messageBox */
 /* global prefs */
 /* global preinit */
@@ -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,10 +299,28 @@ function install(style) {
   $('.set-update-url input[type=checkbox]').disabled = true;
   $('.set-update-url').title = style.updateUrl ?
     t('installUpdateFrom', style.updateUrl) : '';
-
+  enablePostActions();
   updateMeta(style);
 }
 
+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) {
   if (style.sectionsPromise) {
     try {