From 3dc684f85ffd7f74a79868016e900ce2ba7cc491 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 19 Nov 2020 23:54:28 +0300
Subject: [PATCH] reduce usercss bubble to `UC` + tweak CSS

* remove 'disabled' bubble
* simplify .style-info
* fix double padding between version and UC
* match manager's font-weight for disabled styles in popup
---
 manage/manage.css | 63 ++++++++++++++---------------------------------
 manage/manage.js  | 13 +++++-----
 popup/popup.css   |  4 +++
 3 files changed, 28 insertions(+), 52 deletions(-)

diff --git a/manage/manage.css b/manage/manage.css
index e0028a6e..d15ffa57 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -178,20 +178,6 @@ a:hover {
   text-decoration: none;
 }
 
-.style-info {
-  text-align: right;
-  padding: 0 .25em;
-  font-weight: normal;
-  color: #999;
-}
-.style-info[data-type=version] {
-  color: #666;
-  padding-left: .5em;
-}
-.newUI .style-info[data-type=version][data-value="1.0.0"] {
-  display: none;
-}
-
 .applies-to {
   overflow-wrap: break-word;
 }
@@ -243,40 +229,17 @@ a:hover {
   display: none;
 }
 
-.newUI .style-name::after,
-.newUI .style-name-link::after {
-  vertical-align: text-top;
-}
-
-.disabled h2::after {
-  content: var(--genericDisabledLabel);
-}
-.disabled h2::after,
 .entry.usercss .style-name-link::after {
-  font-weight: normal;
   font-size: 11px;
-  text-transform: lowercase;
-  background: rgba(128, 128, 128, .2);
-  padding: 2px 5px 3px;
   border-radius: 4px;
   margin-left: 1ex;
   white-space: nowrap;
-  position: relative;
-  top: -2px;
-}
-.newUI .disabled h2::after,
-.newUI .entry.usercss .style-name-link::after {
-  top: 2px;
-}
-
-.entry.usercss .style-name-link::after {
-  content: "usercss";
-  background-color: hsla(180, 100%, 20%, 1);
-  color: white;
+  content: "UC";
+  background-color: hsla(180, 35%, 50%, .35);
+  padding: 2px 3px;
 }
 
 .disabled h2 .style-name-link,
-.disabled h2::after,
 .disabled .actions,
 .disabled .applies-to {
   opacity: 0.6;
@@ -376,14 +339,25 @@ a:hover {
   vertical-align: middle;
 }
 
-.newUI .entry > .style-info {
-  padding-right: 1em;
-}
-
 .newUI .entry .actions {
   position: relative;
 }
 
+.style-info[data-type=version] {
+  color: #666;
+  padding-left: .5em;
+  font-weight: normal;
+}
+.newUI .style-info[data-type=version][data-value=""],
+.newUI .style-info[data-type=version][data-value="1.0.0"] {
+  display: none;
+}
+.newUI .entry .style-info[data-type=age] {
+  color: #999;
+  text-align: right;
+  padding-right: 1em;
+}
+
 /************ checkbox & select************/
 
 .newUI .checker {
@@ -1175,7 +1149,6 @@ a:hover {
     padding-right: 0;
   }
 
-  .newUI .style-name::after,
   .newUI .style-name-link::after {
     text-indent: 0;
     display: inline-block;
diff --git a/manage/manage.js b/manage/manage.js
index d21ef8e1..c331af63 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -96,7 +96,6 @@ const handleEvent = {};
   // translate CSS manually
   document.styleSheets[0].insertRule(
     `:root {${[
-      'genericDisabledLabel',
       'updateAllCheckSucceededSomeEdited',
       'filteredStylesAllHidden',
     ].map(id => `--${id}:"${CSS.escape(t(id))}";`).join('')
@@ -555,12 +554,12 @@ Object.assign(handleEvent, {
   },
 
   addEntryTitle(link) {
-    const entry = link.closest('.entry');
-    link.title = [
-      {prop: 'installDate', name: 'dateInstalled'},
-      {prop: 'updateDate', name: 'dateUpdated'},
-    ].map(({prop, name}) =>
-      t(name) + ': ' + (t.formatDate(entry.styleMeta[prop]) || '—')).join('\n');
+    const style = link.closest('.entry').styleMeta;
+    const ucd = style.usercssData;
+    link.title =
+      `${t('dateInstalled')}: ${t.formatDate(style.installDate) || '—'}\n` +
+      `${t('dateUpdated')}: ${t.formatDate(style.updateDate) || '—'}\n` +
+      (ucd ? `UserCSS, v.${ucd.version}` : '');
   },
 });
 
diff --git a/popup/popup.css b/popup/popup.css
index 531d6f77..68bcab31 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -221,6 +221,10 @@ html[style] .entry-content {
   opacity: 1;
 }
 
+.entry.disabled .style-name {
+  font-weight: normal;
+}
+
 .entry .main-controls {
   height: 100%;
   display: inline-flex;