Updated loading warnings styling

src/scripts/content.js

@@ -71,9 +71,10 @@ const captureResourceLoadingException = async (url, event) => {
     error.details = event
     SentryReporter.captureException(error)
 
-    setWarning(`Failed to load a resource. Reload the webpage to reload the extension. ${'\n\n'
-      }Or if this happens often, view the error in your browser's DevTools javascript console panel and report it to the developer. ${'\n'
-      }Tip: Look for errors about the url: ${url}`
+    setWarning(`Failed to load a resource. Refresh the webpage to try it again. ${'\n'
+      }This can happen after you have updated the extension. ${'\n\n'
+      }Or if this happens often, view the error in your browser's DevTools javascript console panel. ${'\n'
+      }Tip: Look for errors about this url: ${url}`
     )
   }
 }

src/scripts/injected.js

@@ -1,4 +1,4 @@
-import { on, wrapErrorHandler, isWatchPageUrl, setErrorHandler, watchSelectors, isEmbedPageUrl } from './libs/generic'
+import { on, wrapErrorHandler, isWatchPageUrl, setErrorHandler, watchSelectors, isEmbedPageUrl, setWarning } from './libs/generic'
 import SentryReporter, { getSelectorTreeString, getNodeTreeString, AmbientlightError, ErrorEvents, setVersion, setCrashOptions } from './libs/sentry-reporter'
 import Ambientlight from './libs/ambientlight'
 import { contentScript } from './libs/messaging'
@@ -284,7 +284,10 @@ const loadAmbientlight = async () => {
   try {
     await Settings.getStoredSettingsCached()
   } catch(ex) {
-    console.warn('The settings cannot be precached')
+    setWarning(`Your previous settings cannot be loaded. Refresh the webpage to try it again. ${'\n'
+      }This can happen after you have updated the extension. ${'\n\n'
+      }${ex?.toString()}`
+    )
     console.error(ex)
   }
 

src/scripts/libs/generic.js

@@ -359,13 +359,15 @@ export const setWarning = (text) => {
     elem.style.bottom = 0
     elem.style.padding = '5px 8px'
     elem.style.background = 'rgba(0,0,0,.99)'
-    elem.style.color = '#f80'
+    elem.style.color = '#fff'
     elem.style.border = '1px solid #f80'
+    elem.style.borderTopRightRadius = '3px'
     elem.style.whiteSpace = 'pre-wrap'
-    elem.style.fontSize = '16px'
-    elem.style.lineHeight = '22px'
+    elem.style.fontSize = '15px'
+    elem.style.lineHeight = '20px'
     elem.style.fontFamily = 'sans-serif'
     elem.style.overflowWrap = 'anywhere'
+    elem.style.overflow = 'hidden'
     warningElem = elem
 
     const closeButton = document.createElement('button')
@@ -386,14 +388,22 @@ export const setWarning = (text) => {
     closeButton.addEventListener('click', () => setWarning(''))
     elem.appendChild(closeButton)
 
+    const titleElem = document.createElement('div')
+    titleElem.style.fontWeight = 'bold'
+    titleElem.style.color = '#008cff'
+    titleElem.style.fontSize = '22px'
+    elem.style.lineHeight = '28px'
+    titleElem.textContent = 'Ambient light for YouTube™\n'
+    elem.appendChild(titleElem)
+
     const textElem = document.createElement('div')
     warningElemText = textElem
     elem.appendChild(textElem)
   }
 
   const elem = warningElem
   if(text) {
-    warningElemText.textContent = `Ambient light for YouTube™ warning:\n${text}`
+    warningElemText.textContent = text
     document.documentElement.appendChild(elem)
   } else {
     warningElemText.textContent = ''

src/scripts/libs/settings.js

@@ -54,9 +54,9 @@ export default class Settings {
     names.push('setting-fadeOutEasing')
 
     const warningTimeout = setTimeout(() => setWarning(
-      `It is taking more than 5 seconds to load your settings. ${'\n\n'
-      }Something might be wrong. Have you uninstalled or reinstalled the extension? ${'\n'
-      }Then reload the webpage to reload the extension.`
+      `It is taking more than 5 seconds to load your previous settings. Something might be wrong.${'\n'
+      }Refresh the webpage to try it again. ${'\n\n'
+      }This can happen after you have updated the extension.`
     ), 5000)
     Settings.storedSettingsCached = await contentScript.getStorageEntryOrEntries(names, true) || {}
     clearTimeout(warningTimeout)
@@ -125,7 +125,7 @@ export default class Settings {
     try {
       storedSettings = await Settings.getStoredSettingsCached()
     } catch {
-      this.setWarning('The settings cannot be retrieved, the extension could have been updated.\nRefresh the page to retry again.')
+      this.setWarning('Your previous settings cannot be loaded because the extension could have been updated.\nRefresh the page to retry again.')
     }
 
     const webGLCrash = storedSettings['setting-webGLCrash']