Bug 1594885 - What's New in DevTools Panel in Firefox 71. r=jdescottes,victoria
authorJason Laster <jlaster@mozilla.com>
Thu, 14 Nov 2019 08:42:16 +0000
changeset 501899 ab5f80e64f5811672a39001dce060d2d6854c236
parent 501898 d87213b99f4685022650253877f90a6c6bcb3aa9
child 501900 f6157616c912a8b911b7e17961304d117d843f39
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, victoria
bugs1594885
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1594885 - What's New in DevTools Panel in Firefox 71. r=jdescottes,victoria Depends on D52733 Differential Revision: https://phabricator.services.mozilla.com/D52429
devtools/client/whats-new/src/base.css
devtools/client/whats-new/src/main.js
devtools/client/whats-new/src/moz.build
devtools/client/whats-new/src/whats-new.css
deleted file mode 100644
--- a/devtools/client/whats-new/src/base.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* 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/. */
-
-/* base.css */
--- a/devtools/client/whats-new/src/main.js
+++ b/devtools/client/whats-new/src/main.js
@@ -1,10 +1,206 @@
 /* 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 ReactDOM = require("devtools/client/shared/vendor/react-dom");
+const Types = require("devtools/client/shared/vendor/react-prop-types");
+const { openDocLink } = require("devtools/client/shared/link");
+
+const {
+  Component,
+  createFactory,
+} = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const aside = {
+  header: "Instantly Send Tabs to Mobile",
+  content: `Test your site on mobile and other devices without having to copy, paste, or leave the browser.`,
+  cta: "Learn More About Send Tabs",
+  href:
+    "https://support.mozilla.org/en-US/kb/send-tab-firefox-desktop-other-devices?utm_source=devtools_whatsnew",
+};
+
+const release = {
+  title: "What’s New in DevTools (Firefox 70 & 71)",
+  linkText: "Read more",
+  linkUrl:
+    "https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/71?utm_source=devtools&utm_medium=devtools_whatsnew",
+  features: [
+    {
+      header: `New WebSocket Messages Inspector`,
+      description: `The Network panel has a new Messages tab for inspecting WebSocket frames sent and received through the selected connection.`,
+      href:
+        "https://hacks.mozilla.org/2019/10/firefoxs-new-websocket-inspector/ ",
+    },
+    {
+      header: `Block URLs in the Network panel`,
+      description: `Test how a page loads without specific files, like CSS or JavaScript. Right-click network requests and select “Block URL” or use the new Request Blocking pane.`,
+      href: `https://developer.mozilla.org/docs/Tools/Network_Monitor/request_list#Block_a_specific_URL?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+    {
+      header: `New multi-line editor mode in Console`,
+      description: `Iterate quickly on JavaScript snippets with the new multi-line editor input. It combines the ease of authoring code in an IDE with the workflow of repeatedly executing code in the context of the page.`,
+      href: `https://developer.mozilla.org/docs/Tools/Web_Console/The_command_line_interpreter?utm_source=devtools&utm_medium=devtools_whatsnew`,
+      hidden: true,
+    },
+    {
+      header: `Search across all Network Headers and Content`,
+      description: `The new Search pane lets you search across all network headers and response bodies in the Network panel.`,
+      href: `https://developer.mozilla.org/docs/Tools/Network_Monitor/request_list#Search_Requests?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+    {
+      header: `Log on Events`,
+      description: `Enabling logging for Event Listener Breakpoints in the Debugger lets you observe which event handlers are being executed without the overhead of pausing.`,
+      href: `https://developer.mozilla.org/docs/Tools/Debugger/Set_event_listener_breakpoints?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+    {
+      header: `Quick search in Event Listeners Breakpoints`,
+      description: `Quickly find the right event category and type with the new filter field in the Debugger’s Event Listener Breakpoints pane. `,
+      href: `https://developer.mozilla.org/docs/Tools/Debugger/Set_event_listener_breakpoints??utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+    {
+      header: `New in 70: Inactive CSS rules indicator in Rules pane`,
+      description: `The Inspector now grays out CSS declarations that don’t affect the selected element and shows a tooltip explaining why—and even how to fix it.`,
+      href: `https://developer.mozilla.org/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+    {
+      header: `New in 70: Pause on DOM Mutation in Debugger`,
+      description: `DOM Mutation Breakpoints (aka DOM Change Breakpoints) let you pause scripts that add, remove, or change specific elements.`,
+      href: `https://developer.mozilla.org/docs/Tools/Debugger/Break_on_DOM_mutation?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+    {
+      header: `New in 70: Color contrast information in the color picker`,
+      description: `In the CSS Rules view, you can click foreground colors with the color picker to determine if their contrast with the background color meets accessibility guidelines.`,
+      href: `https://developer.mozilla.org/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+    {
+      header: `New in 70: Auditing checks in the Accessibility inspector`,
+      description: `The Accessibility Inspector’s “Check for issues” tool can now audit for keyboard accessibility in addition to color contrast and text labels.`,
+      href: `https://developer.mozilla.org/docs/Tools/Accessibility_inspector#Check_for_accessibility_issues?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+  ],
+};
+
+const dev = {
+  title: "Experimental Features in Firefox Developer Edition",
+  linkUrl:
+    "https://www.mozilla.org/firefox/developer/?utm_medium=devtools_whatsnew&utm_source=devtools",
+  linkText: "Get DevEdition",
+  features: [
+    {
+      header: `Debug Variables with Watchpoints`,
+      description: `Debugger’s new Watchpoints feature lets you pause when properties get read or written. Right-click object properties in the Scopes pane when paused to use the new “Break on…” menu.`,
+      href: `https://developer.mozilla.org/docs/Tools/Debugger/How_to/Set_a_watchpoint_on_a_property?utm_source=devtools&utm_medium=devtools_whatsnew`,
+    },
+  ],
+};
+
+class Aside extends Component {
+  render() {
+    return dom.aside(
+      {},
+      dom.div(
+        { className: "call-out" },
+        dom.h3({}, aside.header),
+        dom.p({}, aside.content),
+        dom.p(
+          { className: "cta" },
+          dom.a(
+            {
+              href: aside.href,
+              className: "devtools-button",
+              onClick: e => {
+                e.preventDefault();
+                openDocLink(aside.href);
+              },
+            },
+            aside.cta
+          )
+        )
+      )
+    );
+  }
+}
+
+class Feature extends Component {
+  static get propTypes() {
+    return {
+      header: Types.string,
+      description: Types.string,
+      href: Types.string,
+    };
+  }
+
+  render() {
+    const { header, description, href } = this.props;
+    return dom.li(
+      { key: header, className: "feature" },
+      dom.a(
+        {
+          href,
+          onClick: e => {
+            e.preventDefault();
+            openDocLink(href);
+          },
+        },
+        dom.h3({}, header),
+        dom.p({}, description)
+      )
+    );
+  }
+}
+
+function Link(text, href) {
+  return dom.a(
+    {
+      className: "link",
+      href,
+      onClick: e => {
+        e.preventDefault();
+        openDocLink(href);
+      },
+    },
+    text
+  );
+}
+
+class App extends Component {
+  render() {
+    return dom.main(
+      {},
+      createFactory(Aside)(),
+      dom.article(
+        {},
+        dom.h2(
+          {},
+          dom.span({}, release.title),
+          Link(release.linkText, release.linkUrl)
+        ),
+        dom.ul(
+          {},
+          ...release.features
+            .filter(feature => !feature.hidden)
+            .map(feature => createFactory(Feature)(feature))
+        ),
+        dom.h2({}, dom.span({}, dev.title), Link(dev.linkText, dev.linkUrl)),
+        dom.ul(
+          {},
+          ...dev.features.map(feature => createFactory(Feature)(feature))
+        )
+      )
+    );
+  }
+}
+
 module.exports = {
-  bootstrap: () => {},
-  destroy: () => {},
+  bootstrap: () => {
+    const root = document.querySelector("#root");
+    ReactDOM.render(createFactory(App)(), root);
+  },
+  destroy: () => {
+    const root = document.querySelector("#root");
+    ReactDOM.unmountComponentAtNode(root);
+  },
 };
--- a/devtools/client/whats-new/src/moz.build
+++ b/devtools/client/whats-new/src/moz.build
@@ -1,9 +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(
-    'base.css',
     'main.js',
     'whats-new.css'
 )
--- a/devtools/client/whats-new/src/whats-new.css
+++ b/devtools/client/whats-new/src/whats-new.css
@@ -1,5 +1,174 @@
 /* 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/. */
 
