css part

load css only if monkey is at home
exclude datepicker from font settings so as not to break the width

Author: kulikov-a

manifest.json

@@ -33,7 +33,6 @@
 			 "update.popup.js",
 			 "processTree.popup.js",
 			 "script.js"],
-			"css": ["siemMonkey.css","libs/jquery-ui-1.12.1/jquery-ui.min.monkey.css"],
 			"all_frames": true
         }
     ],
@@ -45,7 +44,7 @@
 		{
 			"resources": [
 			"img/icon128.png",
-	    	"siemMonkey.css",
+			"siemMonkey.css",
 			"customfilters.json",
 			"fieldaliases.json",
 			"xhr_override.js",

popup.css

@@ -26,7 +26,10 @@ body.loading .lds-dual-ring {
     display: block;
 }
 
-* { font-family:Roboto,Helvetica Neue,sans-serif; font-size:10px; }
+:not([class^="ui-datepicker"]) {
+  font-family: Roboto,Helvetica Neue,sans-serif;
+  font-size: 10px;
+}
 
 .parent {
     color: white;

script.js

@@ -125,6 +125,30 @@ function SearchBananas (selectors, callback, interval, timeout) {
   }, interval);
 };
 
+/**
+ * Adopting a constructed stylesheet to be used by the document or ShadowRoots 
+ * @param {*} doc document or ShadowRoot to adopt
+ * @param {*} path CSS file path
+ */
+function adoptCSS(doc, path) {
+  let MonkeyCSS;
+  try {
+    let css_url = chrome.runtime.getURL(path);
+    let xhr = new XMLHttpRequest();
+    xhr.onload = function () {
+      MonkeyCSS = this.response;
+    };
+    xhr.open("GET", css_url, false);
+    xhr.send();
+  } catch (err) {
+    console.log("Не удалось прочитать файл " + path);
+    return;
+  }
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(MonkeyCSS);
+  doc.adoptedStyleSheets = [sheet];
+}
+
 function siemMonkeyBind(product) {
   // Let's set locale and string formats for date/time conversions
   // TODO: add custom locale format to options
@@ -146,6 +170,18 @@ function siemMonkeyBind(product) {
     insertMonkeyIntoUI(product);
   }
 
+  // load CSS in main tree
+  let ui_css_path = chrome.runtime.getURL("libs/jquery-ui-1.12.1/jquery-ui.min.monkey.css");
+  let ui_css_path2 = chrome.runtime.getURL("siemMonkey.css");
+  $('head').append($('<link>')
+    .attr("rel","stylesheet")
+    .attr("type","text/css")
+    .attr("href", ui_css_path));
+  $('head').append($('<link>')
+    .attr("rel","stylesheet")
+    .attr("type","text/css")
+    .attr("href", ui_css_path2));
+
   // Если есть элементы "legacy-overlay" и "legacy-events-page", то мы очутились в 26.1
   // Загружать CSS и вешать обработчик мутаций страницы нужно внутри shadowRoot
   let legacy_overlay = $("legacy-overlay");
@@ -157,27 +193,7 @@ function siemMonkeyBind(product) {
       characterData: true,
       attributes: true,
     });
-    let jquery_ui_css;
-    try {
-      let css_url = chrome.runtime.getURL(
-        "libs/jquery-ui-1.12.1/jquery-ui.min.monkey.css" // using jquery-ui css just with embedded images
-      );
-      let xhr = new XMLHttpRequest();
-      xhr.onload = function () {
-        jquery_ui_css = this.response;
-      };
-      xhr.open("GET", css_url, false);
-      xhr.send();
-    } catch (err) {
-      console.log(
-        "Не удалось прочитать файл libs/jquery-ui-1.12.1/jquery-ui.min.monkey.css"
-      );
-      return;
-    }
-
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(jquery_ui_css);
-    shadowRoot.adoptedStyleSheets = [sheet];
+    adoptCSS(shadowRoot, "libs/jquery-ui-1.12.1/jquery-ui.min.monkey.css"); // using jquery-ui css just with embedded images
   }
 
   let legacy_events_page = $("legacy-events-page");
@@ -189,26 +205,10 @@ function siemMonkeyBind(product) {
       characterData: true,
       attributes: true,
     });
-    let siemMonkeyCSS;
-    try {
-      let css_url = chrome.runtime.getURL("siemMonkey.css");
-      let xhr = new XMLHttpRequest();
-      xhr.onload = function () {
-        siemMonkeyCSS = this.response;
-      };
-      xhr.open("GET", css_url, false);
-      xhr.send();
-    } catch (err) {
-      console.log("Не удалось прочитать файл siemMonkey.css");
-      return;
-    }
-
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(siemMonkeyCSS);
-    shadowRoot.adoptedStyleSheets = [sheet];
+    adoptCSS(shadowRoot, "siemMonkey.css");
   } else {
     // Старый добрый UI до 26.0 включительно - вешаем обработчик мутаций прямо на весь document,
-    // а CSSы уже и так загружены расширением
+    // CSS уже подгружен
     observer.observe(document, {
       childList: true,
       subtree: true,