--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1415,19 +1415,21 @@ pref("privacy.trackingprotection.ui.enab
 #endif
 pref("privacy.trackingprotection.introCount", 0);
 pref("privacy.trackingprotection.introURL", "https://www.mozilla.org/%LOCALE%/firefox/%VERSION%/tracking-protection/start/");
 
 // Enable Contextual Identity Containers
 #ifdef NIGHTLY_BUILD
 pref("privacy.userContext.enabled", true);
 pref("privacy.userContext.ui.enabled", true);
+pref("privacy.usercontext.about_newtab_segregation.enabled", true);
 #else
 pref("privacy.userContext.enabled", false);
 pref("privacy.userContext.ui.enabled", false);
+pref("privacy.usercontext.about_newtab_segregation.enabled", false);
 #endif
 
 #ifndef RELEASE_OR_BETA
 // At the moment, autostart.2 is used, while autostart.1 is unused.
 // We leave it here set to false to reset users' defaults and allow
 // us to change everybody to true in the future, when desired.
 pref("browser.tabs.remote.autostart.1", false);
 pref("browser.tabs.remote.autostart.2", true);

--- a/browser/components/contextualidentity/test/browser/browser_aboutURLs.js
+++ b/browser/components/contextualidentity/test/browser/browser_aboutURLs.js
@@ -33,16 +33,17 @@ add_task(function* () {
       }
     } catch (e) {
       // getService might have thrown if the component doesn't actually
       // implement nsIAboutModule
     }
   }
 
   for (let url of aboutURLs) {
+    info("Loading about:" + url);
     let tab = gBrowser.addTab("about:"+url, {userContextId: 1});
     yield BrowserTestUtils.browserLoaded(tab.linkedBrowser);
 
-    ok(true);
+    ok(true, "Done loading about:" + url);
 
     yield BrowserTestUtils.removeTab(tab);
   }
 });

--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -123,16 +123,18 @@ skip-if = os == "mac" # Bug 1245996 : cl
 [browser_rules_edit-selector_02.js]
 [browser_rules_edit-selector_03.js]
 [browser_rules_edit-selector_04.js]
 [browser_rules_edit-selector_05.js]
 [browser_rules_edit-selector_06.js]
 [browser_rules_edit-selector_07.js]
 [browser_rules_edit-selector_08.js]
 [browser_rules_edit-selector_09.js]
+[browser_rules_edit-selector_10.js]
+[browser_rules_edit-selector_11.js]
 [browser_rules_edit-value-after-name_01.js]
 [browser_rules_edit-value-after-name_02.js]
 [browser_rules_edit-value-after-name_03.js]
 [browser_rules_edit-value-after-name_04.js]
 [browser_rules_editable-field-focus_01.js]
 [browser_rules_editable-field-focus_02.js]
 [browser_rules_eyedropper.js]
 [browser_rules_filtereditor-appears-on-swatch-click.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_10.js
@@ -0,0 +1,64 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for bug 1293616: make sure that editing a selector
+// keeps the rule in the proper position.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid span, #testid p {
+      background: aqua;
+    }
+    span {
+      background: fuchsia;
+    }
+  </style>
+  <div id="testid">
+    <span class="pickme">
+      Styled Node
+    </span>
+  </div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  yield selectNode(".pickme", inspector);
+  yield testEditSelector(view);
+});
+
+function* testEditSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = yield focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = "#testid span";
+  let onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {});
+  yield onRuleViewChanged;
+
+  // Escape the new property editor after editing the selector
+  let onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  yield onBlur;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  is(ruleEditor.element.getAttribute("unmatched"), "false", "Rule editor is matched.");
+
+  let props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  ok(!props[0].overridden, "Background property is not overridden");
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+  props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  ok(props[0].overridden, "Background property is overridden");
+}

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_11.js
@@ -0,0 +1,69 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for bug 1293616, where editing a selector should
+// change the relative priority of the rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background: aqua;
+    }
+    .pickme {
+      background: seagreen;
+    }
+    span {
+      background: fuchsia;
+    }
+  </style>
+  <div>
+    <span id="testid" class="pickme">
+      Styled Node
+    </span>
+  </div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  yield selectNode(".pickme", inspector);
+  yield testEditSelector(view);
+});
+
+function* testEditSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = yield focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = ".pickme";
+  let onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {});
+  yield onRuleViewChanged;
+
+  // Escape the new property editor after editing the selector
+  let onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  yield onBlur;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 4, "Should have 4 rules.");
+  is(ruleEditor.element.getAttribute("unmatched"), "false", "Rule editor is matched.");
+
+  let props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  is(props[0].value, "aqua", "Background property is aqua");
+  ok(props[0].overridden, "Background property is overridden");
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+  props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  is(props[0].value, "seagreen", "Background property is seagreen");
+  ok(!props[0].overridden, "Background property is not overridden");
+}

--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -22,16 +22,17 @@ const {
   parsePseudoClassesAndAttributes,
   SELECTOR_ATTRIBUTE,
   SELECTOR_ELEMENT,
   SELECTOR_PSEUDO_CLASS
 } = require("devtools/shared/css/parsing-utils");
 const promise = require("promise");
 const Services = require("Services");
 const EventEmitter = require("devtools/shared/event-emitter");
+const {Task} = require("devtools/shared/task");
 
 const STYLE_INSPECTOR_PROPERTIES = "devtools-shared/locale/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
@@ -512,72 +513,98 @@ RuleEditor.prototype = {
    *
    * @param {String} value
    *        The value contained in the editor.
    * @param {Boolean} commit
    *        True if the change should be applied.
    * @param {Number} direction
    *        The move focus direction number.
    */
-  _onSelectorDone: function (value, commit, direction) {
+  _onSelectorDone: Task.async(function* (value, commit, direction) {
     if (!commit || this.isEditing || value === "" ||
         value === this.rule.selectorText) {
       return;
     }
 
     let ruleView = this.ruleView;
     let elementStyle = ruleView._elementStyle;
     let element = elementStyle.element;
     let supportsUnmatchedRules =
       this.rule.domRule.supportsModifySelectorUnmatched;
 
     this.isEditing = true;
 
-    this.rule.domRule.modifySelector(element, value).then(response => {
-      this.isEditing = false;
+    try {
+      let response = yield this.rule.domRule.modifySelector(element, value);
 
       if (!supportsUnmatchedRules) {
+        this.isEditing = false;
+
         if (response) {
           this.ruleView.refreshPanel();
         }
         return;
       }
 
+      // We recompute the list of applied styles, because editing a
+      // selector might cause this rule's position to change.
+      let applied = yield elementStyle.pageStyle.getApplied(element, {
+        inherited: true,
+        matchedSelectors: true,
+        filter: elementStyle.showUserAgentStyles ? "ua" : undefined
+      });
+
+      this.isEditing = false;
+
       let {ruleProps, isMatching} = response;
       if (!ruleProps) {
         // Notify for changes, even when nothing changes,
         // just to allow tests being able to track end of this request.
         ruleView.emit("ruleview-invalid-selector");
         return;
       }
 
       ruleProps.isUnmatched = !isMatching;
       let newRule = new Rule(elementStyle, ruleProps);
       let editor = new RuleEditor(ruleView, newRule);
       let rules = elementStyle.rules;
 
-      rules.splice(rules.indexOf(this.rule), 1);
-      rules.push(newRule);
+      let newRuleIndex = applied.findIndex((r) => r.rule == ruleProps.rule);
+      let oldIndex = rules.indexOf(this.rule);
+
+      // If the selector no longer matches, then we leave the rule in
+      // the same relative position.
+      if (newRuleIndex === -1) {
+        newRuleIndex = oldIndex;
+      }
+
+      // Remove the old rule and insert the new rule.
+      rules.splice(oldIndex, 1);
+      rules.splice(newRuleIndex, 0, newRule);
       elementStyle._changed();
       elementStyle.markOverriddenAll();
 
+      // We install the new editor in place of the old -- you might
+      // think we would replicate the list-modification logic above,
+      // but that is complicated due to the way the UI installs
+      // pseudo-element rules and the like.
       this.element.parentNode.replaceChild(editor.element, this.element);
 
       // Remove highlight for modified selector
       if (ruleView.highlightedSelector) {
         ruleView.toggleSelectorHighlighter(ruleView.lastSelectorIcon,
           ruleView.highlightedSelector);
       }
 
       editor._moveSelectorFocus(direction);
-    }).then(null, err => {
+    } catch (err) {
       this.isEditing = false;
       promiseWarn(err);
-    });
-  },
+    }
+  }),
 
   /**
    * Handle moving the focus change after a tab or return keypress in the
    * selector inplace editor.
    *
    * @param {Number} direction
    *        The move focus direction number.
    */

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/events.js
@@ -0,0 +1,86 @@
+"use strict";
+
+// The panel's window global is an EventEmitter firing the following events:
+const EVENTS = {
+  // When the monitored target begins and finishes navigating.
+  TARGET_WILL_NAVIGATE: "NetMonitor:TargetWillNavigate",
+  TARGET_DID_NAVIGATE: "NetMonitor:TargetNavigate",
+
+  // When a network or timeline event is received.
+  // See https://developer.mozilla.org/docs/Tools/Web_Console/remoting for
+  // more information about what each packet is supposed to deliver.
+  NETWORK_EVENT: "NetMonitor:NetworkEvent",
+  TIMELINE_EVENT: "NetMonitor:TimelineEvent",
+
+  // When a network event is added to the view
+  REQUEST_ADDED: "NetMonitor:RequestAdded",
+
+  // When request headers begin and finish receiving.
+  UPDATING_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdating:RequestHeaders",
+  RECEIVED_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdated:RequestHeaders",
+
+  // When request cookies begin and finish receiving.
+  UPDATING_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdating:RequestCookies",
+  RECEIVED_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdated:RequestCookies",
+
+  // When request post data begins and finishes receiving.
+  UPDATING_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdating:RequestPostData",
+  RECEIVED_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdated:RequestPostData",
+
+  // When security information begins and finishes receiving.
+  UPDATING_SECURITY_INFO: "NetMonitor::NetworkEventUpdating:SecurityInfo",
+  RECEIVED_SECURITY_INFO: "NetMonitor::NetworkEventUpdated:SecurityInfo",
+
+  // When response headers begin and finish receiving.
+  UPDATING_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdating:ResponseHeaders",
+  RECEIVED_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdated:ResponseHeaders",
+
+  // When response cookies begin and finish receiving.
+  UPDATING_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdating:ResponseCookies",
+  RECEIVED_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdated:ResponseCookies",
+
+  // When event timings begin and finish receiving.
+  UPDATING_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdating:EventTimings",
+  RECEIVED_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdated:EventTimings",
+
+  // When response content begins, updates and finishes receiving.
+  STARTED_RECEIVING_RESPONSE: "NetMonitor:NetworkEventUpdating:ResponseStart",
+  UPDATING_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdating:ResponseContent",
+  RECEIVED_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdated:ResponseContent",
+
+  // When the request post params are displayed in the UI.
+  REQUEST_POST_PARAMS_DISPLAYED: "NetMonitor:RequestPostParamsAvailable",
+
+  // When the response body is displayed in the UI.
+  RESPONSE_BODY_DISPLAYED: "NetMonitor:ResponseBodyAvailable",
+
+  // When the html response preview is displayed in the UI.
+  RESPONSE_HTML_PREVIEW_DISPLAYED: "NetMonitor:ResponseHtmlPreviewAvailable",
+
+  // When the image response thumbnail is displayed in the UI.
+  RESPONSE_IMAGE_THUMBNAIL_DISPLAYED:
+    "NetMonitor:ResponseImageThumbnailAvailable",
+
+  // When a tab is selected in the NetworkDetailsView and subsequently rendered.
+  TAB_UPDATED: "NetMonitor:TabUpdated",
+
+  // Fired when Sidebar has finished being populated.
+  SIDEBAR_POPULATED: "NetMonitor:SidebarPopulated",
+
+  // Fired when NetworkDetailsView has finished being populated.
+  NETWORKDETAILSVIEW_POPULATED: "NetMonitor:NetworkDetailsViewPopulated",
+
+  // Fired when CustomRequestView has finished being populated.
+  CUSTOMREQUESTVIEW_POPULATED: "NetMonitor:CustomRequestViewPopulated",
+
+  // Fired when charts have been displayed in the PerformanceStatisticsView.
+  PLACEHOLDER_CHARTS_DISPLAYED: "NetMonitor:PlaceholderChartsDisplayed",
+  PRIMED_CACHE_CHART_DISPLAYED: "NetMonitor:PrimedChartsDisplayed",
+  EMPTY_CACHE_CHART_DISPLAYED: "NetMonitor:EmptyChartsDisplayed",
+
+  // Fired once the NetMonitorController establishes a connection to the debug
+  // target.
+  CONNECTED: "connected",
+};
+
+exports.EVENTS = EVENTS;

--- a/devtools/client/netmonitor/moz.build
+++ b/devtools/client/netmonitor/moz.build
@@ -3,17 +3,19 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
     'har'
 ]
 
 DevToolsModules(
+    'events.js',
     'filter-predicates.js',
     'l10n.js',
     'panel.js',
     'prefs.js',
     'request-utils.js',
     'requests-menu-view.js',
+    'sort-predicates.js',
 )
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']

--- a/devtools/client/netmonitor/netmonitor-controller.js
+++ b/devtools/client/netmonitor/netmonitor-controller.js
@@ -4,99 +4,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/. */
 /* globals window, document, NetMonitorView */
 /* exported loader */
 "use strict";
 
 var { utils: Cu } = Components;
 
