--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1207,17 +1207,16 @@ pref("services.sync.prefs.sync.browser.n
 pref("services.sync.prefs.sync.browser.newtabpage.pinned", true);
 pref("services.sync.prefs.sync.browser.offline-apps.notify", true);
 pref("services.sync.prefs.sync.browser.safebrowsing.phishing.enabled", true);
 pref("services.sync.prefs.sync.browser.safebrowsing.malware.enabled", true);
 pref("services.sync.prefs.sync.browser.safebrowsing.downloads.enabled", true);
 pref("services.sync.prefs.sync.browser.safebrowsing.passwords.enabled", true);
 pref("services.sync.prefs.sync.browser.search.update", true);
 pref("services.sync.prefs.sync.browser.search.widget.inNavBar", true);
-pref("services.sync.prefs.sync.browser.sessionstore.restore_on_demand", true);
 pref("services.sync.prefs.sync.browser.startup.homepage", true);
 pref("services.sync.prefs.sync.browser.startup.page", true);
 pref("services.sync.prefs.sync.browser.tabs.loadInBackground", true);
 pref("services.sync.prefs.sync.browser.tabs.warnOnClose", true);
 pref("services.sync.prefs.sync.browser.tabs.warnOnOpen", true);
 pref("services.sync.prefs.sync.browser.taskbar.previews.enable", true);
 pref("services.sync.prefs.sync.browser.urlbar.matchBuckets", true);
 pref("services.sync.prefs.sync.browser.urlbar.maxRichResults", true);

--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1941,16 +1941,20 @@ var gBrowserInit = {
       // auto-resume downloads begin (such as after crashing or quitting with
       // active downloads) and speeds up the first-load of the download manager UI.
       // If the user manually opens the download manager before the timeout, the
       // downloads will start right away, and initializing again won't hurt.
       try {
         DownloadsCommon.initializeAllDataLinks();
         ChromeUtils.import("resource:///modules/DownloadsTaskbar.jsm", {})
           .DownloadsTaskbar.registerIndicator(window);
+        if (AppConstants.platform == "macosx") {
+          ChromeUtils.import("resource:///modules/DownloadsMacFinderProgress.jsm")
+            .DownloadsMacFinderProgress.register();
+        }
       } catch (ex) {
         Cu.reportError(ex);
       }
     }, {timeout: 10000});
 
     if (Win7Features) {
       scheduleIdleTask(() => Win7Features.onOpenWindow());
     }

--- a/browser/components/about/AboutProtectionsHandler.jsm
+++ b/browser/components/about/AboutProtectionsHandler.jsm
@@ -6,17 +6,17 @@
 
 var EXPORTED_SYMBOLS = ["AboutProtectionsHandler"];
 
 const {RemotePages} = ChromeUtils.import("resource://gre/modules/remotepagemanager/RemotePageManagerParent.jsm");
 
 var AboutProtectionsHandler = {
   _inited: false,
   _topics: [
-    "ArrivedOnPage",
+    "openContentBlockingPreferences",
   ],
 
   init() {
     this.pageListener = new RemotePages("about:protections");
     for (let topic of this._topics) {
       this.pageListener.addMessageListener(topic, this.receiveMessage);
     }
     this._inited = true;
@@ -28,16 +28,16 @@ var AboutProtectionsHandler = {
     }
     for (let topic of this._topics) {
       this.pageListener.removeMessageListener(topic, this.receiveMessage);
     }
     this.pageListener.destroy();
   },
 
   receiveMessage(aMessage) {
+    let win = aMessage.target.browser.ownerGlobal;
     switch (aMessage.name) {
-      case "ArrivedOnPage": {
-        // Successfully recieved a message
+      case "openContentBlockingPreferences":
+        win.openPreferences("privacy-trackingprotection", {origin: "about-protections"});
         break;
-      }
     }
   },
 };

new file mode 100644
--- /dev/null
+++ b/browser/components/downloads/DownloadsMacFinderProgress.jsm
@@ -0,0 +1,87 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80 filetype=javascript: */
+/* 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/. */
+
+/**
+ * Handles the download progress indicator of the macOS Finder.
+ */
+
+"use strict";
+
+var EXPORTED_SYMBOLS = [
+  "DownloadsMacFinderProgress",
+];
+
+const {XPCOMUtils} = ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetters(this, {
+  Downloads: "resource://gre/modules/Downloads.jsm",
+});
+
+var DownloadsMacFinderProgress = {
+  /**
+   * Maps the path of the download, to the according progress indicator instance.
+   */
+  _finderProgresses: null,
+
+  /**
+   * This method is called after a new browser window on macOS is opened, it
+   * registers for receiving download events for the progressbar of the Finder.
+   */
+  register() {
+    // Ensure to register only once per process and not for every window.
+    if (!this._finderProgresses) {
+      this._finderProgresses = new Map();
+      Downloads.getList(Downloads.ALL).then(list => list.addView(this));
+    }
+  },
+
+  onDownloadAdded(download) {
+    if (download.stopped) {
+      return;
+    }
+
+    let finderProgress = Cc["@mozilla.org/widget/macfinderprogress;1"]
+      .createInstance(Ci.nsIMacFinderProgress);
+
+    let path = download.target.path;
+
+    finderProgress.init(path, () => {
+      download.cancel().catch(Cu.reportError);
+      download.removePartialData().catch(Cu.reportError);
+    });
+
+    if (download.hasProgress) {
+      finderProgress.updateProgress(download.currentBytes, download.totalBytes);
+    } else {
+      finderProgress.updateProgress(0, 0);
+    }
+    this._finderProgresses.set(path, finderProgress);
+  },
+
+  onDownloadChanged(download) {
+    let path = download.target.path;
+    let finderProgress = this._finderProgresses.get(path);
+    if (!finderProgress) {
+      // The download is not tracked, it may have been restarted,
+      // thus forward the call to onDownloadAdded to check if it should be tracked.
+      this.onDownloadAdded(download);
+    } else if (download.stopped) {
+      finderProgress.end();
+      this._finderProgresses.delete(path);
+    } else {
+      finderProgress.updateProgress(download.currentBytes, download.totalBytes);
+    }
+  },
+
+  onDownloadRemoved(download) {
+    let path = download.target.path;
+    let finderProgress = this._finderProgresses.get(path);
+    if (finderProgress) {
+      finderProgress.end();
+      this._finderProgresses.delete(path);
+    }
+  },
+};

--- a/browser/components/downloads/moz.build
+++ b/browser/components/downloads/moz.build
@@ -13,10 +13,15 @@ JAR_MANIFESTS += ['jar.mn']
 
 EXTRA_JS_MODULES += [
     'DownloadsCommon.jsm',
     'DownloadsSubview.jsm',
     'DownloadsTaskbar.jsm',
     'DownloadsViewUI.jsm',
 ]
 
+toolkit = CONFIG['MOZ_WIDGET_TOOLKIT']
+
+if toolkit == 'cocoa':
+    EXTRA_JS_MODULES += ['DownloadsMacFinderProgress.jsm']
+
 with Files('**'):
     BUG_COMPONENT = ('Firefox', 'Downloads Panel')

--- a/browser/components/preferences/in-content/main.js
+++ b/browser/components/preferences/in-content/main.js
@@ -102,17 +102,16 @@ Preferences.addAll([
   browser.taskbar.previews.enable
   - true if tabs are to be shown in the Windows 7 taskbar
   */
 
   { id: "browser.link.open_newwindow", type: "int" },
   { id: "browser.tabs.loadInBackground", type: "bool", inverted: true },
   { id: "browser.tabs.warnOnClose", type: "bool" },
   { id: "browser.tabs.warnOnOpen", type: "bool" },
-  { id: "browser.sessionstore.restore_on_demand", type: "bool" },
   { id: "browser.ctrlTab.recentlyUsedOrder", type: "bool" },
 
   // CFR
   {id: "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.addons", type: "bool"},
   {id: "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features", type: "bool"},
 
   // Fonts
   { id: "font.language.group", type: "wstring" },

--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -1,12 +1,94 @@
 /* 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/. */
-.under-construction {
-    background-image: url("chrome://browser/content/illustrations/under-construction.svg");
-    background-repeat: no-repeat;
-    background-position: center;
-    min-height: 300px;
-    min-width: 300px;
-    /* Move the image down a bit - should be slightly higher than halfway down the page */
-    margin-top: -10%;
+ :root {
+   --card-box-shadow: 0 1px 4px 0 rgba(12,12,13,0.1), 0 1px 0 0 rgba(0,0,0,0.05);
+   --card-background:  #FFF;
+   --clickable-text-hover: hsla(0,0%,70%,.2);
+   --clickable-text-active: hsla(0,0%,70%,.3);
+   --card-divider: rgba(12,12,13,0.1) 1px solid;
+   --report-background: #FAFAFC;
+   --card-padding: 22px;
+ }
+
+body {
+  background-color: var(--report-background);
+  font: message-box;
+  margin-top: 82px;
+}
+
+#report-title {
+  font-size: 20px;
+  font-weight: 300;
+  margin-bottom: 22px;
+}
+
+#report-content {
+  width: 763px;
+  margin: 0 auto;
+}
+
+.etp-card .icon {
+  width: 60px;
+  height: 60px;
+  background: url("chrome://browser/skin/controlcenter/tracking-protection.svg") no-repeat center/cover;
+  grid-column: 1;
+  margin: 0 auto;
+}
+
+.report-card {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 20% auto;
+  border-radius: 3px;
+  background-color: var(--card-background);
+  box-shadow: var(--card-box-shadow);
 }
+
+.report-card .card-header {
+  display: grid;
+  grid-template-columns: 1fr 7fr;
+  padding: var(--card-padding);
+  grid-gap: var(--card-padding);
+}
+
+.report-card .card-title {
+  font-size: 16px;
+  line-height: 22px;
+  margin: 0;
+  cursor: default;
+}
+
+.report-card .content {
+  margin-bottom: 24px;
+  margin-top: 5px;
+  font-size: 14px;
+  cursor: default;
+}
+
+#protection-details {
+  background: url("chrome://browser/skin/settings.svg") no-repeat 3px 3px;
+  padding: 4px 4px 4px 24px;
+  font-size: 12px;
+  display: inline;
+  cursor: default;
+}
+
+#protection-details:hover {
+  background-color: var(--clickable-text-hover);
+}
+
+#protection-details:hover:active {
+  background-color: var(--clickable-text-active);
+}
+
+#protection-details span {
+  font-weight: bold;
+}
+
+.card-body {
+  border-top: var(--card-divider);
+  grid-column: span 2;
+  grid-row: 2;
+  margin-bottom: 24px;
+}

--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@@ -2,21 +2,39 @@
    - 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">
     <meta http-equiv="Content-Security-Policy" content="default-src chrome: blob:">
-    <link rel="stylesheet" media="screen, projection" type="text/css"
-          href="chrome://global/skin/in-content/info-pages.css" title="infop">
     <link rel="stylesheet" type="text/css"
           href="chrome://browser/content/protections.css">
     <link rel="icon" href="chrome://global/skin/icons/warning.svg">
     <script type="text/javascript" src="chrome://browser/content/protections.js"></script>
     <title>Protection Report</title>
   </head>
 
   <body>
-    <div class="under-construction"><div/>
+    <div id="report-content">
+      <h2 id="report-title">Privacy Protections</h2>
+      <div class="report-card etp-card">
+        <div class="card-header">
+          <div class="icon"></div>
+          <div class="wrapper">
+            <h3 class="card-title">
+              Enhanced Tracking Protection
+            </h3>
+            <p class="content">
+              Trackers follow you around online to collect information about your browsing habits and interests. Firefox blocks many of these trackers and other malicious scripts.
+            </p>
+            <p id="protection-details">
+              Protection Level is set to <span>Standard</span>
+            </p>
+          </div>
+        </div>
+        <div class="card-body">
+        </div>
+      </div>
+    </div>
   </body>
 </html>

--- a/browser/components/protections/content/protections.js
+++ b/browser/components/protections/content/protections.js
@@ -1,9 +1,12 @@
 /* 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/. */
 
 /* eslint-env mozilla/frame-script */
 
 document.addEventListener("DOMContentLoaded", (e) => {
-  RPMSendAsyncMessage("ArrivedOnPage");
+  let protectionDetails = document.getElementById("protection-details");
+  protectionDetails.addEventListener("click", () => {
+    RPMSendAsyncMessage("openContentBlockingPreferences");
+  });
 });

