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
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;