Defer showing changelog untill browser restart. Make changelog easier to identify with the extension (better title, logo) (#1233)

* Deferr showing changelog untill browser restart.

Make changelog easier to identify with the extension (better title, logo)

* Deferr showing changelog untill browser restart.

Make changelog easier to identify with the extension (better title, logo)

Extensions/combined/_locales/az/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "İcmadan soruş"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike loqosu"
   }
 }

Extensions/combined/_locales/cs/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Zeptejte se komunity"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logo Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/de/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Frag die Community"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike-Logo"
   }
 }

Extensions/combined/_locales/el/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Ρωτήστε την κοινότητα"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Λογότυπο Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/en/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Ask the community"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike logo"
   }
 }

Extensions/combined/_locales/es/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Pregunta a la comunidad"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logotipo de Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/fr/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Demander à la communauté"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logo de Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/hu/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Kérdezd meg a közösséget"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike logója"
   }
 }

Extensions/combined/_locales/id/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Tanyakan pada komunitas"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logo Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/it/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Chiedi alla community"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logo Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/ja/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "コミュニティに質問する"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike のロゴ"
   }
 }

Extensions/combined/_locales/ko/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "커뮤니티에 물어보세요"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike 로고"
   }
 }

Extensions/combined/_locales/nl/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Vraag het aan de gemeenschap"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike-logo"
   }
 }

Extensions/combined/_locales/pl/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Zapytaj społeczność"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logo Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/pt_BR/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Pergunte à comunidade"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logo do Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/ru/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Спросить сообщество"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Логотип Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/sv_SE/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Fråga samhället"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike-logotyp"
   }
 }

Extensions/combined/_locales/tr/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Topluluğa sorun"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike logosu"
   }
 }

Extensions/combined/_locales/uk/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Запитайте у спільноти"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Логотип Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/vi/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "Hỏi cộng đồng"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Logo Return YouTube Dislike"
   }
 }

Extensions/combined/_locales/zh_CN/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "询问社区"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike 标志"
   }
 }

Extensions/combined/_locales/zh_TW/messages.json

@@ -535,5 +535,8 @@
   },
   "changelog_support_contact": {
     "message": "詢問社區"
+  },
+  "changelog_brand_logo_alt": {
+    "message": "Return YouTube Dislike 標誌"
   }
 }

Extensions/combined/changelog/4/changelog.css

@@ -59,6 +59,49 @@ body {
   gap: 1.25rem;
 }
 
