Highlight updated/saved style in manage page

backup/fileSaveLoad.js

@@ -59,7 +59,7 @@ function importFromString(jsonString) {
       const nextStyle = json.shift();
       if (nextStyle) {
         saveStyle(nextStyle, {notify: false}).then(style => {
-          handleUpdate(style);
+          handleUpdate(style, {reason: 'import'});
           setTimeout(proceed, 0);
         });
       } else {

manage.css

@@ -42,7 +42,7 @@ a.homepage {
 
 .entry {
   margin: 0;
-  padding: 1.25em 2em 1.5em;
+  padding: 1.25em 2em;
   border-top: 1px solid #ddd;
 }
 
@@ -71,6 +71,11 @@ a.homepage {
   color: inherit;
 }
 
+.style-name-link:hover {
+  text-decoration: underline;
+  color: black;
+}
+
 .applies-to {
   word-break: break-word;
 }
@@ -81,6 +86,19 @@ a.homepage {
   margin-bottom: 0;
 }
 
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.actions > * {
+  margin-bottom: .25rem;
+}
+
+.actions > *:not(:last-child) {
+  margin-right: .25rem;
+}
+
 .applies-to > :first-child {
   margin-right: .5ex;
 }
@@ -160,6 +178,20 @@ a.homepage {
   display: none;
 }
 
+/* highlight updated/added styles */
+.highlight {
+  animation: highlight 10s cubic-bezier(0,.82,.47,.98);
+}
+
+@keyframes highlight {
+  from {
+    background-color: rgba(128, 128, 128, .5);
+  }
+  to {
+    background-color: none;
+  }
+}
+
 .hidden {
   display: none
 }

manage.html

@@ -7,7 +7,7 @@
 
   <template data-id="style">
     <div class="entry">
-      <h2 class="style-name"><a href="edit.html?id="></a></h2>
+      <h2 class="style-name"><a class="style-name-link" href="edit.html?id="></a></h2>
       <p class="applies-to"><span></span></p>
       <p class="actions">
         <a class="style-edit-link" href="edit.html?id=">

manage.js

@@ -232,6 +232,11 @@ class EntryOnClick {
 function handleUpdate(style, {reason} = {}) {
   const element = createStyleElement(style);
   const oldElement = $(`[style-id="${style.id}"]`, installed);
+  element.addEventListener('animationend', function _() {
+    element.removeEventListener('animationend', _);
+    element.classList.remove('highlight');
+  });
+  element.classList.add('highlight');
   if (!oldElement) {
     installed.appendChild(element);
   } else {
@@ -241,8 +246,11 @@ function handleUpdate(style, {reason} = {}) {
       $('.update-note', element).innerHTML = t('updateCompleted');
     }
   }
-  // align to the bottom of the visible area if wasn't visible
-  element.scrollIntoView(false);
+  // align to the top/bottom of the visible area if wasn't visible
+  const bounds = element.getBoundingClientRect();
+  if (bounds.top < 0 || bounds.top > innerHeight - bounds.height) {
+    element.scrollIntoView(bounds.top < 0 );
+  }
 }