Bug 1471795 - Part 1: Implement basis of 'This Firefox' page. r?jdescottes, r?ladybenko draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 25 Jul 2018 17:33:03 +0900
changeset 822425 d7aa49eac4daa5e7dbfc5f223d5bbe3e659ab7bb
parent 822420 083b2240f21d651b60115a32d93edf8feddde368
child 822426 e39eb586b3fca783674975bb6cbba413ab128a53
push id117369
push userbmo:dakatsuka@mozilla.com
push dateWed, 25 Jul 2018 09:09:50 +0000
reviewersjdescottes, ladybenko
bugs1471795
milestone63.0a1
Bug 1471795 - Part 1: Implement basis of 'This Firefox' page. r?jdescottes, r?ladybenko In this patch, implement following basic things of 'ThisFirefox' page for new about:debugging. * Add a pref devtools.aboutdebbugging.enabled-new to enable new about:debbugging. * Add a function which switches new/old about:debugging page by the pref. * Add devtools/client/aboutdebugging-new directory for new about:debugging. * Add basic html, css, JavaScript and React component. MozReview-Commit-ID: 5DtV7rRcS0S
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/aboutdebugging.js
devtools/client/aboutdebugging-new/index.html
devtools/client/aboutdebugging-new/moz.build
devtools/client/aboutdebugging-new/src/components/App.css
devtools/client/aboutdebugging-new/src/components/App.js
devtools/client/aboutdebugging-new/src/components/moz.build
devtools/client/aboutdebugging-new/src/moz.build
devtools/client/jar.mn
devtools/client/moz.build
devtools/client/preferences/devtools-client.js
devtools/startup/aboutdebugging-registration.js
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -0,0 +1,10 @@
+/* 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/. */
+
+@import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.js
@@ -0,0 +1,48 @@
+/* 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/. */
+
+"use strict";
+
+const { BrowserLoader } =
+  ChromeUtils.import("resource://devtools/client/shared/browser-loader.js", {});
+const { require } = BrowserLoader({
+  baseURI: "resource://devtools/client/aboutdebugging-new/",
+  window,
+});
+const Services = require("Services");
+
+const { createFactory } =
+  require("devtools/client/shared/vendor/react");
+const { render, unmountComponentAtNode } =
+  require("devtools/client/shared/vendor/react-dom");
+
+const App = createFactory(require("./src/components/App"));
+
+const AboutDebugging = {
+  init() {
+    if (!Services.prefs.getBoolPref("devtools.enabled", true)) {
+      // If DevTools are disabled, navigate to about:devtools.
+      window.location = "about:devtools?reason=AboutDebugging";
+      return;
+    }
+
+    render(App(), this.mount);
+  },
+
+  destroy() {
+    unmountComponentAtNode(this.mount);
+  },
+
+  get mount() {
+    return document.getElementById("mount");
+  },
+};
+
+window.addEventListener("DOMContentLoaded", () => {
+  AboutDebugging.init();
+}, { once: true });
+
+window.addEventListener("unload", () => {
+  AboutDebugging.destroy();
+}, {once: true});
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/index.html
@@ -0,0 +1,14 @@
+<!-- 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/. -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="chrome://devtools/content/aboutdebugging-new/aboutdebugging.css"/>
+    <script src="chrome://devtools/content/aboutdebugging-new/aboutdebugging.js"></script>
+  </head>
+  <body>
+    <div id="mount"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/moz.build
@@ -0,0 +1,10 @@
+# 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/.
+
+DIRS += [
+    'src',
+]
+
+with Files('**'):
+    BUG_COMPONENT = ('DevTools', 'about:debugging')
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -0,0 +1,8 @@
+/* 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/. */
+
+.app {
+  height: 100vh;
+  width: 100vw;
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -0,0 +1,20 @@
+/* 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/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+class App extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "app",
+      },
+    );
+  }
+}
+
+module.exports = App;
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/moz.build
@@ -0,0 +1,8 @@
+# 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/.
+
+DevToolsModules(
+    'App.css',
+    'App.js',
+)
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/moz.build
@@ -0,0 +1,7 @@
+# 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/.
+
+DIRS += [
+    'components',
+]
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -83,16 +83,19 @@ devtools.jar:
     content/framework/connect/connect.css (framework/connect/connect.css)
     content/framework/connect/connect.js (framework/connect/connect.js)
     content/shared/widgets/graphs-frame.xhtml (shared/widgets/graphs-frame.xhtml)
     content/shared/widgets/cubic-bezier.css (shared/widgets/cubic-bezier.css)
     content/shared/widgets/filter-widget.css (shared/widgets/filter-widget.css)
     content/shared/widgets/spectrum.css (shared/widgets/spectrum.css)
     content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml)
     content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
+    content/aboutdebugging-new/index.html (aboutdebugging-new/index.html)
+    content/aboutdebugging-new/aboutdebugging.css (aboutdebugging-new/aboutdebugging.css)
+    content/aboutdebugging-new/aboutdebugging.js (aboutdebugging-new/aboutdebugging.js)
     content/responsive.html/index.xhtml (responsive.html/index.xhtml)
     content/dom/index.html (dom/index.html)
     content/dom/main.js (dom/main.js)
     content/accessibility/index.html (accessibility/index.html)
     content/accessibility/main.js (accessibility/main.js)
 %   skin devtools classic/1.0 %skin/
     skin/devtools-browser.css (themes/devtools-browser.css)
     skin/dark-theme.css (themes/dark-theme.css)
--- a/devtools/client/moz.build
+++ b/devtools/client/moz.build
@@ -3,16 +3,17 @@
 # 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/.
 
 include('../templates.mozbuild')
 
 DIRS += [
     'aboutdebugging',
+    'aboutdebugging-new',
     'accessibility',
     'application',
     'canvasdebugger',
     'commandline',
     'debugger',
     'dom',
     'framework',
     'inspector',
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@@ -308,14 +308,17 @@ pref("devtools.editor.autocomplete", tru
 
 // Whether to reload when touch simulation is toggled
 pref("devtools.responsive.reloadConditions.touchSimulation", false);
 // Whether to reload when user agent is changed
 pref("devtools.responsive.reloadConditions.userAgent", false);
 // Whether to show the notification about reloading to apply emulation
 pref("devtools.responsive.reloadNotification.enabled", true);
 
+// Enable new about:debugging.
+pref("devtools.aboutdebugging.new-enabled", false);
+
 // about:debugging: only show system add-ons in local builds by default.
 #ifdef MOZILLA_OFFICIAL
   pref("devtools.aboutdebugging.showSystemAddons", false);
 #else
   pref("devtools.aboutdebugging.showSystemAddons", true);
 #endif
--- a/devtools/startup/aboutdebugging-registration.js
+++ b/devtools/startup/aboutdebugging-registration.js
@@ -11,26 +11,29 @@
 const { XPCOMUtils } = ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm", {});
 const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm", {});
 
 const { nsIAboutModule } = Ci;
 
 function AboutDebugging() {}
 
 AboutDebugging.prototype = {
-  uri: Services.io.newURI("chrome://devtools/content/aboutdebugging/aboutdebugging.xhtml"),
   classDescription: "about:debugging",
   classID: Components.ID("1060afaf-dc9e-43da-8646-23a2faf48493"),
   contractID: "@mozilla.org/network/protocol/about;1?what=debugging",
 
   QueryInterface: ChromeUtils.generateQI([nsIAboutModule]),
 
-  newChannel: function(uri, loadInfo) {
+  newChannel: function(_, loadInfo) {
+    const uri = Services.prefs.getBoolPref("devtools.aboutdebugging.new-enabled")
+                  ? "chrome://devtools/content/aboutdebugging-new/index.html"
+                  : "chrome://devtools/content/aboutdebugging/aboutdebugging.xhtml";
+
     const chan = Services.io.newChannelFromURIWithLoadInfo(
-      this.uri,
+      Services.io.newURI(uri),
       loadInfo
     );
     chan.owner = Services.scriptSecurityManager.getSystemPrincipal();
     return chan;
   },
 
   getURIFlags: function(uri) {
     return nsIAboutModule.ALLOW_SCRIPT;