+.ryd-changelog__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  background: rgba(15, 23, 42, 0.6);
+  border-radius: 999px;
+  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
+  align-self: flex-start;
+  border: 1px solid rgba(255, 66, 77, 0.2);
+  box-shadow: 0 12px 30px rgba(255, 66, 77, 0.22);
+}
+
+.ryd-changelog__brand-logo {
+  display: block;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4), transparent 55%);
+  padding: 0.35rem;
+  box-sizing: border-box;
+  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
+}
+
+.ryd-changelog__brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.ryd-changelog__brand-name {
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.ryd-changelog__brand-label {
+  font-size: 0.85rem;
+  color: var(--ryd-text-secondary);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
 .ryd-changelog__badge {
   display: inline-flex;
   align-self: flex-start;
@@ -188,6 +231,27 @@ body {
   .ryd-feature-grid {
     gap: clamp(1.5rem, 6vw, 2rem);
   }
+
+  .ryd-changelog__brand {
+    gap: 0.65rem;
+    padding: 0.3rem 0.75rem 0.3rem 0.3rem;
+  }
+
+  .ryd-changelog__brand-logo {
+    width: 48px;
+    height: 48px;
+  }
+}
+
+@media (max-width: 480px) {
+  .ryd-changelog__brand-name {
+    font-size: 0.95rem;
+  }
+
+  .ryd-changelog__brand-label {
+    font-size: 0.75rem;
+    letter-spacing: 0.06em;
+  }
 }
 
 .ryd-feature-card {

Extensions/combined/changelog/4/changelog_4.0.html

@@ -15,6 +15,19 @@
   <body>
     <div class="ryd-changelog">
       <header class="ryd-changelog__hero">
+        <div class="ryd-changelog__brand">
+          <img
+            class="ryd-changelog__brand-logo"
+            src="../../icons/logo.svg"
+            alt="__MSG_changelog_brand_logo_alt__"
+            width="56"
+            height="56"
+          />
+          <div class="ryd-changelog__brand-text">
+            <span class="ryd-changelog__brand-name">__MSG_extensionName__</span>
+            <span class="ryd-changelog__brand-label">__MSG_changelog_title__</span>
+          </div>
+        </div>
         <div class="ryd-changelog__badge">__MSG_changelog_badge__</div>
         <h1 class="ryd-changelog__title">__MSG_changelog_heading__</h1>
         <p class="ryd-changelog__subtitle">__MSG_changelog_subheading__</p>

Extensions/combined/ryd.background.js

@@ -5,6 +5,7 @@ const voteDisabledIconName = config.voteDisabledIconName;
 const defaultIconName = config.defaultIconName;
 let api;
 const CHANGELOG_STORAGE_KEY = "lastShownChangelogVersion";
+const PENDING_CHANGELOG_STORAGE_KEY = "pendingChangelogVersion";
 
 /** stores extension's global config */
 let extConfig = { ...config.defaultExtConfig };
@@ -251,9 +252,76 @@ function openChangelogTab(version) {
   }
 }
 
+function scheduleChangelogVersion(version) {
+  const storage = api?.storage?.local;
+  if (!storage || typeof storage.set !== "function") {
+    return false;
+  }
+  try {
+    const valueToStore = version || true;
+    storage.set({ [PENDING_CHANGELOG_STORAGE_KEY]: valueToStore }, () => {
+      if (api.runtime.lastError) {
+        console.debug("Failed to persist pending changelog version:", api.runtime.lastError.message);
+      }
+    });
+    return true;
+  } catch (error) {
+    console.debug("Storage set failed for pending changelog version", error);
+    return false;
+  }
+}
+
+function clearPendingChangelogVersion() {
+  const storage = api?.storage?.local;
+  if (!storage || typeof storage.remove !== "function") {
+    return;
+  }
+  try {
+    storage.remove(PENDING_CHANGELOG_STORAGE_KEY, () => {
+      if (api.runtime.lastError) {
+        console.debug("Failed to clear pending changelog version:", api.runtime.lastError.message);
+      }
+    });
+  } catch (error) {
+    console.debug("Storage remove failed for pending changelog version", error);
+  }
+}
+
+function showPendingChangelogIfNeeded() {
+  const storage = api?.storage?.local;
+  if (!storage || typeof storage.get !== "function") {
+    return;
+  }
+
+  try {
+    storage.get([PENDING_CHANGELOG_STORAGE_KEY, CHANGELOG_STORAGE_KEY], (result) => {
+      if (api.runtime.lastError) {
+        console.debug("Changelog storage read failed:", api.runtime.lastError.message);
+        return;
+      }
+
+      const pendingValue = result?.[PENDING_CHANGELOG_STORAGE_KEY];
+      if (pendingValue === undefined || pendingValue === null || pendingValue === "") {
+        return;
+      }
+
+      const lastShownValue = result?.[CHANGELOG_STORAGE_KEY];
+      if (lastShownValue !== undefined && lastShownValue !== null && lastShownValue !== "") {
+        clearPendingChangelogVersion();
+        return;
+      }
+
+      openChangelogTab(typeof pendingValue === "string" ? pendingValue : null);
+    });
+  } catch (error) {
+    console.debug("Storage get failed for pending changelog version", error);
+  }
+}
+
 function persistChangelogVersion(version) {
   const storage = api?.storage?.local;
   if (!storage || typeof storage.set !== "function") {
+    clearPendingChangelogVersion();
     return;
   }
   try {
@@ -261,7 +329,9 @@ function persistChangelogVersion(version) {
     storage.set({ [CHANGELOG_STORAGE_KEY]: valueToStore }, () => {
       if (api.runtime.lastError) {
         console.debug("Failed to persist changelog version:", api.runtime.lastError.message);
+        return;
       }
+      clearPendingChangelogVersion();
     });
   } catch (error) {
     console.debug("Storage set failed for changelog version", error);
@@ -285,6 +355,7 @@ function maybeShowChangelog(details) {
   const manifest = api.runtime.getManifest();
   const currentVersion = manifest?.version;
   const storage = api?.storage?.local;
+  const isInstall = reason === "install";
 
   const showChangelog = () => {
     openChangelogTab(currentVersion || null);
@@ -296,19 +367,41 @@ function maybeShowChangelog(details) {
   }
 
   try {
-    storage.get(CHANGELOG_STORAGE_KEY, (result) => {
+    storage.get([CHANGELOG_STORAGE_KEY, PENDING_CHANGELOG_STORAGE_KEY], (result) => {
       if (api.runtime.lastError) {
         console.debug("Changelog storage read failed:", api.runtime.lastError.message);
         showChangelog();
         return;
       }
 
+      const hasStoredValue = (value) => value !== undefined && value !== null && value !== "";
       const lastShownValue = result?.[CHANGELOG_STORAGE_KEY];
-      if (lastShownValue !== undefined && lastShownValue !== null && lastShownValue !== "") {
+      const pendingValue = result?.[PENDING_CHANGELOG_STORAGE_KEY];
+
+      if (isInstall) {
+        if (hasStoredValue(pendingValue)) {
+          clearPendingChangelogVersion();
+        }
+        if (!hasStoredValue(lastShownValue)) {
+          showChangelog();
+        }
         return;
       }
 
+      if (hasStoredValue(lastShownValue)) {
+        return;
+      }
+
+      if (hasStoredValue(pendingValue)) {
+        if (currentVersion && pendingValue !== currentVersion) {
+          scheduleChangelogVersion(currentVersion);
+        }
+        return;
+      }
+
+      if (!scheduleChangelogVersion(currentVersion || null)) {
         showChangelog();
+      }
     });
   } catch (error) {
     console.debug("Storage get failed for changelog version", error);
@@ -320,6 +413,12 @@ api.runtime.onInstalled.addListener((details) => {
   maybeShowChangelog(details);
 });
 
+if (api?.runtime?.onStartup && typeof api.runtime.onStartup.addListener === "function") {
+  api.runtime.onStartup.addListener(() => {
+    showPendingChangelogIfNeeded();
+  });
+}
+
 // api.storage.sync.get(['lastShowChangelogVersion'], (details) => {
 //   if (extConfig.showUpdatePopup === true &&
 //     details.lastShowChangelogVersion !== chrome.runtime.getManifest().version