💄 Improve and refine styles for tooltips

actors/DotUAStylesChild.sys.mjs

@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export class DotUAStylesChild extends JSWindowActorChild {
+	/**
+	 * Loads a stylesheet into the browser frame
+	 * @param {string} uri
+	 */
+	loadSheet(uri) {
+		const { windowUtils } = this.contentWindow;
+
+		try {
+			windowUtils.loadSheetUsingURIString(uri, windowUtils.AGENT_SHEET);
+		} catch (e) {}
+	}
+
+	init() {
+		this.loadSheet("chrome://dot/skin/tooltip.css");
+	}
+
+	handleEvent(event) {
+		switch (event.type) {
+			case "DOMDocElementInserted":
+			case "DOMContentLoaded":
+				this.init();
+				break;
+		}
+	}
+}

actors/moz.build

@@ -12,4 +12,5 @@ FINAL_TARGET_FILES.actors += [
     "DotGeckoCommandsChild.sys.mjs",
     "DotLinkHandlerParent.sys.mjs",
     "DotPopupHandlerParent.sys.mjs",
+    "DotUAStylesChild.sys.mjs",
 ]

components/DotGlue.sys.mjs

@@ -99,6 +99,19 @@ const JSWINDOWACTORS = {
 		allFrames: true
 	},
 
+	DotUAStyles: {
+		child: {
+			esModuleURI: "resource:///actors/DotUAStylesChild.sys.mjs",
+
+			events: {
+				DOMDocElementInserted: { capture: true },
+				DOMContentLoaded: { capture: true }
+			}
+		},
+
+		includeChrome: true
+	},
+
 	LightweightTheme: {
 		child: {
 			esModuleURI: "resource:///actors/LightweightThemeChild.sys.mjs",

themes/shared/browser-shared.css

@@ -37,6 +37,7 @@
 
 /* XUL */
 @import url("chrome://dot/skin/input.css");
+@import url("chrome://dot/skin/tooltip.css");
 
 /* Define LWT variables */
 :root {

themes/shared/jar.inc.mn

@@ -168,4 +168,5 @@
 % override chrome://global/content/commonDialog.css chrome://dot/skin/dialog.css
 
   skin/classic/dot/dialog.css                                  (../shared/xul/dialog.css)
-  skin/classic/dot/input.css                                   (../shared/xul/input.css)
+  skin/classic/dot/input.css                                   (../shared/xul/input.css)
+  skin/classic/dot/tooltip.css                                 (../shared/xul/tooltip.css)

themes/shared/xul/tooltip.css

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+tooltip,
+html|tooltip {
+    appearance: none;
+
+    padding: 8px 10px;
+
+    background-color: InfoBackground;
+    color: InfoText;
+
+    border-radius: 10px;
+    border: 1px solid color-mix(in srgb, currentColor 20%, transparent 100%);
+}