Bug 1583945 - Import the RDM browser stylesheet along with the devtools-browser stylesheet. r=bgrins

Differential Revision: https://phabricator.services.mozilla.com/D47132

--HG--
extra : moz-landing-system : lando

devtools/client/responsive/manager.js

@@ -4,6 +4,7 @@
 
 "use strict";
 
+const Services = require("Services");
 const promise = require("promise");
 const EventEmitter = require("devtools/shared/event-emitter");
 
@@ -39,6 +40,12 @@ loader.lazyRequireGetter(
   "devtools/client/framework/devtools",
   true
 );
+loader.lazyRequireGetter(
+  this,
+  "gDevToolsBrowser",
+  "devtools/client/framework/devtools-browser",
+  true
+);
 loader.lazyRequireGetter(this, "Telemetry", "devtools/client/shared/telemetry");
 
 /**
@@ -110,6 +117,10 @@ class ResponsiveUIManager {
       return promise.reject(new Error("RDM only available for remote tabs."));
     }
     if (!this.isActiveForTab(tab)) {
+      if (Services.prefs.getBoolPref("devtools.responsive.browserUI.enabled")) {
+        await gDevToolsBrowser.loadBrowserStyleSheet(window);
+      }
+
       this.initMenuCheckListenerFor(window);
 
       const ui = new ResponsiveUI(this, window, tab);

devtools/client/responsive/moz.build

@@ -19,6 +19,7 @@ DevToolsModules(
     'index.js',
     'manager.js',
     'reducers.js',
+    'responsive-browser.css',
     'store.js',
     'types.js',
     'ui.js',

devtools/client/responsive/responsive-browser.css

@@ -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/. */
+
+ #appcontent[devtoolstheme="light"] {
+  --rdm-browser-container-background: #F5F5F6;
+  --rdm-browser-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
+}
+
+#appcontent[devtoolstheme="dark"] {
+  --rdm-browser-container-background: #18181a; /* This should map to --theme-toolbar-background. */
+  --rdm-browser-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
+}
+
+.browserContainer.responsive-mode {
+  background-color: var(--rdm-browser-container-background);
+}
+
+.browserContainer.responsive-mode browser {
+  border: 1px solid var(--devtools-splitter-color);
+  box-shadow: var(--rdm-browser-box-shadow);
+}
+
+.browserContainer.responsive-mode > .browserStack {
+  margin-top: 15px;
+}

devtools/client/responsive/ui.js

@@ -234,10 +234,13 @@ class ResponsiveUI {
     rdmFrame.style.height = rdmFrame.style.minHeight = "30px";
     rdmFrame.style.borderStyle = "none";
 
+    this.browserContainerEl = gBrowser.getBrowserContainer(
+      gBrowser.getBrowserForTab(this.tab)
+    );
+    this.browserContainerEl.classList.add("responsive-mode");
+
     // Prepend the RDM iframe inside of the current tab's browser container.
-    gBrowser
-      .getBrowserContainer(gBrowser.getBrowserForTab(this.tab))
-      .prepend(rdmFrame);
+    this.browserContainerEl.prepend(rdmFrame);
 
     // Wait for the frame script to be loaded.
     message.wait(rdmFrame.contentWindow, "script-init").then(async () => {
@@ -299,6 +302,8 @@ class ResponsiveUI {
     } else {
       this.rdmFrame.contentWindow.removeEventListener("message", this);
       this.rdmFrame.remove();
+
+      this.browserContainerEl.classList.remove("responsive-mode");
     }
 
     if (!this.isBrowserUIEnabled && !isTabContentDestroying) {
@@ -324,6 +329,7 @@ class ResponsiveUI {
 
     // Destroy local state
     const swap = this.swap;
+    this.browserContainerEl = null;
     this.browserWindow = null;
     this.tab = null;
     this.inited = null;

devtools/client/themes/devtools-browser.css

@@ -3,15 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("resource://devtools/client/themes/splitters.css");
-
-/* Eyedropper Widget */
-/* <panel> added to mainPopupSet */
-
-.devtools-eyedropper-panel {
-  pointer-events: none;
-  -moz-appearance: none;
-  width: 156px;
-  height: 120px;
-  background-color: transparent;
-  border: none;
-}
+/* Imports the styles that will apply to the browser window for Responsive Design Mode.
+   This is dynamically loaded when either the toolbox or RDM is open. */
+@import url("resource://devtools/client/responsive/responsive-browser.css");

devtools/client/themes/splitters.css

@@ -36,11 +36,11 @@
 
 #appcontent[devtoolstheme="light"] {
   /* These variables are used in browser.xhtml but inside the toolbox they are overridden by --theme-splitter-color */
-  --devtools-splitter-color: #dde1e4;
+  --devtools-splitter-color: #e0e0e2;
 }
 
 #appcontent[devtoolstheme="dark"] {
-  --devtools-splitter-color: #42484f;
+  --devtools-splitter-color: #38383d;
 }
 
 splitter.devtools-horizontal-splitter,