--- a/browser/components/extensions/ext-devtools-panels.js
+++ b/browser/components/extensions/ext-devtools-panels.js
@@ -79,17 +79,17 @@ class ParentDevToolsPanel {
   }
 
   addPanel() {
     const {icon, title} = this.panelOptions;
     const extensionName = this.context.extension.name;
 
     this.toolbox.addAdditionalTool({
       id: this.id,
-      url: "about:blank",
+      url: "chrome://browser/content/webext-panels.xul",
       icon: icon,
       label: title,
       tooltip: `DevTools Panel added by "${extensionName}" add-on.`,
       visibilityswitch:  `devtools.webext-${this.id}.enabled`,
       isTargetSupported: target => target.isLocalTab,
       build: (window, toolbox) => {
         if (toolbox !== this.toolbox) {
           throw new Error("Unexpected toolbox received on addAdditionalTool build property");
@@ -211,24 +211,39 @@ class ParentDevToolsPanel {
   }
 
   createBrowserElement(window) {
     const {toolbox} = this;
     const {extension} = this.context;
     const {url} = this.panelOptions;
     const {document} = window;
 
+    // TODO Bug 1442601: Refactor ext-devtools-panels.js to reuse the helpers
+    // functions defined in webext-panels.xul (e.g. create the browser element
+    // using an helper function defined in webext-panels.js and shared with the
+    // extension sidebar pages).
+    let stack = document.getElementById("webext-panels-stack");
+    if (!stack) {
+      stack = document.createElementNS(XUL_NS, "stack");
+      stack.setAttribute("flex", "1");
+      stack.setAttribute("id", "webext-panels-stack");
+      document.documentElement.appendChild(stack);
+    }
+
     const browser = document.createElementNS(XUL_NS, "browser");
+    browser.setAttribute("id", "webext-panels-browser");
     browser.setAttribute("type", "content");
     browser.setAttribute("disableglobalhistory", "true");
-    browser.setAttribute("style", "width: 100%; height: 100%;");
-    browser.setAttribute("transparent", "true");
+    browser.setAttribute("flex", "1");
     browser.setAttribute("class", "webextension-devtoolsPanel-browser");
     browser.setAttribute("webextension-view-type", "devtools_panel");
-    browser.setAttribute("flex", "1");
+    // TODO Bug 1442604: Add additional tests for the select and autocompletion
+    // popups used in an extension devtools panels (in oop and non-oop mode).
+    browser.setAttribute("selectmenulist", "ContentSelectDropdown");
+    browser.setAttribute("autocompletepopup", "PopupAutoComplete");
 
     // Ensure that the devtools panel browser is going to run in the same
     // process of the other extension pages from the same addon.
     browser.sameProcessAsFrameLoader = extension.groupFrameLoader;
 
     this.browser = browser;
 
     let awaitFrameLoader = Promise.resolve();
@@ -249,18 +264,17 @@ class ParentDevToolsPanel {
       if (!hasTopLevelContext) {
         hasTopLevelContext = true;
 
         // Resolve the promise when the root devtools_panel context has been created.
         awaitFrameLoader.then(() => this._resolveTopLevelContext(context));
       }
     });
 
-    document.body.setAttribute("style", "margin: 0; padding: 0;");
-    document.body.appendChild(browser);
+    stack.appendChild(browser);
 
     extensions.emit("extension-browser-inserted", browser, {
       devtoolsToolboxInfo: {
         toolboxPanelId: this.id,
         inspectedWindowTabId: getTargetTabIdForToolbox(toolbox),
       },
     });