-// The panel's window global is an EventEmitter firing the following events:
-const EVENTS = {
-  // When the monitored target begins and finishes navigating.
-  TARGET_WILL_NAVIGATE: "NetMonitor:TargetWillNavigate",
-  TARGET_DID_NAVIGATE: "NetMonitor:TargetNavigate",
-
-  // When a network or timeline event is received.
-  // See https://developer.mozilla.org/docs/Tools/Web_Console/remoting for
-  // more information about what each packet is supposed to deliver.
-  NETWORK_EVENT: "NetMonitor:NetworkEvent",
-  TIMELINE_EVENT: "NetMonitor:TimelineEvent",
-
-  // When a network event is added to the view
-  REQUEST_ADDED: "NetMonitor:RequestAdded",
-
-  // When request headers begin and finish receiving.
-  UPDATING_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdating:RequestHeaders",
-  RECEIVED_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdated:RequestHeaders",
-
-  // When request cookies begin and finish receiving.
-  UPDATING_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdating:RequestCookies",
-  RECEIVED_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdated:RequestCookies",
-
-  // When request post data begins and finishes receiving.
-  UPDATING_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdating:RequestPostData",
-  RECEIVED_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdated:RequestPostData",
-
-  // When security information begins and finishes receiving.
-  UPDATING_SECURITY_INFO: "NetMonitor::NetworkEventUpdating:SecurityInfo",
-  RECEIVED_SECURITY_INFO: "NetMonitor::NetworkEventUpdated:SecurityInfo",
-
-  // When response headers begin and finish receiving.
-  UPDATING_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdating:ResponseHeaders",
-  RECEIVED_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdated:ResponseHeaders",
-
-  // When response cookies begin and finish receiving.
-  UPDATING_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdating:ResponseCookies",
-  RECEIVED_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdated:ResponseCookies",
-
-  // When event timings begin and finish receiving.
-  UPDATING_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdating:EventTimings",
-  RECEIVED_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdated:EventTimings",
-
-  // When response content begins, updates and finishes receiving.
-  STARTED_RECEIVING_RESPONSE: "NetMonitor:NetworkEventUpdating:ResponseStart",
-  UPDATING_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdating:ResponseContent",
-  RECEIVED_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdated:ResponseContent",
-
-  // When the request post params are displayed in the UI.
-  REQUEST_POST_PARAMS_DISPLAYED: "NetMonitor:RequestPostParamsAvailable",
-
-  // When the response body is displayed in the UI.
-  RESPONSE_BODY_DISPLAYED: "NetMonitor:ResponseBodyAvailable",
-
-  // When the html response preview is displayed in the UI.
-  RESPONSE_HTML_PREVIEW_DISPLAYED: "NetMonitor:ResponseHtmlPreviewAvailable",
-
-  // When the image response thumbnail is displayed in the UI.
-  RESPONSE_IMAGE_THUMBNAIL_DISPLAYED:
-    "NetMonitor:ResponseImageThumbnailAvailable",
-
-  // When a tab is selected in the NetworkDetailsView and subsequently rendered.
-  TAB_UPDATED: "NetMonitor:TabUpdated",
-
-  // Fired when Sidebar has finished being populated.
-  SIDEBAR_POPULATED: "NetMonitor:SidebarPopulated",
-
-  // Fired when NetworkDetailsView has finished being populated.
-  NETWORKDETAILSVIEW_POPULATED: "NetMonitor:NetworkDetailsViewPopulated",
-
-  // Fired when CustomRequestView has finished being populated.
-  CUSTOMREQUESTVIEW_POPULATED: "NetMonitor:CustomRequestViewPopulated",
-
-  // Fired when charts have been displayed in the PerformanceStatisticsView.
-  PLACEHOLDER_CHARTS_DISPLAYED: "NetMonitor:PlaceholderChartsDisplayed",
-  PRIMED_CACHE_CHART_DISPLAYED: "NetMonitor:PrimedChartsDisplayed",
-  EMPTY_CACHE_CHART_DISPLAYED: "NetMonitor:EmptyChartsDisplayed",
-
-  // Fired once the NetMonitorController establishes a connection to the debug
-  // target.
-  CONNECTED: "connected",
-};
-
 // 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.
   RELOAD: {
     WITH_CACHE_ENABLED: 1,
@@ -119,16 +36,17 @@ var { loader, require } = BrowserLoaderM
 const promise = require("promise");
 const Services = require("Services");
 const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm");
 const EventEmitter = require("devtools/shared/event-emitter");
 const Editor = require("devtools/client/sourceeditor/editor");
 const {TimelineFront} = require("devtools/shared/fronts/timeline");
 const {Task} = require("devtools/shared/task");
 const {Prefs} = require("./prefs");
+const {EVENTS} = require("./events");
 
 XPCOMUtils.defineConstant(this, "EVENTS", EVENTS);
 XPCOMUtils.defineConstant(this, "ACTIVITY_TYPE", ACTIVITY_TYPE);
 XPCOMUtils.defineConstant(this, "Editor", Editor);
 XPCOMUtils.defineConstant(this, "Prefs", Prefs);
 
 XPCOMUtils.defineLazyModuleGetter(this, "Chart",
   "resource://devtools/client/shared/widgets/Chart.jsm");

--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -14,17 +14,21 @@ XPCOMUtils.defineLazyGetter(this, "Netwo
 
 const {VariablesView} = require("resource://devtools/client/shared/widgets/VariablesView.jsm");
 const {VariablesViewController} = require("resource://devtools/client/shared/widgets/VariablesViewController.jsm");
 const {ToolSidebar} = require("devtools/client/framework/sidebar");
 const { testing: isTesting } = require("devtools/shared/flags");
 const {ViewHelpers, Heritage} = require("devtools/client/shared/widgets/view-helpers");
 const {PluralForm} = require("devtools/shared/plural-form");
 const {Filters} = require("./filter-predicates");
-const {getFormDataSections, formDataURI, writeHeaderText, getKeyWithEvent} = require("./request-utils");
+const {getFormDataSections,
+       formDataURI,
+       writeHeaderText,
+       getKeyWithEvent,
+       getUriHostPort} = require("./request-utils");
 const {L10N} = require("./l10n");
 const {RequestsMenuView} = require("./requests-menu-view");
 
 // ms
 const WDA_DEFAULT_VERIFY_INTERVAL = 50;
 
 // Use longer timeout during testing as the tests need this process to succeed
 // and two seconds is quite short on slow debug builds. The timeout here should
@@ -1310,17 +1314,17 @@ NetworkDetailsView.prototype = {
       let disabledLabel = L10N.getStr("netmonitor.security.disabled");
 
       // Connection parameters
       setValue("#security-protocol-version-value",
         securityInfo.protocolVersion);
       setValue("#security-ciphersuite-value", securityInfo.cipherSuite);
 
       // Host header
-      let domain = NetMonitorView.RequestsMenu._getUriHostPort(url);
+      let domain = getUriHostPort(url);
       let hostHeader = L10N.getFormatStr("netmonitor.security.hostHeader",
         domain);
       setValue("#security-info-host-header", hostHeader);
 
       // Parameters related to the domain
       setValue("#security-http-strict-transport-security-value",
                 securityInfo.hsts ? enabledLabel : disabledLabel);
 

--- a/devtools/client/netmonitor/request-utils.js
+++ b/devtools/client/netmonitor/request-utils.js
@@ -1,13 +1,14 @@
 "use strict";
 
 const { Ci } = require("chrome");
 const { KeyCodes } = require("devtools/client/shared/keycodes");
 const { Task } = require("devtools/shared/task");
+const NetworkHelper = require("devtools/shared/webconsole/network-helper");
 
 /**
  * Helper method to get a wrapped function which can be bound to as
  * an event listener directly and is executed only when data-key is
  * present in event.target.
  *
  * @param function callback
  *          Function to execute execute when data-key
@@ -104,16 +105,58 @@ exports.formDataURI = function (mimeType
  * @return string text
  *         List of headers in text format
  */
 exports.writeHeaderText = function (headers) {
   return headers.map(({name, value}) => name + ": " + value).join("\n");
 };
 
 /**
+ * Helper for getting an abbreviated string for a mime type.
+ *
+ * @param string mimeType
+ * @return string
+ */
+exports.getAbbreviatedMimeType = function (mimeType) {
+  if (!mimeType) {
+    return "";
+  }
+  return (mimeType.split(";")[0].split("/")[1] || "").split("+")[0];
+};
+
+/**
+ * Helpers for getting details about an nsIURL.
+ *
+ * @param nsIURL | string url
+ * @return string
+ */
+exports.getUriNameWithQuery = function (url) {
+  if (!(url instanceof Ci.nsIURL)) {
+    url = NetworkHelper.nsIURL(url);
+  }
+
+  let name = NetworkHelper.convertToUnicode(
+    unescape(url.fileName || url.filePath || "/"));
+  let query = NetworkHelper.convertToUnicode(unescape(url.query));
+
+  return name + (query ? "?" + query : "");
+};
+
+exports.getUriHostPort = function (url) {
+  if (!(url instanceof Ci.nsIURL)) {
+    url = NetworkHelper.nsIURL(url);
+  }
+  return NetworkHelper.convertToUnicode(unescape(url.hostPort));
+};
+
+exports.getUriHost = function (url) {
+  return exports.getUriHostPort(url).replace(/:\d+$/, "");
+};
+
+/**
  * Convert a nsIContentPolicy constant to a display string
  */
 const LOAD_CAUSE_STRINGS = {
   [Ci.nsIContentPolicy.TYPE_INVALID]: "invalid",
   [Ci.nsIContentPolicy.TYPE_OTHER]: "other",
   [Ci.nsIContentPolicy.TYPE_SCRIPT]: "script",
   [Ci.nsIContentPolicy.TYPE_IMAGE]: "img",
   [Ci.nsIContentPolicy.TYPE_STYLESHEET]: "stylesheet",

--- a/devtools/client/netmonitor/requests-menu-view.js
+++ b/devtools/client/netmonitor/requests-menu-view.js
@@ -11,19 +11,27 @@ const {HTMLTooltip} = require("devtools/
 const {setImageTooltip, getImageDimensions} =
   require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
 const {Heritage, WidgetMethods, setNamedTimeout} =
   require("devtools/client/shared/widgets/view-helpers");
 const {gDevTools} = require("devtools/client/framework/devtools");
 const {Curl, CurlUtils} = require("devtools/client/shared/curl");
 const {PluralForm} = require("devtools/shared/plural-form");
 const {Filters, isFreetextMatch} = require("./filter-predicates");
-const {getFormDataSections, formDataURI, writeHeaderText, getKeyWithEvent,
+const {Sorters} = require("./sort-predicates");
+const {L10N, WEBCONSOLE_L10N} = require("./l10n");
+const {getFormDataSections,
+       formDataURI,
+       writeHeaderText,
+       getKeyWithEvent,
+       getAbbreviatedMimeType,
+       getUriNameWithQuery,
+       getUriHostPort,
+       getUriHost,
        loadCauseString} = require("./request-utils");
-const {L10N, WEBCONSOLE_L10N} = require("./l10n");
 
 loader.lazyServiceGetter(this, "clipboardHelper",
   "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
 
 loader.lazyRequireGetter(this, "HarExporter",
   "devtools/client/netmonitor/har/har-exporter", true);
 
 loader.lazyRequireGetter(this, "NetworkHelper",
@@ -87,19 +95,16 @@ function RequestsMenuView() {
   dumpn("RequestsMenuView was instantiated");
 
   this._flushRequests = this._flushRequests.bind(this);
   this._onHover = this._onHover.bind(this);
   this._onSelect = this._onSelect.bind(this);
   this._onSwap = this._onSwap.bind(this);
   this._onResize = this._onResize.bind(this);
   this._onScroll = this._onScroll.bind(this);
-  this._byFile = this._byFile.bind(this);
-  this._byDomain = this._byDomain.bind(this);
-  this._byType = this._byType.bind(this);
   this._onSecurityIconClick = this._onSecurityIconClick.bind(this);
 }
 
 RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
   /**
    * Initialization function, called when the network monitor is started.
    */
   initialize: function () {
@@ -117,17 +122,17 @@ RequestsMenuView.prototype = Heritage.ex
     this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
     this.tooltip.startTogglingOnHover(widgetParentEl, this._onHover, {
       toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
       interactive: true
     });
     $("#requests-menu-contents").addEventListener("scroll", this._onScroll, true);
 
     Prefs.filters.forEach(type => this.filterOn(type));
-    this.sortContents(this._byTiming);
+    this.sortContents((a, b) => Sorters.waterfall(a.attachment, b.attachment));
 
     this.allowFocusOnRightClick = true;
     this.maintainSelectionVisible = true;
 
     this.widget.addEventListener("select", this._onSelect, false);
     this.widget.addEventListener("swap", this._onSwap, false);
     this._splitter.addEventListener("mousemove", this._onResize, false);
     window.addEventListener("resize", this._onResize, false);
@@ -784,75 +789,75 @@ RequestsMenuView.prototype = Heritage.ex
       // Used to style the next column.
       target.parentNode.setAttribute("active", "true");
     }
 
     // Sort by whatever was requested.
     switch (type) {
       case "status":
         if (direction == "ascending") {
-          this.sortContents(this._byStatus);
+          this.sortContents((a, b) => Sorters.status(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byStatus(a, b));
+          this.sortContents((a, b) => -Sorters.status(a.attachment, b.attachment));
         }
         break;
       case "method":
         if (direction == "ascending") {
-          this.sortContents(this._byMethod);
+          this.sortContents((a, b) => Sorters.method(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byMethod(a, b));
+          this.sortContents((a, b) => -Sorters.method(a.attachment, b.attachment));
         }
         break;
       case "file":
         if (direction == "ascending") {
-          this.sortContents(this._byFile);
+          this.sortContents((a, b) => Sorters.file(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byFile(a, b));
+          this.sortContents((a, b) => -Sorters.file(a.attachment, b.attachment));
         }
         break;
       case "domain":
         if (direction == "ascending") {
-          this.sortContents(this._byDomain);
+          this.sortContents((a, b) => Sorters.domain(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byDomain(a, b));
+          this.sortContents((a, b) => -Sorters.domain(a.attachment, b.attachment));
         }
         break;
       case "cause":
         if (direction == "ascending") {
-          this.sortContents(this._byCause);
+          this.sortContents((a, b) => Sorters.cause(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byCause(a, b));
+          this.sortContents((a, b) => -Sorters.cause(a.attachment, b.attachment));
         }
         break;
       case "type":
         if (direction == "ascending") {
-          this.sortContents(this._byType);
+          this.sortContents((a, b) => Sorters.type(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byType(a, b));
+          this.sortContents((a, b) => -Sorters.type(a.attachment, b.attachment));
         }
         break;
       case "transferred":
         if (direction == "ascending") {
-          this.sortContents(this._byTransferred);
+          this.sortContents((a, b) => Sorters.transferred(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byTransferred(a, b));
+          this.sortContents((a, b) => -Sorters.transferred(a.attachment, b.attachment));
         }
         break;
       case "size":
         if (direction == "ascending") {
-          this.sortContents(this._bySize);
+          this.sortContents((a, b) => Sorters.size(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._bySize(a, b));
+          this.sortContents((a, b) => -Sorters.size(a.attachment, b.attachment));
         }
         break;
       case "waterfall":
         if (direction == "ascending") {
-          this.sortContents(this._byTiming);
+          this.sortContents((a, b) => Sorters.waterfall(a.attachment, b.attachment));
         } else {
-          this.sortContents((a, b) => !this._byTiming(a, b));
+          this.sortContents((a, b) => -Sorters.waterfall(a.attachment, b.attachment));
         }
         break;
     }
 
     this.refreshSummary();
     this.refreshZebra();
   },
 
@@ -866,86 +871,16 @@ RequestsMenuView.prototype = Heritage.ex
     $("#details-pane-toggle").disabled = true;
     $("#requests-menu-empty-notice").hidden = false;
 
     this.empty();
     this.refreshSummary();
   },
 
   /**
-   * Predicates used when sorting items.
-   *
-   * @param object aFirst
-   *        The first item used in the comparison.
-   * @param object aSecond
-   *        The second item used in the comparison.
-   * @return number
-   *         -1 to sort aFirst to a lower index than aSecond
-   *          0 to leave aFirst and aSecond unchanged with respect to each other
-   *          1 to sort aSecond to a lower index than aFirst
-   */
-  _byTiming: function ({ attachment: first }, { attachment: second }) {
-    return first.startedMillis > second.startedMillis;
-  },
-
-  _byStatus: function ({ attachment: first }, { attachment: second }) {
-    return first.status == second.status
-           ? first.startedMillis > second.startedMillis
-           : first.status > second.status;
-  },
-
-  _byMethod: function ({ attachment: first }, { attachment: second }) {
-    return first.method == second.method
-           ? first.startedMillis > second.startedMillis
-           : first.method > second.method;
-  },
-
-  _byFile: function ({ attachment: first }, { attachment: second }) {
-    let firstUrl = this._getUriNameWithQuery(first.url).toLowerCase();
-    let secondUrl = this._getUriNameWithQuery(second.url).toLowerCase();
-    return firstUrl == secondUrl
-      ? first.startedMillis > second.startedMillis
-      : firstUrl > secondUrl;
-  },
-
-  _byDomain: function ({ attachment: first }, { attachment: second }) {
-    let firstDomain = this._getUriHostPort(first.url).toLowerCase();
-    let secondDomain = this._getUriHostPort(second.url).toLowerCase();
-    return firstDomain == secondDomain
-      ? first.startedMillis > second.startedMillis
-      : firstDomain > secondDomain;
-  },
-
-  _byCause: function ({ attachment: first }, { attachment: second }) {
-    let firstCause = loadCauseString(first.cause.type);
-    let secondCause = loadCauseString(second.cause.type);
-
-    return firstCause == secondCause
-      ? first.startedMillis > second.startedMillis
-      : firstCause > secondCause;
-  },
-
-  _byType: function ({ attachment: first }, { attachment: second }) {
-    let firstType = this._getAbbreviatedMimeType(first.mimeType).toLowerCase();
-    let secondType = this._getAbbreviatedMimeType(second.mimeType).toLowerCase();
-
-    return firstType == secondType
-      ? first.startedMillis > second.startedMillis
-      : firstType > secondType;
-  },
-
-  _byTransferred: function ({ attachment: first }, { attachment: second }) {
-    return first.transferredSize > second.transferredSize;
-  },
-
-  _bySize: function ({ attachment: first }, { attachment: second }) {
-    return first.contentSize > second.contentSize;
-  },
-
-  /**
    * Refreshes the status displayed in this container's footer, providing
    * concise information about all requests.
    */
   refreshSummary: function () {
     let visibleItems = this.visibleItems;
     let visibleRequestsCount = visibleItems.length;
     if (!visibleRequestsCount) {
       this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
@@ -1340,19 +1275,19 @@ RequestsMenuView.prototype = Heritage.ex
       case "url": {
         let uri;
         try {
           uri = NetworkHelper.nsIURL(value);
         } catch (e) {
           // User input may not make a well-formed url yet.
           break;
         }
-        let nameWithQuery = this._getUriNameWithQuery(uri);
-        let hostPort = this._getUriHostPort(uri);
-        let host = this._getUriHost(uri);
+        let nameWithQuery = getUriNameWithQuery(uri);
+        let hostPort = getUriHostPort(uri);
+        let host = getUriHost(uri);
         let unicodeUrl = NetworkHelper.convertToUnicode(unescape(uri.spec));
 
         let file = $(".requests-menu-file", target);
         file.setAttribute("value", nameWithQuery);
         file.setAttribute("tooltiptext", unicodeUrl);
 
         let domain = $(".requests-menu-domain", target);
         domain.setAttribute("value", hostPort);
@@ -1459,17 +1394,17 @@ RequestsMenuView.prototype = Heritage.ex
           text = this.getFormattedSize(value);
         }
 
         node.setAttribute("value", text);
         node.setAttribute("tooltiptext", text);
         break;
       }
       case "mimeType": {
-        let type = this._getAbbreviatedMimeType(value);
+        let type = getAbbreviatedMimeType(value);
         let node = $(".requests-menu-type", target);
         let text = CONTENT_MIME_TYPE_ABBREVIATIONS[type] || type;
         node.setAttribute("value", text);
         node.setAttribute("tooltiptext", value);
         break;
       }
       case "responseContent": {
         let { mimeType } = item.attachment;
@@ -1989,58 +1924,16 @@ RequestsMenuView.prototype = Heritage.ex
    */
   _registerLastRequestEnd: function (unixTime) {
     if (this._lastRequestEndedMillis < unixTime) {
       this._lastRequestEndedMillis = unixTime;
     }
   },
 
   /**
-   * Helpers for getting details about an nsIURL.
-   *
-   * @param nsIURL | string url
-   * @return string
-   */
-  _getUriNameWithQuery: function (url) {
-    if (!(url instanceof Ci.nsIURL)) {
-      url = NetworkHelper.nsIURL(url);
-    }
-
-    let name = NetworkHelper.convertToUnicode(
-      unescape(url.fileName || url.filePath || "/"));
-    let query = NetworkHelper.convertToUnicode(unescape(url.query));
-
-    return name + (query ? "?" + query : "");
-  },
-
-  _getUriHostPort: function (url) {
-    if (!(url instanceof Ci.nsIURL)) {
-      url = NetworkHelper.nsIURL(url);
-    }
-    return NetworkHelper.convertToUnicode(unescape(url.hostPort));
-  },
-
-  _getUriHost: function (url) {
-    return this._getUriHostPort(url).replace(/:\d+$/, "");
-  },
-
-  /**
-   * Helper for getting an abbreviated string for a mime type.
-   *
-   * @param string mimeType
-   * @return string
-   */
-  _getAbbreviatedMimeType: function (mimeType) {
-    if (!mimeType) {
-      return "";
-    }
-    return (mimeType.split(";")[0].split("/")[1] || "").split("+")[0];
-  },
-
-  /**
    * Gets the total number of bytes representing the cumulated content size of
    * a set of requests. Returns 0 for an empty set.
    *
    * @param array itemsArray
    * @return number
    */
   _getTotalBytesOfRequests: function (itemsArray) {
     if (!itemsArray.length) {

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/sort-predicates.js
@@ -0,0 +1,92 @@
+"use strict";
+
+const { getAbbreviatedMimeType,
+        getUriNameWithQuery,
+        getUriHostPort,
+        loadCauseString } = require("./request-utils");
+
+/**
+ * Predicates used when sorting items.
+ *
+ * @param object first
+ *        The first item used in the comparison.
+ * @param object second
+ *        The second item used in the comparison.
+ * @return number
+ *         <0 to sort first to a lower index than second
+ *         =0 to leave first and second unchanged with respect to each other
+ *         >0 to sort second to a lower index than first
+ */
+
+function waterfall(first, second) {
+  return first.startedMillis - second.startedMillis;
+}
+
+function status(first, second) {
+  return first.status == second.status
+         ? first.startedMillis - second.startedMillis
+         : first.status - second.status;
+}
+
+function method(first, second) {
+  if (first.method == second.method) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return first.method > second.method ? 1 : -1;
+}
+
+function file(first, second) {
+  let firstUrl = getUriNameWithQuery(first.url).toLowerCase();
+  let secondUrl = getUriNameWithQuery(second.url).toLowerCase();
+  if (firstUrl == secondUrl) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstUrl > secondUrl ? 1 : -1;
+}
+
+function domain(first, second) {
+  let firstDomain = getUriHostPort(first.url).toLowerCase();
+  let secondDomain = getUriHostPort(second.url).toLowerCase();
+  if (firstDomain == secondDomain) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstDomain > secondDomain ? 1 : -1;
+}
+
+function cause(first, second) {
+  let firstCause = loadCauseString(first.cause.type);
+  let secondCause = loadCauseString(second.cause.type);
+  if (firstCause == secondCause) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstCause > secondCause ? 1 : -1;
+}
+
+function type(first, second) {
+  let firstType = getAbbreviatedMimeType(first.mimeType).toLowerCase();
+  let secondType = getAbbreviatedMimeType(second.mimeType).toLowerCase();
+  if (firstType == secondType) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstType > secondType ? 1 : -1;
+}
+
+function transferred(first, second) {
+  return first.transferredSize - second.transferredSize;
+}
+
+function size(first, second) {
+  return first.contentSize - second.contentSize;
+}
+
+exports.Sorters = {
+  status,
+  method,
+  file,
+  domain,
+  cause,
+  type,
+  transferred,
+  size,
+  waterfall,
+};

--- a/devtools/client/shared/components/moz.build
+++ b/devtools/client/shared/components/moz.build
@@ -11,16 +11,17 @@ DIRS += [
     'tree'
 ]
 
 DevToolsModules(
     'frame.js',
     'h-split-box.js',
     'notification-box.css',
     'notification-box.js',
+    'search-box.js',
     'sidebar-toggle.css',
     'sidebar-toggle.js',
     'stack-trace.js',
     'tree.js',
 )
 
 MOCHITEST_CHROME_MANIFESTS += ['test/mochitest/chrome.ini']
 BROWSER_CHROME_MANIFESTS += ['test/browser/browser.ini']

new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/components/search-box.js
@@ -0,0 +1,107 @@
+/* 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/. */
+
+/* global window */
+
+"use strict";
+
+const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
+const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts");
+
+/**
+ * A generic search box component for use across devtools
+ */
+module.exports = createClass({
+  displayName: "SearchBox",
+
+  propTypes: {
+    delay: PropTypes.number,
+    keyShortcut: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    type: PropTypes.string
+  },
+
+  getInitialState() {
+    return {
+      value: ""
+    };
+  },
+
+  componentDidMount() {
+    if (!this.props.keyShortcut) {
+      return;
+    }
+
+    this.shortcuts = new KeyShortcuts({
+      window
+    });
+    this.shortcuts.on(this.props.keyShortcut, (name, event) => {
+      event.preventDefault();
+      this.refs.input.focus();
+    });
+  },
+
+  componentWillUnmount() {
+    this.shortcuts.destroy();
+    // Clean up an existing timeout.
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+  },
+
+  onChange() {
+    if (this.state.value !== this.refs.input.value) {
+      this.setState({ value: this.refs.input.value });
+    }
+
+    if (!this.props.delay) {
+      this.props.onChange(this.state.value);
+      return;
+    }
+
+    // Clean up an existing timeout before creating a new one.
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+
+    // Execute the search after a timeout. It makes the UX
+    // smoother if the user is typing quickly.
+    this.searchTimeout = setTimeout(() => {
+      this.searchTimeout = null;
+      this.props.onChange(this.state.value);
+    }, this.props.delay);
+  },
+
+  onClearButtonClick() {
+    this.refs.input.value = "";
+    this.onChange();
+  },
+
+  render() {
+    let { type = "search", placeholder } = this.props;
+    let { value } = this.state;
+    let divClassList = ["devtools-searchbox", "has-clear-btn"];
+    let inputClassList = [`devtools-${type}input`];
+
+    if (value !== "") {
+      inputClassList.push("filled");
+    }
+    return dom.div(
+      { className: divClassList.join(" ") },
+      dom.input({
+        className: inputClassList.join(" "),
+        onChange: this.onChange,
+        placeholder,
+        ref: "input",
+        value
+      }),
+      dom.button({
+        className: "devtools-searchinput-clear",
+        hidden: value == "",
+        onClick: this.onClearButtonClick
+      })
+    );
+  }
+});

--- a/devtools/client/themes/images/filters.svg
+++ b/devtools/client/themes/images/filters.svg
@@ -14,18 +14,18 @@
     <feColorMatrix in="SourceGraphic" type="matrix"
       values="0 0 0 0 0
               0 0 0 0 1
               0 0 0 0 0.212
               0 0 0 1 0"/>
   </filter>
 
   <!-- Web Audio Gradients -->
-  <linearGradient id="bypass-light" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
-    <stop offset="0%" stop-color="#f0f1f2"/> <!-- theme-toolbar-background -->
-    <stop offset="50%" stop-color="#fff"/>
+  <linearGradient id="bypass-light" x1="8%" y1="10%" x2="16%" y2="16%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#dde1e4a0"/> <!-- theme-splitter-color (0.5 opacity) -->
+    <stop offset="50%" stop-color="transparent"/>
   </linearGradient>
 
-  <linearGradient id="bypass-dark" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
-    <stop offset="0%" stop-color="#343c45"/> <!-- theme-toolbar-background -->
+  <linearGradient id="bypass-dark" x1="8%" y1="10%" x2="16%" y2="16%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#454d5d"/> <!-- theme-splitter-color -->
     <stop offset="50%" stop-color="transparent"/>
   </linearGradient>
 </svg>

--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -590,50 +590,48 @@ html, body, #app, #memory-tool {
   text-align: center;
   padding: 5px;
 }
 
 /**
  * Dagre-D3 graphs
  */
 
+svg {
+  --arrow-color: var(--theme-splitter-color);
+  --text-color: var(--theme-body-color-alt);
+}
+
+.theme-dark svg {
+  --arrow-color: var(--theme-body-color-alt);
+}
+
+svg #arrowhead {
+  /* !important is needed to override inline style */
+  fill: var(--arrow-color) !important;
+}
+
 .edgePath path {
   stroke-width: 1px;
   fill: none;
-}
-
-.theme-dark .edgePath path {
-  stroke: var(--theme-body-color-alt);
-}
-.theme-light .edgePath path {
-  stroke: var(--theme-splitter-color);
+  stroke: var(--arrow-color);
 }
 
 g.edgeLabel rect {
   fill: var(--theme-body-background);
 }
+
 g.edgeLabel tspan {
-  fill: var(--theme-body-color-alt);
+  fill: var(--text-color);
 }
 
 .nodes rect {
   stroke-width: 1px;
-}
-
-.nodes rect {
-  stroke: var(--theme-tab-toolbar-background);
-}
-.theme-light rect {
-  fill: var(--theme-tab-toolbar-background);
-}
-.theme-dark rect {
+  stroke: var(--theme-splitter-color);
   fill: var(--theme-toolbar-background);
 }
 
 text {
-  font-weight: 300;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
-  font-size: 14px;
+  font-size: 1.25em;
+  fill: var(--text-color);
+  /* Make sure text stays inside its container in RTL locales */
+  direction: ltr;
 }
-
-text {
-  fill: var(--theme-body-color-alt);
-}

--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -15,107 +15,100 @@
 #waiting-notice {
   font-size: 110%;
 }
 
 /* Context Graph */
 svg {
   overflow: hidden;
   -moz-box-flex: 1;
+  --arrow-color: var(--theme-splitter-color);
+  --text-color: var(--theme-body-color-alt);
+}
+
+.theme-dark svg {
+  --arrow-color: var(--theme-body-color-alt);
 }
 
 /* Edges in graph */
 .edgePath path {
   stroke-width: 1px;
-  fill: none;
+  stroke: var(--arrow-color);
 }
-
-.theme-dark .edgePath path {
-  stroke: var(--theme-body-color-alt);
-}
-.theme-light .edgePath path {
-  stroke: var(--theme-splitter-color);
+svg #arrowhead {
+  /* !important is needed to override inline style */
+  fill: var(--arrow-color) !important;
 }
 
 /* AudioParam connection edges */
-g.edgePath.param-connection {
+g.edgePath.param-connection path {
   stroke-dasharray: 5,5;
-}
-
-.theme-dark .edgePath.param-connection path {
-  stroke: var(--theme-body-color-alt);
-}
-.theme-light .edgePath.param-connection path {
-  stroke: var(--theme-splitter-color);
+  stroke: var(--arrow-colo);
 }
 
 /* Labels in AudioParam connection should have background that match
  * the main background so there's whitespace around the label, on top of the
  * dotted lines. */
 g.edgeLabel rect {
   fill: var(--theme-body-background);
 }
 g.edgeLabel tspan {
-  fill: var(--theme-body-color-alt);
+  fill: var(--text-color);
 }
 
 /* Audio Nodes */
 .nodes rect {
   stroke-width: 1px;
   cursor: pointer;
-  stroke: var(--theme-tab-toolbar-background);
+  stroke: var(--theme-splitter-color);
   fill: var(--theme-toolbar-background);
 }
 
 /**
  * Bypassed Nodes
  */
 
 .theme-light .nodes g.bypassed rect {
   fill: url(chrome://devtools/skin/images/filters.svg#bypass-light);
 }
+
 .theme-dark .nodes g.bypassed rect {
   fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark);
 }
+
 .nodes g.bypassed.selected rect {
   stroke: var(--theme-selection-background);
 }
 
-/*
 .nodes g.bypassed text {
-  opacity: 0.8;
+  opacity: 0.6;
 }
-*/
 
 /**
  * Selected Nodes
  */
 .nodes g.selected rect {
   fill: var(--theme-selection-background);
 }
 
-/* Don't style bypassed nodes text different because it'd be illegible in light-theme */
-.theme-light g.selected:not(.bypassed) text {
-  fill: var(--theme-toolbar-background);
+/* Don't style bypassed nodes text differently because it'd be illegible in light-theme */
+g.selected:not(.bypassed) text {
+  fill: var(--theme-selection-color);
 }
 
 
 /* Text in nodes and edges */
 text {
   cursor: default; /* override the "text" cursor */
-  font-weight: 300;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
-  font-size: 14px;
+  fill: var(--text-color);
+  font-size: 1.25em;
+  /* Make sure text stays inside its container in RTL locales */
+  direction: ltr;
 }
 
-text {
-  fill: var(--theme-body-color-alt);
-}
-
-
 .nodes text {
   cursor: pointer;
 }
 
 /**
  * Inspector Styles
  */
 

--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -67,44 +67,50 @@ NewConsoleOutputWrapper.prototype = {
       React.DOM.div(
         {className: "webconsole-output-wrapper"},
         filterBar,
         childComponent
     ));
 
     this.body = ReactDOM.render(provider, this.parentNode);
   },
-  dispatchMessageAdd: function(message, waitForResponse) {
-      let action = actions.messageAdd(message);
-      let messageId = action.message.get("id");
-      batchedMessageAdd(action);
+
+  dispatchMessageAdd: function (message, waitForResponse) {
+    let action = actions.messageAdd(message);
+    batchedMessageAdd(action);
 
-      // Wait for the message to render to resolve with the DOM node.
-      // This is just for backwards compatibility with old tests, and should
-      // be removed once it's not needed anymore.
-      if (waitForResponse) {
-        return new Promise(resolve => {
-          let jsterm = this.jsterm;
-          jsterm.hud.on("new-messages", function onThisMessage(e, messages) {
-            for (let m of messages) {
-              if (m.messageId == messageId) {
-                resolve(m.node);
-                jsterm.hud.off("new-messages", onThisMessage);
-                return;
-              }
+    // Wait for the message to render to resolve with the DOM node.
+    // This is just for backwards compatibility with old tests, and should
+    // be removed once it's not needed anymore.
+    // Can only wait for response if the action contains a valid message.
+    if (waitForResponse && action.message) {
+      let messageId = action.message.get("id");
+      return new Promise(resolve => {
+        let jsterm = this.jsterm;
+        jsterm.hud.on("new-messages", function onThisMessage(e, messages) {
+          for (let m of messages) {
+            if (m.messageId == messageId) {
+              resolve(m.node);
+              jsterm.hud.off("new-messages", onThisMessage);
+              return;
             }
-          });
+          }
         });
-      }
+      });
+    }
+
+    return Promise.resolve();
   },
-  dispatchMessagesAdd: function(messages) {
+
+  dispatchMessagesAdd: function (messages) {
     const batchedActions = messages.map(message => actions.messageAdd(message));
     store.dispatch(actions.batchActions(batchedActions));
   },
-  dispatchMessagesClear: function() {
+
+  dispatchMessagesClear: function () {
     store.dispatch(actions.messagesClear());
   },
 };
 
 function batchedMessageAdd(action) {
   queuedActions.push(action);
   if (!throttledDispatchTimeout) {
     throttledDispatchTimeout = setTimeout(() => {

--- a/devtools/shared/css/generated/generate-properties-db.js
+++ b/devtools/shared/css/generated/generate-properties-db.js
@@ -6,25 +6,27 @@
 /*
  * This is an xpcshell script that runs to generate a static list of CSS properties
  * as known by the platform. It is run from ./mach_commands.py by running
  * `mach devtools-css-db`.
  */
 var {require} = Components.utils.import("resource://devtools/shared/Loader.jsm", {});
 var {generateCssProperties} = require("devtools/server/actors/css-properties");
 
+// xpcshell can output extra information, so place some delimiter text between
+// the output of the css properties database.
+dump("DEVTOOLS_CSS_DB_DELIMITER");
+
 // Output JSON
 dump(JSON.stringify({
   cssProperties: cssProperties(),
   pseudoElements: pseudoElements()
 }));
-// In a debug build, xpcshell might print extra debugging information,
-// so we emit a trailing newline and then arrange to just read a
-// single (long) line of JSON from the output.
-dump("\n");
+
+dump("DEVTOOLS_CSS_DB_DELIMITER");
 
 /*
  * A list of CSS Properties and their various characteristics. This is used on the
  * client-side when the CssPropertiesActor is not found, or when the client and server
  * are the same version. A single property takes the form:
  *
  *  "animation": {
  *    "isInherited": false,

--- a/devtools/shared/css/generated/mach_commands.py
+++ b/devtools/shared/css/generated/mach_commands.py
@@ -1,26 +1,23 @@
 # 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/.
 
 """
-This script implements the `mach devtools-css-db` command. It runs the C preprocessor
-on the CSS properties header file to get the list of preferences associated with
-a specific property, and it runs an xpcshell script that uses inIDOMUtils to query
-the CSS properties used by the browser. This information is used to generate the
-properties-db.js file.
+This script implements the `mach devtools-css-db` command. It runs an xpcshell script
+that uses inIDOMUtils to query the CSS properties used by the browser. This information
+is used to generate the properties-db.js file.
 """
 
 import json
 import os
 import sys
 import string
 import subprocess
-from mozbuild import shellutil
 from mozbuild.base import (
     MozbuildObject,
     MachCommandBase,
 )
 from mach.decorators import (
     CommandProvider,
     Command,
 )
@@ -37,56 +34,22 @@ def stringify(obj):
 class MachCommands(MachCommandBase):
     @Command(
         'devtools-css-db', category='post-build',
         description='Rebuild the devtool\'s static css properties database.')
     def generate_css_db(self):
         """Generate the static css properties database for devtools and write it to file."""
 
         print("Re-generating the css properties database...")
-        preferences = self.get_preferences()
         db = self.get_properties_db_from_xpcshell()
 
         self.output_template({
-            'preferences': stringify(preferences),
             'cssProperties': stringify(db['cssProperties']),
             'pseudoElements': stringify(db['pseudoElements'])})
 
-    def get_preferences(self):
-        """Get all of the preferences associated with enabling and disabling a property."""
-        # Build the command to run the preprocessor on PythonCSSProps.h
-        headerPath = resolve_path(self.topsrcdir, 'layout/style/PythonCSSProps.h')
-
-        cpp = self.substs['CPP']
-
-        if not cpp:
-            print("Unable to find the cpp program. Please do a full, non-artifact")
-            print("build and try this again.")
-            sys.exit(1)
-
-        if type(cpp) is list:
-            cmd = cpp
-        else:
-            cmd = shellutil.split(cpp)
-        cmd += shellutil.split(self.substs['ACDEFINES'])
-        cmd.append(headerPath)
-
-        # The preprocessed list takes the following form:
-        # [ (name, prop, id, flags, pref, proptype), ... ]
-        preprocessed = eval(subprocess.check_output(cmd))
-
-        # Map this list
-        # (name, prop, id, flags, pref, proptype) => (name, pref)
-        preferences = [
-            (name, pref)
-            for name, prop, id, flags, pref, proptype in preprocessed
-            if 'CSS_PROPERTY_INTERNAL' not in flags]
-
-        return preferences
-
     def get_properties_db_from_xpcshell(self):
         """Generate the static css properties db for devtools from an xpcshell script."""
         build = MozbuildObject.from_environment()
 
         # Get the paths
         script_path = resolve_path(self.topsrcdir,
             'devtools/shared/css/generated/generate-properties-db.js')
         gre_path = resolve_path(self.topobjdir, 'dist/bin')
@@ -98,19 +61,19 @@ class MachCommands(MachCommandBase):
         if sys.platform.startswith('linux'):
             sub_env["LD_LIBRARY_PATH"] = gre_path
 
         # Run the xcpshell script, and set the appdir flag to the browser path so that
         # we have the proper dependencies for requiring the loader.
         contents = subprocess.check_output([xpcshell_path, '-g', gre_path,
                                             '-a', browser_path, script_path],
                                            env = sub_env)
-        # Extract just the first line of output, since a debug-build
-        # xpcshell might emit extra output that we don't want.
-        contents = contents.split('\n')[0]
+        # Extract just the output between the delimiters as the xpcshell output can
+        # have extra output that we don't want.
+        contents = contents.split('DEVTOOLS_CSS_DB_DELIMITER')[1]
 
         return json.loads(contents)
 
     def output_template(self, substitutions):
         """Output a the properties-db.js from a template."""
         js_template_path = resolve_path(self.topsrcdir,
             'devtools/shared/css/generated/properties-db.js.in')
         destination_path = resolve_path(self.topsrcdir,

--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -9297,1839 +9297,8 @@ exports.PSEUDO_ELEMENTS = [
   ":-moz-range-track",
   ":-moz-range-progress",
   ":-moz-range-thumb",
   ":-moz-meter-bar",
   ":-moz-placeholder",
   ":placeholder",
   ":-moz-color-swatch"
 ];
-
-/**
- * A list of the preferences keys for whether a CSS property is enabled or not. This is
- * exposed for testing purposes.
- */
-exports.PREFERENCES = [
-  [
-    "align-content",
-    ""
-  ],
-  [
-    "align-items",
-    ""
-  ],
-  [
-    "align-self",
-    ""
-  ],
-  [
-    "all",
-    "layout.css.all-shorthand.enabled"
-  ],
-  [
-    "animation",
-    ""
-  ],
-  [
-    "animation-delay",
-    ""
-  ],
-  [
-    "animation-direction",
-    ""
-  ],
-  [
-    "animation-duration",
-    ""
-  ],
-  [
-    "animation-fill-mode",
-    ""
-  ],
-  [
-    "animation-iteration-count",
-    ""
-  ],
-  [
-    "animation-name",
-    ""
-  ],
-  [
-    "animation-play-state",
-    ""
-  ],
-  [
-    "animation-timing-function",
-    ""
-  ],
-  [
-    "-moz-appearance",
-    ""
-  ],
-  [
-    "backface-visibility",
-    ""
-  ],
-  [
-    "background",
-    ""
-  ],
-  [
-    "background-attachment",
-    ""
-  ],
-  [
-    "background-blend-mode",
-    "layout.css.background-blend-mode.enabled"
-  ],
-  [
-    "background-clip",
-    ""
-  ],
-  [
-    "background-color",
-    ""
-  ],
-  [
-    "background-image",
-    ""
-  ],
-  [
-    "background-origin",
-    ""
-  ],
-  [
-    "background-position",
-    ""
-  ],
-  [
-    "background-position-x",
-    ""
-  ],
-  [
-    "background-position-y",
-    ""
-  ],
-  [
-    "background-repeat",
-    ""
-  ],
-  [
-    "background-size",
-    ""
-  ],
-  [
-    "-moz-binding",
-    ""
-  ],
-  [
-    "block-size",
-    ""
-  ],
-  [
-    "border",
-    ""
-  ],
-  [
-    "border-block-end",
-    ""
-  ],
-  [
-    "border-block-end-color",
-    ""
-  ],
-  [
-    "border-block-end-style",
-    ""
-  ],
-  [
-    "border-block-end-width",
-    ""
-  ],
-  [
-    "border-block-start",
-    ""
-  ],
-  [
-    "border-block-start-color",
-    ""
-  ],
-  [
-    "border-block-start-style",
-    ""
-  ],
-  [
-    "border-block-start-width",
-    ""
-  ],
-  [
-    "border-bottom",
-    ""
-  ],
-  [
-    "border-bottom-color",
-    ""
-  ],
-  [
-    "-moz-border-bottom-colors",
-    ""
-  ],
-  [
-    "border-bottom-left-radius",
-    ""
-  ],
-  [
-    "border-bottom-right-radius",
-    ""
-  ],
-  [
-    "border-bottom-style",
-    ""
-  ],
-  [
-    "border-bottom-width",
-    ""
-  ],
-  [
-    "border-collapse",
-    ""
-  ],
-  [
-    "border-color",
-    ""
-  ],
-  [
-    "border-image",
-    ""
-  ],
-  [
-    "border-image-outset",
-    ""
-  ],
-  [
-    "border-image-repeat",
-    ""
-  ],
-  [
-    "border-image-slice",
-    ""
-  ],
-  [
-    "border-image-source",
-    ""
-  ],
-  [
-    "border-image-width",
-    ""
-  ],
-  [
-    "border-inline-end",
-    ""
-  ],
-  [
-    "border-inline-end-color",
-    ""
-  ],
-  [
-    "border-inline-end-style",
-    ""
-  ],
-  [
-    "border-inline-end-width",
-    ""
-  ],
-  [
-    "border-inline-start",
-    ""
-  ],
-  [
-    "border-inline-start-color",
-    ""
-  ],
-  [
-    "border-inline-start-style",
-    ""
-  ],
-  [
-    "border-inline-start-width",
-    ""
-  ],
-  [
-    "border-left",
-    ""
-  ],
-  [
-    "border-left-color",
-    ""
-  ],
-  [
-    "-moz-border-left-colors",
-    ""
-  ],
-  [
-    "border-left-style",
-    ""
-  ],
-  [
-    "border-left-width",
-    ""
-  ],
-  [
-    "border-radius",
-    ""
-  ],
-  [
-    "border-right",
-    ""
-  ],
-  [
-    "border-right-color",
-    ""
-  ],
-  [
-    "-moz-border-right-colors",
-    ""
-  ],
-  [
-    "border-right-style",
-    ""
-  ],
-  [
-    "border-right-width",
-    ""
-  ],
-  [
-    "border-spacing",
-    ""
-  ],
-  [
-    "border-style",
-    ""
-  ],
-  [
-    "border-top",
-    ""
-  ],
-  [
-    "border-top-color",
-    ""
-  ],
-  [
-    "-moz-border-top-colors",
-    ""
-  ],
-  [
-    "border-top-left-radius",
-    ""
-  ],
-  [
-    "border-top-right-radius",
-    ""
-  ],
-  [
-    "border-top-style",
-    ""
-  ],
-  [
-    "border-top-width",
-    ""
-  ],
-  [
-    "border-width",
-    ""
-  ],
-  [
-    "bottom",
-    ""
-  ],
-  [
-    "-moz-box-align",
-    ""
-  ],
-  [
-    "box-decoration-break",
-    "layout.css.box-decoration-break.enabled"
-  ],
-  [
-    "-moz-box-direction",
-    ""
-  ],
-  [
-    "-moz-box-flex",
-    ""
-  ],
-  [
-    "-moz-box-ordinal-group",
-    ""
-  ],
-  [
-    "-moz-box-orient",
-    ""
-  ],
-  [
-    "-moz-box-pack",
-    ""
-  ],
-  [
-    "box-shadow",
-    ""
-  ],
-  [
-    "box-sizing",
-    ""
-  ],
-  [
-    "caption-side",
-    ""
-  ],
-  [
-    "clear",
-    ""
-  ],
-  [
-    "clip",
-    ""
-  ],
-  [
-    "clip-path",
-    ""
-  ],
-  [
-    "clip-rule",
-    ""
-  ],
-  [
-    "color",
-    ""
-  ],
-  [
-    "color-adjust",
-    "layout.css.color-adjust.enabled"
-  ],
-  [
-    "color-interpolation",
-    ""
-  ],
-  [
-    "color-interpolation-filters",
-    ""
-  ],
-  [
-    "column-count",
-    ""
-  ],
-  [
-    "column-fill",
-    ""
-  ],
-  [
-    "column-gap",
-    ""
-  ],
-  [
-    "column-rule",
-    ""
-  ],
-  [
-    "column-rule-color",
-    ""
-  ],
-  [
-    "column-rule-style",
-    ""
-  ],
-  [
-    "column-rule-width",
-    ""
-  ],
-  [
-    "column-width",
-    ""
-  ],
-  [
-    "columns",
-    ""
-  ],
-  [
-    "contain",
-    "layout.css.contain.enabled"
-  ],
-  [
-    "content",
-    ""
-  ],
-  [
-    "counter-increment",
-    ""
-  ],
-  [
-    "counter-reset",
-    ""
-  ],
-  [
-    "cursor",
-    ""
-  ],
-  [
-    "direction",
-    ""
-  ],
-  [
-    "display",
-    ""
-  ],
-  [
-    "dominant-baseline",
-    ""
-  ],
-  [
-    "empty-cells",
-    ""
-  ],
-  [
-    "fill",
-    ""
-  ],
-  [
-    "fill-opacity",
-    ""
-  ],
-  [
-    "fill-rule",
-    ""
-  ],
-  [
-    "filter",
-    ""
-  ],
-  [
-    "flex",
-    ""
-  ],
-  [
-    "flex-basis",
-    ""
-  ],
-  [
-    "flex-direction",
-    ""
-  ],
-  [
-    "flex-flow",
-    ""
-  ],
-  [
-    "flex-grow",
-    ""
-  ],
-  [
-    "flex-shrink",
-    ""
-  ],
-  [
-    "flex-wrap",
-    ""
-  ],
-  [
-    "float",
-    ""
-  ],
-  [
-    "-moz-float-edge",
-    ""
-  ],
-  [
-    "flood-color",
-    ""
-  ],
-  [
-    "flood-opacity",
-    ""
-  ],
-  [
-    "font",
-    ""
-  ],
-  [
-    "font-family",
-    ""
-  ],
-  [
-    "font-feature-settings",
-    ""
-  ],
-  [
-    "font-kerning",
-    ""
-  ],
-  [
-    "font-language-override",
-    ""
-  ],
-  [
-    "font-size",
-    ""
-  ],
-  [
-    "font-size-adjust",
-    ""
-  ],
-  [
-    "font-stretch",
-    ""
-  ],
-  [
-    "font-style",
-    ""
-  ],
-  [
-    "font-synthesis",
-    ""
-  ],
-  [
-    "font-variant",
-    ""
-  ],
-  [
-    "font-variant-alternates",
-    ""
-  ],
-  [
-    "font-variant-caps",
-    ""
-  ],
-  [
-    "font-variant-east-asian",
-    ""
-  ],
-  [
-    "font-variant-ligatures",
-    ""
-  ],
-  [
-    "font-variant-numeric",
-    ""
-  ],
-  [
-    "font-variant-position",
-    ""
-  ],
-  [
-    "font-weight",
-    ""
-  ],
-  [
-    "-moz-force-broken-image-icon",
-    ""
-  ],
-  [
-    "grid",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-area",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-auto-columns",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-auto-flow",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-auto-rows",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-column",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-column-end",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-column-gap",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-column-start",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-gap",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-row",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-row-end",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-row-gap",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-row-start",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-template",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-template-areas",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-template-columns",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "grid-template-rows",
-    "layout.css.grid.enabled"
-  ],
-  [
-    "height",
-    ""
-  ],
-  [
-    "hyphens",
-    ""
-  ],
-  [
-    "initial-letter",
-    "layout.css.initial-letter.enabled"
-  ],
-  [
-    "image-orientation",
-    "layout.css.image-orientation.enabled"
-  ],
-  [
-    "-moz-image-region",
-    ""
-  ],
-  [
-    "image-rendering",
-    ""
-  ],
-  [
-    "ime-mode",
-    ""
-  ],
-  [
-    "inline-size",
-    ""
-  ],
-  [
-    "isolation",
-    "layout.css.isolation.enabled"
-  ],
-  [
-    "justify-content",
-    ""
-  ],
-  [
-    "justify-items",
-    ""
-  ],
-  [
-    "justify-self",
-    ""
-  ],
-  [
-    "left",
-    ""
-  ],
-  [
-    "letter-spacing",
-    ""
-  ],
-  [
-    "lighting-color",
-    ""
-  ],
-  [
-    "line-height",
-    ""
-  ],
-  [
-    "list-style",
-    ""
-  ],
-  [
-    "list-style-image",
-    ""
-  ],
-  [
-    "list-style-position",
-    ""
-  ],
-  [
-    "list-style-type",
-    ""
-  ],
-  [
-    "margin",
-    ""
-  ],
-  [
-    "margin-block-end",
-    ""
-  ],
-  [
-    "margin-block-start",
-    ""
-  ],
-  [
-    "margin-bottom",
-    ""
-  ],
-  [
-    "margin-inline-end",
-    ""
-  ],
-  [
-    "margin-inline-start",
-    ""
-  ],
-  [
-    "margin-left",
-    ""
-  ],
-  [
-    "margin-right",
-    ""
-  ],
-  [
-    "margin-top",
-    ""
-  ],
-  [
-    "marker",
-    ""
-  ],
-  [
-    "marker-end",
-    ""
-  ],
-  [
-    "marker-mid",
-    ""
-  ],
-  [
-    "marker-offset",
-    ""
-  ],
-  [
-    "marker-start",
-    ""
-  ],
-  [
-    "mask",
-    ""
-  ],
-  [
-    "mask-clip",
-    ""
-  ],
-  [
-    "mask-composite",
-    ""
-  ],
-  [
-    "mask-image",
-    ""
-  ],
-  [
-    "mask-mode",
-    ""
-  ],
-  [
-    "mask-origin",
-    ""
-  ],
-  [
-    "mask-position",
-    ""
-  ],
-  [
-    "mask-position-x",
-    ""
-  ],
-  [
-    "mask-position-y",
-    ""
-  ],
-  [
-    "mask-repeat",
-    ""
-  ],
-  [
-    "mask-size",
-    ""
-  ],
-  [
-    "mask-type",
-    ""
-  ],
-  [
-    "max-block-size",
-    ""
-  ],
-  [
-    "max-height",
-    ""
-  ],
-  [
-    "max-inline-size",
-    ""
-  ],
-  [
-    "max-width",
-    ""
-  ],
-  [
-    "min-block-size",
-    ""
-  ],
-  [
-    "min-height",
-    ""
-  ],
-  [
-    "min-inline-size",
-    ""
-  ],
-  [
-    "min-width",
-    ""
-  ],
-  [
-    "mix-blend-mode",
-    "layout.css.mix-blend-mode.enabled"
-  ],
-  [
-    "object-fit",
-    "layout.css.object-fit-and-position.enabled"
-  ],
-  [
-    "object-position",
-    "layout.css.object-fit-and-position.enabled"
-  ],
-  [
-    "offset-block-end",
-    ""
-  ],
-  [
-    "offset-block-start",
-    ""
-  ],
-  [
-    "offset-inline-end",
-    ""
-  ],
-  [
-    "offset-inline-start",
-    ""
-  ],
-  [
-    "opacity",
-    ""
-  ],
-  [
-    "order",
-    ""
-  ],
-  [
-    "-moz-orient",
-    ""
-  ],
-  [
-    "-moz-osx-font-smoothing",
-    "layout.css.osx-font-smoothing.enabled"
-  ],
-  [
-    "outline",
-    ""
-  ],
-  [
-    "outline-color",
-    ""
-  ],
-  [
-    "outline-offset",
-    ""
-  ],
-  [
-    "-moz-outline-radius",
-    ""
-  ],
-  [
-    "-moz-outline-radius-bottomleft",
-    ""
-  ],
-  [
-    "-moz-outline-radius-bottomright",
-    ""
-  ],
-  [
-    "-moz-outline-radius-topleft",
-    ""
-  ],
-  [
-    "-moz-outline-radius-topright",
-    ""
-  ],
-  [
-    "outline-style",
-    ""
-  ],
-  [
-    "outline-width",
-    ""
-  ],
-  [
-    "overflow",
-    ""
-  ],
-  [
-    "overflow-clip-box",
-    "layout.css.overflow-clip-box.enabled"
-  ],
-  [
-    "overflow-x",
-    ""
-  ],
-  [
-    "overflow-y",
-    ""
-  ],
-  [
-    "padding",
-    ""
-  ],
-  [
-    "padding-block-end",
-    ""
-  ],
-  [
-    "padding-block-start",
-    ""
-  ],
-  [
-    "padding-bottom",
-    ""
-  ],
-  [
-    "padding-inline-end",
-    ""
-  ],
-  [
-    "padding-inline-start",
-    ""
-  ],
-  [
-    "padding-left",
-    ""
-  ],
-  [
-    "padding-right",
-    ""
-  ],
-  [
-    "padding-top",
-    ""
-  ],
-  [
-    "page-break-after",
-    ""
-  ],
-  [
-    "page-break-before",
-    ""
-  ],
-  [
-    "page-break-inside",
-    ""
-  ],
-  [
-    "paint-order",
-    "svg.paint-order.enabled"
-  ],
-  [
-    "perspective",
-    ""
-  ],
-  [
-    "perspective-origin",
-    ""
-  ],
-  [
-    "pointer-events",
-    ""
-  ],
-  [
-    "position",
-    ""
-  ],
-  [
-    "quotes",
-    ""
-  ],
-  [
-    "resize",
-    ""
-  ],
-  [
-    "right",
-    ""
-  ],
-  [
-    "ruby-align",
-    ""
-  ],
-  [
-    "ruby-position",
-    ""
-  ],
-  [
-    "scroll-behavior",
-    "layout.css.scroll-behavior.property-enabled"
-  ],
-  [
-    "scroll-snap-coordinate",
-    "layout.css.scroll-snap.enabled"
-  ],
-  [
-    "scroll-snap-destination",
-    "layout.css.scroll-snap.enabled"
-  ],
-  [
-    "scroll-snap-points-x",
-    "layout.css.scroll-snap.enabled"
-  ],
-  [
-    "scroll-snap-points-y",
-    "layout.css.scroll-snap.enabled"
-  ],
-  [
-    "scroll-snap-type",
-    "layout.css.scroll-snap.enabled"
-  ],
-  [
-    "scroll-snap-type-x",
-    "layout.css.scroll-snap.enabled"
-  ],
-  [
-    "scroll-snap-type-y",
-    "layout.css.scroll-snap.enabled"
-  ],
-  [
-    "shape-outside",
-    "layout.css.shape-outside.enabled"
-  ],
-  [
-    "shape-rendering",
-    ""
-  ],
-  [
-    "-moz-stack-sizing",
-    ""
-  ],
-  [
-    "stop-color",
-    ""
-  ],
-  [
-    "stop-opacity",
-    ""
-  ],
-  [
-    "stroke",
-    ""
-  ],
-  [
-    "stroke-dasharray",
-    ""
-  ],
-  [
-    "stroke-dashoffset",
-    ""
-  ],
-  [
-    "stroke-linecap",
-    ""
-  ],
-  [
-    "stroke-linejoin",
-    ""
-  ],
-  [
-    "stroke-miterlimit",
-    ""
-  ],
-  [
-    "stroke-opacity",
-    ""
-  ],
-  [
-    "stroke-width",
-    ""
-  ],
-  [
-    "-moz-tab-size",
-    ""
-  ],
-  [
-    "table-layout",
-    ""
-  ],
-  [
-    "text-align",
-    ""
-  ],
-  [
-    "text-align-last",
-    ""
-  ],
-  [
-    "text-anchor",
-    ""
-  ],
-  [
-    "text-combine-upright",
-    "layout.css.text-combine-upright.enabled"
-  ],
-  [
-    "text-decoration",
-    ""
-  ],
-  [
-    "text-decoration-color",
-    ""
-  ],
-  [
-    "text-decoration-line",
-    ""
-  ],
-  [
-    "text-decoration-style",
-    ""
-  ],
-  [
-    "text-emphasis",
-    ""
-  ],
-  [
-    "text-emphasis-color",
-    ""
-  ],
-  [
-    "text-emphasis-position",
-    ""
-  ],
-  [
-    "text-emphasis-style",
-    ""
-  ],
-  [
-    "-webkit-text-fill-color",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "text-indent",
-    ""
-  ],
-  [
-    "text-orientation",
-    ""
-  ],
-  [
-    "text-overflow",
-    ""
-  ],
-  [
-    "text-rendering",
-    ""
-  ],
-  [
-    "text-shadow",
-    ""
-  ],
-  [
-    "-moz-text-size-adjust",
-    ""
-  ],
-  [
-    "-webkit-text-stroke",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-text-stroke-color",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-text-stroke-width",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "text-transform",
-    ""
-  ],
-  [
-    "top",
-    ""
-  ],
-  [
-    "touch-action",
-    "layout.css.touch_action.enabled"
-  ],
-  [
-    "transform",
-    ""
-  ],
-  [
-    "-moz-transform",
-    "layout.css.prefixes.transforms"
-  ],
-  [
-    "transform-box",
-    "svg.transform-box.enabled"
-  ],
-  [
-    "transform-origin",
-    ""
-  ],
-  [
-    "transform-style",
-    ""
-  ],
-  [
-    "transition",
-    ""
-  ],
-  [
-    "transition-delay",
-    ""
-  ],
-  [
-    "transition-duration",
-    ""
-  ],
-  [
-    "transition-property",
-    ""
-  ],
-  [
-    "transition-timing-function",
-    ""
-  ],
-  [
-    "unicode-bidi",
-    ""
-  ],
-  [
-    "-moz-user-focus",
-    ""
-  ],
-  [
-    "-moz-user-input",
-    ""
-  ],
-  [
-    "-moz-user-modify",
-    ""
-  ],
-  [
-    "-moz-user-select",
-    ""
-  ],
-  [
-    "vector-effect",
-    ""
-  ],
-  [
-    "vertical-align",
-    ""
-  ],
-  [
-    "visibility",
-    ""
-  ],
-  [
-    "white-space",
-    ""
-  ],
-  [
-    "width",
-    ""
-  ],
-  [
-    "will-change",
-    ""
-  ],
-  [
-    "-moz-window-dragging",
-    ""
-  ],
-  [
-    "word-break",
-    ""
-  ],
-  [
-    "word-spacing",
-    ""
-  ],
-  [
-    "overflow-wrap",
-    ""
-  ],
-  [
-    "writing-mode",
-    ""
-  ],
-  [
-    "z-index",
-    ""
-  ],
-  [
-    "word-wrap",
-    ""
-  ],
-  [
-    "-moz-transform-origin",
-    "layout.css.prefixes.transforms"
-  ],
-  [
-    "-moz-perspective-origin",
-    "layout.css.prefixes.transforms"
-  ],
-  [
-    "-moz-perspective",
-    "layout.css.prefixes.transforms"
-  ],
-  [
-    "-moz-transform-style",
-    "layout.css.prefixes.transforms"
-  ],
-  [
-    "-moz-backface-visibility",
-    "layout.css.prefixes.transforms"
-  ],
-  [
-    "-moz-border-image",
-    "layout.css.prefixes.border-image"
-  ],
-  [
-    "-moz-transition",
-    "layout.css.prefixes.transitions"
-  ],
-  [
-    "-moz-transition-delay",
-    "layout.css.prefixes.transitions"
-  ],
-  [
-    "-moz-transition-duration",
-    "layout.css.prefixes.transitions"
-  ],
-  [
-    "-moz-transition-property",
-    "layout.css.prefixes.transitions"
-  ],
-  [
-    "-moz-transition-timing-function",
-    "layout.css.prefixes.transitions"
-  ],
-  [
-    "-moz-animation",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-delay",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-direction",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-duration",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-fill-mode",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-iteration-count",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-name",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-play-state",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-animation-timing-function",
-    "layout.css.prefixes.animations"
-  ],
-  [
-    "-moz-box-sizing",
-    "layout.css.prefixes.box-sizing"
-  ],
-  [
-    "-moz-font-feature-settings",
-    "layout.css.prefixes.font-features"
-  ],
-  [
-    "-moz-font-language-override",
-    "layout.css.prefixes.font-features"
-  ],
-  [
-    "-moz-padding-end",
-    ""
-  ],
-  [
-    "-moz-padding-start",
-    ""
-  ],
-  [
-    "-moz-margin-end",
-    ""
-  ],
-  [
-    "-moz-margin-start",
-    ""
-  ],
-  [
-    "-moz-border-end",
-    ""
-  ],
-  [
-    "-moz-border-end-color",
-    ""
-  ],
-  [
-    "-moz-border-end-style",
-    ""
-  ],
-  [
-    "-moz-border-end-width",
-    ""
-  ],
-  [
-    "-moz-border-start",
-    ""
-  ],
-  [
-    "-moz-border-start-color",
-    ""
-  ],
-  [
-    "-moz-border-start-style",
-    ""
-  ],
-  [
-    "-moz-border-start-width",
-    ""
-  ],
-  [
-    "-moz-hyphens",
-    ""
-  ],
-  [
-    "-moz-text-align-last",
-    ""
-  ],
-  [
-    "-moz-column-count",
-    ""
-  ],
-  [
-    "-moz-column-fill",
-    ""
-  ],
-  [
-    "-moz-column-gap",
-    ""
-  ],
-  [
-    "-moz-column-rule",
-    ""
-  ],
-  [
-    "-moz-column-rule-color",
-    ""
-  ],
-  [
-    "-moz-column-rule-style",
-    ""
-  ],
-  [
-    "-moz-column-rule-width",
-    ""
-  ],
-  [
-    "-moz-column-width",
-    ""
-  ],
-  [
-    "-moz-columns",
-    ""
-  ],
-  [
-    "-webkit-animation",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-delay",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-direction",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-duration",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-fill-mode",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-iteration-count",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-name",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-play-state",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-animation-timing-function",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-filter",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-text-size-adjust",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transform",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transform-origin",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transform-style",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-backface-visibility",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-perspective",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-perspective-origin",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transition",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transition-delay",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transition-duration",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transition-property",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-transition-timing-function",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-border-radius",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-border-top-left-radius",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-border-top-right-radius",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-border-bottom-left-radius",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-border-bottom-right-radius",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-background-clip",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-background-origin",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-background-size",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-border-image",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-shadow",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-sizing",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-flex",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-ordinal-group",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-orient",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-direction",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-align",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-box-pack",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-flex-direction",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-flex-wrap",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-flex-flow",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-order",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-flex",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-flex-grow",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-flex-shrink",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-flex-basis",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-justify-content",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-align-items",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-align-self",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-align-content",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-user-select",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-clip",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-composite",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-image",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-origin",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-position",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-position-x",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-position-y",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-repeat",
-    "layout.css.prefixes.webkit"
-  ],
-  [
-    "-webkit-mask-size",
-    "layout.css.prefixes.webkit"
-  ]
-];

--- a/devtools/shared/css/generated/properties-db.js.in
+++ b/devtools/shared/css/generated/properties-db.js.in
@@ -13,14 +13,8 @@
  * A list of CSS Properties and their various characteristics.
  */
 exports.CSS_PROPERTIES = ${cssProperties};
 
 /**
  * A list of the pseudo elements.
  */
 exports.PSEUDO_ELEMENTS = ${pseudoElements};
-
-/**
- * A list of the preferences keys for whether a CSS property is enabled or not. This is
- * exposed for testing purposes.
- */
-exports.PREFERENCES = ${preferences};

--- a/devtools/shared/css/properties-db.js
+++ b/devtools/shared/css/properties-db.js
@@ -5,17 +5,30 @@
 "use strict";
 
 /**
  * This file contains static lists of CSS properties and values. Some of the small lists
  * are edited manually, while the larger ones are generated by a script. The comments
  * above each list indicates how it should be updated.
  */
 
-const { CSS_PROPERTIES, PSEUDO_ELEMENTS } = require("devtools/shared/css/generated/properties-db");
+let db;
+
+// Allow this require to fail in case it's been deleted in the process of running
+// `mach devtools-css-db` to regenerate the database.
+try {
+  db = require("devtools/shared/css/generated/properties-db");
+} catch (error) {
+  console.error(`If this error is being displayed and "mach devtools-css-db" is not ` +
+                `being run, then it needs to be fixed.`, error);
+  db = {
+    CSS_PROPERTIES: {},
+    PSEUDO_ELEMENTS: []
+  };
+}
 
 /**
  * All CSS types that properties can support. This list can be manually edited.
  */
 exports.CSS_TYPES = {
   "ANGLE": 1,
   "COLOR": 2,
   "FREQUENCY": 3,
@@ -52,26 +65,26 @@ exports.ANGLE_TAKING_FUNCTIONS = ["linea
                                   "rotateY", "rotateZ", "rotate3d", "skew", "skewX",
                                   "skewY", "hue-rotate"];
 
 /**
  * The list of all CSS Pseudo Elements.
  *
  * This list can be updated with `mach devtools-css-db`.
  */
-exports.PSEUDO_ELEMENTS = PSEUDO_ELEMENTS;
+exports.PSEUDO_ELEMENTS = db.PSEUDO_ELEMENTS;
 
 /**
  * A list of CSS Properties and their various characteristics. This is used on the
  * client-side when the CssPropertiesActor is not found, or when the client and server
  * are the same version. A single property takes the form:
  *
  *  "animation": {
  *    "isInherited": false,
  *    "supports": [ 7, 9, 10 ]
  *  }
  */
-exports.CSS_PROPERTIES = CSS_PROPERTIES;
+exports.CSS_PROPERTIES = db.CSS_PROPERTIES;
 
 exports.CSS_PROPERTIES_DB = {
-  properties: CSS_PROPERTIES,
-  pseudoElements: PSEUDO_ELEMENTS
+  properties: db.CSS_PROPERTIES,
+  pseudoElements: db.PSEUDO_ELEMENTS
 };

--- a/devtools/shared/tests/unit/test_css-properties-db.js
+++ b/devtools/shared/tests/unit/test_css-properties-db.js
@@ -1,45 +1,49 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /**
  * Test that the devtool's client-side CSS properties database is in sync with the values
- * on the platform. If they are not, then `mach devtools-css-db` needs to be run to
- * make everything up to date. Nightly, aurora, beta, and release may have different
- * preferences for what CSS values are enabled. The static CSS properties database can
- * be slightly different from the target platform as long as there is a preference that
- * exists that turns off that CSS property.
+ * on the platform (in Nightly only). If they are not, then `mach devtools-css-db` needs
+ * to be run to make everything up to date. Nightly, aurora, beta, and release may have
+ * different CSS properties and values. These are based on preferences and compiler flags.
+ *
+ * This test broke uplifts as the database needed to be regenerated every uplift. The
+ * combination of compiler flags and preferences means that it's too difficult to
+ * statically determine which properties are enabled between Firefox releases.
+ *
+ * Because of these difficulties, the database only needs to be up to date with Nightly.
+ * It is a fallback that is only used if the remote debugging protocol doesn't support
+ * providing a CSS database, so it's ok if the provided properties don't exactly match
+ * the inspected target in this particular case.
  */
 
 "use strict";
 
 const DOMUtils = Components.classes["@mozilla.org/inspector/dom-utils;1"]
                            .getService(Components.interfaces.inIDOMUtils);
 
-const {PSEUDO_ELEMENTS, CSS_PROPERTIES, PREFERENCES} = require("devtools/shared/css/generated/properties-db");
+const {PSEUDO_ELEMENTS, CSS_PROPERTIES} = require("devtools/shared/css/generated/properties-db");
 const {generateCssProperties} = require("devtools/server/actors/css-properties");
-const { Preferences } = require("resource://gre/modules/Preferences.jsm");
 
 function run_test() {
   const propertiesErrorMessage = "If this assertion fails, then the client side CSS " +
                                  "properties list in devtools is out of sync with the " +
                                  "CSS properties on the platform. To fix this " +
                                  "assertion run `mach devtools-css-db` to re-generate " +
                                  "the client side properties.";
 
   // Check that the platform and client match for pseudo elements.
   deepEqual(PSEUDO_ELEMENTS, DOMUtils.getCSSPseudoElementNames(), `The pseudo elements ` +
             `match on the client and platform. ${propertiesErrorMessage}`);
 
   /**
    * Check that the platform and client match for the details on their CSS properties.
-   * Enumerate each property to aid in debugging. Sometimes these properties don't
-   * completely agree due to differences in preferences. Check the currently set
-   * preference for that property to see if it's enabled.
+   * Enumerate each property to aid in debugging.
    */
   const platformProperties = generateCssProperties();
 
   for (let propertyName in CSS_PROPERTIES) {
     const platformProperty = platformProperties[propertyName];
     const clientProperty = CSS_PROPERTIES[propertyName];
     const deepEqual = isJsonDeepEqual(platformProperty, clientProperty);
 
@@ -66,24 +70,18 @@ function run_test() {
     // Filter out OS-specific properties.
     .filter(name => name && name.indexOf("-moz-osx-") === -1);
 
   if (mismatches.length === 0) {
     ok(true, "No client and platform CSS property database mismatches were found.");
   }
 
   mismatches.forEach(propertyName => {
-    if (getPreference(propertyName) === false) {
-      ok(true, `The static database and platform do not agree on the property ` +
-               `"${propertyName}" This is ok because it is currently disabled through ` +
-               `a preference.`);
-    } else {
-      ok(false, `The static database and platform do not agree on the property ` +
-                `"${propertyName}" ${propertiesErrorMessage}`);
-    }
+    ok(false, `The static database and platform do not agree on the property ` +
+              `"${propertyName}" ${propertiesErrorMessage}`);
   });
 }
 
 /**
  * Check JSON-serializable objects for deep equality.
  */
 function isJsonDeepEqual(a, b) {
   // Handle primitives.
@@ -115,34 +113,16 @@ function isJsonDeepEqual(a, b) {
     return Object.keys(a).length === Object.keys(b).length;
   }
 
   // Not something handled by these cases, therefore not equal.
   return false;
 }
 
 /**
- * Get the preference value of whether this property is enabled. Returns an empty string
- * if no preference exists.
- *
- * @param {String} propertyName
- * @return {Boolean|undefined}
- */
-function getPreference(propertyName) {
-  const preference = PREFERENCES.find(([prefPropertyName, preferenceKey]) => {
-    return prefPropertyName === propertyName && !!preferenceKey;
-  });
-
-  if (preference) {
-    return Preferences.get(preference[1]);
-  }
-  return undefined;
-}
-
-/**
  * Take the keys of two objects, and return the ones that don't match.
  *
  * @param {Object} a
  * @param {Object} b
  * @return {Array} keys
  */
 function getKeyMismatches(a, b) {
   const aNames = Object.keys(a);

--- a/dom/browser-element/BrowserElementChild.js
+++ b/dom/browser-element/BrowserElementChild.js
@@ -54,37 +54,24 @@ if (!BrowserElementIsReady) {
         Services.scriptloader.loadSubScript("chrome://global/content/BrowserElementCopyPaste.js");
       }
     } else {
       // rocketbar in system app and other in-process case (ex. B2G desktop client)
       Services.scriptloader.loadSubScript("chrome://global/content/BrowserElementCopyPaste.js");
     }
 
     Services.scriptloader.loadSubScript("chrome://global/content/BrowserElementChildPreload.js");
-  } else {
-    if (Services.prefs.getIntPref("dom.w3c_touch_events.enabled") != 0) {
-      if (docShell.asyncPanZoomEnabled === false) {
-        ContentPanningAPZDisabled.init();
-      }
-      ContentPanning.init();
-    }
   }
 
   function onDestroy() {
     removeMessageListener("browser-element-api:destroy", onDestroy);
 
     if (api) {
       api.destroy();
     }
-    if ("ContentPanning" in this) {
-      ContentPanning.destroy();
-    }
-    if ("ContentPanningAPZDisabled" in this) {
-      ContentPanningAPZDisabled.destroy();
-    }
     if ("CopyPasteAssistent" in this) {
       CopyPasteAssistent.destroy();
     }
 
     BrowserElementIsReady = false;
   }
   addMessageListener("browser-element-api:destroy", onDestroy);
 

--- a/dom/media/MediaDecoderStateMachine.cpp
+++ b/dom/media/MediaDecoderStateMachine.cpp
@@ -67,28 +67,30 @@ using namespace mozilla::media;
 #undef DECODER_LOG
 #undef VERBOSE_LOG
 #undef SAMPLE_LOG
 #undef DECODER_WARN
 #undef DUMP_LOG
 #undef SFMT
 #undef SLOG
 #undef SWARN
+#undef SDUMP
 
 #define FMT(x, ...) "Decoder=%p " x, mDecoderID, ##__VA_ARGS__
-#define DECODER_LOG(...) MOZ_LOG(gMediaDecoderLog, LogLevel::Debug,   (FMT(__VA_ARGS__)))
-#define VERBOSE_LOG(...) MOZ_LOG(gMediaDecoderLog, LogLevel::Verbose, (FMT(__VA_ARGS__)))
-#define SAMPLE_LOG(...)  MOZ_LOG(gMediaSampleLog,  LogLevel::Debug,   (FMT(__VA_ARGS__)))
-#define DECODER_WARN(...) NS_WARNING(nsPrintfCString(FMT(__VA_ARGS__)).get())
-#define DUMP_LOG(...) NS_DebugBreak(NS_DEBUG_WARNING, nsPrintfCString(FMT(__VA_ARGS__)).get(), nullptr, nullptr, -1)
+#define DECODER_LOG(x, ...) MOZ_LOG(gMediaDecoderLog, LogLevel::Debug,   (FMT(x, ##__VA_ARGS__)))
+#define VERBOSE_LOG(x, ...) MOZ_LOG(gMediaDecoderLog, LogLevel::Verbose, (FMT(x, ##__VA_ARGS__)))
+#define SAMPLE_LOG(x, ...)  MOZ_LOG(gMediaSampleLog,  LogLevel::Debug,   (FMT(x, ##__VA_ARGS__)))
+#define DECODER_WARN(x, ...) NS_WARNING(nsPrintfCString(FMT(x, ##__VA_ARGS__)).get())
+#define DUMP_LOG(x, ...) NS_DebugBreak(NS_DEBUG_WARNING, nsPrintfCString(FMT(x, ##__VA_ARGS__)).get(), nullptr, nullptr, -1)
 
 // Used by StateObject and its sub-classes
 #define SFMT(x, ...) "Decoder=%p state=%s " x, mMaster->mDecoderID, ToStateStr(GetState()), ##__VA_ARGS__
-#define SLOG(...) MOZ_LOG(gMediaDecoderLog, LogLevel::Debug, (SFMT(__VA_ARGS__)))
-#define SWARN(...) NS_WARNING(nsPrintfCString(SFMT(__VA_ARGS__)).get())
+#define SLOG(x, ...) MOZ_LOG(gMediaDecoderLog, LogLevel::Debug, (SFMT(x, ##__VA_ARGS__)))
+#define SWARN(x, ...) NS_WARNING(nsPrintfCString(SFMT(x, ##__VA_ARGS__)).get())
+#define SDUMP(x, ...) NS_DebugBreak(NS_DEBUG_WARNING, nsPrintfCString(SFMT(x, ##__VA_ARGS__)).get(), nullptr, nullptr, -1)
 
 // Certain constants get stored as member variables and then adjusted by various
 // scale factors on a per-decoder basis. We want to make sure to avoid using these
 // constants directly, so we put them in a namespace.
 namespace detail {
 
 // If audio queue has less than this many usecs of decoded audio, we won't risk
 // trying to decode the video, we'll skip decoding video up to the next
@@ -216,21 +218,23 @@ public:
 
   virtual bool HandleVideoDecoded(MediaData* aVideo, TimeStamp aDecodeStart)
   {
     return false;
   }
 
   virtual bool HandleEndOfStream() { return false; }
 
-  virtual RefPtr<MediaDecoder::SeekPromise> HandleSeek(SeekTarget aTarget)
-  {
-    MOZ_ASSERT(false, "Can't seek in this state");
-    return nullptr;
-  }
+  virtual bool HandleWaitingForData() { return false; }
+
+  virtual RefPtr<MediaDecoder::SeekPromise> HandleSeek(SeekTarget aTarget) = 0;
+
+  virtual bool HandleAudioCaptured() { return false; }
+
+  virtual void DumpDebugInfo() {}
 
 protected:
   using Master = MediaDecoderStateMachine;
   explicit StateObject(Master* aPtr) : mMaster(aPtr) {}
   TaskQueue* OwnerThread() const { return mMaster->mTaskQueue; }
   MediaResource* Resource() const { return mMaster->mResource; }
   MediaDecoderReaderWrapper* Reader() const { return mMaster->mReader; }
   const MediaInfo& Info() const { return mMaster->Info(); }
@@ -281,16 +285,22 @@ public:
   }
 
   bool HandleDormant(bool aDormant) override
   {
     mPendingDormant = aDormant;
     return true;
   }
 
+  RefPtr<MediaDecoder::SeekPromise> HandleSeek(SeekTarget aTarget) override
+  {
+    MOZ_DIAGNOSTIC_ASSERT(false, "Can't seek while decoding metadata.");
+    return MediaDecoder::SeekPromise::CreateAndReject(true, __func__);
+  }
+
 private:
   void OnMetadataRead(MetadataHolder* aMetadata)
   {
     mMetadataRequest.Complete();
 
     // Set mode to PLAYBACK after reading metadata.
     Resource()->SetReadMode(MediaCacheStream::MODE_PLAYBACK);
 
@@ -556,45 +566,45 @@ public:
 
     if (mMaster->CheckIfDecodeComplete()) {
       SetState(DECODER_STATE_COMPLETED);
       return;
     }
 
     mDecodeStartTime = TimeStamp::Now();
 
-    mMaster->mIsPrerolling = true;
-    mMaster->MaybeStopPrerolling();
+    MaybeStopPrerolling();
 
     // Ensure that we've got tasks enqueued to decode data if we need to.
     mMaster->DispatchDecodeTasksIfNeeded();
 
     mMaster->ScheduleStateMachine();
   }
 
   void Exit() override
   {
     if (!mDecodeStartTime.IsNull()) {
       TimeDuration decodeDuration = TimeStamp::Now() - mDecodeStartTime;
       SLOG("Exiting DECODING, decoded for %.3lfs", decodeDuration.ToSeconds());
     }
-    mMaster->mIsPrerolling = false;
   }
 
   void Step() override
   {
     if (mMaster->mPlayState != MediaDecoder::PLAY_STATE_PLAYING &&
         mMaster->IsPlaying()) {
       // We're playing, but the element/decoder is in paused state. Stop
       // playing!
       mMaster->StopPlayback();
     }
 
     // Start playback if necessary so that the clock can be properly queried.
-    mMaster->MaybeStartPlayback();
+    if (!mIsPrerolling) {
+      mMaster->MaybeStartPlayback();
+    }
 
     mMaster->UpdatePlaybackPositionPeriodically();
 
     MOZ_ASSERT(!mMaster->IsPlaying() ||
                mMaster->IsStateMachineScheduled(),
                "Must have timer scheduled");
 
     mMaster->MaybeStartBuffering();
@@ -603,39 +613,68 @@ public:
   State GetState() const override
   {
     return DECODER_STATE_DECODING;
   }
 
   bool HandleAudioDecoded(MediaData* aAudio) override
   {
     mMaster->Push(aAudio, MediaData::AUDIO_DATA);
-    mMaster->MaybeStopPrerolling();
+    MaybeStopPrerolling();
     return true;
   }
 
   bool HandleVideoDecoded(MediaData* aVideo, TimeStamp aDecodeStart) override
   {
     mMaster->Push(aVideo, MediaData::VIDEO_DATA);
-    mMaster->MaybeStopPrerolling();
+    MaybeStopPrerolling();
     CheckSlowDecoding(aDecodeStart);
     return true;
   }
 
   RefPtr<MediaDecoder::SeekPromise> HandleSeek(SeekTarget aTarget) override
   {
     mMaster->mQueuedSeek.RejectIfExists(__func__);
     SLOG("Changed state to SEEKING (to %lld)", aTarget.GetTime().ToMicroseconds());
     SeekJob seekJob;
     seekJob.mTarget = aTarget;
     RefPtr<MediaDecoder::SeekPromise> p = seekJob.mPromise.Ensure(__func__);
     mMaster->InitiateSeek(Move(seekJob));
     return p.forget();
   }
 
+  bool HandleEndOfStream() override
+  {
+    if (mMaster->CheckIfDecodeComplete()) {
+      SetState(DECODER_STATE_COMPLETED);
+    } else {
+      MaybeStopPrerolling();
+    }
+    return true;
+  }
+
+  bool HandleWaitingForData() override
+  {
+    MaybeStopPrerolling();
+    return true;
+  }
+
+  bool HandleAudioCaptured() override
+  {
+    MaybeStopPrerolling();
+    // MediaSink is changed. Schedule Step() to check if we can start playback.
+    mMaster->ScheduleStateMachine();
+    return true;
+  }
+
+  void DumpDebugInfo() override
+  {
+    SDUMP("mIsPrerolling=%d", mIsPrerolling);
+  }
+
 private:
   void CheckSlowDecoding(TimeStamp aDecodeStart)
   {
     // For non async readers, if the requested video sample was slow to
     // arrive, increase the amount of audio we buffer to ensure that we
     // don't run out of audio. This is unnecessary for async readers,
     // since they decode audio and video on different threads so they
     // are unlikely to run out of decoded audio.
@@ -658,26 +697,52 @@ private:
       SLOG("Slow video decode, set "
            "mLowAudioThresholdUsecs=%lld "
            "mAmpleAudioThresholdUsecs=%lld",
            mMaster->mLowAudioThresholdUsecs,
            mMaster->mAmpleAudioThresholdUsecs);
     }
   }
 
-  bool HandleEndOfStream() override
+  bool DonePrerollingAudio()
+  {
+    return !mMaster->IsAudioDecoding() ||
+           mMaster->GetDecodedAudioDuration() >=
+             mMaster->AudioPrerollUsecs() * mMaster->mPlaybackRate;
+  }
+
+  bool DonePrerollingVideo()
   {
-    if (mMaster->CheckIfDecodeComplete()) {
-      SetState(DECODER_STATE_COMPLETED);
+    return !mMaster->IsVideoDecoding() ||
+           static_cast<uint32_t>(mMaster->VideoQueue().GetSize()) >=
+             mMaster->VideoPrerollFrames() * mMaster->mPlaybackRate + 1;
+  }
+
+  void MaybeStopPrerolling()
+  {
+    if (mIsPrerolling &&
+        (DonePrerollingAudio() || Reader()->IsWaitingAudioData()) &&
+        (DonePrerollingVideo() || Reader()->IsWaitingVideoData())) {
+      mIsPrerolling = false;
+      // Check if we can start playback.
+      mMaster->ScheduleStateMachine();
     }
-    return true;
   }
 
   // Time at which we started decoding.
   TimeStamp mDecodeStartTime;
+
+  // When we start decoding (either for the first time, or after a pause)
+  // we may be low on decoded data. We don't want our "low data" logic to
+  // kick in and decide that we're low on decoded data because the download
+  // can't keep up with the decode, and cause us to pause playback. So we
+  // have a "preroll" stage, where we ignore the results of our "low data"
+  // logic during the first few frames of our decode. This occurs during
+  // playback.
+  bool mIsPrerolling = true;
 };
 
 class MediaDecoderStateMachine::SeekingState
   : public MediaDecoderStateMachine::StateObject
 {
 public:
   explicit SeekingState(Master* aPtr, SeekJob aSeekJob)
     : StateObject(aPtr), mSeekJob(Move(aSeekJob)) {}
@@ -1104,16 +1169,23 @@ public:
     SLOG("Changed state to SEEKING (to %lld)", aTarget.GetTime().ToMicroseconds());
     SeekJob seekJob;
     seekJob.mTarget = aTarget;
     RefPtr<MediaDecoder::SeekPromise> p = seekJob.mPromise.Ensure(__func__);
     mMaster->InitiateSeek(Move(seekJob));
     return p.forget();
   }
 
+  bool HandleAudioCaptured() override
+  {
+    // MediaSink is changed. Schedule Step() to check if we can start playback.
+    mMaster->ScheduleStateMachine();
+    return true;
+  }
+
 private:
   bool mSentPlaybackEndedEvent = false;
 };
 
 class MediaDecoderStateMachine::ShutdownState
   : public MediaDecoderStateMachine::StateObject
 {
 public:
@@ -1133,16 +1205,22 @@ public:
   {
     return DECODER_STATE_SHUTDOWN;
   }
 
   bool HandleDormant(bool aDormant) override
   {
     return true;
   }
+
+  RefPtr<MediaDecoder::SeekPromise> HandleSeek(SeekTarget aTarget) override
+  {
+    MOZ_DIAGNOSTIC_ASSERT(false, "Can't seek in shutdown state.");
+    return MediaDecoder::SeekPromise::CreateAndReject(true, __func__);
+  }
 };
 
 #define INIT_WATCHABLE(name, val) \
   name(val, "MediaDecoderStateMachine::" #name)
 #define INIT_MIRROR(name, val) \
   name(mTaskQueue, val, "MediaDecoderStateMachine::" #name " (Mirror)")
 #define INIT_CANONICAL(name, val) \
   name(mTaskQueue, val, "MediaDecoderStateMachine::" #name " (Canonical)")
@@ -1537,17 +1615,17 @@ MediaDecoderStateMachine::OnNotDecoded(M
   }
 
   // If the decoder is waiting for data, we tell it to call us back when the
   // data arrives.
   if (aError == NS_ERROR_DOM_MEDIA_WAITING_FOR_DATA) {
     MOZ_ASSERT(mReader->IsWaitForDataSupported(),
                "Readers that send WAITING_FOR_DATA need to implement WaitForData");
     mReader->WaitForData(aType);
-    MaybeStopPrerolling();
+    mStateObj->HandleWaitingForData();
     return;
   }
 
   if (aError == NS_ERROR_DOM_MEDIA_CANCELED) {
     if (isAudio) {
       EnsureAudioDecodeTaskQueued();
     } else {
       EnsureVideoDecodeTaskQueued();
@@ -1564,18 +1642,16 @@ MediaDecoderStateMachine::OnNotDecoded(M
   // This is an EOS. Finish off the queue, and then handle things based on our
   // state.
   if (isAudio) {
     AudioQueue().Finish();
   } else {
     VideoQueue().Finish();
   }
 
-  MaybeStopPrerolling();
-
   mStateObj->HandleEndOfStream();
 }
 
 void
 MediaDecoderStateMachine::OnVideoDecoded(MediaData* aVideo,
                                          TimeStamp aDecodeStartTime)
 {
   MOZ_ASSERT(OnTaskQueue());
@@ -1714,47 +1790,34 @@ void MediaDecoderStateMachine::StopPlayb
   if (IsPlaying()) {
     mMediaSink->SetPlaying(false);
     MOZ_ASSERT(!IsPlaying());
   }
 
   DispatchDecodeTasksIfNeeded();
 }
 
-void
-MediaDecoderStateMachine::MaybeStopPrerolling()
-{
-  MOZ_ASSERT(OnTaskQueue());
-  if (mIsPrerolling &&
-      (DonePrerollingAudio() || mReader->IsWaitingAudioData()) &&
-      (DonePrerollingVideo() || mReader->IsWaitingVideoData())) {
-    mIsPrerolling = false;
-    // Check if we can start playback.
-    ScheduleStateMachine();
-  }
-}
-
 void MediaDecoderStateMachine::MaybeStartPlayback()
 {
   MOZ_ASSERT(OnTaskQueue());
   // Should try to start playback only after decoding first frames.
   MOZ_ASSERT(mSentFirstFrameLoadedEvent);
   MOZ_ASSERT(mState == DECODER_STATE_DECODING ||
              mState == DECODER_STATE_COMPLETED);
 
   if (IsPlaying()) {
     // Logging this case is really spammy - don't do it.
     return;
   }
 
   bool playStatePermits = mPlayState == MediaDecoder::PLAY_STATE_PLAYING;
-  if (!playStatePermits || mIsPrerolling || mAudioOffloading) {
+  if (!playStatePermits || mAudioOffloading) {
     DECODER_LOG("Not starting playback [playStatePermits: %d, "
-                "mIsPrerolling: %d, mAudioOffloading: %d]",
-                playStatePermits, mIsPrerolling, mAudioOffloading);
+                "mAudioOffloading: %d]",
+                playStatePermits, mAudioOffloading);
     return;
   }
 
   DECODER_LOG("MaybeStartPlayback() starting playback");
   mOnPlaybackEvent.Notify(MediaEventType::PlaybackStarted);
   StartMediaSink();
 
   if (!IsPlaying()) {
@@ -2982,30 +3045,25 @@ MediaDecoderStateMachine::SetAudioCaptur
   mMediaSink->Shutdown();
 
   // Create a new sink according to whether audio is captured.
   mMediaSink = CreateMediaSink(aCaptured);
 
   // Restore playback parameters.
   mMediaSink->SetPlaybackParams(params);
 
-  // We don't need to call StartMediaSink() here because IsPlaying() is now
-  // always in sync with the playing state of MediaSink. It will be started in
-  // MaybeStartPlayback() in the next cycle if necessary.
-
   mAudioCaptured = aCaptured;
-  ScheduleStateMachine();
 
   // Don't buffer as much when audio is captured because we don't need to worry
   // about high latency audio devices.
   mAmpleAudioThresholdUsecs = mAudioCaptured ?
                               detail::AMPLE_AUDIO_USECS / 2 :
                               detail::AMPLE_AUDIO_USECS;
 
-  MaybeStopPrerolling();
+  mStateObj->HandleAudioCaptured();
 }
 
 uint32_t MediaDecoderStateMachine::GetAmpleVideoFrames() const
 {
   MOZ_ASSERT(OnTaskQueue());
   return (mReader->IsAsync() && mReader->VideoIsHardwareAccelerated())
     ? std::max<uint32_t>(sVideoQueueHWAccelSize, MIN_VIDEO_QUEUE_SIZE)
     : std::max<uint32_t>(sVideoQueueDefaultSize, MIN_VIDEO_QUEUE_SIZE);
@@ -3015,25 +3073,26 @@ void
 MediaDecoderStateMachine::DumpDebugInfo()
 {
   MOZ_ASSERT(NS_IsMainThread());
 
   // It is fine to capture a raw pointer here because MediaDecoder only call
   // this function before shutdown begins.
   nsCOMPtr<nsIRunnable> r = NS_NewRunnableFunction([this] () {
     mMediaSink->DumpDebugInfo();
+    mStateObj->DumpDebugInfo();
     DUMP_LOG(
       "GetMediaTime=%lld GetClock=%lld mMediaSink=%p "
       "mState=%s mPlayState=%d mSentFirstFrameLoadedEvent=%d IsPlaying=%d "
       "mAudioStatus=%s mVideoStatus=%s mDecodedAudioEndTime=%lld mDecodedVideoEndTime=%lld "
-      "mIsPrerolling=%d mAudioCompleted=%d mVideoCompleted=%d",
+      "mAudioCompleted=%d mVideoCompleted=%d",
       GetMediaTime(), mMediaSink->IsStarted() ? GetClock() : -1, mMediaSink.get(),
       ToStateStr(), mPlayState.Ref(), mSentFirstFrameLoadedEvent, IsPlaying(),
       AudioRequestStatus(), VideoRequestStatus(), mDecodedAudioEndTime, mDecodedVideoEndTime,
-      mIsPrerolling, mAudioCompleted.Ref(), mVideoCompleted.Ref());
+      mAudioCompleted.Ref(), mVideoCompleted.Ref());
   });
 
   OwnerThread()->DispatchStateChange(r.forget());
 }
 
 void MediaDecoderStateMachine::AddOutputStream(ProcessedMediaStream* aStream,
                                                bool aFinishWhenEnded)
 {