Merge pull request #631 from jonathanKingston/different-display-of-notice

Fix different display in content warning notice. Fixes #630

webextension/css/content.css

@@ -1,8 +1,10 @@
 .container-notification {
   background: #33f70c;
   color: #003f07;
-  display: block;
+  display: flex;
+  font: 12px sans-serif;
   inline-size: 100vw;
+  justify-content: start;
   offset-block-start: 0;
   offset-inline-start: 0;
   padding-block-end: 8px;
@@ -10,6 +12,7 @@
   padding-inline-end: 8px;
   padding-inline-start: 8px;
   position: fixed;
+  text-align: start;
   transform: translateY(-100%);
   transition: transform 0.3s cubic-bezier(0.07, 0.95, 0, 1) 0.3s;
   z-index: 999999999999;
@@ -17,6 +20,7 @@
 
 .container-notification img {
   block-size: 16px;
+  display: inline-block;
   inline-size: 16px;
   margin-inline-end: 3px;
 }

webextension/js/content-script.js

@@ -16,17 +16,6 @@ async function doAnimation(element, property, value) {
     });
   });
 }
-/*
-async function awaitEvent(eventName) {
-  return new Promise((resolve) => {
-    const handler = () => {
-      resolve();
-      divElement.removeEventListener(eventName, handler);
-    };
-    divElement.addEventListener(eventName, handler);
-  });
-}
-*/
 
 async function addMessage(message) {
   const divElement = document.createElement("div");

webextension/manifest.json

@@ -59,7 +59,8 @@
     {
       "matches": ["<all_urls>"],
       "js": ["js/content-script.js"],
-      "css": ["css/content.css"]
+      "css": ["css/content.css"],
+      "run_at": "document_start"
     }
   ],