fix edge case in migration; update manifest to version 3

src/background/migrate/__tests__/migrate-old-format.test.js

@@ -31,7 +31,7 @@ describe('MigrateOldFormat', () => {
       expect(mockSet).toHaveBeenCalledTimes(0);
     });
 
-    it('returns styles as is when they are already in the new format', async () => {
+    it('returns styles as is when they are in the new format', async () => {
       const mockSet = jest.fn((_, callback) => callback());
       const mockGet = (_, callback) => {
         callback({ styles: newFormat });
@@ -43,6 +43,26 @@ describe('MigrateOldFormat', () => {
       expect(mockSet).toHaveBeenCalledTimes(0);
     });
 
+    it('returns styles as is when they are in the new format (with empty css)', async () => {
+      const newFormatWithEmptyCss = {
+        'www.google.com': {
+          css: '',
+          enabled: false,
+          readability: false,
+        },
+      };
+
+      const mockSet = jest.fn((_, callback) => callback());
+      const mockGet = (_, callback) => {
+        callback({ styles: newFormatWithEmptyCss });
+      };
+      mockChromeAPI(mockGet, mockSet);
+
+      const styles = await getMigratedStyles();
+      expect(styles).toEqual(newFormatWithEmptyCss);
+      expect(mockSet).toHaveBeenCalledTimes(0);
+    });
+
     it('backs up v2 styles to "backup_v2_styles"', async () => {
       const mockSet = jest.fn((_, callback) => callback());
       const mockGet = (_, callback) => {

src/background/migrate/migrate-old-format.ts

@@ -5,7 +5,7 @@ import { Style, StyleMap, StylebotOptions } from '@stylebot/types';
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const isNewFormat = (styles: any) => {
   const urls: Array<string> = Object.keys(styles);
-  return !!urls.find(url => !!styles[url].css);
+  return !!urls.find(url => styles[url].css !== undefined);
 };
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -20,28 +20,28 @@ const backupV2Styles = (styles: any) => {
 export const getMigratedStyles = (): Promise<StyleMap> => {
   return new Promise(resolve => {
     chrome.storage.local.get('styles', async items => {
-      const oldStyles = items['styles'];
+      const styles = items['styles'];
 
-      if (!oldStyles) {
+      if (!styles) {
         resolve({});
         return;
       }
 
-      // test to ensure styles are not already in the new format
-      if (isNewFormat(oldStyles)) {
-        resolve(oldStyles);
+      // check if styles are in the new format
+      if (isNewFormat(styles)) {
+        resolve(styles);
         return;
       }
 
       // backup old styles, in case we run into a bug
-      await backupV2Styles(oldStyles);
+      await backupV2Styles(styles);
 
       const formatter = new LegacyCssFormatter();
-      const urls: Array<string> = Object.keys(oldStyles);
+      const urls: Array<string> = Object.keys(styles);
 
       const results: Array<Promise<Style>> = urls.map(
         async (url): Promise<Style> => {
-          const style = oldStyles[url];
+          const style = styles[url];
 
           return new Promise(resolveStyle => {
             try {
@@ -67,13 +67,13 @@ export const getMigratedStyles = (): Promise<StyleMap> => {
       );
 
       Promise.all(results).then(formattedStyles => {
-        const styles: StyleMap = {};
+        const newStyles: StyleMap = {};
 
         formattedStyles.forEach(({ url, css, enabled, readability }) => {
-          styles[url] = { css, enabled, readability };
+          newStyles[url] = { css, enabled, readability };
         });
 
-        resolve(styles);
+        resolve(newStyles);
       });
     });
   });

src/editor/components/header/TheDeleteStyleDialog.vue

@@ -51,6 +51,7 @@ export default Vue.extend({
   height: 100%;
   overflow: hidden;
   outline: 0;
+  line-height: 24px;
   background: #000000b3;
 }
 

src/extension/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 2,
   "name": "Stylebot",
-  "version": "2.4.1",
-  "description": "Change the appearance of websites instantly.",
+  "version": "3",
+  "description": "Change the appearance of the web instantly",
 
   "background": {
     "scripts": ["background/index.js"]