🔨 Add full compatibility with DevTools and RDM to browser frame

Author: kierandrewett

base/content/browser-compat.js

@@ -79,11 +79,27 @@ var gBrowser = {
 		return gDot.tabs.getTabForWebContents(browser);
 	},
 
+	/**
+	 * @param {BrowserTab} tab
+	 * @returns {ChromeBrowser}
+	 */
+	getBrowserForTab(tab) {
+		return tab.linkedBrowser;
+	},
+
 	/**
 	 * @param {ChromeBrowser} browser
 	 * @returns {HTMLElement}
 	 */
 	getBrowserContainer(browser) {
+		return this.getPanel(browser).querySelector("browser-web-container");
+	},
+
+	/**
+	 * @param {ChromeBrowser} browser
+	 * @returns {HTMLElement}
+	 */
+	getPanel(browser) {
 		const tab = gDot.tabs.getTabForWebContents(browser);
 		return tab.webContentsPanel;
 	},

base/content/browser-elements.js

@@ -21,6 +21,7 @@ let elements = {
 	"browser-status": "chrome://dot/content/widgets/browser-status.js",
 	"browser-tabs": "chrome://dot/content/widgets/browser-tabs.js",
 	"browser-tabs-collator": "chrome://dot/content/widgets/browser-tabs-collator.js",
+    "browser-web-container": "chrome://dot/content/widgets/browser-web-container.js",
     "browser-web-frame": "chrome://dot/content/widgets/browser-web-frame.js",
 	"browser-web-panel": "chrome://dot/content/widgets/browser-web-panel.js",
 	"browser-window-controls": "chrome://dot/content/widgets/browser-window-controls.js",

components/tabs/BrowserTabs.sys.mjs

@@ -850,13 +850,18 @@ BrowserTabs.prototype = {
 		const panelId = this._generateUniquePanelID();
 		panel.id = panelId;
 
+		const container = this._win.document.createElement(
+			"browser-web-container"
+		);
+
 		const frame = this._win.document.createElement("browser-web-frame");
 
 		tab.webContents.classList.add("browser-web-contents");
 		frame.appendChild(tab.webContents);
 		tab._webContentsPanelId = panelId;
 
-		panel.appendChild(frame);
+		container.appendChild(frame);
+		panel.appendChild(container);
 		this._tabpanelBoxEl.appendChild(panel);
 
 		if (this._isWebContentsBrowserElement(tab.webContents)) {

components/tabs/content/browser-web-container.js

@@ -0,0 +1,26 @@
+/* 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/. */
+
+class BrowserWebContainer extends MozHTMLElement {
+	constructor() {
+		super();
+	}
+
+	get webContents() {
+		return this.querySelector(".browser-web-contents");
+	}
+
+	connectedCallback() {
+		if (this.delayConnectedCallback()) return;
+
+		// Needed for compatibility with external modules like DevTools
+		this.classList.add("browserContainer");
+	}
+
+	disconnectedCallback() {
+		if (this.delayConnectedCallback()) return;
+	}
+}
+
+customElements.define("browser-web-container", BrowserWebContainer);

components/tabs/content/browser-web-frame.js

@@ -14,6 +14,9 @@ class BrowserWebFrame extends MozHTMLElement {
 	connectedCallback() {
 		if (this.delayConnectedCallback()) return;
 
+		// Needed for compatibility with external modules like DevTools
+		this.classList.add("browserStack");
+
 		this.appendChild(html("browser-status"));
 		this.appendChild(html("browser-modals"));
 	}

components/tabs/content/browser-web-panel.css

@@ -3,11 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 browser-web-panel {
+    position: absolute;
+    background-color: var(--browser-frame-background-color, var(--lwt-accent-color));
+}
+
+browser-web-panel,
+browser-web-panel browser-web-container {
     display: flex;
     flex: 10000 10000;
     min-height: 0;
-    flex-direction: column;
-    position: absolute;
+    flex-direction: row;
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -17,14 +22,21 @@ browser-web-panel:not([visible]) {
     z-index: -2147483647;
 }
 
-browser-web-panel browser-web-frame {
+browser-web-panel browser-web-container {
+    flex-direction: column;
+
+    --browser-stack-z-index-rdm-toolbar: 3;
+}
+
+browser-web-panel browser-web-container browser-web-frame {
+    display: grid;
     flex: 10000 10000;
     min-height: 25px;
     min-width: 25px;
     position: relative;
 }
 
-browser-web-panel browser-web-frame .browser-web-contents {
+browser-web-panel browser-web-container browser-web-frame .browser-web-contents {
     width: 100%;
     height: 100%;
 }

components/tabs/jar.mn

@@ -14,6 +14,8 @@ dot.jar:
     content/widgets/browser-web-panel.js                (content/browser-web-panel.js)
     content/widgets/browser-web-panel.css               (content/browser-web-panel.css)
 
+    content/widgets/browser-web-container.js            (content/browser-web-container.js)
+
     content/widgets/browser-status.js                   (content/browser-status.js)
     content/widgets/browser-status.css                  (content/browser-status.css)
 

themes/shared/browser-box.css

@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Base */
-@import url("chrome://dot/skin/browser-box.css");
 @import url("chrome://dot/skin/browser-dialog.css");
 @import url("chrome://dot/skin/browser-layouts.css");
 @import url("chrome://dot/skin/browser-theme.css");
@@ -161,7 +160,6 @@ hr.fdn-separator {
     z-index: 300;
     -moz-window-dragging: no-drag;
     color-scheme: unset;
-    background-color: var(--browser-frame-background-color, var(--lwt-accent-color));
 }
 
 #tabspanel:not([status]) browser-status {

themes/shared/browser-shared.css

@@ -7,7 +7,6 @@
 # be specified once. As a result, the source file paths are relative
 # to the location of the actual manifest.
 
-  skin/classic/dot/browser-box.css                      (../shared/browser-box.css)
   skin/classic/dot/browser-dialog.css                   (../shared/browser-dialog.css)
   skin/classic/dot/browser-layouts.css                  (../shared/browser-layouts.css)
   skin/classic/dot/browser-shared.css                   (../shared/browser-shared.css)