feat(ui): Isolate rikaikun popup from host page via shadow DOM and `a…

…ll: revert` (#933)

* feat(ui): Isolate rikaikun popup from host page via shadow Dom and `all: revert`

- Creates a div inside of shadow root to contain all styles and modifications.
- Updates CSS to use `all: revert` instead of previous adhoc reset.
- Installs CSS directly into the shadow DOM as per best practices.
- Fallsback to `all: initial` for older Chrome browsers.
- Removes special check for text files since chrome renders them as normal HTML pages.

Fixes #221

extension/css/popup.css

@@ -1,5 +1,5 @@
 /* Theme definitions */
-#rikaichan-window[data-theme='blue'] {
+#rikaikun-shadow[data-theme='blue'] {
   --primary-color: #fff;
   --primary-background-color: #5c73b8;
   --kanji-color: #b7e7ff;
@@ -13,7 +13,7 @@
   --data-alternate-color: #b7e7ff;
 }
 
-#rikaichan-window[data-theme='lightblue'] {
+#rikaikun-shadow[data-theme='lightblue'] {
   --primary-color: #000;
   --primary-background-color: #e6f4ff;
   --kanji-color: #3082bf;
@@ -27,7 +27,7 @@
   --data-alternate-color: #003d6b;
 }
 
-#rikaichan-window[data-theme='black'] {
+#rikaikun-shadow[data-theme='black'] {
   --primary-color: #fff;
   --primary-background-color: #000;
   --kanji-color: #7070e0;
@@ -41,7 +41,7 @@
   --data-alternate-color: #f0f0f0;
 }
 
-#rikaichan-window[data-theme='yellow'] {
+#rikaikun-shadow[data-theme='yellow'] {
   --primary-color: #000;
   --primary-background-color: #ffffbf;
   --kanji-color: #7070e0;
@@ -57,32 +57,31 @@
 
 /* End theme definitions */
 
-/* this is to reset almost everything under the popup to a sane value */
-#rikaichan-window,
-#rikaichan-window * {
-  background: transparent;
-  border: none !important;
-  border-spacing: 0;
-  color: var(--primary-color);
-  font: normal 14px sans-serif;
-  height: auto;
-  letter-spacing: normal;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  word-spacing: normal;
-}
-
-#rikaichan-window {
+/* In quirks mode, table color is reset to black as per Chrome so reset
+   it to inherit properly here. */
+table {
+  color: inherit;
+}
+
+#rikaikun-shadow {
+  all: initial;
+}
+
+/* Supported starting in Chrome 84 */
+@supports (all: revert) {
+  #rikaikun-shadow {
+    all: revert;
+  }
+}
+
+/* Need duplicate selector for gracefully handling reset. */
+/* stylelint-disable-next-line no-duplicate-selectors */
+#rikaikun-shadow {
   background: var(--primary-background-color);
   border: 1px solid #d0d0d0 !important;
   border-radius: 5px;
+  color: var(--primary-color);
+  font: normal 14px sans-serif;
   left: 5px;
   min-width: 100px;
   padding: 4px;
@@ -94,92 +93,92 @@
 
 /* used for word definitions */
 
-#rikaichan-window .w-kanji {
+.w-kanji {
   color: var(--kanji-color);
   font-size: 18px;
   margin-right: 0.7em;
 }
 
-#rikaichan-window .w-kana {
+.w-kana {
   color: var(--kana-color);
   font-size: 18px;
 }
 
-#rikaichan-window .w-conj {
+.w-conj {
   color: var(--conjugation-color);
   font-size: 12px;
 }
 
-#rikaichan-window .w-def {
+.w-def {
   font-size: 13px;
 }
 
-#rikaichan-window .w-title {
+.w-title {
   background: var(--title-background-color);
   color: var(--primary-color);
   font-size: 10px;
   padding: 2px;
 }
 
-#rikaichan-window .w-na-tb td {
+.w-na-tb td {
   padding-right: 0.8em;
   vertical-align: top;
 }
 
 /* used for kanji information */
 
-#rikaichan-window .k-main-tb {
+.k-main-tb {
   width: 300px;
 }
 
-#rikaichan-window .k-kanji {
+.k-kanji {
   color: var(--kanji-color);
   font-family: serif;
   font-size: 48px;
 }
 
-#rikaichan-window .k-eigo {
+.k-eigo {
   font-size: 12px;
 }
 
 /* kanji: readings */
 
-#rikaichan-window .k-yomi {
+.k-yomi {
   color: var(--kana-color);
   font-size: 14px;
   margin: 4px 0;
 }
 
-#rikaichan-window .k-yomi-hi {
+.k-yomi-hi {
   border: 1px solid red;
   color: var(--kanji-readings-highlight-color);
 }
 
-#rikaichan-window .k-yomi-ti {
+.k-yomi-ti {
   color: var(--primary-color);
   font-size: 11px;
 }
 
 /* kanji radical, grade, freq, strokes box */
 
-#rikaichan-window .k-abox-tb {
+.k-abox-tb {
   clear: right;
   float: right;
   margin-bottom: 4px;
   width: 120px;
 }
 
-#rikaichan-window .k-abox-r,
-#rikaichan-window .k-abox-s {
+.k-abox-r,
+.k-abox-s {
   background: var(--data-background-color);
   color: var(--data-color);
   font-size: 12px;
   padding: 1px 4px;
   text-align: center;
 }
 
-#rikaichan-window .k-abox-g,
-#rikaichan-window .k-abox-f {
+.k-abox-g,
+.k-abox-f {
   background: var(--data-background-alternate-color);
   color: var(--data-alternate-color);
   font-size: 12px;
@@ -189,25 +188,25 @@
 
 /* kanji components box */
 
-#rikaichan-window .k-bbox-tb {
+.k-bbox-tb {
   clear: right;
   float: right;
   margin-bottom: 4px;
   width: 120px;
 }
 
 /* Two sets of colors for separating rows */
-#rikaichan-window .k-bbox-0a,
-#rikaichan-window .k-bbox-0b {
+.k-bbox-0a,
+.k-bbox-0b {
   background: var(--data-background-color);
   color: var(--data-color);
   font-size: 11px;
   padding: 1px 3px;
   vertical-align: top;
 }
 
-#rikaichan-window .k-bbox-1a,
-#rikaichan-window .k-bbox-1b {
+.k-bbox-1a,
+.k-bbox-1b {
   background: var(--data-background-alternate-color);
   color: var(--data-alternate-color);
   font-size: 11px;
@@ -217,35 +216,35 @@
 
 /* kanji: misc index */
 
-#rikaichan-window .k-mix-tb {
+.k-mix-tb {
   width: 100%;
 }
 
-#rikaichan-window .k-mix-td0 {
+.k-mix-td0 {
   background: var(--data-background-color);
   color: var(--data-color);
   font-size: 12px;
 }
 
-#rikaichan-window .k-mix-td1 {
+.k-mix-td1 {
   background: var(--data-background-alternate-color);
   color: var(--data-alternate-color);
   font-size: 12px;
 }
 
-#rikaichan-window .q-w {
+.q-w {
   /* unused */
   border-right: 1px dotted #b0b0b0 !important;
   min-width: 300px;
   padding: 0 2px;
   vertical-align: top;
 }
 
-#rikaichan-window .q-k {
+.q-k {
   padding: 0 2px;
   vertical-align: top;
 }
 
-#rikaichan-window .small-info {
+.small-info {
   font: small-caption;
 }