--- a/browser/modules/RemotePrompt.jsm
+++ b/browser/modules/RemotePrompt.jsm
@@ -12,20 +12,24 @@ ChromeUtils.defineModuleGetter(this, "Pr
 ChromeUtils.defineModuleGetter(this, "Services",
                                "resource://gre/modules/Services.jsm");
 
 var RemotePrompt = {
   // Listeners are added in BrowserGlue.jsm
   receiveMessage(message) {
     switch (message.name) {
       case "Prompt:Open":
-        if (message.data.uri) {
-          this.openModalWindow(message.data, message.target);
+        const COMMON_DIALOG = "chrome://global/content/commonDialog.xul";
+        const SELECT_DIALOG = "chrome://global/content/selectDialog.xul";
+
+        if (message.data.tabPrompt) {
+          this.openTabPrompt(message.data, message.target);
         } else {
-          this.openTabPrompt(message.data, message.target);
+          let uri = (message.data.promptType == "select") ? SELECT_DIALOG : COMMON_DIALOG;
+          this.openModalWindow(uri, message.data, message.target);
         }
         break;
     }
   },
 
   openTabPrompt(args, browser) {
     let window = browser.ownerGlobal;
     let tabPrompt = window.gBrowser.getTabModalPromptBox(browser);
@@ -80,23 +84,23 @@ var RemotePrompt = {
       // there's other stuff in nsWindowWatcher::OpenWindowInternal
       // that we might need to do here as well.
     } catch (ex) {
       Cu.reportError(ex);
       onPromptClose(true);
     }
   },
 
-  openModalWindow(args, browser) {
+  openModalWindow(uri, args, browser) {
     let window = browser.ownerGlobal;
     try {
       PromptUtils.fireDialogEvent(window, "DOMWillOpenModalDialog", browser);
       let bag = PromptUtils.objectToPropBag(args);
 
-      Services.ww.openWindow(window, args.uri, "_blank",
+      Services.ww.openWindow(window, uri, "_blank",
                              "centerscreen,chrome,modal,titlebar", bag);
 
       PromptUtils.propBagToObject(bag, args);
     } finally {
       PromptUtils.fireDialogEvent(window, "DOMModalDialogClosed", browser);
       browser.messageManager.sendAsyncMessage("Prompt:Close", args);
     }
   },

--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1117,17 +1117,17 @@ panelview .toolbarbutton-1,
   -moz-context-properties: fill, fill-opacity;
   content: url(chrome://browser/skin/back-12.svg);
   fill: currentColor;
   fill-opacity: 0.6;
   float: right;
   transform: translateY(1px);
 }
 
-#main-window:not([customizing]) .subviewbutton-nav[disabled=true]::after {
+:root:not([customizing]) .subviewbutton-nav[disabled=true]::after {
   opacity: 0.4;
 }
 
 .PanelUI-subView .subviewbutton-nav:-moz-locale-dir(ltr)::after {
   transform: scaleX(-1) translateY(1px);
 }
 
 .subviewbutton[shortcut]::after,

--- a/devtools/client/debugger/src/actions/event-listeners.js
+++ b/devtools/client/debugger/src/actions/event-listeners.js
@@ -19,17 +19,17 @@ async function updateBreakpoints(dispatc
   dispatch({ type: "UPDATE_EVENT_LISTENERS", active: newEvents });
 
   const current = await asyncStore.eventListenerBreakpoints;
   asyncStore.eventListenerBreakpoints = {
     ...current,
     active: newEvents,
   };
 
-  client.setEventListenerBreakpoints(newEvents);
+  await client.setEventListenerBreakpoints(newEvents);
 }
 
 async function updateExpanded(dispatch, newExpanded: string[]) {
   dispatch({
     type: "UPDATE_EVENT_LISTENER_EXPANDED",
     expanded: newExpanded,
   });
 
@@ -41,30 +41,30 @@ async function updateExpanded(dispatch, 
 }
 
 export function addEventListenerBreakpoints(eventsToAdd: string[]) {
   return async ({ dispatch, client, getState }: ThunkArgs) => {
     const activeListenerBreakpoints = await getActiveEventListeners(getState());
 
     const newEvents = uniq([...eventsToAdd, ...activeListenerBreakpoints]);
 
-    updateBreakpoints(dispatch, client, newEvents);
+    await updateBreakpoints(dispatch, client, newEvents);
   };
 }
 
 export function removeEventListenerBreakpoints(eventsToRemove: string[]) {
   return async ({ dispatch, client, getState }: ThunkArgs) => {
     const activeListenerBreakpoints = await getActiveEventListeners(getState());
 
     const newEvents = remove(
       activeListenerBreakpoints,
       event => !eventsToRemove.includes(event)
     );
 
-    updateBreakpoints(dispatch, client, newEvents);
+    await updateBreakpoints(dispatch, client, newEvents);
   };
 }
 
 export function addEventListenerExpanded(category: string) {
   return async ({ dispatch, getState }: ThunkArgs) => {
     const expanded = await getEventListenerExpanded(getState());
 
     const newExpanded = uniq([...expanded, category]);

--- a/devtools/client/debugger/src/client/firefox.js
+++ b/devtools/client/debugger/src/client/firefox.js
@@ -43,17 +43,21 @@ export async function onConnect(connecti
   await threadClient.reconfigure({
     observeAsmJS: true,
     pauseWorkersUntilAttach: true,
     wasmBinarySource: supportsWasm,
     skipBreakpoints: prefs.skipPausing,
   });
 
   // Retrieve possible event listener breakpoints
-  actions.getEventListenerBreakpointTypes();
+  actions.getEventListenerBreakpointTypes().catch(e => console.error(e));
+
+  // Initialize the event breakpoints on the thread up front so that
+  // they are active once attached.
+  actions.addEventListenerBreakpoints([]).catch(e => console.error(e));
 
   // In Firefox, we need to initially request all of the sources. This
   // usually fires off individual `newSource` notifications as the
   // debugger finds them, but there may be existing sources already in
   // the debugger (if it's paused already, or if loading the page from
   // bfcache) so explicity fire `newSource` events for all returned
   // sources.
   const traits = tabTarget.traits;

--- a/devtools/client/debugger/src/client/firefox/commands.js
+++ b/devtools/client/debugger/src/client/firefox/commands.js
@@ -30,24 +30,28 @@ import type {
   TabTarget,
   DebuggerClient,
   Grip,
   ThreadClient,
   ObjectClient,
   SourcesPacket,
 } from "./types";
 
-import type { EventListenerCategoryList } from "../../actions/types";
+import type {
+  EventListenerCategoryList,
+  EventListenerActiveList,
+} from "../../actions/types";
 
 let workerClients: Object;
 let threadClient: ThreadClient;
 let tabTarget: TabTarget;
 let debuggerClient: DebuggerClient;
 let sourceActors: { [ActorId]: SourceId };
 let breakpoints: { [string]: Object };
+let eventBreakpoints: ?EventListenerActiveList;
 let supportsWasm: boolean;
 
 let shouldWaitForWorkers = false;
 
 type Dependencies = {
   threadClient: ThreadClient,
   tabTarget: TabTarget,
   debuggerClient: DebuggerClient,
@@ -358,26 +362,27 @@ async function setSkipPausing(shouldSkip
   await forEachWorkerThread(thread => thread.skipBreakpoints(shouldSkip));
 }
 
 function interrupt(thread: string): Promise<*> {
   return lookupThreadClient(thread).interrupt();
 }
 
 async function setEventListenerBreakpoints(ids: string[]) {
+  eventBreakpoints = ids;
+
   await threadClient.setActiveEventBreakpoints(ids);
   await forEachWorkerThread(thread => thread.setActiveEventBreakpoints(ids));
 }
 
 // eslint-disable-next-line
 async function getEventListenerBreakpointTypes(): Promise<
   EventListenerCategoryList
 > {
-  const { value } = await threadClient.getAvailableEventBreakpoints();
-  return value;
+  return threadClient.getAvailableEventBreakpoints();
 }
 
 function pauseGrip(thread: string, func: Function): ObjectClient {
   return lookupThreadClient(thread).pauseGrip(func);
 }
 
 function registerSourceActor(sourceActorId: string, sourceId: SourceId) {
   sourceActors[sourceActorId] = sourceId;
@@ -401,16 +406,17 @@ function getSourceForActor(actor: ActorI
   }
   return sourceActors[actor];
 }
 
 async function fetchWorkers(): Promise<Worker[]> {
   if (features.windowlessWorkers) {
     const options = {
       breakpoints,
+      eventBreakpoints,
       observeAsmJS: true,
     };
 
     const newWorkerClients = await updateWorkerClients({
       tabTarget,
       debuggerClient,
       threadClient,
       workerClients,

--- a/devtools/client/debugger/src/client/firefox/types.js
+++ b/devtools/client/debugger/src/client/firefox/types.js
@@ -363,19 +363,17 @@ export type ThreadClient = {
   reconfigure: ({ observeAsmJS: boolean }) => Promise<*>,
   getLastPausePacket: () => ?PausedPacket,
   _parent: TabClient,
   actor: ActorId,
   actorID: ActorId,
   request: (payload: Object) => Promise<*>,
   url: string,
   setActiveEventBreakpoints: (string[]) => void,
-  getAvailableEventBreakpoints: () => Promise<{|
-    value: EventListenerCategoryList,
-  |}>,
+  getAvailableEventBreakpoints: () => Promise<EventListenerCategoryList>,
   skipBreakpoints: boolean => Promise<{| skip: boolean |}>,
 };
 
 export type Panel = {|
   emit: (eventName: string) => void,
   openLink: (url: string) => void,
   openWorkerToolbox: (worker: Worker) => void,
   openElementInInspector: (grip: Object) => void,

--- a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js
@@ -86,17 +86,24 @@ class EventListeners extends Component<P
           onClick={() => this.onCategoryToggle(category.name)}
         >
           <AccessibleImage className={classnames("arrow", { expanded })} />
         </button>
         <label className="event-listener-label">
           <input
             type="checkbox"
             value={category.name}
-            onChange={e => this.onCategoryClick(category, e.target.checked)}
+            onChange={e => {
+              this.onCategoryClick(
+                category,
+                // Clicking an indeterminate checkbox should always have the
+                // effect of disabling any selected items.
+                indeterminate ? false : e.target.checked
+              );
+            }}
             checked={checked}
             ref={el => el && (el.indeterminate = indeterminate)}
           />
           <span className="event-listener-category">{category.name}</span>
         </label>
       </div>
     );
   }

--- a/devtools/client/debugger/src/reducers/event-listeners.js
+++ b/devtools/client/debugger/src/reducers/event-listeners.js
@@ -41,24 +41,24 @@ function update(
       return { ...state, expanded: action.expanded };
 
     default:
       return state;
   }
 }
 
 export function getActiveEventListeners(state: State): EventListenerActiveList {
-  return state.eventListenerBreakpoints.active;
+  return state.eventListenerBreakpoints.active || [];
 }
 
 export function getEventListenerBreakpointTypes(
   state: State
 ): EventListenerCategoryList {
-  return state.eventListenerBreakpoints.categories;
+  return state.eventListenerBreakpoints.categories || [];
 }
 
 export function getEventListenerExpanded(
   state: State
 ): EventListenerExpandedList {
-  return state.eventListenerBreakpoints.expanded;
+  return state.eventListenerBreakpoints.expanded || [];
 }
 
 export default update;

--- a/devtools/client/debugger/src/utils/pause/why.js
+++ b/devtools/client/debugger/src/utils/pause/why.js
@@ -11,16 +11,17 @@ import type { Why } from "../../types";
 // "breakpointConditionThrown", "clientEvaluated"
 // "interrupted", "attached"
 const reasons = {
   debuggerStatement: "whyPaused.debuggerStatement",
   breakpoint: "whyPaused.breakpoint",
   exception: "whyPaused.exception",
   resumeLimit: "whyPaused.resumeLimit",
   breakpointConditionThrown: "whyPaused.breakpointConditionThrown",
+  eventBreakpoint: "whyPaused.eventBreakpoint",
 
   // V8
   DOM: "whyPaused.breakpoint",
   EventListener: "whyPaused.pauseOnDOMEvents",
   XHR: "whyPaused.xhr",
   promiseRejection: "whyPaused.promiseRejection",
   assert: "whyPaused.assert",
   debugCommand: "whyPaused.debugCommand",

--- a/devtools/client/debugger/test/mochitest/browser.ini
+++ b/devtools/client/debugger/test/mochitest/browser.ini
@@ -588,16 +588,18 @@ support-files =
   examples/wasm-sourcemaps/fib.c
   examples/wasm-sourcemaps/fib.wasm
   examples/wasm-sourcemaps/fib.wasm.map
   examples/wasm-sourcemaps/utils.js
   examples/doc-html-breakpoints.html
   examples/html-breakpoints-slow.js
   examples/sjs_slow-load.sjs
   examples/fetch.js
+  examples/doc-event-breakpoints.html
+  examples/event-breakpoints.js
   examples/doc-xhr.html
   examples/doc-xhr-run-to-completion.html
   examples/doc-scroll-run-to-completion.html
   examples/pretty.js
   examples/sum/sum.js
   examples/sum/sum.min.js
   examples/sum/sum.min.js.map
   examples/big-sourcemap_files/bundle.js
@@ -801,14 +803,15 @@ skip-if = os == "win"
 skip-if = os == "win"
 [browser_dbg-wasm-sourcemaps.js]
 skip-if = true
 [browser_dbg-windowless-workers.js]
 [browser_dbg-windowless-workers-early-breakpoint.js]
 [browser_dbg-worker-scopes.js]
 skip-if = (os == 'linux' && debug) || ccov #Bug 1456013
 [browser_dbg-event-handler.js]
+[browser_dbg-event-breakpoints.js]
 [browser_dbg-eval-throw.js]
 [browser_dbg-sourceURL-breakpoint.js]
 [browser_dbg-old-breakpoint.js]
 [browser_dbg-idb-run-to-completion.js]
 [browser_dbg-scopes-xrays.js]
 [browser_dbg-message-run-to-completion.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-event-breakpoints.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/>. */
+
+function assertPauseLocation(dbg, line) {
+  const { location } = dbg.selectors.getVisibleSelectedFrame();
+
+  const source = findSource(dbg, "event-breakpoints.js");
+
+  is(location.sourceId, source.id, `correct sourceId`);
+  is(location.line, line, `correct line`);
+
+  assertPausedLocation(dbg);
+}
+
+add_task(async function() {
+  await pushPref("devtools.debugger.features.event-listeners-breakpoints", true);
+
+  const dbg = await initDebugger("doc-event-breakpoints.html", "event-breakpoints");
+  await selectSource(dbg, "event-breakpoints");
+  await waitForSelectedSource(dbg, "event-breakpoints");
+
+  await dbg.actions.addEventListenerBreakpoints([
+    "event.mouse.click",
+    "event.xhr.load",
+    "timer.timeout.set",
+    "timer.timeout.fire",
+  ]);
+
+  invokeInTab("clickHandler");
+  await waitForPaused(dbg);
+  assertPauseLocation(dbg, 12);
+  await resume(dbg);
+
+  invokeInTab("xhrHandler");
+  await waitForPaused(dbg);
+  assertPauseLocation(dbg, 20);
+  await resume(dbg);
+
+  invokeInTab("timerHandler");
+  await waitForPaused(dbg);
+  assertPauseLocation(dbg, 27);
+  await resume(dbg);
+
+  await waitForPaused(dbg);
+  assertPauseLocation(dbg, 29);
+  await resume(dbg);
+});
\ No newline at end of file

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/test/mochitest/examples/doc-event-breakpoints.html
@@ -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/. -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Debugger event bp test page</title>
+  </head>
+
+  <body>
+    <button id="click-button">Run Click Handler</button>
+    <button id="xhr-button">Run XHR Handler</button>
+    <button id="timer-button">Run Timer Handler</button>
+    <div id="click-target" style="margin: 50px; background-color: green;">
+      Click Target
+    </div>
+    <script src="event-breakpoints.js"></script>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/test/mochitest/examples/event-breakpoints.js
@@ -0,0 +1,34 @@
+/* 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/>. */
+
+document.getElementById("click-button").onmousedown = clickHandler;
+function clickHandler() {
+  document.getElementById("click-target").click();
+}
+
+document.getElementById("click-target").onclick = clickTargetClicked;
+function clickTargetClicked() {
+  console.log("clicked");
+}
+
+document.getElementById("xhr-button").onmousedown = xhrHandler;
+function xhrHandler() {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "doc-event-breakpoints.html", true);
+  xhr.onload = function(){
+    console.log("xhr load");
+  };
+  xhr.send();
+}
+
+document.getElementById("timer-button").onmousedown = timerHandler;
+function timerHandler() {
+  setTimeout(
+    () => {
+      console.log("timer callback");
+    },
+    50
+  );
+  console.log("timer set");
+}
\ No newline at end of file

--- a/devtools/client/locales/en-US/debugger.properties
+++ b/devtools/client/locales/en-US/debugger.properties
@@ -978,16 +978,21 @@ experimental=This is an experimental fea
 # in a info block explaining how the debugger is currently paused due to a `debugger`
 # statement in the code
 whyPaused.debuggerStatement=Paused on debugger statement
 
 # LOCALIZATION NOTE (whyPaused.breakpoint): The text that is displayed
 # in a info block explaining how the debugger is currently paused on a breakpoint
 whyPaused.breakpoint=Paused on breakpoint
 
+# LOCALIZATION NOTE (whyPaused.eventBreakpoint): The text that is displayed
+# in a info block explaining how the debugger is currently paused on an event
+# breakpoint.
+whyPaused.eventBreakpoint=Paused on event breakpoint
+
 # LOCALIZATION NOTE (whyPaused.exception): The text that is displayed
 # in a info block explaining how the debugger is currently paused on an exception
 whyPaused.exception=Paused on exception
 
 # LOCALIZATION NOTE (whyPaused.resumeLimit): The text that is displayed
 # in a info block explaining how the debugger is currently paused while stepping
 # in or out of the stack
 whyPaused.resumeLimit=Paused while stepping

--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -61,16 +61,20 @@ collapseDetailsPane=Hide request details
 # LOCALIZATION NOTE (headersEmptyText): This is the text displayed in the
 # headers tab of the network details pane when there are no headers available.
 headersEmptyText=No headers for this request
 
 # LOCALIZATION NOTE (headersFilterText): This is the text displayed in the
 # headers tab of the network details pane for the filtering input.
 headersFilterText=Filter headers
 
+# LOCALIZATION NOTE (webSocketsEmptyText): This is the text displayed in the
+# WebSockets tab of the network details pane when there are no frames available.
+webSocketsEmptyText=No WebSocket frames for this request
+
 # LOCALIZATION NOTE (cookiesEmptyText): This is the text displayed in the
 # cookies tab of the network details pane when there are no cookies available.
 cookiesEmptyText=No cookies for this request
 
 # LOCALIZATION NOTE (cookiesFilterText): This is the text displayed in the
 # cookies tab of the network details pane for the filtering input.
 cookiesFilterText=Filter cookies
 
@@ -632,16 +636,20 @@ netmonitor.toolbar.contentSize=Size
 # LOCALIZATION NOTE (netmonitor.toolbar.waterfall): This is the label displayed
 # in the network table toolbar, above the "waterfall" column.
 netmonitor.toolbar.waterfall=Timeline
 
 # LOCALIZATION NOTE (netmonitor.tab.headers): This is the label displayed
 # in the network details pane identifying the headers tab.
 netmonitor.tab.headers=Headers
 
+# LOCALIZATION NOTE (netmonitor.tab.webSockets): This is the label displayed
+# in the network details pane identifying the webSockets tab.
+netmonitor.tab.webSockets=WebSockets
+
 # LOCALIZATION NOTE (netmonitor.tab.cookies): This is the label displayed
 # in the network details pane identifying the cookies tab.
 netmonitor.tab.cookies=Cookies
 
 # LOCALIZATION NOTE (netmonitor.tab.cache): This is the label displayed
 # in the network details pane identifying the cache tab.
 netmonitor.tab.cache=Cache
 

--- a/devtools/client/netmonitor/src/actions/index.js
+++ b/devtools/client/netmonitor/src/actions/index.js
@@ -6,18 +6,20 @@
 
 const batching = require("./batching");
 const filters = require("./filters");
 const requests = require("./requests");
 const selection = require("./selection");
 const sort = require("./sort");
 const timingMarkers = require("./timing-markers");
 const ui = require("./ui");
+const webSockets = require("./web-sockets");
 
 Object.assign(exports,
   batching,
   filters,
   requests,
   selection,
   sort,
   timingMarkers,
-  ui
+  ui,
+  webSockets,
 );

--- a/devtools/client/netmonitor/src/actions/moz.build
+++ b/devtools/client/netmonitor/src/actions/moz.build
@@ -6,9 +6,10 @@ DevToolsModules(
     'batching.js',
     'filters.js',
     'index.js',
     'requests.js',
     'selection.js',
     'sort.js',
     'timing-markers.js',
     'ui.js',
+    'web-sockets.js',
 )

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/web-sockets.js
@@ -0,0 +1,19 @@
+/* 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 { WS_ADD_FRAME } = require("../constants");
+
+function addFrame(httpChannelId, data) {
+  return {
+    type: WS_ADD_FRAME,
+    httpChannelId,
+    data,
+  };
+}
+
+module.exports = {
+  addFrame,
+};

--- a/devtools/client/netmonitor/src/components/TabboxPanel.js
+++ b/devtools/client/netmonitor/src/components/TabboxPanel.js
@@ -1,38 +1,41 @@
 /* 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 Services = require("Services");
 const {
   Component,
   createFactory,
 } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { L10N } = require("../utils/l10n");
 const { PANELS } = require("../constants");
 
 // Components
 const Tabbar = createFactory(require("devtools/client/shared/components/tabs/TabBar"));
 const TabPanel = createFactory(require("devtools/client/shared/components/tabs/Tabs").TabPanel);
 const CookiesPanel = createFactory(require("./CookiesPanel"));
 const HeadersPanel = createFactory(require("./HeadersPanel"));
+const WebSocketsPanel = createFactory(require("./WebSocketsPanel"));
 const ParamsPanel = createFactory(require("./ParamsPanel"));
 const CachePanel = createFactory(require("./CachePanel"));
 const ResponsePanel = createFactory(require("./ResponsePanel"));
 const SecurityPanel = createFactory(require("./SecurityPanel"));
 const StackTracePanel = createFactory(require("./StackTracePanel"));
 const TimingsPanel = createFactory(require("./TimingsPanel"));
 
 const COLLAPSE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
 const CACHE_TITLE = L10N.getStr("netmonitor.tab.cache");
 const COOKIES_TITLE = L10N.getStr("netmonitor.tab.cookies");
 const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
+const WEBSOCKETS_TITLE = L10N.getStr("netmonitor.tab.webSockets");
 const PARAMS_TITLE = L10N.getStr("netmonitor.tab.params");
 const RESPONSE_TITLE = L10N.getStr("netmonitor.tab.response");
 const SECURITY_TITLE = L10N.getStr("netmonitor.tab.security");
 const STACK_TRACE_TITLE = L10N.getStr("netmonitor.tab.stackTrace");
 const TIMINGS_TITLE = L10N.getStr("netmonitor.tab.timings");
 
 /**
 * Tabbox panel component
@@ -82,16 +85,21 @@ class TabboxPanel extends Component {
       sourceMapService,
       toggleNetworkDetails,
     } = this.props;
 
     if (!request) {
       return null;
     }
 
+    const channelId = request.channelId;
+    const showWebSocketsPanel =
+      request.cause.type === "websocket" &&
+      Services.prefs.getBoolPref(
+        "devtools.netmonitor.features.webSockets");
     return (
       Tabbar({
         activeTabId,
         menuDocument: window.parent.document,
         onSelect: selectTab,
         renderOnlySelected: true,
         showAllTabsMenu: true,
         sidebarToggleButton: hideToggleButton ? null :
@@ -108,16 +116,24 @@ class TabboxPanel extends Component {
         },
           HeadersPanel({
             cloneSelectedRequest,
             connector,
             openLink,
             request,
           }),
         ),
+        showWebSocketsPanel && TabPanel({
+          id: PANELS.WEBSOCKETS,
+          title: WEBSOCKETS_TITLE,
+        },
+          WebSocketsPanel({
+            channelId,
+          }),
+        ),
         TabPanel({
           id: PANELS.COOKIES,
           title: COOKIES_TITLE,
         },
           CookiesPanel({
             connector,
             openLink,
             request,

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/WebSocketsPanel.js
@@ -0,0 +1,85 @@
+/* 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 { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const {
+  connect,
+} = require("devtools/client/shared/redux/visibility-handler-connect");
+const { getFramesByChannelId } = require("../selectors/index");
+
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const { table, tbody, thead, tr, td, th, div } = dom;
+
+const { L10N } = require("../utils/l10n");
+const FRAMES_EMPTY_TEXT = L10N.getStr("webSocketsEmptyText");
+
+class WebSocketsPanel extends Component {
+  static get propTypes() {
+    return {
+      channelId: PropTypes.number,
+      frames: PropTypes.array,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { frames } = this.props;
+
+    if (!frames) {
+      return div({ className: "empty-notice" },
+        FRAMES_EMPTY_TEXT
+      );
+    }
+
+    const rows = [];
+    frames.forEach((frame, index) => {
+      rows.push(
+        tr(
+          { key: index,
+            className: "frames-row" },
+          td({ className: "frames-cell" }, frame.type),
+          td({ className: "frames-cell" }, frame.httpChannelId),
+          td({ className: "frames-cell" }, frame.payload),
+          td({ className: "frames-cell" }, frame.opCode),
+          td({ className: "frames-cell" }, frame.maskBit.toString()),
+          td({ className: "frames-cell" }, frame.finBit.toString()),
+          td({ className: "frames-cell" }, frame.timeStamp)
+        )
+      );
+    });
+
+    return table(
+      { className: "frames-list-table" },
+      thead(
+        { className: "frames-head" },
+        tr(
+          { className: "frames-row" },
+          th({ className: "frames-headerCell" }, "Type"),
+          th({ className: "frames-headerCell" }, "Channel ID"),
+          th({ className: "frames-headerCell" }, "Payload"),
+          th({ className: "frames-headerCell" }, "OpCode"),
+          th({ className: "frames-headerCell" }, "MaskBit"),
+          th({ className: "frames-headerCell" }, "FinBit"),
+          th({ className: "frames-headerCell" }, "Time")
+        )
+      ),
+      tbody(
+        {
+          className: "frames-list-tableBody",
+        },
+        rows
+      )
+    );
+  }
+}
+
+module.exports = connect((state, props) => ({
+  frames: getFramesByChannelId(state, props.channelId),
+}))(WebSocketsPanel);

--- a/devtools/client/netmonitor/src/components/moz.build
+++ b/devtools/client/netmonitor/src/components/moz.build
@@ -42,9 +42,10 @@ DevToolsModules(
     'SourceEditor.js',
     'StackTracePanel.js',
     'StatisticsPanel.js',
     'StatusBar.js',
     'StatusCode.js',
     'TabboxPanel.js',
     'TimingsPanel.js',
     'Toolbar.js',
+    'WebSocketsPanel.js',
 )

--- a/devtools/client/netmonitor/src/connector/firefox-data-provider.js
+++ b/devtools/client/netmonitor/src/connector/firefox-data-provider.js
@@ -74,16 +74,17 @@ class FirefoxDataProvider {
       isXHR,
       cause,
       startedDateTime,
       fromCache,
       fromServiceWorker,
       isThirdPartyTrackingResource,
       referrerPolicy,
       blockedReason,
+      channelId,
     } = data;
 
     // Insert blocked reason in the payload queue as well, as we'll need it later
     // when deciding if the request is complete.
     this.pushRequestToQueue(id, {
       blockedReason,
     });
 
@@ -101,16 +102,17 @@ class FirefoxDataProvider {
         // FF59+ supports fetching the traces lazily via requestData.
         stacktrace: cause.stacktrace,
 
         fromCache,
         fromServiceWorker,
         isThirdPartyTrackingResource,
         referrerPolicy,
         blockedReason,
+        channelId,
       }, true);
     }
 
     this.emit(EVENTS.REQUEST_ADDED, id);
   }
 
   /**
    * Update a network request if it already exists in application state.
@@ -338,29 +340,31 @@ class FirefoxDataProvider {
       request: {
         method,
         url,
       },
       startedDateTime,
       isThirdPartyTrackingResource,
       referrerPolicy,
       blockedReason,
+      channelId,
     } = networkInfo;
 
     await this.addRequest(actor, {
       cause,
       fromCache,
       fromServiceWorker,
       isXHR,
       method,
       startedDateTime,
       url,
       isThirdPartyTrackingResource,
       referrerPolicy,
       blockedReason,
+      channelId,
     });
 
     this.emit(EVENTS.NETWORK_EVENT, actor);
   }
 
   /**
    * The "networkEventUpdate" message type handler.
    *
@@ -421,63 +425,59 @@ class FirefoxDataProvider {
    * The "webSocketOpened" message type handler.
    *
    * @param {number} httpChannelId the channel ID
    * @param {string} effectiveURI the effective URI of the page
    * @param {string} protocols webSocket protocols
    * @param {string} extensions
    */
   async onWebSocketOpened(httpChannelId, effectiveURI, protocols, extensions) {
-    console.log("FirefoxDataProvider onWebSocketOpened: " +
-      " httpChannelId: " + httpChannelId +
-      " effectiveURI: " + effectiveURI +
-      " protocols: " + protocols +
-      " extensions: " + extensions);
   }
 
   /**
    * The "webSocketClosed" message type handler.
    *
    * @param {boolean} wasClean
    * @param {number} code
    * @param {string} reason
    */
   async onWebSocketClosed(wasClean, code, reason) {
-    console.log("FirefoxDataProvider onWebSocketClosed: " +
-      " wasClean: " + wasClean +
-      " code: " + code +
-      " reason: " + reason);
   }
 
   /**
    * The "frameSent" message type handler.
    *
    * @param {number} httpChannelId the channel ID
    * @param {object} data websocket frame information
    */
   async onFrameSent(httpChannelId, data) {
-    await this.getLongString(data.payload).then(payload => {
-      console.log("FirefoxDataProvider onFrameSent: " +
-      " httpChannelId: " + httpChannelId +
-      " onFrameSent: " + payload);
-    });
+    this.addFrame(httpChannelId, data);
   }
 
   /**
    * The "frameReceived" message type handler.
    *
    * @param {number} httpChannelId the channel ID
    * @param {object} data websocket frame information
    */
   async onFrameReceived(httpChannelId, data) {
-    await this.getLongString(data.payload).then(payload => {
-      console.log("FirefoxDataProvider onFrameReceived: " +
-      " httpChannelId: " + httpChannelId +
-      " onFrameSent: " + payload);
-    });
+    this.addFrame(httpChannelId, data);
+  }
+
+  /**
+   * Add a new WebSocket frame to application state.
+   *
+   * @param {number} httpChannelId the channel ID
+   * @param {object} data websocket frame information
+   */
+  async addFrame(httpChannelId, data) {
+    if (this.actionsEnabled && this.actions.addFrame) {
+      await this.actions.addFrame(httpChannelId, data);
+    }
+    // TODO: Emit an event for test here
   }
 
   /**
    * Notify actions when messages from onNetworkEventUpdate are done, networkEventUpdate
    * messages contain initial network info for each updateType and then we can invoke
    * requestData to fetch its corresponded data lazily.
    * Once all updateTypes of networkEventUpdate message are arrived, we flush merged
    * request payload from pending queue and then update component.

--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@@ -29,16 +29,17 @@ const actionTypes = {
   SET_REQUEST_FILTER_TEXT: "SET_REQUEST_FILTER_TEXT",
   SORT_BY: "SORT_BY",
   TOGGLE_COLUMN: "TOGGLE_COLUMN",
   TOGGLE_RECORDING: "TOGGLE_RECORDING",
   TOGGLE_REQUEST_FILTER_TYPE: "TOGGLE_REQUEST_FILTER_TYPE",
   UPDATE_REQUEST: "UPDATE_REQUEST",
   WATERFALL_RESIZE: "WATERFALL_RESIZE",
   SET_COLUMNS_WIDTH: "SET_COLUMNS_WIDTH",
+  WS_ADD_FRAME: "WS_ADD_FRAME",
 };
 
 // Descriptions for what this frontend is currently doing.
 const ACTIVITY_TYPE = {
   // Standing by and handling requests normally.
   NONE: 0,
 
   // Forcing the target to reload with cache enabled or disabled.
@@ -149,21 +150,23 @@ const UPDATE_PROPS = [
   "responseContentAvailable",
   "responseCache",
   "responseCacheAvailable",
   "formDataSections",
   "stacktrace",
   "isThirdPartyTrackingResource",
   "referrerPolicy",
   "blockedReason",
+  "channelId",
 ];
 
 const PANELS = {
   COOKIES: "cookies",
   HEADERS: "headers",
+  WEBSOCKETS: "webSockets",
   PARAMS: "params",
   RESPONSE: "response",
   CACHE: "cache",
   SECURITY: "security",
   STACK_TRACE: "stack-trace",
   TIMINGS: "timings",
 };
 

--- a/devtools/client/netmonitor/src/create-store.js
+++ b/devtools/client/netmonitor/src/create-store.js
@@ -22,16 +22,17 @@ const eventTelemetry = require("./middle
 
 // Reducers
 const rootReducer = require("./reducers/index");
 const { FilterTypes, Filters } = require("./reducers/filters");
 const { Requests } = require("./reducers/requests");
 const { Sort } = require("./reducers/sort");
 const { TimingMarkers } = require("./reducers/timing-markers");
 const { UI, Columns, ColumnsData } = require("./reducers/ui");
+const { WebSockets } = require("./reducers/web-sockets");
 
 /**
  * Configure state and middleware for the Network monitor tool.
  */
 function configureStore(connector, telemetry) {
   // Prepare initial state.
   const initialState = {
     filters: new Filters({
@@ -39,16 +40,17 @@ function configureStore(connector, telem
     }),
     requests: new Requests(),
     sort: new Sort(),
     timingMarkers: new TimingMarkers(),
     ui: UI({
       columns: getColumnState(),
       columnsData: getColumnsData(),
     }),
+    webSockets: new WebSockets(),
   };
 
   // Prepare middleware.
   const middleware = applyMiddleware(
     thunk,
     prefs,
     batching,
     recording(connector),

--- a/devtools/client/netmonitor/src/reducers/index.js
+++ b/devtools/client/netmonitor/src/reducers/index.js
@@ -6,20 +6,22 @@
 
 const { combineReducers } = require("devtools/client/shared/vendor/redux");
 const batchingReducer = require("./batching");
 const { requestsReducer } = require("./requests");
 const { sortReducer } = require("./sort");
 const { filters } = require("./filters");
 const { timingMarkers } = require("./timing-markers");
 const { ui } = require("./ui");
+const { webSocketsReducer } = require("./web-sockets");
 const networkThrottling = require("devtools/client/shared/components/throttling/reducer");
 
 module.exports = batchingReducer(
   combineReducers({
     requests: requestsReducer,
     sort: sortReducer,
+    webSockets: webSocketsReducer,
     filters,
     timingMarkers,
     ui,
     networkThrottling,
   })
 );

--- a/devtools/client/netmonitor/src/reducers/moz.build
+++ b/devtools/client/netmonitor/src/reducers/moz.build
@@ -5,9 +5,10 @@
 DevToolsModules(
     'batching.js',
     'filters.js',
     'index.js',
     'requests.js',
     'sort.js',
     'timing-markers.js',
     'ui.js',
+    'web-sockets.js',
 )

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/web-sockets.js
@@ -0,0 +1,64 @@
+/* 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 {
+  WS_ADD_FRAME,
+} = require("../constants");
+
+/**
+ * This structure stores list of all WebSocket frames received
+ * from the backend.
+ */
+function WebSockets() {
+  return {
+    // Map with all requests (key = channelId, value = array of frame objects)
+    frames: new Map(),
+  };
+}
+
+/**
+ * This reducer is responsible for maintaining list of
+ * WebSocket frames within the Network panel.
+ */
+function webSocketsReducer(state = WebSockets(), action) {
+  switch (action.type) {
+    // Appending new frame into the map.
+    case WS_ADD_FRAME: {
+      const nextState = { ...state };
+
+      const newFrame = {
+        httpChannelId: action.httpChannelId,
+        ...action.data,
+      };
+
+      nextState.frames = mapSet(state.frames, newFrame.httpChannelId, newFrame);
+
+      return nextState;
+    }
+
+    default:
+      return state;
+  }
+}
+
+/**
+ * Append new item into existing map and return new map.
+ */
+function mapSet(map, key, value) {
+  const newMap = new Map(map);
+  if (newMap.has(key)) {
+    const framesArray = [...newMap.get(key)];
+    framesArray.push(value);
+    newMap.set(key, framesArray);
+    return newMap;
+  }
+  return newMap.set(key, [value]);
+}
+
+module.exports = {
+  WebSockets,
+  webSocketsReducer,
+};

--- a/devtools/client/netmonitor/src/selectors/index.js
+++ b/devtools/client/netmonitor/src/selectors/index.js
@@ -2,14 +2,16 @@
  * 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 requests = require("./requests");
 const timingMarkers = require("./timing-markers");
 const ui = require("./ui");
+const webSockets = require("./web-sockets");
 
 Object.assign(exports,
   requests,
   timingMarkers,
-  ui
+  ui,
+  webSockets,
 );

--- a/devtools/client/netmonitor/src/selectors/moz.build
+++ b/devtools/client/netmonitor/src/selectors/moz.build
@@ -2,9 +2,10 @@
 # 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(
     'index.js',
     'requests.js',
     'timing-markers.js',
     'ui.js',
+    'web-sockets.js',
 )

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/web-sockets.js
@@ -0,0 +1,13 @@
+/* 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";
+
+function getFramesByChannelId(state, channelId) {
+  return state.webSockets.frames.get(channelId);
+}
+
+module.exports = {
+  getFramesByChannelId,
+};

--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -66,17 +66,17 @@ body {
 .cm-s-mozilla .cm-executed-line {
   background-color: #133c26;
 }
 
 .cm-s-mozilla .cm-number,
 .variable-or-property .token-number,
 .variable-or-property[return] > .title > .name,
 .variable-or-property[scope] > .title > .name {
-  color: #6B89FF;
+  color: #709AFF;
 }
 
 .CodeMirror-Tern-completion-number:before {
   background-color: #5c9966;
 }
 
 .theme-fg-color1,
 .cm-s-mozilla .cm-attribute,
@@ -119,17 +119,17 @@ body {
 .theme-fg-color2 {
   color: var(--theme-highlight-purple);
 }
 
 .cm-s-mozilla .cm-string,
 .cm-s-mozilla .cm-string-2,
 .variable-or-property .token-string,
 .CodeMirror-Tern-farg {
-  color: #6B89FF;
+  color: #709AFF;
 }
 
 .CodeMirror-Tern-completion-string:before,
 .CodeMirror-Tern-completion-fn:before {
   background-color: #b26b47;
 }
 
 .cm-s-mozilla .cm-atom,

--- a/devtools/client/webconsole/test/fixtures/stub-generators/head.js
+++ b/devtools/client/webconsole/test/fixtures/stub-generators/head.js
@@ -70,16 +70,20 @@ function getCleanedPacket(key, packet) {
     if (res.startedDateTime) {
       res.startedDateTime = existingPacket.startedDateTime;
     }
 
     if (res.actor) {
       res.actor = existingPacket.actor;
     }
 
+    if (res.channelId) {
+      res.channelId = existingPacket.channelId;
+    }
+
     if (res.message) {
       // Clean timeStamp on the message prop.
       res.message.timeStamp = existingPacket.message.timeStamp;
       if (res.message.timer) {
         // Clean timer properties on the message.
         // Those properties are found on console.time, timeLog and timeEnd calls,
         // and those time can vary, which is why we need to clean them.
         if ("duration" in res.message.timer) {

--- a/devtools/client/webconsole/test/fixtures/stubs/networkEvent.js
+++ b/devtools/client/webconsole/test/fixtures/stubs/networkEvent.js
@@ -260,16 +260,17 @@ stubPackets.set(`GET request`, {
     "stacktraceAvailable": true
   },
   "response": {},
   "timings": {},
   "updates": [],
   "private": false,
   "isThirdPartyTrackingResource": false,
   "referrerPolicy": "no-referrer-when-downgrade",
+  "channelId": 22673132355586,
   "from": "server1.conn0.child1/consoleActor2"
 });
 
 stubPackets.set(`GET request update`, {
   "networkInfo": {
     "_type": "NetworkEvent",
     "actor": "server1.conn0.child1/netEvent30",
     "request": {
@@ -310,16 +311,17 @@ stubPackets.set(`XHR GET request`, {
     "stacktraceAvailable": true
   },
   "response": {},
   "timings": {},
   "updates": [],
   "private": false,
   "isThirdPartyTrackingResource": false,
   "referrerPolicy": "no-referrer-when-downgrade",
+  "channelId": 22673132355587,
   "from": "server1.conn1.child1/consoleActor2"
 });
 
 stubPackets.set(`XHR GET request update`, {
   "networkInfo": {
     "_type": "NetworkEvent",
     "actor": "server1.conn0.child1/netEvent31",
     "request": {
@@ -360,16 +362,17 @@ stubPackets.set(`XHR POST request`, {
     "stacktraceAvailable": true
   },
   "response": {},
   "timings": {},
   "updates": [],
   "private": false,
   "isThirdPartyTrackingResource": false,
   "referrerPolicy": "no-referrer-when-downgrade",
+  "channelId": 22673132355588,
   "from": "server1.conn2.child1/consoleActor2"
 });
 
 stubPackets.set(`XHR POST request update`, {
   "networkInfo": {
     "_type": "NetworkEvent",
     "actor": "server1.conn0.child1/netEvent32",
     "request": {

--- a/devtools/server/actors/network-event.js
+++ b/devtools/server/actors/network-event.js
@@ -63,16 +63,17 @@ const NetworkEventActor = protocol.Actor
       isXHR: this._isXHR,
       cause: this._cause,
       fromCache: this._fromCache,
       fromServiceWorker: this._fromServiceWorker,
       private: this._private,
       isThirdPartyTrackingResource: this._isThirdPartyTrackingResource,
       referrerPolicy: this._referrerPolicy,
       blockedReason: this._blockedReason,
+      channelId: this._channelId,
     };
   },
 
   /**
    * Releases this actor from the pool.
    */
   destroy(conn) {
     if (!this.netMonitorActor) {

--- a/devtools/server/actors/thread.js
+++ b/devtools/server/actors/thread.js
@@ -1,26 +1,29 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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 DebuggerNotificationObserver = require("DebuggerNotificationObserver");
 const Services = require("Services");
 const { Cr, Ci } = require("chrome");
 const { ActorPool } = require("devtools/server/actors/common");
 const { createValueGrip } = require("devtools/server/actors/object/utils");
 const { ActorClassWithSpec, Actor } = require("devtools/shared/protocol");
 const DevToolsUtils = require("devtools/shared/DevToolsUtils");
 const { assert, dumpn } = DevToolsUtils;
 const { threadSpec } = require("devtools/shared/specs/thread");
 const {
   getAvailableEventBreakpoints,
+  eventBreakpointForNotification,
+  makeEventBreakpointMessage,
 } = require("devtools/server/actors/utils/event-breakpoints");
 
 loader.lazyRequireGetter(this, "EnvironmentActor", "devtools/server/actors/environment", true);
 loader.lazyRequireGetter(this, "BreakpointActorMap", "devtools/server/actors/utils/breakpoint-actor-map", true);
 loader.lazyRequireGetter(this, "PauseScopedObjectActor", "devtools/server/actors/pause-scoped", true);
 loader.lazyRequireGetter(this, "EventLoopStack", "devtools/server/actors/utils/event-loop", true);
 loader.lazyRequireGetter(this, "FrameActor", "devtools/server/actors/frame", true);
 loader.lazyRequireGetter(this, "throttle", "devtools/shared/throttle", true);
@@ -56,17 +59,18 @@ const ThreadActor = ActorClassWithSpec(t
     this._parent = parent;
     this._dbg = null;
     this._gripDepth = 0;
     this._threadLifetimePool = null;
     this._parentClosed = false;
     this._scripts = null;
     this._xhrBreakpoints = [];
     this._observingNetwork = false;
-    this._eventBreakpoints = [];
+    this._activeEventBreakpoints = new Set();
+    this._activeEventPause = null;
 
     this._priorPause = null;
 
     this._options = {
       autoBlackBox: false,
     };
 
     this.breakpointActorMap = new BreakpointActorMap(this);
@@ -89,16 +93,20 @@ const ThreadActor = ActorClassWithSpec(t
 
     this.uncaughtExceptionHook = this.uncaughtExceptionHook.bind(this);
     this.createCompletionGrip = this.createCompletionGrip.bind(this);
     this.onDebuggerStatement = this.onDebuggerStatement.bind(this);
     this.onNewScript = this.onNewScript.bind(this);
     this.objectGrip = this.objectGrip.bind(this);
     this.pauseObjectGrip = this.pauseObjectGrip.bind(this);
     this._onOpeningRequest = this._onOpeningRequest.bind(this);
+    this._onNewDebuggee = this._onNewDebuggee.bind(this);
+    this._eventBreakpointListener = this._eventBreakpointListener.bind(this);
+
+    this._debuggerNotificationObserver = new DebuggerNotificationObserver();
 
     if (Services.obs) {
       // Set a wrappedJSObject property so |this| can be sent via the observer svc
       // for the xpcshell harness.
       this.wrappedJSObject = this;
       Services.obs.notifyObservers(this, "devtools-thread-instantiated");
     }
   },
@@ -107,16 +115,17 @@ const ThreadActor = ActorClassWithSpec(t
   _gripDepth: null,
 
   get dbg() {
     if (!this._dbg) {
       this._dbg = this._parent.makeDebugger();
       this._dbg.uncaughtExceptionHook = this.uncaughtExceptionHook;
       this._dbg.onDebuggerStatement = this.onDebuggerStatement;
       this._dbg.onNewScript = this.onNewScript;
+      this._dbg.onNewDebuggee = this._onNewDebuggee;
       if (this._dbg.replaying) {
         this._dbg.replayingOnForcedPause = this.replayingOnForcedPause.bind(this);
         const sendProgress = throttle((recording, executionPoint) => {
           if (this.attached) {
             this.conn.send({ type: "progress", from: this.actorID,
                              recording, executionPoint });
           }
         }, 100);
@@ -218,16 +227,26 @@ const ThreadActor = ActorClassWithSpec(t
     dumpn("in ThreadActor.prototype.destroy");
     if (this._state == "paused") {
       this.doResume();
     }
 
     this._xhrBreakpoints = [];
     this._updateNetworkObserver();
 
+    this._activeEventBreakpoints = new Set();
+    this._debuggerNotificationObserver.removeListener(
+      this._eventBreakpointListener);
+
+    for (const global of this.dbg.getDebuggees()) {
+      try {
+        this._debuggerNotificationObserver.disconnect(global);
+      } catch (e) { }
+    }
+
     this.sources.off("newSource", this.onNewSourceEvent);
     this.clearDebuggees();
     this.conn.removeActorPool(this._threadLifetimePool);
     this._threadLifetimePool = null;
 
     if (!this._dbg) {
       return;
     }
@@ -280,16 +299,19 @@ const ThreadActor = ActorClassWithSpec(t
       hooks: this._parent,
       connection: this.conn,
       thread: this,
     });
 
     if (options.breakpoints) {
       this._setBreakpointsOnAttach(options.breakpoints);
     }
+    if (options.eventBreakpoints) {
+      this.setActiveEventBreakpoints(options.eventBreakpoints);
+    }
 
     this.dbg.addDebuggees();
     this.dbg.enabled = true;
 
     if ("observeAsmJS" in this._options) {
       this.dbg.allowUnobservedAsmJS = !this._options.observeAsmJS;
     }
 
@@ -395,20 +417,34 @@ const ThreadActor = ActorClassWithSpec(t
     }
     return this._updateNetworkObserver();
   },
 
   getAvailableEventBreakpoints: function() {
     return getAvailableEventBreakpoints();
   },
   getActiveEventBreakpoints: function() {
-    return this._eventBreakpoints;
+    return Array.from(this._activeEventBreakpoints);
   },
   setActiveEventBreakpoints: function(ids) {
-    this._eventBreakpoints = ids;
+    this._activeEventBreakpoints = new Set(ids);
+
+    if (this._activeEventBreakpoints.size === 0) {
+      this._debuggerNotificationObserver.removeListener(
+        this._eventBreakpointListener);
+    } else {
+      this._debuggerNotificationObserver.addListener(
+        this._eventBreakpointListener);
+    }
+  },
+
+  _onNewDebuggee(global) {
+    try {
+      this._debuggerNotificationObserver.connect(global);
+    } catch (e) { }
   },
 
   _updateNetworkObserver() {
     // Workers don't have access to `Services` and even if they did, network
     // requests are all dispatched to the main thread, so there would be
     // nothing here to listen for. We'll need to revisit implementing
     // XHR breakpoints for workers.
     if (isWorker) {
@@ -508,16 +544,91 @@ const ThreadActor = ActorClassWithSpec(t
     Object.assign(this._options, options);
 
     // Update the global source store
     this.sources.setOptions(options);
 
     return {};
   },
 
+  _eventBreakpointListener(notification) {
+    if (this._state === "paused" || this._state === "detached") {
+      return;
+    }
+
+    const eventBreakpoint =
+      eventBreakpointForNotification(this.dbg, notification);
+
+    if (!this._activeEventBreakpoints.has(eventBreakpoint)) {
+      return;
+    }
+
+    if (notification.phase === "pre" && !this._activeEventPause) {
+      this._activeEventPause = this._captureDebuggerHooks();
+
+      this.dbg.onEnterFrame =
+        this._makeEventBreakpointEnterFrame(eventBreakpoint);
+    } else if (notification.phase === "post" && this._activeEventPause) {
+      this._restoreDebuggerHooks(this._activeEventPause);
+      this._activeEventPause = null;
+    } else if (!notification.phase && !this._activeEventPause) {
+      const frame = this.dbg.getNewestFrame();
+      if (frame) {
+        const { sourceActor } = this.sources.getFrameLocation(frame);
+        const url = sourceActor.url;
+        if (this.sources.isBlackBoxed(url)) {
+          return;
+        }
+
+        this._pauseAndRespondEventBreakpoint(frame, eventBreakpoint);
+      }
+    }
+  },
+
+  _makeEventBreakpointEnterFrame(eventBreakpoint) {
+    return frame => {
+      const { sourceActor } = this.sources.getFrameLocation(frame);
+      const url = sourceActor.url;
+      if (this.sources.isBlackBoxed(url)) {
+        return undefined;
+      }
+
+      this._restoreDebuggerHooks(this._activeEventPause);
+      this._activeEventPause = null;
+
+      return this._pauseAndRespondEventBreakpoint(frame, eventBreakpoint);
+    };
+  },
+
+  _pauseAndRespondEventBreakpoint(frame, eventBreakpoint) {
+    if (this.skipBreakpoints) {
+      return undefined;
+    }
+
+    return this._pauseAndRespond(frame, {
+      type: "eventBreakpoint",
+      breakpoint: eventBreakpoint,
+      message: makeEventBreakpointMessage(eventBreakpoint),
+    });
+  },
+
+  _captureDebuggerHooks() {
+    return {
+      onEnterFrame: this.dbg.onEnterFrame,
+      onStep: this.dbg.onStep,
+      onPop: this.dbg.onPop,
+    };
+  },
+
+  _restoreDebuggerHooks(hooks) {
+    this.dbg.onEnterFrame = hooks.onEnterFrame;
+    this.dbg.onStep = hooks.onStep;
+    this.dbg.onPop = hooks.onPop;
+  },
+
   /**
    * Pause the debuggee, by entering a nested event loop, and return a 'paused'
    * packet to the client.
    *
    * @param Debugger.Frame frame
    *        The newest debuggee frame in the stack.
    * @param object reason
    *        An object with a 'type' property containing the reason for the pause.
@@ -570,50 +681,51 @@ const ThreadActor = ActorClassWithSpec(t
     }
 
     // If the parent actor has been closed, terminate the debuggee script
     // instead of continuing. Executing JS after the content window is gone is
     // a bad idea.
     return this._parentClosed ? null : undefined;
   },
 
-  _makeOnEnterFrame: function({ thread, pauseAndRespond }) {
+  _makeOnEnterFrame: function({ pauseAndRespond }) {
     return frame => {
       const { sourceActor } = this.sources.getFrameLocation(frame);
 
       const url = sourceActor.url;
       if (this.sources.isBlackBoxed(url)) {
         return undefined;
       }
 
       // If the initial frame offset is a step target, we are done.
       if (frame.script.getOffsetMetadata(frame.offset).isStepStart) {
         return pauseAndRespond(frame);
       }
 
       // Continue forward until we get to a valid step target.
-      const { onStep, onPop } = thread._makeSteppingHooks(
+      const { onStep, onPop } = this._makeSteppingHooks(
         null, "next", false, null
       );
 
-      if (thread.dbg.replaying) {
+      if (this.dbg.replaying) {
         const offsets =
-          thread._findReplayingStepOffsets(null, frame,
+          this._findReplayingStepOffsets(null, frame,
                                            /* rewinding = */ false);
         frame.setReplayingOnStep(onStep, offsets);
       } else {
         frame.onStep = onStep;
       }
 
       frame.onPop = onPop;
       return undefined;
     };
   },
 
-  _makeOnPop: function({ thread, pauseAndRespond, startLocation, steppingType }) {
+  _makeOnPop: function({ pauseAndRespond, startLocation, steppingType }) {
+    const thread = this;
     const result = function(completion) {
       // onPop is called with 'this' set to the current frame.
       const location = thread.sources.getFrameLocation(this);
 
       const { sourceActor } = location;
       const url = sourceActor.url;
 
       if (thread.sources.isBlackBoxed(url)) {
@@ -723,18 +835,19 @@ const ThreadActor = ActorClassWithSpec(t
 
     if (pausePoint) {
       return pausePoint.step;
     }
 
     return script.getOffsetMetadata(offset).isStepStart;
   },
 
-  _makeOnStep: function({ thread, pauseAndRespond, startFrame,
+  _makeOnStep: function({ pauseAndRespond, startFrame,
                           startLocation, steppingType, completion, rewinding }) {
+    const thread = this;
     return function() {
       // onStep is called with 'this' set to the current frame.
 
       const location = thread.sources.getFrameLocation(this);
 
       // Always continue execution if either:
       //
       // 1. We are in a source mapped region, but inside a null mapping
@@ -823,17 +936,16 @@ const ThreadActor = ActorClassWithSpec(t
     // binding in each _makeOnX method, just do it once here and pass it
     // in to each function.
     const steppingHookState = {
       pauseAndRespond: (frame, onPacket = k=>k) => this._pauseAndRespond(
         frame,
         { type: "resumeLimit" },
         onPacket
       ),
-      thread: this,
       startFrame: this.youngestFrame,
       startLocation: startLocation,
       steppingType: steppingType,
       rewinding: rewinding,
       completion,
     };
 
     return {

--- a/devtools/server/actors/utils/event-breakpoints.js
+++ b/devtools/server/actors/utils/event-breakpoints.js
@@ -1,209 +1,417 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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";
 
+function generalEvent(groupID, eventType) {
+  return {
+    id: `event.${groupID}.${eventType}`,
+    type: "event",
+    name: eventType,
+    message: `DOM '${eventType}' event`,
+    eventType,
+    filter: "general",
+  };
+}
+function nodeEvent(groupID, eventType) {
+  return {
+    ...generalEvent(groupID, eventType),
+    filter: "node",
+  };
+}
+function mediaNodeEvent(groupID, eventType) {
+  return {
+    ...generalEvent(groupID, eventType),
+    filter: "media",
+  };
+}
+function globalEvent(groupID, eventType) {
+  return {
+    ...generalEvent(groupID, eventType),
+    message: `Global '${eventType}' event`,
+    filter: "global",
+  };
+}
+function xhrEvent(groupID, eventType) {
+  return {
+    ...generalEvent(groupID, eventType),
+    message: `XHR '${eventType}' event`,
+    filter: "xhr",
+  };
+}
+function workerEvent(eventType) {
+  return {
+    ...generalEvent("worker", eventType),
+    message: `Worker '${eventType}' event`,
+    filter: "worker",
+  };
+}
+
+function timerEvent(type, operation, name, notificationType) {
+  return {
+    id: `timer.${type}.${operation}`,
+    type: "simple",
+    name,
+    message: name,
+    notificationType,
+  };
+}
+
+function animationEvent(operation, name, notificationType) {
+  return {
+    id: `animationframe.${operation}`,
+    type: "simple",
+    name,
+    message: name,
+    notificationType,
+  };
+}
+
+const AVAILABLE_BREAKPOINTS = [
+  {
+    name: "Animation",
+    items: [
+      animationEvent(
+        "request",
+        "Request Animation Frame",
+        "requestAnimationFrame"
+      ),
+      animationEvent(
+        "cancel",
+        "Cancel Animation Frame",
+        "cancelAnimationFrame"
+      ),
+      animationEvent(
+        "fire",
+        "Animation Frame fired",
+        "requestAnimationFrameCallback"
+      ),
+    ],
+  },
+  {
+    name: "Clipboard",
+    items: [
+      generalEvent("clipboard", "copy"),
+      generalEvent("clipboard", "cut"),
+      generalEvent("clipboard", "paste"),
+      generalEvent("clipboard", "beforecopy"),
+      generalEvent("clipboard", "beforecut"),
+      generalEvent("clipboard", "beforepaste"),
+    ],
+  },
+  {
+    name: "Control",
+    items: [
+      generalEvent("control", "resize"),
+      generalEvent("control", "scroll"),
+      generalEvent("control", "zoom"),
+      generalEvent("control", "focus"),
+      generalEvent("control", "blur"),
+      generalEvent("control", "select"),
+      generalEvent("control", "change"),
+      generalEvent("control", "submit"),
+      generalEvent("control", "reset"),
+    ],
+  },
+  {
+    name: "DOM Mutation",
+    items: [
+      // Deprecated DOM events.
+      nodeEvent("dom-mutation", "DOMActivate"),
+      nodeEvent("dom-mutation", "DOMFocusIn"),
+      nodeEvent("dom-mutation", "DOMFocusOut"),
+
+      // Standard DOM mutation events.
+      nodeEvent("dom-mutation", "DOMAttrModified"),
+      nodeEvent("dom-mutation", "DOMCharacterDataModified"),
+      nodeEvent("dom-mutation", "DOMNodeInserted"),
+      nodeEvent("dom-mutation", "DOMNodeInsertedIntoDocument"),
+      nodeEvent("dom-mutation", "DOMNodeRemoved"),
+      nodeEvent("dom-mutation", "DOMNodeRemovedIntoDocument"),
+      nodeEvent("dom-mutation", "DOMSubtreeModified"),
+
+      // DOM load events.
+      nodeEvent("dom-mutation", "DOMContentLoaded"),
+    ],
+  },
+  {
+    name: "Device",
+    items: [
+      globalEvent("device", "deviceorientation"),
+      globalEvent("device", "devicemotion"),
+    ],
+  },
+  {
+    name: "Drag and Drop",
+    items: [
+      generalEvent("drag-and-drop", "drag"),
+      generalEvent("drag-and-drop", "dragstart"),
+      generalEvent("drag-and-drop", "dragend"),
+      generalEvent("drag-and-drop", "dragenter"),
+      generalEvent("drag-and-drop", "dragover"),
+      generalEvent("drag-and-drop", "dragleave"),
+      generalEvent("drag-and-drop", "drop"),
+    ],
+  },
+  {
+    name: "Keyboard",
+    items: [
+      generalEvent("keyboard", "keydown"),
+      generalEvent("keyboard", "keyup"),
+      generalEvent("keyboard", "keypress"),
+      generalEvent("keyboard", "input"),
+    ],
+  },
+  {
+    name: "Load",
+    items: [
+      globalEvent("load", "load"),
+      globalEvent("load", "beforeunload"),
+      globalEvent("load", "unload"),
+      globalEvent("load", "abort"),
+      globalEvent("load", "error"),
+      globalEvent("load", "hashchange"),
+      globalEvent("load", "popstate"),
+    ],
+  },
+  {
+    name: "Media",
+    items: [
+      mediaNodeEvent("media", "play"),
+      mediaNodeEvent("media", "pause"),
+      mediaNodeEvent("media", "playing"),
+      mediaNodeEvent("media", "canplay"),
+      mediaNodeEvent("media", "canplaythrough"),
+      mediaNodeEvent("media", "seeking"),
+      mediaNodeEvent("media", "seeked"),
+      mediaNodeEvent("media", "timeupdate"),
+      mediaNodeEvent("media", "ended"),
+      mediaNodeEvent("media", "ratechange"),
+      mediaNodeEvent("media", "durationchange"),
+      mediaNodeEvent("media", "volumechange"),
+      mediaNodeEvent("media", "loadstart"),
+      mediaNodeEvent("media", "progress"),
+      mediaNodeEvent("media", "suspend"),
+      mediaNodeEvent("media", "abort"),
+      mediaNodeEvent("media", "error"),
+      mediaNodeEvent("media", "emptied"),
+      mediaNodeEvent("media", "stalled"),
+      mediaNodeEvent("media", "loadedmetadata"),
+      mediaNodeEvent("media", "loadeddata"),
+      mediaNodeEvent("media", "waiting"),
+    ],
+  },
+  {
+    name: "Mouse",
+    items: [
+      generalEvent("mouse", "auxclick"),
+      generalEvent("mouse", "click"),
+      generalEvent("mouse", "dblclick"),
+      generalEvent("mouse", "mousedown"),
+      generalEvent("mouse", "mouseup"),
+      generalEvent("mouse", "mouseover"),
+      generalEvent("mouse", "mousemove"),
+      generalEvent("mouse", "mouseout"),
+      generalEvent("mouse", "mouseenter"),
+      generalEvent("mouse", "mouseleave"),
+      generalEvent("mouse", "mousewheel"),
+      generalEvent("mouse", "wheel"),
+      generalEvent("mouse", "contextmenu"),
+    ],
+  },
+  {
+    name: "Pointer",
+    items: [
+      generalEvent("pointer", "pointerover"),
+      generalEvent("pointer", "pointerout"),
+      generalEvent("pointer", "pointerenter"),
+      generalEvent("pointer", "pointerleave"),
+      generalEvent("pointer", "pointerdown"),
+      generalEvent("pointer", "pointerup"),
+      generalEvent("pointer", "pointermove"),
+      generalEvent("pointer", "pointercancel"),
+      generalEvent("pointer", "gotpointercapture"),
+      generalEvent("pointer", "lostpointercapture"),
+    ],
+  },
+  {
+    name: "Timer",
+    items: [
+      timerEvent("timeout", "set", "setTimeout", "setTimeout"),
+      timerEvent("timeout", "clear", "clearTimeout", "clearTimeout"),
+      timerEvent("timeout", "fire", "setTimeout fired", "setTimeoutCallback"),
+      timerEvent("interval", "set", "setInterval", "setInterval"),
+      timerEvent("interval", "clear", "clearInterval", "clearInterval"),
+      timerEvent(
+        "interval",
+        "fire",
+        "setInterval fired",
+        "setIntervalCallback"
+      ),
+    ],
+  },
+  {
+    name: "Touch",
+    items: [
+      generalEvent("touch", "touchstart"),
+      generalEvent("touch", "touchmove"),
+      generalEvent("touch", "touchend"),
+      generalEvent("touch", "touchcancel"),
+    ],
+  },
+  {
+    name: "Worker",
+    items: [
+      workerEvent("message"),
+      workerEvent("messageerror"),
+    ],
+  },
+  {
+    name: "XHR",
+    items: [
+      xhrEvent("xhr", "readystatechange"),
+      xhrEvent("xhr", "load"),
+      xhrEvent("xhr", "loadstart"),
+      xhrEvent("xhr", "loadend"),
+      xhrEvent("xhr", "abort"),
+      xhrEvent("xhr", "error"),
+      xhrEvent("xhr", "progress"),
+      xhrEvent("xhr", "timeout"),
+    ],
+  },
+];
+
+const FLAT_EVENTS = [];
+for (const category of AVAILABLE_BREAKPOINTS) {
+  for (const event of category.items) {
+    FLAT_EVENTS.push(event);
+  }
+}
+const EVENTS_BY_ID = {};
+for (const event of FLAT_EVENTS) {
+  if (EVENTS_BY_ID[event.id]) {
+    throw new Error("Duplicate event ID detected: " + event.id);
+  }
+  EVENTS_BY_ID[event.id] = event;
+}
+
+const SIMPLE_EVENTS = {};
+const DOM_EVENTS = {};
+for (const eventBP of FLAT_EVENTS) {
+  if (eventBP.type === "simple") {
+    const { notificationType } = eventBP;
+    if (SIMPLE_EVENTS[notificationType]) {
+      throw new Error("Duplicate simple event");
+    }
+    SIMPLE_EVENTS[notificationType] = eventBP.id;
+  } else if (eventBP.type === "event") {
+    const { eventType, filter } = eventBP;
+
+    let targetTypes;
+    if (filter === "global") {
+      targetTypes = ["global"];
+    } else if (filter === "xhr") {
+      targetTypes = ["xhr"];
+    } else if (filter === "worker") {
+      targetTypes = ["worker"];
+    } else if (filter === "general") {
+      targetTypes = ["global", "node"];
+    } else if (filter === "node" || filter === "media") {
+      targetTypes = ["node"];
+    } else {
+      throw new Error("Unexpected filter type");
+    }
+
+    for (const targetType of targetTypes) {
+      let byEventType = DOM_EVENTS[targetType];
+      if (!byEventType) {
+        byEventType = {};
+        DOM_EVENTS[targetType] = byEventType;
+      }
+
+      if (byEventType[eventType]) {
+        throw new Error("Duplicate dom event: " + eventType);
+      }
+      byEventType[eventType] = eventBP.id;
+    }
+  } else {
+    throw new Error("Unknown type: " + eventBP.type);
+  }
+}
+
+exports.eventBreakpointForNotification = eventBreakpointForNotification;
+function eventBreakpointForNotification(dbg, notification) {
+  const notificationType = notification.type;
+
+  if (notification.type === "domEvent") {
+    const domEventNotification = DOM_EVENTS[notification.targetType];
+    if (!domEventNotification) {
+      return null;
+    }
+
+    // The 'event' value is a cross-compartment wrapper for the DOM Event object.
+    // While we could use that directly in the main thread as an Xray wrapper,
+    // when debugging workers we can't, because it is an opaque wrapper.
+    // To make things work, we have to always interact with the Event object via
+    // the Debugger.Object interface.
+    const evt = dbg
+      .makeGlobalObjectReference(notification.global)
+      .makeDebuggeeValue(notification.event);
+
+    const eventType = evt.getProperty("type").return;
+    const id = domEventNotification[eventType];
+    if (!id) {
+      return null;
+    }
+    const eventBreakpoint = EVENTS_BY_ID[id];
+
+    if (eventBreakpoint.filter === "media") {
+      const currentTarget = evt.getProperty("currentTarget").return;
+      if (!currentTarget) {
+        return null;
+      }
+
+      const nodeType = currentTarget.getProperty("nodeType").return;
+      const namespaceURI = currentTarget.getProperty("namespaceURI").return;
+      if (
+        nodeType !== 1 /* ELEMENT_NODE */ ||
+        namespaceURI !== "http://www.w3.org/1999/xhtml"
+      ) {
+        return null;
+      }
+
+      const nodeName =
+        currentTarget.getProperty("nodeName").return.toLowerCase();
+      if (nodeName !== "audio" && nodeName !== "video") {
+        return null;
+      }
+    }
+
+    return id;
+  }
+
+  return SIMPLE_EVENTS[notificationType] || null;
+}
+
+exports.makeEventBreakpointMessage = makeEventBreakpointMessage;
+function makeEventBreakpointMessage(id) {
+  return EVENTS_BY_ID[id].message;
+}
+
 exports.getAvailableEventBreakpoints = getAvailableEventBreakpoints;
 function getAvailableEventBreakpoints() {
   const available = [];
   for (const { name, items } of AVAILABLE_BREAKPOINTS) {
     available.push({
       name,
       events: items.map(item => ({
         id: item.id,
-        name: item.eventType,
+        name: item.name,
       })),
     });
   }
   return available;
 }
-
-function event(groupID, name, filter = "content") {
-  return {
-    id: `${groupID}.event.${name}`,
-    type: "event",
-    eventType: name,
-    filter,
-  };
-}
-
-const AVAILABLE_BREAKPOINTS = [
-  {
-    name: "Clipboard",
-    items: [
-      event("clipboard", "copy"),
-      event("clipboard", "cut"),
-      event("clipboard", "paste"),
-      event("clipboard", "beforecopy"),
-      event("clipboard", "beforecut"),
-      event("clipboard", "beforepaste"),
-    ],
-  },
-  {
-    name: "Control",
-    items: [
-      event("control", "resize"),
-      event("control", "scroll"),
-      event("control", "zoom"),
-      event("control", "focus"),
-      event("control", "blur"),
-      event("control", "select"),
-      event("control", "change"),
-      event("control", "submit"),
-      event("control", "reset"),
-    ],
-  },
-  {
-    name: "DOM Mutation",
-    items: [
-      // Deprecated DOM events.
-      event("dom-mutation", "DOMActivate"),
-      event("dom-mutation", "DOMFocusIn"),
-      event("dom-mutation", "DOMFocusOut"),
-
-      // Standard DOM mutation events.
-      event("dom-mutation", "DOMAttrModified"),
-      event("dom-mutation", "DOMCharacterDataModified"),
-      event("dom-mutation", "DOMNodeInserted"),
-      event("dom-mutation", "DOMNodeInsertedIntoDocument"),
-      event("dom-mutation", "DOMNodeRemoved"),
-      event("dom-mutation", "DOMNodeRemovedIntoDocument"),
-      event("dom-mutation", "DOMSubtreeModified"),
-
-      // DOM load events.
-      event("dom-mutation", "DOMContentLoaded"),
-    ],
-  },
-  {
-    name: "Device",
-    items: [
-      event("device", "deviceorientation"),
-      event("device", "devicemotion"),
-    ],
-  },
-  {
-    name: "Drag and Drop",
-    items: [
-      event("drag-and-drop", "drag"),
-      event("drag-and-drop", "dragstart"),
-      event("drag-and-drop", "dragend"),
-      event("drag-and-drop", "dragenter"),
-      event("drag-and-drop", "dragover"),
-      event("drag-and-drop", "dragleave"),
-      event("drag-and-drop", "drop"),
-    ],
-  },
-  {
-    name: "Keyboard",
-    items: [
-      event("keyboard", "keydown"),
-      event("keyboard", "keyup"),
-      event("keyboard", "keypress"),
-      event("keyboard", "input"),
-    ],
-  },
-  {
-    name: "Load",
-    items: [
-      event("load", "load", "global"),
-      event("load", "beforeunload", "global"),
-      event("load", "unload", "global"),
-      event("load", "abort", "global"),
-      event("load", "error", "global"),
-      event("load", "hashchange", "global"),
-      event("load", "popstate", "global"),
-    ],
-  },
-  {
-    name: "Media",
-    items: [
-      event("media", "play", "media"),
-      event("media", "pause", "media"),
-      event("media", "playing", "media"),
-      event("media", "canplay", "media"),
-      event("media", "canplaythrough", "media"),
-      event("media", "seeking", "media"),
-      event("media", "seeked", "media"),
-      event("media", "timeupdate", "media"),
-      event("media", "ended", "media"),
-      event("media", "ratechange", "media"),
-      event("media", "durationchange", "media"),
-      event("media", "volumechange", "media"),
-      event("media", "loadstart", "media"),
-      event("media", "progress", "media"),
-      event("media", "suspend", "media"),
-      event("media", "abort", "media"),
-      event("media", "error", "media"),
-      event("media", "emptied", "media"),
-      event("media", "stalled", "media"),
-      event("media", "loadedmetadata", "media"),
-      event("media", "loadeddata", "media"),
-      event("media", "waiting", "media"),
-    ],
-  },
-  {
-    name: "Mouse",
-    items: [
-      event("mouse", "auxclick"),
-      event("mouse", "click"),
-      event("mouse", "dblclick"),
-      event("mouse", "mousedown"),
-      event("mouse", "mouseup"),
-      event("mouse", "mouseover"),
-      event("mouse", "mousemove"),
-      event("mouse", "mouseout"),
-      event("mouse", "mouseenter"),
-      event("mouse", "mouseleave"),
-      event("mouse", "mousewheel"),
-      event("mouse", "wheel"),
-      event("mouse", "contextmenu"),
-    ],
-  },
-  {
-    name: "Pointer",
-    items: [
-      event("pointer", "pointerover"),
-      event("pointer", "pointerout"),
-      event("pointer", "pointerenter"),
-      event("pointer", "pointerleave"),
-      event("pointer", "pointerdown"),
-      event("pointer", "pointerup"),
-      event("pointer", "pointermove"),
-      event("pointer", "pointercancel"),
-      event("pointer", "gotpointercapture"),
-      event("pointer", "lostpointercapture"),
-    ],
-  },
-  {
-    name: "Touch",
-    items: [
-      event("touch", "touchstart"),
-      event("touch", "touchmove"),
-      event("touch", "touchend"),
-      event("touch", "touchcancel"),
-    ],
-  },
-  {
-    name: "Worker",
-    items: [
-      event("worker", "message", "global"),
-      event("worker", "messageerror", "global"),
-    ],
-  },
-  {
-    name: "XHR",
-    items: [
-      event("xhr", "readystatechange", "xhr"),
-      event("xhr", "load", "xhr"),
-      event("xhr", "loadstart", "xhr"),
-      event("xhr", "loadend", "xhr"),
-      event("xhr", "abort", "xhr"),
-      event("xhr", "error", "xhr"),
-      event("xhr", "progress", "xhr"),
-      event("xhr", "timeout", "xhr"),
-    ],
-  },
-];

--- a/devtools/server/actors/utils/make-debugger.js
+++ b/devtools/server/actors/utils/make-debugger.js
@@ -59,25 +59,33 @@ const { reportException } = require("dev
  */
 module.exports = function makeDebugger({ findDebuggees, shouldAddNewGlobalAsDebuggee }) {
   const dbg = isReplaying ? new ReplayDebugger() : new Debugger();
   EventEmitter.decorate(dbg);
 
   dbg.allowUnobservedAsmJS = true;
   dbg.uncaughtExceptionHook = reportDebuggerHookException;
 
+  function onNewDebuggee(global) {
+    if (dbg.onNewDebuggee) {
+      dbg.onNewDebuggee(global);
+    }
+  }
+
   dbg.onNewGlobalObject = function(global) {
     if (shouldAddNewGlobalAsDebuggee(global)) {
       safeAddDebuggee(this, global);
+      onNewDebuggee(global);
     }
   };
 
   dbg.addDebuggees = function() {
     for (const global of findDebuggees(this)) {
       safeAddDebuggee(this, global);
+      onNewDebuggee(global);
     }
   };
 
   return dbg;
 };
 
 const reportDebuggerHookException = e => reportException("Debugger Hook", e);
 

--- a/devtools/shared/builtin-modules.js
+++ b/devtools/shared/builtin-modules.js
@@ -18,16 +18,17 @@ const promise = require("resource://gre/
 const jsmScope = require("resource://devtools/shared/Loader.jsm");
 const { Services } = require("resource://gre/modules/Services.jsm");
 
 const systemPrincipal = Services.scriptSecurityManager.getSystemPrincipal();
 
 // Steal various globals only available in JSM scope (and not Sandbox one)
 const {
   console,
+  DebuggerNotificationObserver,
   DOMPoint,
   DOMQuad,
   DOMRect,
   HeapSnapshot,
   NamedNodeMap,
   NodeFilter,
   StructuredCloneHolder,
   TelemetryStopwatch,
@@ -224,16 +225,17 @@ function lazyRequireGetter(obj, property
     configurable: true,
     enumerable: true,
   });
 }
 
 // List of pseudo modules exposed to all devtools modules.
 exports.modules = {
   ChromeUtils,
+  DebuggerNotificationObserver,
   HeapSnapshot,
   promise,
   // Expose "chrome" Promise, which aren't related to any document
   // and so are never frozen, even if the browser loader module which
   // pull it is destroyed. See bug 1402779.
   Promise,
   Services: Object.create(Services),
   TelemetryStopwatch,

--- a/devtools/shared/client/constants.js
+++ b/devtools/shared/client/constants.js
@@ -39,16 +39,17 @@ const UnsolicitedNotifications = {
  * response to a client request.
  */
 const UnsolicitedPauses = {
   resumeLimit: "resumeLimit",
   debuggerStatement: "debuggerStatement",
   breakpoint: "breakpoint",
   DOMEvent: "DOMEvent",
   watchpoint: "watchpoint",
+  eventBreakpoint: "eventBreakpoint",
   exception: "exception",
   replayForcedPause: "replayForcedPause",
 };
 
 module.exports = {
   ThreadStateTypes,
   UnsolicitedNotifications,
   UnsolicitedPauses,

--- a/devtools/shared/fronts/webconsole.js
+++ b/devtools/shared/fronts/webconsole.js
@@ -92,16 +92,17 @@ class WebConsoleFront extends FrontClass
       // track the list of network event updates
       updates: [],
       private: actor.private,
       fromCache: actor.fromCache,
       fromServiceWorker: actor.fromServiceWorker,
       isThirdPartyTrackingResource: actor.isThirdPartyTrackingResource,
       referrerPolicy: actor.referrerPolicy,
       blockedReason: actor.blockedReason,
+      channelId: actor.channelId,
     };
     this._networkRequests.set(actor.actor, networkInfo);
 
     this.emit("networkEvent", networkInfo);
   }
 
   /**
    * The "networkEventUpdate" message type handler. We redirect any message to

--- a/devtools/shared/worker/loader.js
+++ b/devtools/shared/worker/loader.js
@@ -1,15 +1,15 @@
 /* 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";
 
-/* global worker */
+/* global worker, DebuggerNotificationObserver */
 
 // A CommonJS module loader that is designed to run inside a worker debugger.
 // We can't simply use the SDK module loader, because it relies heavily on
 // Components, which isn't available in workers.
 //
 // In principle, the standard instance of the worker loader should provide the
 // same built-in modules as its devtools counterpart, so that both loaders are
 // interchangable on the main thread, making them easier to test.
@@ -571,16 +571,17 @@ this.worker = new WorkerDebuggerLoader({
   },
   loadSubScript: loadSubScript,
   modules: {
     "Debugger": Debugger,
     "Services": Object.create(null),
     "chrome": chrome,
     "xpcInspector": xpcInspector,
     "ChromeUtils": ChromeUtils,
+    "DebuggerNotificationObserver": DebuggerNotificationObserver,
   },
   paths: {
     // ⚠ DISCUSSION ON DEV-DEVELOPER-TOOLS REQUIRED BEFORE MODIFYING ⚠
     "devtools": "resource://devtools",
     // ⚠ DISCUSSION ON DEV-DEVELOPER-TOOLS REQUIRED BEFORE MODIFYING ⚠
     "promise": "resource://gre/modules/Promise-backend.js",
     // ⚠ DISCUSSION ON DEV-DEVELOPER-TOOLS REQUIRED BEFORE MODIFYING ⚠
     "xpcshell-test": "resource://test",

--- a/dom/base/DOMMatrix.cpp
+++ b/dom/base/DOMMatrix.cpp
@@ -37,36 +37,42 @@ JSObject* DOMMatrixReadOnly::WrapObject(
                                         JS::Handle<JSObject*> aGivenProto) {
   return DOMMatrixReadOnly_Binding::Wrap(aCx, this, aGivenProto);
 }
 
 already_AddRefed<DOMMatrixReadOnly> DOMMatrixReadOnly::Constructor(
     const GlobalObject& aGlobal,
     const Optional<StringOrUnrestrictedDoubleSequence>& aArg,
     ErrorResult& aRv) {
-  RefPtr<DOMMatrixReadOnly> rval =
-      new DOMMatrixReadOnly(aGlobal.GetAsSupports());
   if (!aArg.WasPassed()) {
+    RefPtr<DOMMatrixReadOnly> rval =
+        new DOMMatrixReadOnly(aGlobal.GetAsSupports());
     return rval.forget();
   }
 
   const auto& arg = aArg.Value();
   if (arg.IsString()) {
     nsCOMPtr<nsPIDOMWindowInner> win =
         do_QueryInterface(aGlobal.GetAsSupports());
     if (!win) {
       aRv.ThrowTypeError<MSG_ILLEGAL_CONSTRUCTOR>();
       return nullptr;
     }
+    RefPtr<DOMMatrixReadOnly> rval =
+        new DOMMatrixReadOnly(aGlobal.GetAsSupports());
     rval->SetMatrixValue(arg.GetAsString(), aRv);
-  } else {
-    const auto& sequence = arg.GetAsUnrestrictedDoubleSequence();
-    SetDataInMatrix(rval, sequence.Elements(), sequence.Length(), aRv);
+    return rval.forget();
   }
 
+  const auto& sequence = arg.GetAsUnrestrictedDoubleSequence();
+  const int length = sequence.Length();
+  const bool is2D = length == 6;
+  RefPtr<DOMMatrixReadOnly> rval =
+      new DOMMatrixReadOnly(aGlobal.GetAsSupports(), is2D);
+  SetDataInMatrix(rval, sequence.Elements(), length, aRv);
   return rval.forget();
 }
 
 already_AddRefed<DOMMatrixReadOnly> DOMMatrixReadOnly::ReadStructuredClone(
     nsISupports* aParent, JSStructuredCloneReader* aReader) {
   uint8_t is2D;
 
   if (!JS_ReadBytes(aReader, &is2D, 1)) {
@@ -504,39 +510,46 @@ static void SetDataInMatrix(DOMMatrixRea
     lengthStr.AppendInt(aLength);
     aRv.ThrowTypeError<MSG_MATRIX_INIT_LENGTH_WRONG>(lengthStr);
   }
 }
 
 already_AddRefed<DOMMatrix> DOMMatrix::Constructor(const GlobalObject& aGlobal,
                                                    const Float32Array& aArray32,
                                                    ErrorResult& aRv) {
-  RefPtr<DOMMatrix> obj = new DOMMatrix(aGlobal.GetAsSupports());
   aArray32.ComputeLengthAndData();
-  SetDataInMatrix(obj, aArray32.Data(), aArray32.Length(), aRv);
+
+  const int length = aArray32.Length();
+  const bool is2D = length == 6;
+  RefPtr<DOMMatrix> obj = new DOMMatrix(aGlobal.GetAsSupports(), is2D);
+  SetDataInMatrix(obj, aArray32.Data(), length, aRv);
 
   return obj.forget();
 }
 
 already_AddRefed<DOMMatrix> DOMMatrix::Constructor(const GlobalObject& aGlobal,
                                                    const Float64Array& aArray64,
                                                    ErrorResult& aRv) {
-  RefPtr<DOMMatrix> obj = new DOMMatrix(aGlobal.GetAsSupports());
   aArray64.ComputeLengthAndData();
-  SetDataInMatrix(obj, aArray64.Data(), aArray64.Length(), aRv);
+
+  const int length = aArray64.Length();
+  const bool is2D = length == 6;
+  RefPtr<DOMMatrix> obj = new DOMMatrix(aGlobal.GetAsSupports(), is2D);
+  SetDataInMatrix(obj, aArray64.Data(), length, aRv);
 
   return obj.forget();
 }
 
 already_AddRefed<DOMMatrix> DOMMatrix::Constructor(
     const GlobalObject& aGlobal, const Sequence<double>& aNumberSequence,
     ErrorResult& aRv) {
-  RefPtr<DOMMatrix> obj = new DOMMatrix(aGlobal.GetAsSupports());
-  SetDataInMatrix(obj, aNumberSequence.Elements(), aNumberSequence.Length(),
-                  aRv);
+  const int length = aNumberSequence.Length();
+  const bool is2D = length == 6;
+  RefPtr<DOMMatrix> obj = new DOMMatrix(aGlobal.GetAsSupports(), is2D);
+  SetDataInMatrix(obj, aNumberSequence.Elements(), length, aRv);
 
   return obj.forget();
 }
 
 already_AddRefed<DOMMatrix> DOMMatrix::ReadStructuredClone(
     nsISupports* aParent, JSStructuredCloneReader* aReader) {
   uint8_t is2D;
 
@@ -765,17 +778,19 @@ DOMMatrixReadOnly* DOMMatrixReadOnly::Se
   if (!ServoCSSParser::ParseTransformIntoMatrix(
           aTransformList, contains3dTransform, transform)) {
     aRv.Throw(NS_ERROR_DOM_SYNTAX_ERR);
     return nullptr;
   }
 
   if (!contains3dTransform) {
     mMatrix3D = nullptr;
-    mMatrix2D = new gfx::MatrixDouble();
+    if (!mMatrix2D) {
+      mMatrix2D = new gfx::MatrixDouble();
+    }
 
     SetA(transform._11);
     SetB(transform._12);
     SetC(transform._21);
     SetD(transform._22);
     SetE(transform._41);
     SetF(transform._42);
   } else {

--- a/dom/bindings/Codegen.py
+++ b/dom/bindings/Codegen.py
@@ -2426,17 +2426,17 @@ class MethodDefiner(PropertyDefiner):
                 raise TypeError("Cannot have indexed getter/attr on "
                                 "interface %s with other members "
                                 "that generate @@iterator, such as "
                                 "maplike/setlike or aliased functions." %
                                 self.descriptor.interface.identifier.name)
             self.regular.append({
                 "name": "@@iterator",
                 "methodInfo": False,
-                "selfHostedName": "ArrayValues",
+                "selfHostedName": "$ArrayValues",
                 "length": 0,
                 "flags": "0", # Not enumerable, per spec.
                 "condition": MemberCondition()
             })
 
         # Generate the keys/values/entries aliases for value iterables.
         maplikeOrSetlikeOrIterable = descriptor.interface.maplikeOrSetlikeOrIterable
         if (not static and
@@ -2452,17 +2452,17 @@ class MethodDefiner(PropertyDefiner):
                 "length": 0,
                 "flags": "JSPROP_ENUMERATE",
                 "condition": PropertyDefiner.getControllingCondition(m,
                                                                      descriptor)
             })
             self.regular.append({
                 "name": "values",
                 "methodInfo": False,
-                "selfHostedName": "ArrayValues",
+                "selfHostedName": "$ArrayValues",
                 "length": 0,
                 "flags": "JSPROP_ENUMERATE",
                 "condition": PropertyDefiner.getControllingCondition(m,
                                                                      descriptor)
             })
             self.regular.append({
                 "name": "entries",
                 "methodInfo": False,

--- a/dom/gamepad/Gamepad.cpp
+++ b/dom/gamepad/Gamepad.cpp
@@ -65,16 +65,19 @@ Gamepad::Gamepad(nsISupports* aParent, c
   for (uint32_t i = 0; i < aNumLightIndicator; ++i) {
     mLightIndicators.AppendElement(
         new GamepadLightIndicator(mParent, mHashKey, i));
   }
   for (uint32_t i = 0; i < aNumTouchEvents; ++i) {
     mTouchEvents.AppendElement(new GamepadTouch(mParent));
   }
 
+  // Mapping touchId(0) to touchIdHash(0) by default.
+  mTouchIdHash.Put(0, mTouchIdHashValue);
+  ++mTouchIdHashValue;
   UpdateTimestamp();
 }
 
 void Gamepad::SetIndex(uint32_t aIndex) { mIndex = aIndex; }
 
 void Gamepad::SetConnected(bool aConnected) { mConnected = aConnected; }
 
 void Gamepad::SetButton(uint32_t aButton, bool aPressed, bool aTouched,

--- a/dom/gamepad/GamepadRemapping.cpp
+++ b/dom/gamepad/GamepadRemapping.cpp
@@ -356,16 +356,21 @@ class StadiaControllerRemapper final : p
     STADIA_BUTTON_EXTRA1 = BUTTON_INDEX_COUNT,
     STADIA_BUTTON_EXTRA2,
     STADIA_BUTTON_COUNT
   };
 };
 
 class Dualshock4Remapper final : public GamepadRemapper {
  public:
+  Dualshock4Remapper() {
+    mLastTouches.SetLength(TOUCH_EVENT_COUNT);
+    mLastTouchId.SetLength(TOUCH_EVENT_COUNT);
+  }
+
   virtual uint32_t GetAxisCount() const override { return AXIS_INDEX_COUNT; }
 
   virtual uint32_t GetButtonCount() const override {
     return DUALSHOCK_BUTTON_COUNT;
   }
 
   virtual uint32_t GetLightIndicatorCount() const override {
     return LIGHT_INDICATOR_COUNT;
@@ -398,64 +403,69 @@ class Dualshock4Remapper final : public 
     aReport[8] = aBlue;
   }
 
   virtual void GetTouchData(uint32_t aIndex, void* aInput) override {
     nsTArray<GamepadTouchState> touches(TOUCH_EVENT_COUNT);
     touches.SetLength(TOUCH_EVENT_COUNT);
     uint8_t* rawData = (uint8_t*)aInput;
 
+    const uint32_t kTouchDimensionX = 1920;
+    const uint32_t kTouchDimensionY = 942;
     bool touch0Pressed = (((rawData[35] & 0xff) >> 7) == 0);
     bool touch1Pressed = (((rawData[39] & 0xff) >> 7) == 0);
 
-    if (!touch0Pressed && !touch1Pressed) {
-      return;
-    }
-
-    if ((touch0Pressed && (rawData[35] & 0xff) < mLastTouch0Id) ||
-        (touch1Pressed && (rawData[39] & 0xff) < mLastTouch1Id)) {
+    if ((touch0Pressed && (rawData[35] & 0xff) < mLastTouchId[0]) ||
+        (touch1Pressed && (rawData[39] & 0xff) < mLastTouchId[1])) {
       mTouchIdBase += 128;
     }
 
-    const uint32_t kTouchDimensionX = 1920;
-    const uint32_t kTouchDimensionY = 942;
-
-    touches[0].touchId = mTouchIdBase + (rawData[35] & 0x7f);
-    touches[0].surfaceId = 0;
-    touches[0].position[0] = NormalizeTouch(
-        ((rawData[37] & 0xf) << 8) | rawData[36], 0, (kTouchDimensionX - 1));
-    touches[0].position[1] =
-        NormalizeTouch(rawData[38] << 4 | ((rawData[37] & 0xf0) >> 4), 0,
-                       (kTouchDimensionY - 1));
-    touches[0].surfaceDimensions[0] = kTouchDimensionX;
-    touches[0].surfaceDimensions[1] = kTouchDimensionY;
-    touches[0].isSurfaceDimensionsValid = true;
-    mLastTouch0Id = rawData[35] & 0x7f;
-
-    touches[1].touchId = mTouchIdBase + (rawData[39] & 0x7f);
-    touches[1].surfaceId = 0;
-    touches[1].position[0] =
-        NormalizeTouch((((rawData[41] & 0xf) << 8) | rawData[40]) + 1, 0,
-                       (kTouchDimensionX - 1));
-    touches[1].position[1] =
-        NormalizeTouch(rawData[42] << 4 | ((rawData[41] & 0xf0) >> 4), 0,
-                       (kTouchDimensionY - 1));
-    touches[1].surfaceDimensions[0] = kTouchDimensionX;
-    touches[1].surfaceDimensions[1] = kTouchDimensionY;
-    touches[1].isSurfaceDimensionsValid = true;
-    mLastTouch1Id = rawData[39] & 0x7f;
+    if (touch0Pressed) {
+      touches[0].touchId = mTouchIdBase + (rawData[35] & 0x7f);
+      touches[0].surfaceId = 0;
+      touches[0].position[0] = NormalizeTouch(
+          ((rawData[37] & 0xf) << 8) | rawData[36], 0, (kTouchDimensionX - 1));
+      touches[0].position[1] =
+          NormalizeTouch(rawData[38] << 4 | ((rawData[37] & 0xf0) >> 4), 0,
+                         (kTouchDimensionY - 1));
+      touches[0].surfaceDimensions[0] = kTouchDimensionX;
+      touches[0].surfaceDimensions[1] = kTouchDimensionY;
+      touches[0].isSurfaceDimensionsValid = true;
+      mLastTouchId[0] = rawData[35] & 0x7f;
+    }
+    if (touch1Pressed) {
+      touches[1].touchId = mTouchIdBase + (rawData[39] & 0x7f);
+      touches[1].surfaceId = 0;
+      touches[1].position[0] =
+          NormalizeTouch((((rawData[41] & 0xf) << 8) | rawData[40]) + 1, 0,
+                         (kTouchDimensionX - 1));
+      touches[1].position[1] =
+          NormalizeTouch(rawData[42] << 4 | ((rawData[41] & 0xf0) >> 4), 0,
+                         (kTouchDimensionY - 1));
+      touches[1].surfaceDimensions[0] = kTouchDimensionX;
+      touches[1].surfaceDimensions[1] = kTouchDimensionY;
+      touches[1].isSurfaceDimensionsValid = true;
+      mLastTouchId[1] = rawData[39] & 0x7f;
+    }
 
     RefPtr<GamepadPlatformService> service =
         GamepadPlatformService::GetParentService();
     if (!service) {
       return;
     }
 
-    service->NewMultiTouchEvent(aIndex, 0, touches[0]);
-    service->NewMultiTouchEvent(aIndex, 1, touches[1]);
+    // Avoid to send duplicate untouched events to the gamepad service.
+    if ((mLastTouches[0] != touch0Pressed) || touch0Pressed) {
+      service->NewMultiTouchEvent(aIndex, 0, touches[0]);
+    }
+    if ((mLastTouches[1] != touch1Pressed) || touch1Pressed) {
+      service->NewMultiTouchEvent(aIndex, 1, touches[1]);
+    }
+    mLastTouches[0] = touch0Pressed;
+    mLastTouches[1] = touch1Pressed;
   }
 
   virtual void RemapAxisMoveEvent(uint32_t aIndex, uint32_t aAxis,
                                   double aValue) const override {
     RefPtr<GamepadPlatformService> service =
         GamepadPlatformService::GetParentService();
     if (!service) {
       return;
@@ -532,18 +542,18 @@ class Dualshock4Remapper final : public 
   enum Dualshock4Buttons {
     DUALSHOCK_BUTTON_TOUCHPAD = BUTTON_INDEX_COUNT,
     DUALSHOCK_BUTTON_COUNT
   };
 
   static const uint32_t LIGHT_INDICATOR_COUNT = 1;
   static const uint32_t TOUCH_EVENT_COUNT = 2;
 
-  unsigned long mLastTouch0Id = 0;
-  unsigned long mLastTouch1Id = 0;
+  nsTArray<unsigned long> mLastTouchId;
+  nsTArray<bool> mLastTouches;
   unsigned long mTouchIdBase = 0;
 };
 
 class LogitechDInputRemapper final : public GamepadRemapper {
  public:
   virtual uint32_t GetAxisCount() const override { return AXIS_INDEX_COUNT; }
 
   virtual uint32_t GetButtonCount() const override {

--- a/dom/html/HTMLMediaElement.cpp
+++ b/dom/html/HTMLMediaElement.cpp
@@ -4056,20 +4056,16 @@ nsresult HTMLMediaElement::BindToTree(Bi
   nsresult rv = nsGenericHTMLElement::BindToTree(aContext, aParent);
 
   if (IsInComposedDoc()) {
     // Construct Shadow Root so web content can be hidden in the DOM.
     AttachAndSetUAShadowRoot();
     NotifyUAWidgetSetupOrChange();
   }
 
-  // FIXME(emilio, bug 1555946): mUnboundFromTree doesn't make any sense, should
-  // just use IsInComposedDoc() in the relevant places or something.
-  mUnboundFromTree = false;
-
   if (IsInUncomposedDoc()) {
     // The preload action depends on the value of the autoplay attribute.
     // It's value may have changed, so update it.
     UpdatePreloadAction();
   }
 
   NotifyDecoderActivityChanges();
 
@@ -4273,36 +4269,42 @@ void HTMLMediaElement::ReportTelemetry()
                this, key.get()));
         }
       }
     }
   }
 }
 
 void HTMLMediaElement::UnbindFromTree(bool aNullParent) {
-  mUnboundFromTree = true;
   mVisibilityState = Visibility::Untracked;
 
   if (IsInComposedDoc()) {
     NotifyUAWidgetTeardown();
   }
 
   nsGenericHTMLElement::UnbindFromTree(aNullParent);
 
   MOZ_ASSERT(IsHidden());
   NotifyDecoderActivityChanges();
 
-  RefPtr<HTMLMediaElement> self(this);
-  nsCOMPtr<nsIRunnable> task =
-      NS_NewRunnableFunction("dom::HTMLMediaElement::UnbindFromTree", [self]() {
-        if (self->mUnboundFromTree) {
-          self->Pause();
-        }
-      });
-  RunInStableState(task);
+  // Dispatch a task to run once we're in a stable state which ensures we're
+  // paused if we're no longer in a document. Note we set a flag here to
+  // ensure we don't dispatch redundant tasks.
+  if (!mDispatchedTaskToPauseIfNotInDocument) {
+    mDispatchedTaskToPauseIfNotInDocument = true;
+    nsCOMPtr<nsIRunnable> task = NS_NewRunnableFunction(
+        "dom::HTMLMediaElement::UnbindFromTree",
+        [self = RefPtr<HTMLMediaElement>(this)]() {
+          self->mDispatchedTaskToPauseIfNotInDocument = false;
+          if (!self->IsInComposedDoc()) {
+            self->Pause();
+          }
+        });
+    RunInStableState(task);
+  }
 }
 
 /* static */
 CanPlayStatus HTMLMediaElement::GetCanPlay(
     const nsAString& aType, DecoderDoctorDiagnostics* aDiagnostics) {
   Maybe<MediaContainerType> containerType = MakeMediaContainerType(aType);
   if (!containerType) {
     return CANPLAY_NO;
@@ -5691,17 +5693,17 @@ void HTMLMediaElement::CheckAutoplayData
 }
 
 bool HTMLMediaElement::IsActive() const {
   Document* ownerDoc = OwnerDoc();
   return ownerDoc && ownerDoc->IsActive() && ownerDoc->IsVisible();
 }
 
 bool HTMLMediaElement::IsHidden() const {
-  return mUnboundFromTree || OwnerDoc()->Hidden();
+  return !IsInComposedDoc() || OwnerDoc()->Hidden();
 }
 
 VideoFrameContainer* HTMLMediaElement::GetVideoFrameContainer() {
   if (mShuttingDown) {
     return nullptr;
   }
 
   if (mVideoFrameContainer) return mVideoFrameContainer;

--- a/dom/html/HTMLMediaElement.h
+++ b/dom/html/HTMLMediaElement.h
@@ -1666,20 +1666,21 @@ class HTMLMediaElement : public nsGeneri
   RefPtr<VideoTrackList> mVideoTrackList;
 
   UniquePtr<MediaStreamTrackListener> mMediaStreamTrackListener;
 
   // The principal guarding mVideoFrameContainer access when playing a
   // MediaStream.
   nsCOMPtr<nsIPrincipal> mSrcStreamVideoPrincipal;
 
-  // True if UnbindFromTree() is called on the element.
-  // Note this flag is false when the element is in a phase after creation and
-  // before attaching to the DOM tree.
-  bool mUnboundFromTree = false;
+  // True if we've dispatched a task in UnbindFromTree() which runs in a
+  // stable state and attempts to pause playback if we're not in a composed
+  // document. The flag stops us dispatching multiple tasks if the element
+  // is involved in a series of append/remove cycles.
+  bool mDispatchedTaskToPauseIfNotInDocument = false;
 
   // True if the autoplay media was blocked because it hadn't loaded metadata
   // yet.
   bool mBlockedAsWithoutMetadata = false;
 
   // This promise is used to notify MediaElementAudioSourceNode that media
   // element is allowed to play when MediaElement is used as a source for web
   // audio.

--- a/dom/html/HTMLVideoElement.cpp
+++ b/dom/html/HTMLVideoElement.cpp
@@ -381,40 +381,40 @@ void HTMLVideoElement::ReleaseVideoWakeL
     mScreenWakeLock = nullptr;
     return;
   }
 }
 
 bool HTMLVideoElement::SetVisualCloneTarget(
     HTMLVideoElement* aVisualCloneTarget) {
   MOZ_DIAGNOSTIC_ASSERT(
-      !aVisualCloneTarget || !aVisualCloneTarget->mUnboundFromTree,
+      !aVisualCloneTarget || aVisualCloneTarget->IsInComposedDoc(),
       "Can't set the clone target to a disconnected video "
       "element.");
   MOZ_DIAGNOSTIC_ASSERT(!mVisualCloneSource,
                         "Can't clone a video element that is already a clone.");
   if (!aVisualCloneTarget ||
-      (!aVisualCloneTarget->mUnboundFromTree && !mVisualCloneSource)) {
+      (aVisualCloneTarget->IsInComposedDoc() && !mVisualCloneSource)) {
     mVisualCloneTarget = aVisualCloneTarget;
     return true;
   }
   return false;
 }
 
 bool HTMLVideoElement::SetVisualCloneSource(
     HTMLVideoElement* aVisualCloneSource) {
   MOZ_DIAGNOSTIC_ASSERT(
-      !aVisualCloneSource || !aVisualCloneSource->mUnboundFromTree,
+      !aVisualCloneSource || aVisualCloneSource->IsInComposedDoc(),
       "Can't set the clone source to a disconnected video "
       "element.");
   MOZ_DIAGNOSTIC_ASSERT(!mVisualCloneTarget,
                         "Can't clone a video element that is already a "
                         "clone.");
   if (!aVisualCloneSource ||
-      (!aVisualCloneSource->mUnboundFromTree && !mVisualCloneTarget)) {
+      (aVisualCloneSource->IsInComposedDoc() && !mVisualCloneTarget)) {
     mVisualCloneSource = aVisualCloneSource;
     return true;
   }
   return false;
 }
 
 /* static */
 void HTMLVideoElement::InitStatics() {
@@ -447,21 +447,21 @@ double HTMLVideoElement::TotalPlayTime()
     }
   }
 
   return total;
 }
 
 void HTMLVideoElement::CloneElementVisually(HTMLVideoElement& aTargetVideo,
                                             ErrorResult& rv) {
-  MOZ_ASSERT(!mUnboundFromTree,
+  MOZ_ASSERT(IsInComposedDoc(),
              "Can't clone a video that's not bound to a DOM tree.");
-  MOZ_ASSERT(!aTargetVideo.mUnboundFromTree,
+  MOZ_ASSERT(aTargetVideo.IsInComposedDoc(),
              "Can't clone to a video that's not bound to a DOM tree.");
-  if (mUnboundFromTree || aTargetVideo.mUnboundFromTree) {
+  if (!IsInComposedDoc() || !aTargetVideo.IsInComposedDoc()) {
     rv.Throw(NS_ERROR_UNEXPECTED);
     return;
   }
 
   // Do we already have a visual clone target? If so, shut it down.
   if (mVisualCloneTarget) {
     EndCloningVisually();
   }

--- a/dom/ipc/BrowserChild.cpp
+++ b/dom/ipc/BrowserChild.cpp
@@ -3327,24 +3327,26 @@ bool BrowserChild::DeallocPBrowserBridge
 
 ScreenIntSize BrowserChild::GetInnerSize() {
   LayoutDeviceIntSize innerSize =
       RoundedToInt(mUnscaledInnerSize * mPuppetWidget->GetDefaultScale());
   return ViewAs<ScreenPixel>(
       innerSize, PixelCastJustification::LayoutDeviceIsScreenForTabDims);
 };
 
-nsRect BrowserChild::GetVisibleRect() {
+LayoutDeviceIntRect BrowserChild::GetVisibleRect() {
+  CSSRect visibleRect;
   if (mIsTopLevel) {
     // We are conservative about visible rects for top-level browsers to avoid
     // artifacts when resizing
-    return nsRect(nsPoint(), CSSPixel::ToAppUnits(mUnscaledInnerSize));
+    visibleRect = CSSRect(CSSPoint(), mUnscaledInnerSize);
   } else {
-    return mEffectsInfo.mVisibleRect;
+    visibleRect = CSSPixel::FromAppUnits(mEffectsInfo.mVisibleRect);
   }
+  return RoundedToInt(visibleRect * mPuppetWidget->GetDefaultScale());
 }
 
 ScreenIntRect BrowserChild::GetOuterRect() {
   LayoutDeviceIntRect outerRect =
       RoundedToInt(mUnscaledOuterRect * mPuppetWidget->GetDefaultScale());
   return ViewAs<ScreenPixel>(
       outerRect, PixelCastJustification::LayoutDeviceIsScreenForTabDims);
 }

--- a/dom/ipc/BrowserChild.h
+++ b/dom/ipc/BrowserChild.h
@@ -544,17 +544,17 @@ class BrowserChild final : public nsMess
 
   bool ParentIsActive() const { return mParentIsActive; }
 
   const mozilla::layers::CompositorOptions& GetCompositorOptions() const;
   bool AsyncPanZoomEnabled() const;
 
   ScreenIntSize GetInnerSize();
 
-  nsRect GetVisibleRect();
+  LayoutDeviceIntRect GetVisibleRect();
 
   // Call RecvShow(nsIntSize(0, 0)) and block future calls to RecvShow().
   void DoFakeShow(const ShowInfo& aShowInfo);
 
   void ContentReceivedInputBlock(uint64_t aInputBlockId,
                                  bool aPreventDefault) const;
   void SetTargetAPZC(
       uint64_t aInputBlockId,

--- a/dom/media/webaudio/MediaElementAudioSourceNode.cpp
+++ b/dom/media/webaudio/MediaElementAudioSourceNode.cpp
@@ -9,17 +9,18 @@
 #include "AudioDestinationNode.h"
 #include "nsIScriptError.h"
 #include "AudioNodeStream.h"
 
 namespace mozilla {
 namespace dom {
 
 MediaElementAudioSourceNode::MediaElementAudioSourceNode(AudioContext* aContext)
-    : MediaStreamAudioSourceNode(aContext) {}
+    : MediaStreamAudioSourceNode(aContext, TrackChangeBehavior::FollowChanges) {
+}
 
 /* static */
 already_AddRefed<MediaElementAudioSourceNode>
 MediaElementAudioSourceNode::Create(
     AudioContext& aAudioContext, const MediaElementAudioSourceOptions& aOptions,
     ErrorResult& aRv) {
   if (aAudioContext.IsOffline()) {
     aRv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);

--- a/dom/media/webaudio/MediaStreamAudioSourceNode.cpp
+++ b/dom/media/webaudio/MediaStreamAudioSourceNode.cpp
@@ -8,16 +8,17 @@
 #include "mozilla/dom/MediaStreamAudioSourceNodeBinding.h"
 #include "AudioNodeEngine.h"
 #include "AudioNodeExternalInputStream.h"
 #include "AudioStreamTrack.h"
 #include "mozilla/dom/Document.h"
 #include "mozilla/CORSMode.h"
 #include "nsContentUtils.h"
 #include "nsIScriptError.h"
+#include "nsID.h"
 
 namespace mozilla {
 namespace dom {
 
 NS_IMPL_CYCLE_COLLECTION_CLASS(MediaStreamAudioSourceNode)
 
 NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN(MediaStreamAudioSourceNode)
   tmp->Destroy();
@@ -32,19 +33,21 @@ NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN_
 NS_IMPL_CYCLE_COLLECTION_TRAVERSE_END
 
 NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(MediaStreamAudioSourceNode)
 NS_INTERFACE_MAP_END_INHERITING(AudioNode)
 
 NS_IMPL_ADDREF_INHERITED(MediaStreamAudioSourceNode, AudioNode)
 NS_IMPL_RELEASE_INHERITED(MediaStreamAudioSourceNode, AudioNode)
 
-MediaStreamAudioSourceNode::MediaStreamAudioSourceNode(AudioContext* aContext)
+MediaStreamAudioSourceNode::MediaStreamAudioSourceNode(
+    AudioContext* aContext, TrackChangeBehavior aBehavior)
     : AudioNode(aContext, 2, ChannelCountMode::Max,
-                ChannelInterpretation::Speakers) {}
+                ChannelInterpretation::Speakers),
+      mBehavior(aBehavior) {}
 
 /* static */
 already_AddRefed<MediaStreamAudioSourceNode> MediaStreamAudioSourceNode::Create(
     AudioContext& aAudioContext, const MediaStreamAudioSourceOptions& aOptions,
     ErrorResult& aRv) {
   if (aAudioContext.IsOffline()) {
     aRv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
     return nullptr;
@@ -58,17 +61,17 @@ already_AddRefed<MediaStreamAudioSourceN
                                     NS_LITERAL_CSTRING("Web Audio"), document,
                                     nsContentUtils::eDOM_PROPERTIES,
                                     "MediaStreamAudioSourceNodeDifferentRate");
     aRv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
     return nullptr;
   }
 
   RefPtr<MediaStreamAudioSourceNode> node =
-      new MediaStreamAudioSourceNode(&aAudioContext);
+      new MediaStreamAudioSourceNode(&aAudioContext, LockOnTrackPicked);
 
   node->Init(aOptions.mMediaStream, aRv);
   if (aRv.Failed()) {
     return nullptr;
   }
 
   return node.forget();
 }
@@ -91,17 +94,17 @@ void MediaStreamAudioSourceNode::Init(DO
   AudioNodeEngine* engine = new MediaStreamAudioSourceNodeEngine(this);
   mStream = AudioNodeExternalInputStream::Create(graph, engine);
   mInputStream->AddConsumerToKeepAlive(ToSupports(this));
 
   mInputStream->RegisterTrackListener(this);
   if (mInputStream->Active()) {
     NotifyActive();
   }
-  AttachToFirstTrack(mInputStream);
+  AttachToRightTrack(mInputStream, aRv);
 }
 
 void MediaStreamAudioSourceNode::Destroy() {
   if (mInputStream) {
     mInputStream->UnregisterTrackListener(this);
     mInputStream = nullptr;
   }
   DetachFromTrack();
@@ -132,56 +135,82 @@ void MediaStreamAudioSourceNode::DetachF
     mInputTrack = nullptr;
   }
   if (mInputPort) {
     mInputPort->Destroy();
     mInputPort = nullptr;
   }
 }
 
-void MediaStreamAudioSourceNode::AttachToFirstTrack(
-    const RefPtr<DOMMediaStream>& aMediaStream) {
+static int AudioTrackCompare(const RefPtr<AudioStreamTrack>& aLhs,
+                             const RefPtr<AudioStreamTrack>& aRhs) {
+  nsAutoStringN<NSID_LENGTH> IDLhs;
+  nsAutoStringN<NSID_LENGTH> IDRhs;
+  aLhs->GetId(IDLhs);
+  aRhs->GetId(IDRhs);
+  return NS_ConvertUTF16toUTF8(IDLhs).Compare(
+      NS_ConvertUTF16toUTF8(IDRhs).get());
+}
+
+void MediaStreamAudioSourceNode::AttachToRightTrack(
+    const RefPtr<DOMMediaStream>& aMediaStream, ErrorResult& aRv) {
   nsTArray<RefPtr<AudioStreamTrack>> tracks;
   aMediaStream->GetAudioTracks(tracks);
 
+  if (tracks.IsEmpty() && mBehavior == LockOnTrackPicked) {
+    aRv.Throw(NS_ERROR_DOM_INVALID_STATE_ERR);
+    return;
+  }
+
+  // Sort the track to have a stable order, on their ID by lexicographic
+  // ordering on sequences of code unit values.
+  tracks.Sort(AudioTrackCompare);
+
   for (const RefPtr<AudioStreamTrack>& track : tracks) {
-    if (track->Ended()) {
-      continue;
+    if (mBehavior == FollowChanges) {
+      if (track->Ended()) {
+        continue;
+      }
     }
 
     AttachToTrack(track);
     MarkActive();
     return;
   }
 
   // There was no track available. We'll allow the node to be garbage collected.
   MarkInactive();
 }
 
 void MediaStreamAudioSourceNode::NotifyTrackAdded(
     const RefPtr<MediaStreamTrack>& aTrack) {
+  if (mBehavior != FollowChanges) {
+    return;
+  }
   if (mInputTrack) {
     return;
   }
 
   if (!aTrack->AsAudioStreamTrack()) {
     return;
   }
 
   AttachToTrack(aTrack);
 }
 
 void MediaStreamAudioSourceNode::NotifyTrackRemoved(
     const RefPtr<MediaStreamTrack>& aTrack) {
-  if (aTrack != mInputTrack) {
-    return;
+  if (mBehavior == FollowChanges) {
+    if (aTrack != mInputTrack) {
+      return;
+    }
+
+    DetachFromTrack();
+    AttachToRightTrack(mInputStream, IgnoreErrors());
   }
-
-  DetachFromTrack();
-  AttachToFirstTrack(mInputStream);
 }
 
 void MediaStreamAudioSourceNode::NotifyActive() {
   MOZ_ASSERT(mInputStream);
   Context()->StartBlockedAudioContextIfAllowed();
 }
 
 /**

--- a/dom/media/webaudio/MediaStreamAudioSourceNode.h
+++ b/dom/media/webaudio/MediaStreamAudioSourceNode.h
@@ -75,34 +75,50 @@ class MediaStreamAudioSourceNode
   size_t SizeOfIncludingThis(MallocSizeOf aMallocSizeOf) const override;
 
   // Attaches to aTrack so that its audio content will be used as input.
   void AttachToTrack(const RefPtr<MediaStreamTrack>& aTrack);
 
   // Detaches from the currently attached track if there is one.
   void DetachFromTrack();
 
-  // Attaches to the first available audio track in aMediaStream.
-  void AttachToFirstTrack(const RefPtr<DOMMediaStream>& aMediaStream);
+  // Attaches to the first audio track in the MediaStream, when the tracks are
+  // ordered by id.
+  void AttachToRightTrack(const RefPtr<DOMMediaStream>& aMediaStream,
+                          ErrorResult& aRv);
 
   // From DOMMediaStream::TrackListener.
   void NotifyTrackAdded(const RefPtr<MediaStreamTrack>& aTrack) override;
   void NotifyTrackRemoved(const RefPtr<MediaStreamTrack>& aTrack) override;
   void NotifyActive() override;
 
   // From PrincipalChangeObserver<MediaStreamTrack>.
   void PrincipalChanged(MediaStreamTrack* aMediaStreamTrack) override;
 
+  // This allows implementing the correct behaviour for both
+  // MediaElementAudioSourceNode and MediaStreamAudioSourceNode, that have most
+  // of their behaviour shared.
+  enum TrackChangeBehavior {
+    // MediaStreamAudioSourceNode locks on the track it picked, and never
+    // changes.
+    LockOnTrackPicked,
+    // MediaElementAudioSourceNode can change track, depending on what the
+    // HTMLMediaElement does.
+    FollowChanges
+  };
+
  protected:
-  explicit MediaStreamAudioSourceNode(AudioContext* aContext);
+  MediaStreamAudioSourceNode(AudioContext* aContext,
+                             TrackChangeBehavior aBehavior);
   void Init(DOMMediaStream* aMediaStream, ErrorResult& aRv);
   virtual void Destroy();
   virtual ~MediaStreamAudioSourceNode();
 
  private:
+  const TrackChangeBehavior mBehavior;
   RefPtr<MediaInputPort> mInputPort;
   RefPtr<DOMMediaStream> mInputStream;
 
   // On construction we set this to the first audio track of mInputStream.
   RefPtr<MediaStreamTrack> mInputTrack;
 };
 
 }  // namespace dom

--- a/dom/media/webaudio/test/mochitest.ini
+++ b/dom/media/webaudio/test/mochitest.ini
@@ -99,17 +99,16 @@ skip-if = (os == "win" && processor == "
 [test_bug964376.html]
 [test_bug966247.html]
 tags=capturestream
 [test_bug972678.html]
 [test_bug1113634.html]
 [test_bug1118372.html]
 [test_bug1027864.html]
 [test_bug1056032.html]
-skip-if = toolkit == 'android' # bug 1056706
 [test_bug1255618.html]
 skip-if = (os == "win" && processor == "aarch64") # aarch64 due to 1538360
 [test_bug1267579.html]
 [test_bug1355798.html]
 [test_bug1447273.html]
 skip-if = toolkit == 'android' && debug # bug 1485407
 [test_channelMergerNode.html]
 [test_channelMergerNodeWithVolume.html]
@@ -135,17 +134,16 @@ skip-if = !asan && toolkit != android
 [test_currentTime.html]
 [test_decodeAudioDataOnDetachedBuffer.html]
 [test_decodeAudioDataPromise.html]
 [test_decodeMultichannel.html]
 [test_decodeOpusTail.html]
 [test_delayNode.html]
 [test_delayNodeAtMax.html]
 [test_delayNodeChannelChanges.html]
-skip-if = toolkit == 'android' # bug 1056706
 [test_delayNodeCycles.html]
 [test_delayNodePassThrough.html]
 [test_delayNodeSmallMaxDelay.html]
 [test_delayNodeTailIncrease.html]
 [test_delayNodeTailWithDisconnect.html]
 [test_delayNodeTailWithGain.html]
 [test_delayNodeTailWithReconnect.html]
 [test_delayNodeWithGain.html]

--- a/dom/media/webaudio/test/test_audioContextSuspendResumeClose.html
+++ b/dom/media/webaudio/test/test_audioContextSuspendResumeClose.html
@@ -28,17 +28,17 @@ function tryToCreateNodeOnClosedContext(
     { name: "createChannelSplitter" },
     { name: "createChannelMerger" },
     { name: "createDynamicsCompressor" },
     { name: "createOscillator" },
     { name: "createMediaElementSource",
       args: [new Audio()],
       onOfflineAudioContext: false },
     { name: "createMediaStreamSource",
-      args: [new Audio().mozCaptureStream()],
+      args: [(new AudioContext()).createMediaStreamDestination().stream],
       onOfflineAudioContext: false } ].forEach(function(e) {
 
       if (e.onOfflineAudioContext == false &&
           ctx instanceof OfflineAudioContext) {
         return;
       }
 
       expectNoException(function() {
@@ -69,17 +69,16 @@ function tryLegalOpeerationsOnClosedCont
   ].forEach(function(e) {
     expectNoException(function() {
       ctx[e.name].apply(ctx, e.args);
     });
   });
   loadFile("ting-44.1k-1ch.ogg", function(buf) {
     ctx.decodeAudioData(buf).then(function(decodedBuf) {
       ok(true, "decodeAudioData on a closed context should work, it did.")
-      todo(false, "0 " + (ctx instanceof OfflineAudioContext ? "Offline" : "Realtime"));
       finish();
     }).catch(function(e){
       ok(false, "decodeAudioData on a closed context should work, it did not");
       finish();
     });
   });
 }
 
@@ -116,27 +115,24 @@ function testMultiContextOutput() {
       var input = e.inputBuffer.getChannelData(0);
       var silent = true;
       for (var i = 0; i < input.length; i++) {
         if (input[i] != 0.0) {
           silent = false;
         }
       }
 
-      todo(false, "input buffer is " + (silent ? "silent" : "noisy"));
-
       if (silent) {
         silentBuffersInARow++;
         if (silentBuffersInARow == 10) {
           ok(true,
               "MediaStreams produce silence when their input is blocked.");
           sp2.onaudioprocess = null;
           ac1.close();
           ac2.close();
-          todo(false,"1");
           finish();
         }
       } else {
         is(silentBuffersInARow, 0,
             "No non silent buffer inbetween silent buffers.");
       }
     }
 
@@ -177,17 +173,16 @@ function testMultiContextInput() {
         var delta = Math.abs(inputBuffer[1] - sp2.value),
             theoreticalIncrement = 2048 * 3 * Math.PI * 2 * osc1.frequency.value / ac1.sampleRate;
         ok(delta >= theoreticalIncrement,
             "Buffering did not occur when the context was suspended (delta:" + delta + " increment: " + theoreticalIncrement+")");
         ac1.close();
         ac2.close();
         sp1.onaudioprocess = null;
         sp2.onaudioprocess = null;
-        todo(false, "2");
         finish();
       }
     }
 
     sp2.onaudioprocess = function(e) {
       var inputBuffer = e.inputBuffer.getChannelData(0);
       sp2.value = inputBuffer[inputBuffer.length - 1];
       ac2.suspend().then(function() {
@@ -226,17 +221,16 @@ function testScriptProcessNodeSuspended(
             ac.resume().then(function() {
               remainingIterations = 30;
               afterResume = true;
             });
           });
         }
       } else {
         sp.onaudioprocess = null;
-        todo(false,"3");
         finish();
       }
     }
   }
   sp.connect(ac.destination);
 }
 
 // Take an AudioContext, make sure it switches to running when the audio starts

--- a/dom/media/webaudio/test/test_mediaStreamAudioSourceNodeCrossOrigin.html
+++ b/dom/media/webaudio/test/test_mediaStreamAudioSourceNodeCrossOrigin.html
@@ -7,51 +7,54 @@
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 SimpleTest.waitForExplicitFinish();
 
 var audio = new Audio("http://example.org:80/tests/dom/media/webaudio/test/small-shot.ogg");
+audio.load();
 var context = new AudioContext();
-var node = context.createMediaStreamSource(audio.mozCaptureStreamUntilEnded());
-var sp = context.createScriptProcessor(2048, 1);
-node.connect(sp);
-var nonzeroSampleCount = 0;
-var complete = false;
-var iterationCount = 0;
+audio.onloadedmetadata = function() {
+  var node = context.createMediaStreamSource(audio.mozCaptureStreamUntilEnded());
+  var sp = context.createScriptProcessor(2048, 1);
+  node.connect(sp);
+  var nonzeroSampleCount = 0;
+  var complete = false;
+  var iterationCount = 0;
+
+  // This test ensures we receive at least expectedSampleCount nonzero samples
+  function processSamples(e) {
+    if (complete) {
+      return;
+    }
 
-// This test ensures we receive at least expectedSampleCount nonzero samples
-function processSamples(e) {
-  if (complete) {
-    return;
+    if (iterationCount == 0) {
+      // Don't start playing the audio until the AudioContext stuff is connected
+      // and running.
+      audio.play();
+    }
+    ++iterationCount;
+
+    var buf = e.inputBuffer.getChannelData(0);
+    var nonzeroSamplesThisBuffer = 0;
+    for (var i = 0; i < buf.length; ++i) {
+      if (buf[i] != 0) {
+        ++nonzeroSamplesThisBuffer;
+      }
+    }
+    is(nonzeroSamplesThisBuffer, 0,
+       "Checking all samples are zero");
+    if (iterationCount >= 20) {
+      SimpleTest.finish();
+      complete = true;
+    }
   }
 
-  if (iterationCount == 0) {
-    // Don't start playing the audio until the AudioContext stuff is connected
-    // and running.
-    audio.play();
-  }
-  ++iterationCount;
-
-  var buf = e.inputBuffer.getChannelData(0);
-  var nonzeroSamplesThisBuffer = 0;
-  for (var i = 0; i < buf.length; ++i) {
-    if (buf[i] != 0) {
-      ++nonzeroSamplesThisBuffer;
-    }
-  }
-  is(nonzeroSamplesThisBuffer, 0,
-     "Checking all samples are zero");
-  if (iterationCount >= 20) {
-    SimpleTest.finish();
-    complete = true;
-  }
+  audio.oncanplaythrough = function() {
+    sp.onaudioprocess = processSamples;
+  };
 }
-
-audio.oncanplaythrough = function() {
-  sp.onaudioprocess = processSamples;
-};
 </script>
 </pre>
 </body>
 </html>