-/* whats-new.css */
+:root {
+  --theme-body-font-size: 13px;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  color: var(--theme-text-color);
+}
+
+h2 {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.4em;
+  padding: calc(var(--theme-body-font-size) / 2) 20px;
+  margin: 0;
+  display: flex;
+  color: var(--theme-body-color);
+}
+
+h2 a {
+  font-size: var(--theme-body-font-size);
+  font-weight: normal;
+}
+
+h2 span {
+  flex: 1;
+}
+
+h3 {
+  font-size: var(--body-20-font-size);
+  font-weight: 600;
+  margin: 0;
+  color: var(--theme-body-color);
+}
+
+p {
+  color: var(--theme-text-color-alt);
+  line-height: 1.4;
+}
+
+em {
+  font-weight: 600;
+  font-style: normal;
+}
+
+main {
+  max-width: 80rem;
+  padding-top: calc(var(--theme-body-font-size));
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: var(--theme-body-font-size);
+  grid-row-gap: 0px;
+  grid-template-areas: "main aside";
+}
+
+@media (max-width: 700px) {
+  main {
+    display: block;
+    padding: 0;
+  }
+}
+
+article {
+  grid-area: main;
+}
+
+aside {
+  grid-area: aside;
+  padding-bottom: var(--theme-body-font-size);
+}
+
+aside > div {
+  background-color: var(--theme-splitter-color);
+  color: var(--theme-body-color);
+  padding: calc(var(--theme-body-font-size) / 2) 20px;
+}
+
+.theme-light aside > div {
+  background-color: var(--grey-20);
+}
+
+aside h2 {
+  color: var(--theme-text-color-strong);
+  padding-left: 0;
+}
+
+aside h2 span {
+  display: inline-block;
+  padding: 0 calc(var(--theme-body-font-size) / 4);
+  margin-right: calc(var(--theme-body-font-size) / 2);
+  background-color: var(--blue-60);
+  color: #fff;
+  border-radius: 2px;
+}
+
+aside h3 {
+  padding: 0px;
+  background-size: 20px;
+  margin: calc(var(--theme-body-font-size) / 2) 0;
+  font-size: 17px;
+}
+
+aside p {
+  color: var(--theme-body-color);
+  margin-bottom: var(--theme-body-font-size);
+}
+
+aside a p em {
+  color: var(--theme-highlight-blue);
+}
+
+.cta {
+  display: flex;
+  justify-content: center;
+}
+
+.cta .devtools-button,
+/* Avoid active style override from
+   `.devtools-button:not(:empty):not(.checked):not(:disabled):focus`
+   at https://searchfox.org/mozilla-central/rev/e7c61f4a68b974d5fecd216dc7407b631a24eb8f/devtools/client/themes/common.css#420-424
+*/
+.cta .devtools-button:not(:empty):not(.checked):not(:disabled):focus {
+  border: none;
+  color: white;
+  background-color: var(--blue-60);
+  padding: 0 8px;
+  line-height: 32px;
+  border-radius: 2px;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 auto;
+  text-decoration: none;
+}
+
+.cta > .devtools-button:hover {
+  background: var(--blue-50) !important;
+}
+
+ul {
+  list-style: none;
+  margin: 0 0 calc(var(--theme-body-font-size));
+  padding: 0;
+}
+
+p {
+  margin: 0;
+  margin-bottom: var(--theme-code-line-height);
+}
+
+li > a {
+  display: block;
+  padding: 5px 20px 8px;
+  text-decoration: none;
+}
+
+li > a:hover {
+  background-color: var(--theme-selection-background-hover);
+}
+
+.link {
+  color: var(--theme-highlight-blue);
+  text-decoration: none;
+}
+
+.link:visited {
+  color: var(--theme-highlight-blue);
+}