Bug 1403106 - Fix console launchpad layout issues; r=Honza.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Tue, 26 Sep 2017 14:26:31 +0200
changeset 427411 cd6062864376d834126a87b6be7c58f010fcb12b
parent 427410 d69dea83ff53071da583577f6d32fa740c11644d
child 427412 e7cc6e7ba5597b32e4975f713c85598470b3fbb3
push id97
push userfmarier@mozilla.com
push dateSat, 14 Oct 2017 01:12:59 +0000
reviewersHonza
bugs1403106
milestone58.0a1
Bug 1403106 - Fix console launchpad layout issues; r=Honza. Fixing layout issue both in launchpad startup (panel for selecting a debugee), and the console launchpad (scrollbar was missing on console output). MozReview-Commit-ID: 7i5vFsLmRLa
devtools/client/webconsole/local-dev/index.js
--- a/devtools/client/webconsole/local-dev/index.js
+++ b/devtools/client/webconsole/local-dev/index.js
@@ -44,28 +44,16 @@ pref("devtools.webconsole.ui.filterbar",
 pref("devtools.webconsole.inputHistoryCount", 50);
 pref("devtools.webconsole.persistlog", false);
 pref("devtools.webconsole.timestampMessages", false);
 pref("devtools.webconsole.autoMultiline", true);
 
 const NewConsoleOutputWrapper = require("../new-console-output/new-console-output-wrapper");
 const NewWebConsoleFrame = require("../new-webconsole").NewWebConsoleFrame;
 
-// Replicate the DOM that the root component lives within
-const el = document.createElement("div");
-el.style.flex = "1";
-el.innerHTML = `
-  <div id="app-wrapper" class="theme-body">
-    <div id="output-container" role="document" aria-live="polite" />
-  </div>
-`;
-document.querySelector("#mount").appendChild(el);
-
-document.documentElement.classList.add("theme-light");
-
 // Copied from netmonitor/index.js:
 window.addEventListener("DOMContentLoaded", () => {
   for (let link of document.head.querySelectorAll("link")) {
     link.href = link.href.replace(/(resource|chrome)\:\/\//, "/");
   }
 
   if (appinfo.OS === "Darwin") {
     document.documentElement.setAttribute("platform", "mac");
@@ -78,16 +66,23 @@ window.addEventListener("DOMContentLoade
 
 let consoleFrame;
 function onConnect(connection) {
   // If we are on the main dashboard don't render the component
   if (!connection || !connection.tabConnection || !connection.tabConnection.tabTarget) {
     return;
   }
 
+  // Replicate the DOM that the root component lives within
+  document.querySelector("#mount").innerHTML = `
+    <div id="app-wrapper" class="theme-body">
+      <div id="output-container" role="document" aria-live="polite" />
+    </div>
+  `;
+
   // Stub out properties that are received from hudservice
   const owner = {
     iframeWindow: window,
     chromeWindow: window,
     hudId: "hud_0",
     getDebuggerFrames: () => { },
     getInspectorSelection: () => { },
     target: connection.tabConnection.tabTarget,
@@ -102,9 +97,10 @@ function onConnect(connection) {
 
 // This is just a hack until the local dev environment includes jsterm
 window.evaluateJS = function (input) {
   consoleFrame.webConsoleClient.evaluateJSAsync(`${input}`, function (r) {
     consoleFrame.newConsoleOutput.dispatchMessageAdd(r);
   }, {});
 };
 
-bootstrap(React, ReactDOM, el).then(onConnect);
+document.documentElement.classList.add("theme-light");
+bootstrap(React, ReactDOM).then(onConnect);