--- a/browser/base/content/browser-contentblocking.js
+++ b/browser/base/content/browser-contentblocking.js
@@ -413,23 +413,21 @@ var ContentBlocking = {
     // This state will be overriden later if there's an exception set for this site.
     let active = this.enabled && detected;
 
     for (let blocker of this.blockers) {
       blocker.categoryItem.classList.toggle("blocked", this.enabled && blocker.enabled);
     }
 
     // Check whether the user has added an exception for this site.
-    let hasException = false;
-    if (PrivateBrowsingUtils.isBrowserPrivate(gBrowser.selectedBrowser)) {
-      hasException = PrivateBrowsingUtils.existsInTrackingAllowlist(baseURI);
-    } else {
-      hasException = Services.perms.testExactPermission(baseURI,
-        "trackingprotection") == Services.perms.ALLOW_ACTION;
-    }
+    let type = PrivateBrowsingUtils.isBrowserPrivate(gBrowser.selectedBrowser) ?
+                 "trackingprotection-pb" :
+                 "trackingprotection";
+    let hasException = Services.perms.testExactPermission(baseURI, type) ==
+      Services.perms.ALLOW_ACTION;
 
     this.content.toggleAttribute("detected", detected);
     this.content.toggleAttribute("hasException", hasException);
 
     this.iconBox.toggleAttribute("active", active);
     this.iconBox.toggleAttribute("hasException", this.enabled && hasException);
 
     if (isSimulated) {

--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -548,17 +548,18 @@
                 scrollButtonWidth: arrowScrollbox._scrollButtonDown.getBoundingClientRect().width
               };
             }
 
             let width = 0;
             for (let i = numPinned - 1; i >= 0; i--) {
               let tab = this.children[i];
               width += layoutData.pinnedTabWidth;
-              tab.style.marginInlineStart = -(width + layoutData.scrollButtonWidth) + "px";
+              tab.style.setProperty("margin-inline-start",
+                -(width + layoutData.scrollButtonWidth) + "px", "important");
               tab._pinnedUnscrollable = true;
             }
             this.style.paddingInlineStart = width + "px";
           } else {
             this.removeAttribute("positionpinnedtabs");
 
             for (let i = 0; i < numPinned; i++) {
               let tab = this.children[i];

--- a/browser/components/sessionstore/test/browser.ini
+++ b/browser/components/sessionstore/test/browser.ini
@@ -281,8 +281,9 @@ skip-if = debug
 skip-if = !crashreporter || !e10s # Tabs can't crash without e10s
 
 [browser_cookies.js]
 [browser_cookies_legacy.js]
 [browser_cookies_privacy.js]
 [browser_speculative_connect.js]
 [browser_1446343-windowsize.js]
 [browser_restore_reversed_z_order.js]
+skip-if = true #Bug 1455602

--- a/browser/installer/package-manifest.in
+++ b/browser/installer/package-manifest.in
@@ -383,20 +383,16 @@
 @RESPATH@/actors/*
 
 ; Safe Browsing
 @RESPATH@/components/nsURLClassifier.manifest
 @RESPATH@/components/nsUrlClassifierHashCompleter.js
 @RESPATH@/components/nsUrlClassifierListManager.js
 @RESPATH@/components/nsUrlClassifierLib.js
 
-; Private Browsing
-@RESPATH@/components/PrivateBrowsing.manifest
-@RESPATH@/components/PrivateBrowsingTrackingProtectionWhitelist.js
-
 ; Security Reports
 @RESPATH@/components/SecurityReporter.manifest
 @RESPATH@/components/SecurityReporter.js
 
 ; ANGLE GLES-on-D3D rendering library
 #ifdef MOZ_ANGLE_RENDERER
 @BINPATH@/libEGL.dll
 @BINPATH@/libGLESv2.dll

--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -65,18 +65,18 @@
   }
 }
 
 .tabbrowser-tab {
   -moz-appearance: none;
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
-  margin: 0;
-  padding: 0;
+  margin: 0 !important /* override tabbox.css */;
+  padding: 0 !important /* override tabbox.css */;
   -moz-box-align: stretch;
 }
 
 /* The selected tab should appear above the border between the tabs toolbar and
    the navigation toolbar. */
 .tabbrowser-tab[visuallyselected=true] {
   position: relative;
   z-index: 2;

--- a/devtools/client/inspector/boxmodel/actions/box-model.js
+++ b/devtools/client/inspector/boxmodel/actions/box-model.js
@@ -8,40 +8,40 @@ const {
   UPDATE_GEOMETRY_EDITOR_ENABLED,
   UPDATE_LAYOUT,
   UPDATE_OFFSET_PARENT,
 } = require("./index");
 
 module.exports = {
 
   /**
-   * Update the geometry editor's enabled state.
+   * Updates the geometry editor's enabled state.
    *
    * @param  {Boolean} enabled
    *         Whether or not the geometry editor is enabled or not.
    */
   updateGeometryEditorEnabled(enabled) {
     return {
       type: UPDATE_GEOMETRY_EDITOR_ENABLED,
       enabled,
     };
   },
 
   /**
-   * Update the layout state with the new layout properties.
+   * Updates the layout state with the new layout properties.
    */
   updateLayout(layout) {
     return {
       type: UPDATE_LAYOUT,
       layout,
     };
   },
 
   /**
-   * Update the offset parent state with the new DOM node.
+   * Updates the offset parent state with the new DOM node.
    */
   updateOffsetParent(offsetParent) {
     return {
       type: UPDATE_OFFSET_PARENT,
       offsetParent,
     };
   }
 

--- a/devtools/client/inspector/boxmodel/actions/index.js
+++ b/devtools/client/inspector/boxmodel/actions/index.js
@@ -3,18 +3,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createEnum } = require("devtools/client/shared/enum");
 
 createEnum([
 
-  // Update the geometry editor's enabled state.
+  // Updates the geometry editor's enabled state.
   "UPDATE_GEOMETRY_EDITOR_ENABLED",
 
-  // Update the layout state with the latest layout properties.
+  // Updates the layout state with the latest layout properties.
   "UPDATE_LAYOUT",
 
-  // Update the offset parent state with the new DOM node.
+  // Updates the offset parent state with the new DOM node.
   "UPDATE_OFFSET_PARENT",
 
 ], module.exports);

--- a/devtools/client/inspector/boxmodel/components/BoxModel.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModel.js
@@ -13,23 +13,23 @@ const BoxModelMain = createFactory(requi
 const BoxModelProperties = createFactory(require("./BoxModelProperties"));
 
 const Types = require("../types");
 
 class BoxModel extends PureComponent {
   static get propTypes() {
     return {
       boxModel: PropTypes.shape(Types.boxModel).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelProperties: PropTypes.bool.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelEditor: PropTypes.func.isRequired,
       onShowBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGeometryEditor: PropTypes.func.isRequired,
+      showBoxModelProperties: PropTypes.bool.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
@@ -39,54 +39,56 @@ class BoxModel extends PureComponent {
     if (target == this.boxModelContainer) {
       this.boxModelMain.onKeyDown(event);
     }
   }
 
   render() {
     const {
       boxModel,
-      setSelectedNode,
-      showBoxModelProperties,
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onToggleGeometryEditor,
+      setSelectedNode,
+      showBoxModelProperties,
     } = this.props;
 
-    return dom.div(
-      {
-        className: "boxmodel-container",
-        tabIndex: 0,
-        ref: div => {
-          this.boxModelContainer = div;
-        },
-        onKeyDown: this.onKeyDown,
-      },
-      BoxModelMain({
-        boxModel,
-        boxModelContainer: this.boxModelContainer,
-        ref: boxModelMain => {
-          this.boxModelMain = boxModelMain;
+    return (
+      dom.div(
+        {
+          className: "boxmodel-container",
+          tabIndex: 0,
+          ref: div => {
+            this.boxModelContainer = div;
+          },
+          onKeyDown: this.onKeyDown,
         },
-        onHideBoxModelHighlighter,
-        onShowBoxModelEditor,
-        onShowBoxModelHighlighter,
-      }),
-      BoxModelInfo({
-        boxModel,
-        onToggleGeometryEditor,
-      }),
-      showBoxModelProperties ?
-        BoxModelProperties({
+        BoxModelMain({
+          boxModel,
+          boxModelContainer: this.boxModelContainer,
+          ref: boxModelMain => {
+            this.boxModelMain = boxModelMain;
+          },
+          onHideBoxModelHighlighter,
+          onShowBoxModelEditor,
+          onShowBoxModelHighlighter,
+        }),
+        BoxModelInfo({
           boxModel,
-          setSelectedNode,
-          onHideBoxModelHighlighter,
-          onShowBoxModelHighlighterForNode,
-        })
-        :
-        null
+          onToggleGeometryEditor,
+        }),
+        showBoxModelProperties ?
+          BoxModelProperties({
+            boxModel,
+            setSelectedNode,
+            onHideBoxModelHighlighter,
+            onShowBoxModelHighlighterForNode,
+          })
+          :
+          null
+      )
     );
   }
 }
 
 module.exports = BoxModel;

--- a/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
@@ -13,19 +13,19 @@ const LONG_TEXT_ROTATE_LIMIT = 3;
 
 class BoxModelEditable extends PureComponent {
   static get propTypes() {
     return {
       box: PropTypes.string.isRequired,
       direction: PropTypes.string,
       focusable: PropTypes.bool.isRequired,
       level: PropTypes.string,
+      onShowBoxModelEditor: PropTypes.func.isRequired,
       property: PropTypes.string.isRequired,
       textContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      onShowBoxModelEditor: PropTypes.func.isRequired,
     };
   }
 
   componentDidMount() {
     const { property, onShowBoxModelEditor } = this.props;
 
     editableItem({
       element: this.boxModelEditable,
@@ -44,31 +44,33 @@ class BoxModelEditable extends PureCompo
       textContent,
     } = this.props;
 
     const rotate = direction &&
                  (direction == "left" || direction == "right") &&
                  box !== "position" &&
                  textContent.toString().length > LONG_TEXT_ROTATE_LIMIT;
 
-    return dom.p(
-      {
-        className: `boxmodel-${box}
-                    ${direction ? " boxmodel-" + direction : "boxmodel-" + property}
-                    ${rotate ? " boxmodel-rotate" : ""}`,
-      },
-      dom.span(
+    return (
+      dom.p(
         {
-          className: "boxmodel-editable",
-          "data-box": box,
-          tabIndex: box === level && focusable ? 0 : -1,
-          title: property,
-          ref: span => {
-            this.boxModelEditable = span;
+          className: `boxmodel-${box}
+                      ${direction ? " boxmodel-" + direction : "boxmodel-" + property}
+                      ${rotate ? " boxmodel-rotate" : ""}`,
+        },
+        dom.span(
+          {
+            className: "boxmodel-editable",
+            "data-box": box,
+            tabIndex: box === level && focusable ? 0 : -1,
+            title: property,
+            ref: span => {
+              this.boxModelEditable = span;
+            },
           },
-        },
-        textContent
+          textContent
+        )
       )
     );
   }
 }
 
 module.exports = BoxModelEditable;

--- a/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
@@ -44,42 +44,30 @@ class BoxModelInfo extends PureComponent
       width = "-",
     } = layout;
 
     let buttonClass = "layout-geometry-editor devtools-button";
     if (geometryEditorEnabled) {
       buttonClass += " checked";
     }
 
-    return dom.div(
-      {
-        className: "boxmodel-info",
-      },
-      dom.span(
-        {
-          className: "boxmodel-element-size",
-        },
-        SHARED_L10N.getFormatStr("dimensions", width, height)
-      ),
-      dom.section(
-        {
-          className: "boxmodel-position-group",
-        },
-        isPositionEditable ?
-          dom.button({
-            className: buttonClass,
-            title: BOXMODEL_L10N.getStr("boxmodel.geometryButton.tooltip"),
-            onClick: this.onToggleGeometryEditor,
-          })
-          :
-          null,
-        dom.span(
-          {
-            className: "boxmodel-element-position",
-          },
-          position
+    return (
+      dom.div({ className: "boxmodel-info" },
+        dom.span({ className: "boxmodel-element-size" },
+          SHARED_L10N.getFormatStr("dimensions", width, height)
+        ),
+        dom.section({ className: "boxmodel-position-group" },
+          isPositionEditable ?
+            dom.button({
+              className: buttonClass,
+              title: BOXMODEL_L10N.getStr("boxmodel.geometryButton.tooltip"),
+              onClick: this.onToggleGeometryEditor,
+            })
+            :
+            null,
+          dom.span({ className: "boxmodel-element-position" }, position)
         )
       )
     );
   }
 }
 
 module.exports = BoxModelInfo;

--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -41,20 +41,20 @@ class BoxModelMain extends PureComponent
     this.getBorderOrPaddingValue = this.getBorderOrPaddingValue.bind(this);
     this.getContextBox = this.getContextBox.bind(this);
     this.getDisplayPosition = this.getDisplayPosition.bind(this);
     this.getHeightValue = this.getHeightValue.bind(this);
     this.getMarginValue = this.getMarginValue.bind(this);
     this.getPositionValue = this.getPositionValue.bind(this);
     this.getWidthValue = this.getWidthValue.bind(this);
     this.moveFocus = this.moveFocus.bind(this);
-    this.setAriaActive = this.setAriaActive.bind(this);
     this.onHighlightMouseOver = this.onHighlightMouseOver.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onLevelClick = this.onLevelClick.bind(this);
+    this.setAriaActive = this.setAriaActive.bind(this);
   }
 
   componentDidUpdate() {
     const displayPosition = this.getDisplayPosition();
     const isContentBox = this.getContextBox();
 
     this.layouts = {
       "position": new Map([
@@ -409,313 +409,300 @@ class BoxModelMain extends PureComponent
     const marginRight = this.getMarginValue("margin-right", "right");
     const marginBottom = this.getMarginValue("margin-bottom", "bottom");
     const marginLeft = this.getMarginValue("margin-left", "left");
 
     height = this.getHeightValue(height);
     width = this.getWidthValue(width);
 
     const contentBox = layout["box-sizing"] == "content-box" ?
-      dom.div(
-        {
-          className: "boxmodel-size",
-        },
+      dom.div({ className: "boxmodel-size" },
         BoxModelEditable({
           box: "content",
           focusable,
           level,
           property: "width",
           ref: editable => {
             this.contentEditable = editable;
           },
           textContent: width,
           onShowBoxModelEditor
         }),
-        dom.span(
-          {},
-          "\u00D7"
-        ),
+        dom.span({}, "\u00D7"),
         BoxModelEditable({
           box: "content",
           focusable,
           level,
           property: "height",
           textContent: height,
           onShowBoxModelEditor
         })
       )
       :
-      dom.p(
-        {
-          className: "boxmodel-size",
-        },
-        dom.span(
-          {
-            title: "content",
-          },
+      dom.p({ className: "boxmodel-size" },
+        dom.span({ title: "content" },
           SHARED_L10N.getFormatStr("dimensions", width, height)
         )
       );
 
-    return dom.div(
-      {
-        className: "boxmodel-main devtools-monospace",
-        "data-box": "position",
-        ref: div => {
-          this.positionLayout = div;
-        },
-        onClick: this.onLevelClick,
-        onKeyDown: this.onKeyDown,
-        onMouseOver: this.onHighlightMouseOver,
-        onMouseOut: this.props.onHideBoxModelHighlighter,
-      },
-      displayPosition ?
-        dom.span(
-          {
-            className: "boxmodel-legend",
-            "data-box": "position",
-            title: "position",
-          },
-          "position"
-        )
-        :
-        null,
+    return (
       dom.div(
         {
-          className: "boxmodel-box"
-        },
-        dom.span(
-          {
-            className: "boxmodel-legend",
-            "data-box": "margin",
-            title: "margin",
+          className: "boxmodel-main devtools-monospace",
+          "data-box": "position",
+          ref: div => {
+            this.positionLayout = div;
           },
-          "margin"
-        ),
-        dom.div(
-          {
-            className: "boxmodel-margins",
-            "data-box": "margin",
-            title: "margin",
-            ref: div => {
-              this.marginLayout = div;
-            },
-          },
+          onClick: this.onLevelClick,
+          onKeyDown: this.onKeyDown,
+          onMouseOver: this.onHighlightMouseOver,
+          onMouseOut: this.props.onHideBoxModelHighlighter,
+        },
+        displayPosition ?
           dom.span(
             {
               className: "boxmodel-legend",
-              "data-box": "border",
-              title: "border",
+              "data-box": "position",
+              title: "position",
             },
-            "border"
+            "position"
+          )
+          :
+          null,
+        dom.div({ className: "boxmodel-box" },
+          dom.span(
+            {
+              className: "boxmodel-legend",
+              "data-box": "margin",
+              title: "margin",
+            },
+            "margin"
           ),
           dom.div(
             {
-              className: "boxmodel-borders",
-              "data-box": "border",
-              title: "border",
+              className: "boxmodel-margins",
+              "data-box": "margin",
+              title: "margin",
               ref: div => {
-                this.borderLayout = div;
+                this.marginLayout = div;
               },
             },
             dom.span(
               {
                 className: "boxmodel-legend",
-                "data-box": "padding",
-                title: "padding",
+                "data-box": "border",
+                title: "border",
               },
-              "padding"
+              "border"
             ),
             dom.div(
               {
-                className: "boxmodel-paddings",
-                "data-box": "padding",
-                title: "padding",
+                className: "boxmodel-borders",
+                "data-box": "border",
+                title: "border",
                 ref: div => {
-                  this.paddingLayout = div;
+                  this.borderLayout = div;
                 },
               },
-              dom.div({
-                className: "boxmodel-contents",
-                "data-box": "content",
-                title: "content",
-                ref: div => {
-                  this.contentLayout = div;
+              dom.span(
+                {
+                  className: "boxmodel-legend",
+                  "data-box": "padding",
+                  title: "padding",
                 },
-              })
+                "padding"
+              ),
+              dom.div(
+                {
+                  className: "boxmodel-paddings",
+                  "data-box": "padding",
+                  title: "padding",
+                  ref: div => {
+                    this.paddingLayout = div;
+                  },
+                },
+                dom.div({
+                  className: "boxmodel-contents",
+                  "data-box": "content",
+                  title: "content",
+                  ref: div => {
+                    this.contentLayout = div;
+                  },
+                })
+              )
             )
           )
-        )
-      ),
-      displayPosition ?
+        ),
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "top",
+            focusable,
+            level,
+            property: "position-top",
+            ref: editable => {
+              this.positionEditable = editable;
+            },
+            textContent: positionTop,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "right",
+            focusable,
+            level,
+            property: "position-right",
+            textContent: positionRight,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "bottom",
+            focusable,
+            level,
+            property: "position-bottom",
+            textContent: positionBottom,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "left",
+            focusable,
+            level,
+            property: "position-left",
+            textContent: positionLeft,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "top",
           focusable,
           level,
-          property: "position-top",
+          property: "margin-top",
           ref: editable => {
-            this.positionEditable = editable;
+            this.marginEditable = editable;
           },
-          textContent: positionTop,
+          textContent: marginTop,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      displayPosition ?
+        }),
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "right",
           focusable,
           level,
-          property: "position-right",
-          textContent: positionRight,
+          property: "margin-right",
+          textContent: marginRight,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      displayPosition ?
+        }),
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "bottom",
           focusable,
           level,
-          property: "position-bottom",
-          textContent: positionBottom,
+          property: "margin-bottom",
+          textContent: marginBottom,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      displayPosition ?
+        }),
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "left",
           focusable,
           level,
-          property: "position-left",
-          textContent: positionLeft,
+          property: "margin-left",
+          textContent: marginLeft,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "top",
+          focusable,
+          level,
+          property: "border-top-width",
+          ref: editable => {
+            this.borderEditable = editable;
+          },
+          textContent: borderTop,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "right",
+          focusable,
+          level,
+          property: "border-right-width",
+          textContent: borderRight,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "bottom",
+          focusable,
+          level,
+          property: "border-bottom-width",
+          textContent: borderBottom,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "left",
+          focusable,
+          level,
+          property: "border-left-width",
+          textContent: borderLeft,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      BoxModelEditable({
-        box: "margin",
-        direction: "top",
-        focusable,
-        level,
-        property: "margin-top",
-        ref: editable => {
-          this.marginEditable = editable;
-        },
-        textContent: marginTop,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "margin",
-        direction: "right",
-        focusable,
-        level,
-        property: "margin-right",
-        textContent: marginRight,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "margin",
-        direction: "bottom",
-        focusable,
-        level,
-        property: "margin-bottom",
-        textContent: marginBottom,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "margin",
-        direction: "left",
-        focusable,
-        level,
-        property: "margin-left",
-        textContent: marginLeft,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "top",
-        focusable,
-        level,
-        property: "border-top-width",
-        ref: editable => {
-          this.borderEditable = editable;
-        },
-        textContent: borderTop,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "right",
-        focusable,
-        level,
-        property: "border-right-width",
-        textContent: borderRight,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "bottom",
-        focusable,
-        level,
-        property: "border-bottom-width",
-        textContent: borderBottom,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "left",
-        focusable,
-        level,
-        property: "border-left-width",
-        textContent: borderLeft,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "top",
-        focusable,
-        level,
-        property: "padding-top",
-        ref: editable => {
-          this.paddingEditable = editable;
-        },
-        textContent: paddingTop,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "right",
-        focusable,
-        level,
-        property: "padding-right",
-        textContent: paddingRight,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "bottom",
-        focusable,
-        level,
-        property: "padding-bottom",
-        textContent: paddingBottom,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "left",
-        focusable,
-        level,
-        property: "padding-left",
-        textContent: paddingLeft,
-        onShowBoxModelEditor,
-      }),
-      contentBox
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "top",
+          focusable,
+          level,
+          property: "padding-top",
+          ref: editable => {
+            this.paddingEditable = editable;
+          },
+          textContent: paddingTop,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "right",
+          focusable,
+          level,
+          property: "padding-right",
+          textContent: paddingRight,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "bottom",
+          focusable,
+          level,
+          property: "padding-bottom",
+          textContent: paddingBottom,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "left",
+          focusable,
+          level,
+          property: "padding-left",
+          textContent: paddingLeft,
+          onShowBoxModelEditor,
+        }),
+        contentBox
+      )
     );
   }
 }
 
 module.exports = BoxModelMain;

--- a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -15,19 +15,19 @@ const Types = require("../types");
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
 
 class BoxModelProperties extends PureComponent {
   static get propTypes() {
     return {
       boxModel: PropTypes.shape(Types.boxModel).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       isOpen: true,
@@ -68,44 +68,41 @@ class BoxModelProperties extends PureCom
       isOpen: !this.state.isOpen,
     });
     event.stopPropagation();
   }
 
   render() {
     const {
       boxModel,
-      setSelectedNode,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
+      setSelectedNode,
     } = this.props;
     const { layout } = boxModel;
 
     const layoutInfo = ["box-sizing", "display", "float",
                         "line-height", "position", "z-index"];
 
     const properties = layoutInfo.map(info => {
       const { referenceElement, referenceElementType } = this.getReferenceElement(info);
 
       return ComputedProperty({
         name: info,
         key: info,
-        value: layout[info],
+        onHideBoxModelHighlighter,
+        onShowBoxModelHighlighterForNode,
         referenceElement,
         referenceElementType,
         setSelectedNode,
-        onHideBoxModelHighlighter,
-        onShowBoxModelHighlighterForNode,
+        value: layout[info],
       });
     });
 
-    return dom.div(
-      {
-        className: "boxmodel-properties",
-      },
+    return dom.div({ className: "boxmodel-properties" },
       dom.div(
         {
           className: "boxmodel-properties-header",
           onDoubleClick: this.onToggleExpander,
         },
         dom.span(
           {
             className: "boxmodel-properties-expander theme-twisty",

--- a/devtools/client/inspector/grids/actions/grids.js
+++ b/devtools/client/inspector/grids/actions/grids.js
@@ -8,49 +8,49 @@ const {
   UPDATE_GRID_COLOR,
   UPDATE_GRID_HIGHLIGHTED,
   UPDATE_GRIDS,
 } = require("./index");
 
 module.exports = {
 
   /**
-   * Update the color used for the grid's highlighter.
+   * Updates the color used for the grid's highlighter.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the DOM node to toggle the grid highlighter.
    * @param  {String} color
    *         The color to use for this nodeFront's grid highlighter.
    */
   updateGridColor(nodeFront, color) {
     return {
       type: UPDATE_GRID_COLOR,
       color,
       nodeFront,
     };
   },
 
   /**
-   * Update the grid highlighted state.
+   * Updates the grid highlighted state.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the DOM node to toggle the grid highlighter.
    * @param  {Boolean} highlighted
    *         Whether or not the grid highlighter is highlighting the grid.
    */
   updateGridHighlighted(nodeFront, highlighted) {
     return {
       type: UPDATE_GRID_HIGHLIGHTED,
       highlighted,
       nodeFront,
     };
   },
 
   /**
-   * Update the grid state with the new list of grids.
+   * Updates the grid state with the new list of grids.
    */
   updateGrids(grids) {
     return {
       type: UPDATE_GRIDS,
       grids,
     };
   },
 

--- a/devtools/client/inspector/grids/actions/highlighter-settings.js
+++ b/devtools/client/inspector/grids/actions/highlighter-settings.js
@@ -8,43 +8,43 @@ const {
   UPDATE_SHOW_GRID_AREAS,
   UPDATE_SHOW_GRID_LINE_NUMBERS,
   UPDATE_SHOW_INFINITE_LINES,
 } = require("./index");
 
 module.exports = {
 
   /**
-   * Update the grid highlighter's show grid areas preference.
+   * Updates the grid highlighter's show grid areas preference.
    *
    * @param  {Boolean} enabled
    *         Whether or not the grid highlighter should show the grid areas.
    */
   updateShowGridAreas(enabled) {
     return {
       type: UPDATE_SHOW_GRID_AREAS,
       enabled,
     };
   },
 
   /**
-   * Update the grid highlighter's show grid line numbers preference.
+   * Updates the grid highlighter's show grid line numbers preference.
    *
    * @param  {Boolean} enabled
    *         Whether or not the grid highlighter should show the grid line numbers.
    */
   updateShowGridLineNumbers(enabled) {
     return {
       type: UPDATE_SHOW_GRID_LINE_NUMBERS,
       enabled,
     };
   },
 
   /**
-   * Update the grid highlighter's show infinite lines preference.
+   * Updates the grid highlighter's show infinite lines preference.
    *
    * @param  {Boolean} enabled
    *         Whether or not the grid highlighter should extend grid lines infinitely.
    */
   updateShowInfiniteLines(enabled) {
     return {
       type: UPDATE_SHOW_INFINITE_LINES,
       enabled,

--- a/devtools/client/inspector/grids/actions/index.js
+++ b/devtools/client/inspector/grids/actions/index.js
@@ -3,27 +3,27 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createEnum } = require("devtools/client/shared/enum");
 
 createEnum([
 
-  // Update the color used for the overlay of a grid.
+  // Updates the color used for the overlay of a grid.
   "UPDATE_GRID_COLOR",
 
-  // Update the grid highlighted state.
+  // Updates the grid highlighted state.
   "UPDATE_GRID_HIGHLIGHTED",
 
-  // Update the entire grids state with the new list of grids.
+  // Updates the entire grids state with the new list of grids.
   "UPDATE_GRIDS",
 
-  // Update the grid highlighter's show grid areas state.
+  // Updates the grid highlighter's show grid areas state.
   "UPDATE_SHOW_GRID_AREAS",
 
-  // Update the grid highlighter's show grid line numbers state.
+  // Updates the grid highlighter's show grid line numbers state.
   "UPDATE_SHOW_GRID_LINE_NUMBERS",
 
-  // Update the grid highlighter's show infinite lines state.
+  // Updates the grid highlighter's show infinite lines state.
   "UPDATE_SHOW_INFINITE_LINES",
 
 ], module.exports);

--- a/devtools/client/inspector/grids/components/Grid.js
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -16,77 +16,73 @@ const GridOutline = createFactory(requir
 const Types = require("../types");
 
 class Grid extends PureComponent {
   static get propTypes() {
     return {
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
       highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onShowGridOutlineHighlight: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
       onToggleShowGridAreas: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       getSwatchColorPickerTooltip,
       grids,
       highlighterSettings,
-      setSelectedNode,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
       onShowGridOutlineHighlight,
       onToggleShowGridAreas,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
+      setSelectedNode,
     } = this.props;
 
-    return grids.length ?
-      dom.div(
-        {
-          id: "layout-grid-container",
-        },
-        dom.div(
-          {
-            className: "grid-content",
-          },
+    if (!grids.length) {
+      return (
+        dom.div({ className: "devtools-sidepanel-no-result" },
+          getStr("layout.noGridsOnThisPage")
+        )
+      );
+    }
+
+    return (
+      dom.div({ id: "layout-grid-container" },
+        dom.div({ className: "grid-content" },
           GridList({
             getSwatchColorPickerTooltip,
             grids,
-            setSelectedNode,
             onHideBoxModelHighlighter,
             onSetGridOverlayColor,
             onShowBoxModelHighlighterForNode,
             onToggleGridHighlighter,
+            setSelectedNode,
           }),
           GridDisplaySettings({
             highlighterSettings,
             onToggleShowGridAreas,
             onToggleShowGridLineNumbers,
             onToggleShowInfiniteLines,
           })
         ),
         GridOutline({
           grids,
           onShowGridOutlineHighlight,
         })
       )
-      :
-      dom.div(
-        {
-          className: "devtools-sidepanel-no-result",
-        },
-        getStr("layout.noGridsOnThisPage")
-      );
+    );
   }
 }
 
 module.exports = Grid;

--- a/devtools/client/inspector/grids/components/GridDisplaySettings.js
+++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js
@@ -18,16 +18,17 @@ class GridDisplaySettings extends PureCo
       onToggleShowGridAreas: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
+
     this.onShowGridAreasCheckboxClick = this.onShowGridAreasCheckboxClick.bind(this);
     this.onShowGridLineNumbersCheckboxClick =
       this.onShowGridLineNumbersCheckboxClick.bind(this);
     this.onShowInfiniteLinesCheckboxClick =
       this.onShowInfiniteLinesCheckboxClick.bind(this);
   }
 
   onShowGridAreasCheckboxClick() {
@@ -57,75 +58,58 @@ class GridDisplaySettings extends PureCo
     onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines);
   }
 
   render() {
     const {
       highlighterSettings,
     } = this.props;
 
-    return dom.div(
-      {
-        className: "grid-container",
-      },
-      dom.span(
-        {},
-        getStr("layout.gridDisplaySettings")
-      ),
-      dom.ul(
-        {},
-        dom.li(
-          {
-            className: "grid-settings-item",
-          },
-          dom.label(
-            {},
-            dom.input(
-              {
-                id: "grid-setting-show-grid-line-numbers",
-                type: "checkbox",
-                checked: highlighterSettings.showGridLineNumbers,
-                onChange: this.onShowGridLineNumbersCheckboxClick,
-              }
-            ),
-            getStr("layout.displayLineNumbers")
-          )
-        ),
-        dom.li(
-          {
-            className: "grid-settings-item",
-          },
-          dom.label(
-           {},
-           dom.input(
-             {
-               id: "grid-setting-show-grid-areas",
-               type: "checkbox",
-               checked: highlighterSettings.showGridAreasOverlay,
-               onChange: this.onShowGridAreasCheckboxClick,
-             }
-           ),
-           getStr("layout.displayAreaNames")
-          )
-        ),
-        dom.li(
-          {
-            className: "grid-settings-item",
-          },
-          dom.label(
-            {},
-            dom.input(
-              {
-                id: "grid-setting-extend-grid-lines",
-                type: "checkbox",
-                checked: highlighterSettings.showInfiniteLines,
-                onChange: this.onShowInfiniteLinesCheckboxClick,
-              }
-            ),
-            getStr("layout.extendLinesInfinitely")
+    return (
+      dom.div({ className: "grid-container" },
+        dom.span({}, getStr("layout.gridDisplaySettings")),
+        dom.ul({},
+          dom.li({ className: "grid-settings-item" },
+            dom.label({},
+              dom.input(
+                {
+                  id: "grid-setting-show-grid-line-numbers",
+                  type: "checkbox",
+                  checked: highlighterSettings.showGridLineNumbers,
+                  onChange: this.onShowGridLineNumbersCheckboxClick,
+                }
+              ),
+              getStr("layout.displayLineNumbers")
+            )
+          ),
+          dom.li({ className: "grid-settings-item" },
+            dom.label({},
+              dom.input(
+                {
+                  id: "grid-setting-show-grid-areas",
+                  type: "checkbox",
+                  checked: highlighterSettings.showGridAreasOverlay,
+                  onChange: this.onShowGridAreasCheckboxClick,
+                }
+              ),
+              getStr("layout.displayAreaNames")
+            )
+          ),
+          dom.li({ className: "grid-settings-item" },
+            dom.label({},
+              dom.input(
+                {
+                  id: "grid-setting-extend-grid-lines",
+                  type: "checkbox",
+                  checked: highlighterSettings.showInfiniteLines,
+                  onChange: this.onShowInfiniteLinesCheckboxClick,
+                }
+              ),
+              getStr("layout.extendLinesInfinitely")
+            )
           )
         )
       )
     );
   }
 }
 
 module.exports = GridDisplaySettings;

--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -17,29 +17,30 @@ const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
 class GridItem extends PureComponent {
   static get propTypes() {
     return {
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grid: PropTypes.shape(Types.grid).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
-    this.setGridColor = this.setGridColor.bind(this);
+
     this.onGridCheckboxClick = this.onGridCheckboxClick.bind(this);
     this.onGridInspectIconClick = this.onGridInspectIconClick.bind(this);
+    this.setGridColor = this.setGridColor.bind(this);
   }
 
   componentDidMount() {
     const swatchEl = findDOMNode(this).querySelector(".grid-color-swatch");
     const tooltip = this.props.getSwatchColorPickerTooltip();
 
     let previousColor;
     tooltip.addSwatch(swatchEl, {
@@ -92,55 +93,50 @@ class GridItem extends PureComponent {
   render() {
     const {
       grid,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
     } = this.props;
     const { nodeFront } = grid;
 
-    return dom.li(
-      {},
-      dom.label(
-        {},
-        dom.input(
+    return (
+      dom.li({},
+        dom.label({},
+          dom.input(
+            {
+              checked: grid.highlighted,
+              type: "checkbox",
+              value: grid.id,
+              onChange: this.onGridCheckboxClick,
+            }
+          ),
+          Rep(
+            {
+              defaultRep: ElementNode,
+              mode: MODE.TINY,
+              object: translateNodeFrontToGrip(nodeFront),
+              onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+              onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+              onInspectIconClick: () => this.onGridInspectIconClick(nodeFront),
+            }
+          )
+        ),
+        dom.div(
           {
-            checked: grid.highlighted,
-            type: "checkbox",
-            value: grid.id,
-            onChange: this.onGridCheckboxClick,
+            className: "grid-color-swatch",
+            style: {
+              backgroundColor: grid.color,
+            },
+            title: grid.color,
           }
         ),
-        Rep(
-          {
-            defaultRep: ElementNode,
-            mode: MODE.TINY,
-            object: translateNodeFrontToGrip(nodeFront),
-            onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-            onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-            onInspectIconClick: () => this.onGridInspectIconClick(nodeFront),
-          }
-        )
-      ),
-      dom.div(
-        {
-          className: "grid-color-swatch",
-          style: {
-            backgroundColor: grid.color,
-          },
-          title: grid.color,
-        }
-      ),
-      // The SwatchColorPicker relies on the nextSibling of the swatch element to apply
-      // the selected color. This is why we use a span in display: none for now.
-      // Ideally we should modify the SwatchColorPickerTooltip to bypass this requirement.
-      // See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578
-      dom.span(
-        {
-          className: "grid-color-value"
-        },
-        grid.color
+        // The SwatchColorPicker relies on the nextSibling of the swatch element to apply
+        // the selected color. This is why we use a span in display: none for now.
+        // Ideally we should modify the SwatchColorPickerTooltip to bypass this
+        // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578
+        dom.span({ className: "grid-color-value" }, grid.color)
       )
     );
   }
 }
 
 module.exports = GridItem;

--- a/devtools/client/inspector/grids/components/GridList.js
+++ b/devtools/client/inspector/grids/components/GridList.js
@@ -13,56 +13,52 @@ const GridItem = createFactory(require("
 
 const Types = require("../types");
 
 class GridList extends PureComponent {
   static get propTypes() {
     return {
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       getSwatchColorPickerTooltip,
       grids,
-      setSelectedNode,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
       onToggleGridHighlighter,
+      setSelectedNode,
     } = this.props;
 
-    return dom.div(
-      {
-        className: "grid-container",
-      },
-      dom.span(
-        {},
-        getStr("layout.overlayGrid")
-      ),
-      dom.ul(
-        {
-          id: "grid-list",
-          className: "devtools-monospace",
-        },
-        grids.map(grid => GridItem({
-          key: grid.id,
-          getSwatchColorPickerTooltip,
-          grid,
-          setSelectedNode,
-          onHideBoxModelHighlighter,
-          onSetGridOverlayColor,
-          onShowBoxModelHighlighterForNode,
-          onToggleGridHighlighter,
-        }))
+    return (
+      dom.div({ className: "grid-container" },
+        dom.span({}, getStr("layout.overlayGrid")),
+        dom.ul(
+          {
+            id: "grid-list",
+            className: "devtools-monospace",
+          },
+          grids.map(grid => GridItem({
+            key: grid.id,
+            getSwatchColorPickerTooltip,
+            grid,
+            onHideBoxModelHighlighter,
+            onSetGridOverlayColor,
+            onShowBoxModelHighlighterForNode,
+            onToggleGridHighlighter,
+            setSelectedNode,
+          }))
+        )
       )
     );
   }
 }
 
 module.exports = GridList;

--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -53,23 +53,23 @@ class GridOutline extends PureComponent 
       showOutline: true,
       width: 0,
     };
 
     this.doHighlightCell = this.doHighlightCell.bind(this);
     this.getGridAreaName = this.getGridAreaName.bind(this);
     this.getHeight = this.getHeight.bind(this);
     this.getTotalWidthAndHeight = this.getTotalWidthAndHeight.bind(this);
+    this.onHighlightCell = this.onHighlightCell.bind(this);
     this.renderCannotShowOutlineText = this.renderCannotShowOutlineText.bind(this);
     this.renderGrid = this.renderGrid.bind(this);
     this.renderGridCell = this.renderGridCell.bind(this);
     this.renderGridOutline = this.renderGridOutline.bind(this);
     this.renderGridOutlineBorder = this.renderGridOutlineBorder.bind(this);
     this.renderOutline = this.renderOutline.bind(this);
-    this.onHighlightCell = this.onHighlightCell.bind(this);
   }
 
   componentWillReceiveProps({ grids }) {
     const selectedGrid = grids.find(grid => grid.highlighted);
 
     // Store the height of the grid container in the component state to prevent overflow
     // issues. We want to store the width of the grid container as well so that the
     // viewbox is only the calculated width of the grid outline.

--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -51,29 +51,28 @@ const GRID_COLORS = [
 class GridInspector {
   constructor(inspector, window) {
     this.document = window.document;
     this.inspector = inspector;
     this.store = inspector.store;
     this.telemetry = inspector.telemetry;
     this.walker = this.inspector.walker;
 
-    this.updateGridPanel = this.updateGridPanel.bind(this);
-
     this.onHighlighterShown = this.onHighlighterShown.bind(this);
     this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
     this.onNavigate = this.onNavigate.bind(this);
     this.onReflow = throttle(this.onReflow, 500, this);
     this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
     this.onShowGridOutlineHighlight = this.onShowGridOutlineHighlight.bind(this);
     this.onSidebarSelect = this.onSidebarSelect.bind(this);
     this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
     this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
     this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
     this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
+    this.updateGridPanel = this.updateGridPanel.bind(this);
 
     this.init();
   }
 
   get highlighters() {
     if (!this._highlighters) {
       this._highlighters = this.inspector.highlighters;
     }

--- a/devtools/client/inspector/layout/components/LayoutApp.js
+++ b/devtools/client/inspector/layout/components/LayoutApp.js
@@ -22,39 +22,38 @@ const Accordion = createFactory(require(
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
 
 const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
 const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
 
 const FLEXBOX_ENABLED_PREF = "devtools.flexboxinspector.enabled";
-
 const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
 const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
 const GRID_OPENED_PREF = "devtools.layout.grid.opened";
 
 class LayoutApp extends PureComponent {
   static get propTypes() {
     return {
       boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired,
       highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelProperties: PropTypes.bool.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelEditor: PropTypes.func.isRequired,
       onShowBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      showBoxModelProperties: PropTypes.bool.isRequired,
     };
   }
 
   render() {
     let items = [
       {
         component: Grid,
         componentProps: this.props,
@@ -88,16 +87,17 @@ class LayoutApp extends PureComponent {
             const opened =  Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
             Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
           }
         },
         ...items
       ];
     }
 
-    return dom.div(
-      { id: "layout-container" },
-      Accordion({ items })
+    return (
+      dom.div({ id: "layout-container" },
+        Accordion({ items })
+      )
     );
   }
 }
 
 module.exports = connect(state => state)(LayoutApp);

--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -29,18 +29,18 @@ class LayoutView {
   }
 
   init() {
     if (!this.inspector) {
       return;
     }
 
     const {
+      onShowBoxModelHighlighterForNode,
       setSelectedNode,
-      onShowBoxModelHighlighterForNode,
     } = this.inspector.getCommonComponentProps();
 
     const {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onToggleGeometryEditor,
     } = this.inspector.getPanel("boxmodel").getComponentProps();
@@ -58,35 +58,35 @@ class LayoutView {
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.gridInspector.getComponentProps();
 
     const layoutApp = LayoutApp({
       getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
-      setSelectedNode,
-      /**
-       * Shows the box model properties under the box model if true, otherwise, hidden by
-       * default.
-       */
-      showBoxModelProperties: true,
       onHideBoxModelHighlighter,
       onSetFlexboxOverlayColor,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onShowGridOutlineHighlight,
       onToggleFlexboxHighlighter,
       onToggleGeometryEditor,
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
+      setSelectedNode,
+      /**
+       * Shows the box model properties under the box model if true, otherwise, hidden by
+       * default.
+       */
+      showBoxModelProperties: true,
     });
 
     const provider = createElement(Provider, {
       id: "layoutview",
       key: "layoutview",
       store: this.store,
       title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
     }, layoutApp);

--- a/devtools/client/responsive.html/components/App.js
+++ b/devtools/client/responsive.html/components/App.js
@@ -12,24 +12,24 @@ const PropTypes = require("devtools/clie
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 const Toolbar = createFactory(require("./Toolbar"));
 const Viewports = createFactory(require("./Viewports"));
 
 loader.lazyGetter(this, "DeviceModal",
   () => createFactory(require("./DeviceModal")));
 
+const { changeNetworkThrottling } = require("devtools/client/shared/components/throttling/actions");
 const {
   addCustomDevice,
   removeCustomDevice,
   updateDeviceDisplayed,
   updateDeviceModal,
   updatePreferredDevices,
 } = require("../actions/devices");
-const { changeNetworkThrottling } = require("devtools/client/shared/components/throttling/actions");
 const { changeReloadCondition } = require("../actions/reload-conditions");
 const { takeScreenshot } = require("../actions/screenshot");
 const { changeTouchSimulation } = require("../actions/touch-simulation");
 const { toggleLeftAlignment } = require("../actions/ui");
 const {
   changeDevice,
   changePixelRatio,
   removeDeviceAssociation,
@@ -217,60 +217,59 @@ class App extends Component {
     const selectedDevice = viewports[0].device;
     const selectedPixelRatio = viewports[0].pixelRatio;
 
     let deviceAdderViewportTemplate = {};
     if (devices.modalOpenedFromViewport !== null) {
       deviceAdderViewportTemplate = viewports[devices.modalOpenedFromViewport];
     }
 
-    return dom.div(
-      {
-        id: "app",
-      },
-      Toolbar({
-        devices,
-        displayPixelRatio,
-        networkThrottling,
-        reloadConditions,
-        screenshot,
-        selectedDevice,
-        selectedPixelRatio,
-        touchSimulation,
-        viewport: viewports[0],
-        onChangeDevice,
-        onChangeNetworkThrottling,
-        onChangePixelRatio,
-        onChangeReloadCondition,
-        onChangeTouchSimulation,
-        onExit,
-        onRemoveDeviceAssociation,
-        onResizeViewport,
-        onRotateViewport,
-        onScreenshot,
-        onToggleLeftAlignment,
-        onUpdateDeviceModal,
-      }),
-      Viewports({
-        screenshot,
-        viewports,
-        onBrowserMounted,
-        onContentResize,
-        onRemoveDeviceAssociation,
-        onResizeViewport,
-      }),
-      devices.isModalOpen ?
-        DeviceModal({
-          deviceAdderViewportTemplate,
+    return (
+      dom.div({ id: "app" },
+        Toolbar({
           devices,
-          onAddCustomDevice,
-          onDeviceListUpdate,
-          onRemoveCustomDevice,
-          onUpdateDeviceDisplayed,
+          displayPixelRatio,
+          networkThrottling,
+          reloadConditions,
+          screenshot,
+          selectedDevice,
+          selectedPixelRatio,
+          touchSimulation,
+          viewport: viewports[0],
+          onChangeDevice,
+          onChangeNetworkThrottling,
+          onChangePixelRatio,
+          onChangeReloadCondition,
+          onChangeTouchSimulation,
+          onExit,
+          onRemoveDeviceAssociation,
+          onResizeViewport,
+          onRotateViewport,
+          onScreenshot,
+          onToggleLeftAlignment,
           onUpdateDeviceModal,
-        })
-        :
-        null
+        }),
+        Viewports({
+          screenshot,
+          viewports,
+          onBrowserMounted,
+          onContentResize,
+          onRemoveDeviceAssociation,
+          onResizeViewport,
+        }),
+        devices.isModalOpen ?
+          DeviceModal({
+            deviceAdderViewportTemplate,
+            devices,
+            onAddCustomDevice,
+            onDeviceListUpdate,
+            onRemoveCustomDevice,
+            onUpdateDeviceDisplayed,
+            onUpdateDeviceModal,
+          })
+          :
+          null
+      )
     );
   }
 }
 
 module.exports = connect(state => state)(App);

--- a/devtools/client/responsive.html/components/Browser.js
+++ b/devtools/client/responsive.html/components/Browser.js
@@ -21,20 +21,20 @@ const FRAME_SCRIPT = "resource://devtool
 class Browser extends PureComponent {
   /**
    * This component is not allowed to depend directly on frequently changing data (width,
    * height). Any changes in props would cause the <iframe> to be removed and added again,
    * throwing away the current state of the page.
    */
   static get propTypes() {
     return {
+      onBrowserMounted: PropTypes.func.isRequired,
+      onContentResize: PropTypes.func.isRequired,
       swapAfterMount: PropTypes.bool.isRequired,
       userContextId: PropTypes.number.isRequired,
-      onBrowserMounted: PropTypes.func.isRequired,
-      onContentResize: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onContentResize = this.onContentResize.bind(this);
   }
 
@@ -144,29 +144,31 @@ class Browser extends PureComponent {
 
     // In the case of @remote and @remoteType, the attribute must be set before the
     // element is added to the DOM to have any effect, which we are able to do with this
     // approach.
     //
     // @noisolation and @allowfullscreen are needed so that these frames have the same
     // access to browser features as regular browser tabs. The `swapFrameLoaders` platform
     // API we use compares such features before allowing the swap to proceed.
-    return dom.iframe(
-      {
-        allowFullScreen: "true",
-        className: "browser",
-        height: "100%",
-        mozbrowser: "true",
-        noisolation: "true",
-        remote: "true",
-        remotetype: "web",
-        src: "about:blank",
-        usercontextid: userContextId,
-        width: "100%",
-        ref: browser => {
-          this.browser = browser;
-        },
-      }
+    return (
+      dom.iframe(
+        {
+          allowFullScreen: "true",
+          className: "browser",
+          height: "100%",
+          mozbrowser: "true",
+          noisolation: "true",
+          remote: "true",
+          remotetype: "web",
+          src: "about:blank",
+          usercontextid: userContextId,
+          width: "100%",
+          ref: browser => {
+            this.browser = browser;
+          },
+        }
+      )
     );
   }
 }
 
 module.exports = Browser;

--- a/devtools/client/responsive.html/components/DeviceAdder.js
+++ b/devtools/client/responsive.html/components/DeviceAdder.js
@@ -5,27 +5,27 @@
 /* eslint-env browser */
 
 "use strict";
 
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const ViewportDimension = createFactory(require("./ViewportDimension.js"));
+const ViewportDimension = createFactory(require("./ViewportDimension"));
 
 const { getFormatStr, getStr } = require("../utils/l10n");
 const Types = require("../types");
 
 class DeviceAdder extends PureComponent {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
+      onAddCustomDevice: PropTypes.func.isRequired,
       viewportTemplate: PropTypes.shape(Types.viewport).isRequired,
-      onAddCustomDevice: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     const {
       height,
@@ -131,129 +131,89 @@ class DeviceAdder extends PureComponent 
       deviceName = getStr("responsive.customDeviceName");
       Object.assign(normalizedViewport, {
         pixelRatio: window.devicePixelRatio,
         userAgent: navigator.userAgent,
         touch: false,
       });
     }
 
-    return dom.div(
-      {
-        id: "device-adder"
-      },
-      dom.div(
-        {
-          id: "device-adder-content",
-        },
-        dom.div(
-          {
-            id: "device-adder-column-1",
-          },
-          dom.label(
-            {
-              id: "device-adder-name",
-            },
-            dom.span(
-              {
-                className: "device-adder-label",
-              },
-              getStr("responsive.deviceAdderName")
+    return (
+      dom.div({ id: "device-adder" },
+        dom.div({ id: "device-adder-content" },
+          dom.div({ id: "device-adder-column-1" },
+            dom.label({ id: "device-adder-name" },
+              dom.span({ className: "device-adder-label" },
+                getStr("responsive.deviceAdderName")
+              ),
+              dom.input({
+                defaultValue: deviceName,
+                ref: input => {
+                  this.nameInput = input;
+                },
+              })
             ),
-            dom.input({
-              defaultValue: deviceName,
-              ref: input => {
-                this.nameInput = input;
-              },
-            })
-          ),
-          dom.label(
-            {
-              id: "device-adder-size",
-            },
-            dom.span(
-              {
-                className: "device-adder-label"
-              },
-              getStr("responsive.deviceAdderSize")
-            ),
-            ViewportDimension({
-              viewport: {
-                width,
-                height,
-              },
-              onResizeViewport: this.onChangeSize,
-              onRemoveDeviceAssociation: () => {},
-            })
-          ),
-          dom.label(
-            {
-              id: "device-adder-pixel-ratio",
-            },
-            dom.span(
-              {
-                className: "device-adder-label"
-              },
-              getStr("responsive.deviceAdderPixelRatio")
+            dom.label({ id: "device-adder-size" },
+              dom.span({ className: "device-adder-label" },
+                getStr("responsive.deviceAdderSize")
+              ),
+              ViewportDimension({
+                viewport: {
+                  width,
+                  height,
+                },
+                onResizeViewport: this.onChangeSize,
+                onRemoveDeviceAssociation: () => {},
+              })
             ),
-            dom.input({
-              type: "number",
-              step: "any",
-              defaultValue: normalizedViewport.pixelRatio,
-              ref: input => {
-                this.pixelRatioInput = input;
-              },
-            })
-          )
-        ),
-        dom.div(
-          {
-            id: "device-adder-column-2",
-          },
-          dom.label(
-            {
-              id: "device-adder-user-agent",
-            },
-            dom.span(
-              {
-                className: "device-adder-label"
-              },
-              getStr("responsive.deviceAdderUserAgent")
+            dom.label({ id: "device-adder-pixel-ratio" },
+              dom.span({ className: "device-adder-label" },
+                getStr("responsive.deviceAdderPixelRatio")
+              ),
+              dom.input({
+                type: "number",
+                step: "any",
+                defaultValue: normalizedViewport.pixelRatio,
+                ref: input => {
+                  this.pixelRatioInput = input;
+                },
+              })
+            )
+          ),
+          dom.div({ id: "device-adder-column-2" },
+            dom.label({ id: "device-adder-user-agent" },
+              dom.span({ className: "device-adder-label" },
+                getStr("responsive.deviceAdderUserAgent")
+              ),
+              dom.input({
+                defaultValue: normalizedViewport.userAgent,
+                ref: input => {
+                  this.userAgentInput = input;
+                },
+              })
             ),
-            dom.input({
-              defaultValue: normalizedViewport.userAgent,
-              ref: input => {
-                this.userAgentInput = input;
-              },
-            })
+            dom.label({ id: "device-adder-touch" },
+              dom.span({ className: "device-adder-label" },
+                getStr("responsive.deviceAdderTouch")
+              ),
+              dom.input({
+                defaultChecked: normalizedViewport.touch,
+                type: "checkbox",
+                ref: input => {
+                  this.touchInput = input;
+                },
+              })
+            )
           ),
-          dom.label(
-            {
-              id: "device-adder-touch",
-            },
-            dom.span(
-              {
-                className: "device-adder-label"
-              },
-              getStr("responsive.deviceAdderTouch")
-            ),
-            dom.input({
-              defaultChecked: normalizedViewport.touch,
-              type: "checkbox",
-              ref: input => {
-                this.touchInput = input;
-              },
-            })
-          )
         ),
-      ),
-      dom.button(
-        {
-          id: "device-adder-save",
-          onClick: this.onDeviceAdderSave,
-        },
-        getStr("responsive.deviceAdderSave")
+        dom.button(
+          {
+            id: "device-adder-save",
+            onClick: this.onDeviceAdderSave,
+          },
+          getStr("responsive.deviceAdderSave")
+        )
       )
     );
   }
 }
 
 module.exports = DeviceAdder;

--- a/devtools/client/responsive.html/components/DeviceModal.js
+++ b/devtools/client/responsive.html/components/DeviceModal.js
@@ -128,101 +128,94 @@ class DeviceModal extends PureComponent 
     } = this;
 
     const sortedDevices = {};
     for (const type of devices.types) {
       sortedDevices[type] = Object.assign([], devices[type])
         .sort((a, b) => a.name.localeCompare(b.name));
     }
 
-    return dom.div(
-      {
-        id: "device-modal-wrapper",
-        className: this.props.devices.isModalOpen ? "opened" : "closed",
-      },
+    return (
       dom.div(
         {
-          className: "device-modal",
+          id: "device-modal-wrapper",
+          className: this.props.devices.isModalOpen ? "opened" : "closed",
         },
-        dom.button({
-          id: "device-close-button",
-          className: "devtools-button",
-          onClick: () => onUpdateDeviceModal(false),
-        }),
+        dom.div({ className: "device-modal" },
+          dom.button({
+            id: "device-close-button",
+            className: "devtools-button",
+            onClick: () => onUpdateDeviceModal(false),
+          }),
+          dom.div({ className: "device-modal-content" },
+            devices.types.map(type => {
+              return dom.div(
+                {
+                  className: `device-type device-type-${type}`,
+                  key: type,
+                },
+                dom.header({ className: "device-header" },
+                  type
+                ),
+                sortedDevices[type].map(device => {
+                  const details = getFormatStr(
+                    "responsive.deviceDetails", device.width, device.height,
+                    device.pixelRatio, device.userAgent, device.touch
+                  );
+
+                  let removeDeviceButton;
+                  if (type == "custom") {
+                    removeDeviceButton = dom.button({
+                      className: "device-remove-button devtools-button",
+                      onClick: () => onRemoveCustomDevice(device),
+                    });
+                  }
+
+                  return dom.label(
+                    {
+                      className: "device-label",
+                      key: device.name,
+                      title: details,
+                    },
+                    dom.input({
+                      className: "device-input-checkbox",
+                      type: "checkbox",
+                      value: device.name,
+                      checked: this.state[device.name],
+                      onChange: this.onDeviceCheckboxChange,
+                    }),
+                    dom.span(
+                      {
+                        className: "device-name",
+                      },
+                      device.name
+                    ),
+                    removeDeviceButton
+                  );
+                })
+              );
+            })
+          ),
+          DeviceAdder({
+            devices,
+            viewportTemplate: deviceAdderViewportTemplate,
+            onAddCustomDevice,
+          }),
+          dom.button(
+            {
+              id: "device-submit-button",
+              onClick: this.onDeviceModalSubmit,
+            },
+            getStr("responsive.done")
+          )
+        ),
         dom.div(
           {
-            className: "device-modal-content",
-          },
-          devices.types.map(type => {
-            return dom.div(
-              {
-                className: `device-type device-type-${type}`,
-                key: type,
-              },
-              dom.header(
-                {
-                  className: "device-header",
-                },
-                type
-              ),
-              sortedDevices[type].map(device => {
-                const details = getFormatStr(
-                  "responsive.deviceDetails", device.width, device.height,
-                  device.pixelRatio, device.userAgent, device.touch
-                );
-
-                let removeDeviceButton;
-                if (type == "custom") {
-                  removeDeviceButton = dom.button({
-                    className: "device-remove-button devtools-button",
-                    onClick: () => onRemoveCustomDevice(device),
-                  });
-                }
-
-                return dom.label(
-                  {
-                    className: "device-label",
-                    key: device.name,
-                    title: details,
-                  },
-                  dom.input({
-                    className: "device-input-checkbox",
-                    type: "checkbox",
-                    value: device.name,
-                    checked: this.state[device.name],
-                    onChange: this.onDeviceCheckboxChange,
-                  }),
-                  dom.span(
-                    {
-                      className: "device-name",
-                    },
-                    device.name
-                  ),
-                  removeDeviceButton
-                );
-              })
-            );
-          })
-        ),
-        DeviceAdder({
-          devices,
-          viewportTemplate: deviceAdderViewportTemplate,
-          onAddCustomDevice,
-        }),
-        dom.button(
-          {
-            id: "device-submit-button",
-            onClick: this.onDeviceModalSubmit,
-          },
-          getStr("responsive.done")
+            className: "modal-overlay",
+            onClick: () => onUpdateDeviceModal(false),
+          }
         )
-      ),
-      dom.div(
-        {
-          className: "modal-overlay",
-          onClick: () => onUpdateDeviceModal(false),
-        }
       )
     );
   }
 }
 
 module.exports = DeviceModal;

--- a/devtools/client/responsive.html/components/DevicePixelRatioMenu.js
+++ b/devtools/client/responsive.html/components/DevicePixelRatioMenu.js
@@ -17,19 +17,19 @@ loader.lazyRequireGetter(this, "showMenu
 
 const PIXEL_RATIO_PRESET = [1, 2, 3];
 
 class DevicePixelRatioMenu extends PureComponent {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
       displayPixelRatio: Types.pixelRatio.value.isRequired,
+      onChangePixelRatio: PropTypes.func.isRequired,
       selectedDevice: PropTypes.string.isRequired,
       selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
-      onChangePixelRatio: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onShowDevicePixelMenu = this.onShowDevicePixelMenu.bind(this);
   }
 

--- a/devtools/client/responsive.html/components/DeviceSelector.js
+++ b/devtools/client/responsive.html/components/DeviceSelector.js
@@ -12,37 +12,37 @@ const { getStr } = require("../utils/l10
 const Types = require("../types");
 
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
 
 class DeviceSelector extends PureComponent {
   static get propTypes() {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
-      selectedDevice: PropTypes.string.isRequired,
-      viewportId: PropTypes.number.isRequired,
       onChangeDevice: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
       onUpdateDeviceModal: PropTypes.func.isRequired,
+      selectedDevice: PropTypes.string.isRequired,
+      viewportId: PropTypes.number.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onShowDeviceMenu = this.onShowDeviceMenu.bind(this);
   }
 
   onShowDeviceMenu(event) {
     const {
       devices,
-      selectedDevice,
-      viewportId,
       onChangeDevice,
       onResizeViewport,
       onUpdateDeviceModal,
+      selectedDevice,
+      viewportId,
     } = this.props;
 
     const menuItems = [];
 
     for (const type of devices.types) {
       for (const device of devices[type]) {
         if (device.displayed) {
           menuItems.push({

--- a/devtools/client/responsive.html/components/ResizableViewport.js
+++ b/devtools/client/responsive.html/components/ResizableViewport.js
@@ -17,23 +17,23 @@ const Types = require("../types");
 
 const VIEWPORT_MIN_WIDTH = Constants.MIN_VIEWPORT_DIMENSION;
 const VIEWPORT_MIN_HEIGHT = Constants.MIN_VIEWPORT_DIMENSION;
 
 class ResizableViewport extends Component {
   static get propTypes() {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,
-      screenshot: PropTypes.shape(Types.screenshot).isRequired,
-      swapAfterMount: PropTypes.bool.isRequired,
-      viewport: PropTypes.shape(Types.viewport).isRequired,
       onBrowserMounted: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
+      screenshot: PropTypes.shape(Types.screenshot).isRequired,
+      swapAfterMount: PropTypes.bool.isRequired,
+      viewport: PropTypes.shape(Types.viewport).isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       isResizing: false,

--- a/devtools/client/responsive.html/components/SettingsMenu.js
+++ b/devtools/client/responsive.html/components/SettingsMenu.js
@@ -13,33 +13,33 @@ const { getStr } = require("../utils/l10
 const Types = require("../types");
 
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
 
 class SettingsMenu extends PureComponent {
   static get propTypes() {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,
-      reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
       onChangeReloadCondition: PropTypes.func.isRequired,
       onToggleLeftAlignment: PropTypes.func.isRequired,
+      reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onToggleSettingMenu = this.onToggleSettingMenu.bind(this);
   }
 
   onToggleSettingMenu(event) {
     const {
       leftAlignmentEnabled,
-      reloadConditions,
       onChangeReloadCondition,
       onToggleLeftAlignment,
+      reloadConditions,
     } = this.props;
 
     const menuItems = [
       {
         id: "toggleLeftAlignment",
         checked: leftAlignmentEnabled,
         label: getStr("responsive.leftAlignViewport"),
         type: "checkbox",

--- a/devtools/client/responsive.html/components/ViewportDimension.js
+++ b/devtools/client/responsive.html/components/ViewportDimension.js
@@ -10,19 +10,19 @@ const PropTypes = require("devtools/clie
 
 const { isKeyIn } = require("../utils/key");
 const { MIN_VIEWPORT_DIMENSION } = require("../constants");
 const Types = require("../types");
 
 class ViewportDimension extends Component {
   static get propTypes() {
     return {
-      viewport: PropTypes.shape(Types.viewport).isRequired,
       onResizeViewport: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
+      viewport: PropTypes.shape(Types.viewport).isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     const { width, height } = props.viewport;
 

--- a/devtools/client/responsive.html/components/Viewports.js
+++ b/devtools/client/responsive.html/components/Viewports.js
@@ -12,34 +12,34 @@ const PropTypes = require("devtools/clie
 const ResizableViewport = createFactory(require("./ResizableViewport"));
 
 const Types = require("../types");
 
 class Viewports extends Component {
   static get propTypes() {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,
-      screenshot: PropTypes.shape(Types.screenshot).isRequired,
-      viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
       onBrowserMounted: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
+      screenshot: PropTypes.shape(Types.screenshot).isRequired,
+      viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
     };
   }
 
   render() {
     const {
       leftAlignmentEnabled,
-      screenshot,
-      viewports,
       onBrowserMounted,
       onContentResize,
       onRemoveDeviceAssociation,
       onResizeViewport,
+      screenshot,
+      viewports,
     } = this.props;
 
     const viewportSize = window.getViewportSize();
     // The viewport may not have been created yet. Default to justify-content: center
     // for the container.
     let justifyContent = "center";
 
     // If the RDM viewport is bigger than the window's inner width, set the container's
@@ -63,23 +63,23 @@ class Viewports extends Component {
           {
             id: "viewports",
             className: leftAlignmentEnabled ? "left-aligned" : "",
           },
           viewports.map((viewport, i) => {
             return ResizableViewport({
               key: viewport.id,
               leftAlignmentEnabled,
-              screenshot,
-              swapAfterMount: i == 0,
-              viewport,
               onBrowserMounted,
               onContentResize,
               onRemoveDeviceAssociation,
               onResizeViewport,
+              screenshot,
+              swapAfterMount: i == 0,
+              viewport,
             });
           })
         )
       )
     );
   }
 }
 

--- a/dom/base/test/test_bug574596.html
+++ b/dom/base/test/test_bug574596.html
@@ -37,16 +37,17 @@ var dragLinkText = [[
   { type:"text/_moz_htmlcontext",   data:"", eqTest:ignoreFunc },
   { type:"text/_moz_htmlinfo",      data:"", eqTest:ignoreFunc },
   { type:"text/html",               data:'<div id="link1"><a href="http://www.mozilla.org/">link1</a></div>' },
   { type:"text/plain",              data:"http://www.mozilla.org/" }
 ]];
 
 
 function dumpTransfer(dataTransfer,expect) {
+  dataTransfer = SpecialPowers.wrap(dataTransfer);
   dtData = dataTransfer.mozItemCount + "items:\n";
   for (var i = 0; i < dataTransfer.mozItemCount; i++) {
     var dtTypes = dataTransfer.mozTypesAt(i);
     for (var j = 0; j < dtTypes.length; j++) {
       var actualData = dataTransfer.mozGetDataAt(dtTypes[j],i)
       if (expect && expect[i] && expect[i][j]) {
         if (expect[i][j].eqTest)
           dtData += expect[i][j].eqTest(actualData,expect[i][j].data) ? "ok" : "fail";

--- a/dom/events/DataTransfer.cpp
+++ b/dom/events/DataTransfer.cpp
@@ -35,16 +35,18 @@
 #include "mozilla/dom/Directory.h"
 #include "mozilla/dom/Element.h"
 #include "mozilla/dom/FileList.h"
 #include "mozilla/dom/BindingUtils.h"
 #include "mozilla/dom/OSFileSystem.h"
 #include "mozilla/dom/Promise.h"
 #include "nsNetUtil.h"
 
+#define MOZ_CALLS_ENABLED_PREF "dom.datatransfer.mozAtAPIs"
+
 namespace mozilla {
 namespace dom {
 
 NS_IMPL_CYCLE_COLLECTION_CLASS(DataTransfer)
 
 NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN(DataTransfer)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mParent)
   NS_IMPL_CYCLE_COLLECTION_UNLINK(mItems)
@@ -1518,10 +1520,27 @@ DataTransfer::SetMode(DataTransfer::Mode
 {
   if (!PrefProtected() && aMode == Mode::Protected) {
     mMode = Mode::ReadOnly;
   } else {
     mMode = aMode;
   }
 }
 
+/* static */
+bool
+DataTransfer::MozAtAPIsEnabled(JSContext* aCx, JSObject* aObj /*unused*/)
+{
+  // Read the pref
+  static bool sPrefCached = false;
+  static bool sPrefCacheValue = false;
+
+  if (!sPrefCached) {
+    sPrefCached = true;
+    Preferences::AddBoolVarCache(&sPrefCacheValue, MOZ_CALLS_ENABLED_PREF);
+  }
+
+  // We can expose moz* APIs if we are chrome code or if pref is enabled
+  return nsContentUtils::IsSystemCaller(aCx) || sPrefCacheValue;
+}
+
 } // namespace dom
 } // namespace mozilla

--- a/dom/events/DataTransfer.h
+++ b/dom/events/DataTransfer.h
@@ -423,16 +423,21 @@ public:
   //
   // If kFileMime is supported, then it will be placed either at
   // index 0 or at index 1 in aResult
   static void
   GetExternalClipboardFormats(const int32_t& aWhichClipboard,
                               const bool& aPlainTextOnly,
                               nsTArray<nsCString>* aResult);
 
+  // Returns true if moz* APIs should be exposed (true for chrome code or if
+  // dom.datatransfer.moz pref is enabled).
+  // The affected moz* APIs are mozItemCount, mozTypesAt, mozClearDataAt, mozSetDataAt, mozGetDataAt
+  static bool MozAtAPIsEnabled(JSContext* cx, JSObject* obj);
+
 protected:
 
   // caches text and uri-list data formats that exist in the drag service or
   // clipboard for retrieval later.
   nsresult CacheExternalData(const char* aFormat, uint32_t aIndex,
                              nsIPrincipal* aPrincipal, bool aHidden);
 
   // caches the formats that exist in the drag service that were added by an

--- a/dom/events/test/test_DataTransferItemList.html
+++ b/dom/events/test/test_DataTransferItemList.html
@@ -1,21 +1,21 @@
 <html>
 <head>
-  <title>Tests for the DatTransferItemList object</title>
+  <title>Tests for the DataTransferItemList object</title>
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/AddTask.js"></script>
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/ChromeUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
 </head>
 <body style="height: 300px; overflow: auto;">
 <p id="display"> </p>
 <img id="image" draggable="true" src="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%18%00%00%00%18%02%03%00%00%00%9D%19%D5k%00%00%00%04gAMA%00%00%B1%8F%0B%FCa%05%00%00%00%0CPLTE%FF%FF%FF%FF%FF%FF%F7%DC%13%00%00%00%03%80%01X%00%00%00%01tRNS%08N%3DPT%00%00%00%01bKGD%00%88%05%1DH%00%00%00%09pHYs%00%00%0B%11%00%00%0B%11%01%7Fd_%91%00%00%00%07tIME%07%D2%05%0C%14%0C%0D%D8%3F%1FQ%00%00%00%5CIDATx%9C%7D%8E%CB%09%C0%20%10D%07r%B7%20%2F%E9wV0%15h%EA%D9%12D4%BB%C1x%CC%5C%1E%0C%CC%07%C0%9C0%9Dd7()%C0A%D3%8D%E0%B8%10%1DiCHM%D0%AC%D2d%C3M%F1%B4%E7%FF%10%0BY%AC%25%93%CD%CBF%B5%B2%C0%3Alh%CD%AE%13%DF%A5%F7%E0%03byW%09A%B4%F3%E2%00%00%00%00IEND%AEB%60%82">
-<div id="over" "style="width: 100px; height: 100px; border: 2px black dashed;">
+<div id="over" style="width: 100px; height: 100px; border: 2px black dashed;">
   drag over here
 </div>
 
 <script>
   function spin() {
     // Defer to the event loop twice to wait for any events to be flushed out.
     return new Promise(function(a) {
       SimpleTest.executeSoon(function() {

--- a/dom/events/test/test_bug1264380.html
+++ b/dom/events/test/test_bug1264380.html
@@ -25,17 +25,17 @@ function runTests()
   target.href = "http://www.mozilla.org/";
   shadow.appendChild(target);
 
   let dataTransfer;
   let trapDrag = function(event) {
     ok(true, "Got dragstart event");
     dataTransfer = event.dataTransfer;
     ok(dataTransfer, "DataTransfer object is available.");
-    is(dataTransfer.mozItemCount, 1, "initial link item count");
+    is(SpecialPowers.wrap(dataTransfer).mozItemCount, 1, "initial link item count");
     is(dataTransfer.getData("text/uri-list"), "http://www.mozilla.org/", "link text/uri-list");
     is(dataTransfer.getData("text/plain"), "http://www.mozilla.org/", "link text/plain");
   }
 
   ok(!dragService.getCurrentSession(), "There shouldn't be a drag session!");
   iframeWin.addEventListener("dragstart", trapDrag, true);
   synthesizeMouse(target, 2, 2, { type: "mousedown" }, iframeWin);
   synthesizeMouse(target, 11, 11, { type: "mousemove" }, iframeWin);

--- a/dom/events/test/test_dragstart.html
+++ b/dom/events/test/test_dragstart.html
@@ -36,20 +36,16 @@ function afterDragTests()
   // be read only.
   ok(gDataTransfer instanceof DataTransfer, "DataTransfer after dragstart event");
   checkTypes(gDataTransfer, [], 0, "after dragstart event");
 
   expectError(() => gDataTransfer.setData("text/plain", "Some Text"),
               "NoModificationAllowedError", "setData when read only");
   expectError(() => gDataTransfer.clearData("text/plain"),
               "NoModificationAllowedError", "clearData when read only");
-  expectError(() => gDataTransfer.mozSetDataAt("text/plain", "Some Text", 0),
-              "NoModificationAllowedError", "setDataAt when read only");
-  expectError(() => gDataTransfer.mozClearDataAt("text/plain", 0),
-              "NoModificationAllowedError", "clearDataAt when read only");
   expectError(() => gDataTransfer.addElement(draggable),
               "NoModificationAllowedError", "addElement when read only");
 
   var evt = document.createEvent("dragevent");
   ok(evt instanceof DragEvent, "synthetic dragevent class")
   ok(evt instanceof MouseEvent, "synthetic event inherits from MouseEvent")
   evt.initDragEvent("dragstart", true, true, window, 1, 40, 35, 20, 15,
                     false, true, false, false, 0, null, null);
@@ -125,33 +121,37 @@ function doDragStartSelection(event)
 
   // text/unicode and Text are available for compatibility. They retrieve the
   // text/plain data
   is(dt.getData("text/unicode"), "This is a draggable bit of text.", "initial selection text/unicode");
   is(dt.getData("Text"), "This is a draggable bit of text.", "initial selection Text");
   is(dt.getData("TEXT"), "This is a draggable bit of text.", "initial selection TEXT");
   is(dt.getData("text/UNICODE"), "This is a draggable bit of text.", "initial selection text/UNICODE"); 
 
-  is(dt.mozItemCount, 1, "initial selection item count");
+  is(SpecialPowers.wrap(dt).mozItemCount, 1, "initial selection item count");
 
   dt.clearData("text/plain");
   dt.clearData("text/html");
   dt.clearData("text/_moz_htmlinfo");
   dt.clearData("text/_moz_htmlcontext");
 
   test_DataTransfer(dt);
   setTimeout(afterDragTests, 0);
 }
 
 function test_DataTransfer(dt)
 {
-  is(dt.mozItemCount, 0, "empty itemCount");
+  is(SpecialPowers.wrap(dt).mozItemCount, 0, "empty itemCount");
 
   var types = dt.types;
   ok(Array.isArray(types), "empty types is an Array");
+  // The above test fails if we have SpecialPowers.wrap(dt).types instead of dt.types
+  // because chrome consumers get the 'ReturnValueNeedsContainsHack'.
+  // So wrap with special powers after the test
+  dt = SpecialPowers.wrap(dt);
   checkTypes(dt, [], 0, "empty");
   is(dt.getData("text/plain"), "", "empty data is empty");
 
   // calling setDataAt requires an index that is 0 <= index <= dt.itemCount
   expectError(() => dt.mozSetDataAt("text/plain", "Some Text", 1),
               "IndexSizeError", "setDataAt index too high");
 
   is(dt.mozUserCancelled, false, "userCancelled");
@@ -311,30 +311,28 @@ function test_DataTransfer(dt)
   checkOneDataItem(dt, ["text/plain", "text/html"],
                    ["Changed Second Item", "<em>Second Item</em>"], 1, "changed with setData item at index 1");
 
   dt.mozSetDataAt("application/-moz-node", "draggable", 2);
   is(dt.mozItemCount, 3, "setDataAt node itemCount");
   checkOneDataItem(dt, ["application/-moz-node"], ["draggable"], 2, "setDataAt node item at index 2");
 
   // Try to add and then remove a non-string type to the DataTransfer and ensure
-  // that the type appears in DataTransfer.types. These calls need to be called
-  // with SpecialPowers.wrap(), as adding and removing non-string/file types to
-  // DataTransfer is chrome-only.
+  // that the type appears in DataTransfer.types.
   {
-    SpecialPowers.wrap(dt).mozSetDataAt("application/-x-body", document.body, 0);
+    dt.mozSetDataAt("application/-x-body", document.body, 0);
     let found = false;
     for (let i = 0; i < dt.types.length; ++i) {
       if (dt.types[i] == "application/-x-body") {
         found = true;
         break;
       }
     }
     ok(found, "Data should appear in datatransfer.types despite having a non-string type");
-    SpecialPowers.wrap(dt).mozClearDataAt("application/-x-body", 0);
+    dt.mozClearDataAt("application/-x-body", 0);
   }
 
   dt.mozClearDataAt("text/html", 1);
   is(dt.mozItemCount, 3, "clearDataAt itemCount");
   checkOneDataItem(dt, ["text/plain", "text/html"],
                    ["First Item", "Changed with setData"], 0, "clearDataAt item at index 0");
   checkOneDataItem(dt, ["text/plain"], ["Changed Second Item"], 1, "clearDataAt item at index 1");
 
@@ -414,48 +412,48 @@ function test_DataTransfer(dt)
 }
 
 function doDragStartLink(event)
 {
   var dt = event.dataTransfer;
   checkTypes(dt, ["text/x-moz-url", "text/x-moz-url-data", "text/x-moz-url-desc", "text/uri-list",
                   "text/_moz_htmlcontext", "text/_moz_htmlinfo", "text/html", "text/plain"], 0, "initial link");
 
-  is(dt.mozItemCount, 1, "initial link item count");
+  is(SpecialPowers.wrap(dt).mozItemCount, 1, "initial link item count");
   is(dt.getData("text/uri-list"), "http://www.mozilla.org/", "link text/uri-list");
   is(dt.getData("text/plain"), "http://www.mozilla.org/", "link text/plain");
 
   event.preventDefault();
 
   gExtraDragTests++;
 }
 
 function doDragStartImage(event)
 {
   var dataurl = $("image").src;
 
   var dt = event.dataTransfer;
   checkTypes(dt, ["text/x-moz-url", "text/x-moz-url-data", "text/x-moz-url-desc", "text/uri-list",
                   "text/_moz_htmlcontext", "text/_moz_htmlinfo", "text/html", "text/plain"], 0, "initial image");
 
-  is(dt.mozItemCount, 1, "initial image item count");
+  is(SpecialPowers.wrap(dt).mozItemCount, 1, "initial image item count");
   is(dt.getData("text/uri-list"), dataurl, "image text/uri-list");
   is(dt.getData("text/plain"), dataurl, "image text/plain");
 
   event.preventDefault();
 
   gExtraDragTests++;
 }
 
 function doDragStartInput(event)
 {
   var dt = event.dataTransfer;
   checkTypes(dt, ["text/plain"], 0, "initial input");
 
-  is(dt.mozItemCount, 1, "initial input item count");
+  is(SpecialPowers.wrap(dt).mozItemCount, 1, "initial input item count");
 //  is(dt.getData("text/plain"), "Text", "input text/plain");
 
 //  event.preventDefault();
 }
 
 function doDragStartSynthetic(event)
 {
   is(event.type, "dragstart", "synthetic dragstart event type");
@@ -506,21 +504,22 @@ function doDragOverSynthetic(event)
 //  Uncomment next two lines once the todo instanceof above is fixed.
 //  dt.setData("text/plain", "Text");
 //  is(dt.getData("text/plain"), "Text", "synthetic dragover data is set after adding");
 }
 
 function onDragStartDraggable(event)
 {
   var dt = event.dataTransfer;
-  ok(dt.mozItemCount == 0 && dt.types.length == 0 && event.originalTarget == gDragInfo.target, gDragInfo.testid);
+  ok(SpecialPowers.wrap(dt).mozItemCount == 0 && dt.types.length == 0 && event.originalTarget == gDragInfo.target, gDragInfo.testid);
 
   gExtraDragTests++;
 }
 
+// Expects dt wrapped in SpecialPowers
 function checkOneDataItem(dt, expectedtypes, expecteddata, index, testid)
 {
   checkTypes(dt, expectedtypes, index, testid);
   for (var f = 0; f < expectedtypes.length; f++) {
     if (index == 0)
       is(dt.getData(expectedtypes[f]), expecteddata[f], testid + " getData " + expectedtypes[f]);
     is(dt.mozGetDataAt(expectedtypes[f], index), expecteddata[f] ? expecteddata[f] : null,
        testid + " getDataAt " + expectedtypes[f]);
@@ -532,23 +531,24 @@ function checkTypes(dt, expectedtypes, i
   if (index == 0) {
     var types = dt.types;
     is(types.length, expectedtypes.length, testid + " types length");
     for (var f = 0; f < expectedtypes.length; f++) {
       is(types[f], expectedtypes[f], testid + " " + types[f] + " check");
     }
   }
 
-  types = dt.mozTypesAt(index);
+  types = SpecialPowers.wrap(dt).mozTypesAt(index);
   is(types.length, expectedtypes.length, testid + " typesAt length");
   for (var f = 0; f < expectedtypes.length; f++) {
     is(types[f], expectedtypes[f], testid + " " + types[f] + " at " + index + " check");
   }
 }
 
+// Expects dt wrapped in SpecialPowers
 function checkURL(dt, url, fullurllist, index, testid)
 {
   is(dt.getData("text/uri-list"), fullurllist, testid + " text/uri-list");
   is(dt.getData("URL"), url, testid + " URL");
   is(dt.mozGetDataAt("text/uri-list", 0), fullurllist, testid + " text/uri-list");
   is(dt.mozGetDataAt("URL", 0), fullurllist, testid + " URL");
 }
 

--- a/dom/media/mediasink/VideoSink.cpp
+++ b/dom/media/mediasink/VideoSink.cpp
@@ -42,16 +42,17 @@ VideoSink::VideoSink(AbstractThread* aTh
                      FrameStatistics& aFrameStats,
                      uint32_t aVQueueSentToCompositerSize)
   : mOwnerThread(aThread)
   , mAudioSink(aAudioSink)
   , mVideoQueue(aVideoQueue)
   , mContainer(aContainer)
   , mProducerID(ImageContainer::AllocateProducerID())
   , mFrameStats(aFrameStats)
+  , mOldDroppedCount(0)
   , mHasVideo(false)
   , mUpdateScheduler(aThread)
   , mVideoQueueSendToCompositorSize(aVQueueSentToCompositerSize)
   , mMinVideoQueueSize(StaticPrefs::MediaRuinAvSyncEnabled() ? 1 : 0)
 #ifdef XP_WIN
   , mHiResTimersRequested(false)
 #endif
 
@@ -459,16 +460,23 @@ VideoSink::RenderVideoFrames(int32_t aMa
 
     VSINK_LOG_V("playing video frame %" PRId64 " (id=%x) (vq-queued=%zu)",
                 frame->mTime.ToMicroseconds(), frame->mFrameID,
                 VideoQueue().GetSize());
   }
 
   if (images.Length() > 0) {
     mContainer->SetCurrentFrames(frames[0]->mDisplay, images);
+    uint32_t droppedCount = mContainer->GetDroppedImageCount();
+    uint32_t dropped = droppedCount - mOldDroppedCount;
+    if (dropped > 0) {
+      mFrameStats.NotifyDecodedFrames({0, 0, dropped});
+      mOldDroppedCount = droppedCount;
+      VSINK_LOG_V("%u video frame discarded by compositor", dropped);
+    }
   }
 }
 
 void
 VideoSink::UpdateRenderedVideoFrames()
 {
   AssertOwnerThread();
   MOZ_ASSERT(mAudioSink->IsPlaying(), "should be called while playing.");

--- a/dom/media/mediasink/VideoSink.h
+++ b/dom/media/mediasink/VideoSink.h
@@ -103,17 +103,18 @@ private:
 
   void MaybeResolveEndPromise();
 
   void AssertOwnerThread() const
   {
     MOZ_ASSERT(mOwnerThread->IsCurrentThreadIn());
   }
 
-  MediaQueue<VideoData>& VideoQueue() const {
+  MediaQueue<VideoData>& VideoQueue() const
+  {
     return mVideoQueue;
   }
 
   const RefPtr<AbstractThread> mOwnerThread;
   RefPtr<MediaSink> mAudioSink;
   MediaQueue<VideoData>& mVideoQueue;
   VideoFrameContainer* mContainer;
 
@@ -126,16 +127,18 @@ private:
 
   RefPtr<GenericPromise> mEndPromise;
   MozPromiseHolder<GenericPromise> mEndPromiseHolder;
   MozPromiseRequestHolder<GenericPromise> mVideoSinkEndRequest;
 
   // The presentation end time of the last video frame which has been displayed.
   TimeUnit mVideoFrameEndTime;
 
+  uint32_t mOldDroppedCount;
+
   // Event listeners for VideoQueue
   MediaEventListener mPushListener;
   MediaEventListener mFinishListener;
 
   // True if this sink is going to handle video track.
   bool mHasVideo;
 
   // Used to trigger another update of rendered frames in next round.

--- a/dom/media/tests/mochitest/test_peerConnection_stats.html
+++ b/dom/media/tests/mochitest/test_peerConnection_stats.html
@@ -8,30 +8,30 @@
 <script type="application/javascript">
   createHTML({
     bug: "1337525",
     title: "webRtc Stats composition and sanity"
   });
 var statsExpectedByType = {
   "inbound-rtp": {
     expected: ["id", "timestamp", "type", "ssrc", "isRemote", "mediaType",
-      "packetsReceived", "packetsLost", "bytesReceived", "jitter",],
+      "kind", "packetsReceived", "packetsLost", "bytesReceived", "jitter",],
     optional: ["roundTripTime", "remoteId", "nackCount",],
     localVideoOnly: ["discardedPackets", "framerateStdDev", "framerateMean",
       "bitrateMean", "bitrateStdDev", "firCount", "pliCount", "framesDecoded",],
     unimplemented: ["mediaTrackId", "transportId", "codecId",
       "packetsDiscarded", "associateStatsId",
       "sliCount", "qpSum", "packetsRepaired", "fractionLost",
       "burstPacketsLost", "burstLossCount", "burstDiscardCount",
       "gapDiscardRate", "gapLossRate",],
     deprecated: ["mozRtt"],
   },
   "outbound-rtp": {
     expected: ["id", "timestamp", "type", "ssrc", "isRemote", "mediaType",
-      "packetsSent", "bytesSent", "remoteId",],
+      "kind", "packetsSent", "bytesSent", "remoteId",],
     optional: ["remoteId", "nackCount",],
     localVideoOnly: ["droppedFrames", "bitrateMean", "bitrateStdDev",
       "framerateMean", "framerateStdDev", "framesEncoded", "firCount",
       "pliCount",],
     unimplemented: ["mediaTrackId", "transportId", "codecId",
       "sliCount", "qpSum", "targetBitrate",],
     deprecated: [],
   },
@@ -143,20 +143,26 @@ var pedanticChecks = report => {
       //
 
       // SSRC
       ok(stat.ssrc, stat.type + ".ssrc has a value");
 
       // isRemote
       ok(stat.isRemote !== undefined, stat.type + ".isRemote exists.");
 
-      // mediaType
+      // kind
+      ok(["audio", "video"].includes(stat.kind),
+        stat.type + ".kind is 'audio' or 'video'");
+
+      // mediaType, renamed to kind but remains for backward compability.
       ok(["audio", "video"].includes(stat.mediaType),
         stat.type + ".mediaType is 'audio' or 'video'");
 
+      ok(stat.kind == stat.mediaType, "kind equals legacy mediaType");
+
       // remote id
       if (stat.remoteId) {
         ok(report.has(stat.remoteId), "remoteId exists in report.");
         is(report.get(stat.remoteId).ssrc, stat.ssrc,
           "remote ssrc and local ssrc match.");
         is(report.get(stat.remoteId).remoteId, stat.id,
           "remote object has local object as it's own remote object.");
       }
@@ -164,17 +170,17 @@ var pedanticChecks = report => {
       // nackCount
       if (!stat.inner.isRemote) {
         ok(stat.nackCount >= 0, stat.type + ".nackCount is sane.");
       } else {
         is(stat.nackCount, undefined, stat.type
           + ".nackCount is only set when isRemote is false");
       }
 
-      if (!stat.inner.isRemote && stat.inner.mediaType == "video") {
+      if (!stat.inner.isRemote && stat.inner.kind == "video") {
         // firCount
         ok(stat.firCount >= 0 && stat.firCount < 100,
           stat.type + ".firCount is a sane number for a short test. value="
           + stat.firCount);
 
         // pliCount
         ok(stat.pliCount >= 0 && stat.pliCount < 100,
           stat.type + ".pliCount is a sane number for a short test. value="
@@ -200,17 +206,17 @@ var pedanticChecks = report => {
         + stat.bytesReceived);
 
       // packetsLost
       ok(stat.packetsLost < 100,
         stat.type + ".packetsLost is a sane number for a short test. value="
         + stat.packetsLost);
 
       // This should be much lower for audio, TODO: Bug 1330575
-      let expectedJitter = stat.mediaType == "video" ? 0.5 : 1;
+      let expectedJitter = stat.kind == "video" ? 0.5 : 1;
       // jitter
       ok(stat.jitter < expectedJitter,
         stat.type + ".jitter is sane number for a local only test. value="
         + stat.jitter);
 
       // packetsDiscarded
       // special exception for, TODO: Bug 1335967
       // if (!stat.inner.isRemote && stat.discardedPackets !== undefined) {
@@ -235,30 +241,30 @@ var pedanticChecks = report => {
       } else {
         is(stat.roundTripTime, undefined, stat.type
           + ".roundTripTime is only set when isRemote is true");
       }
 
       //
       // Local video only stats
       //
-      if (stat.inner.isRemote || stat.inner.mediaType != "video") {
+      if (stat.inner.isRemote || stat.inner.kind != "video") {
         expectations.localVideoOnly.forEach(field => {
           if (stat.inner.isRemote) {
             ok(stat[field] === undefined, stat.type + " does not have field "
               + field + " when isRemote is true");
-          } else { // mediaType != video
+          } else { // kind != video
             ok(stat[field] === undefined, stat.type + " does not have field "
-              + field + " when mediaType is not 'video'");
+              + field + " when kind is not 'video'");
           }
         });
       } else {
         expectations.localVideoOnly.forEach(field => {
           ok(stat.inner[field] !== undefined, stat.type + " has field " + field
-            + " when mediaType is video");
+            + " when kind is video");
         });
         // discardedPackets
         ok(stat.discardedPackets < 100, stat.type
           + ".discardedPackets is a sane number for a short test. value="
           + stat.discardedPackets);
         // framesDecoded
         ok(stat.framesDecoded > 0 && stat.framesDecoded < 1000000, stat.type
           + ".framesDecoded is a sane number for a short test. value="
@@ -316,30 +322,30 @@ var pedanticChecks = report => {
 
       //
       // Optional fields
       //
 
       //
       // Local video only stats
       //
-      if (stat.inner.isRemote || stat.inner.mediaType != "video") {
+      if (stat.inner.isRemote || stat.inner.kind != "video") {
         expectations.localVideoOnly.forEach(field => {
           if (stat.inner.isRemote) {
             ok(stat[field] === undefined, stat.type + " does not have field "
               + field + " when isRemote is true");
-          } else { // mediaType != video
+          } else { // kind != video
             ok(stat[field] === undefined, stat.type + " does not have field "
-              + field + " when mediaType is not 'video'");
+              + field + " when kind is not 'video'");
           }
         });
       } else {
         expectations.localVideoOnly.forEach(field => {
           ok(stat.inner[field] !== undefined, stat.type + " has field " + field
-            + " when mediaType is video and isRemote is false");
+            + " when kind is video and isRemote is false");
         });
 
         // bitrateMean
         if (stat.bitrateMean !== undefined) {
           // TODO: uncomment when Bug 1341533 lands
           // ok(stat.bitrateMean >= 0 && stat.bitrateMean < 2 ** 25,
           //   stat.type + ".bitrateMean is sane. value="
           //   + stat.bitrateMean);

--- a/dom/media/webrtc/WebrtcGlobal.h
+++ b/dom/media/webrtc/WebrtcGlobal.h
@@ -287,16 +287,17 @@ static void WriteRTCRtpStreamStats(
     WriteParam(aMsg, aParam.mBitrateMean);
     WriteParam(aMsg, aParam.mBitrateStdDev);
     WriteParam(aMsg, aParam.mCodecId);
     WriteParam(aMsg, aParam.mFramerateMean);
     WriteParam(aMsg, aParam.mFramerateStdDev);
     WriteParam(aMsg, aParam.mIsRemote);
     WriteParam(aMsg, aParam.mMediaTrackId);
     WriteParam(aMsg, aParam.mMediaType);
+    WriteParam(aMsg, aParam.mKind);
     WriteParam(aMsg, aParam.mRemoteId);
     WriteParam(aMsg, aParam.mSsrc);
     WriteParam(aMsg, aParam.mTransportId);
 }
 
 static bool ReadRTCRtpStreamStats(
               const Message* aMsg, PickleIterator* aIter,
               mozilla::dom::RTCRtpStreamStats* aResult)
@@ -304,16 +305,17 @@ static bool ReadRTCRtpStreamStats(
   if (!ReadParam(aMsg, aIter, &(aResult->mBitrateMean)) ||
       !ReadParam(aMsg, aIter, &(aResult->mBitrateStdDev)) ||
       !ReadParam(aMsg, aIter, &(aResult->mCodecId)) ||
       !ReadParam(aMsg, aIter, &(aResult->mFramerateMean)) ||
       !ReadParam(aMsg, aIter, &(aResult->mFramerateStdDev)) ||
       !ReadParam(aMsg, aIter, &(aResult->mIsRemote)) ||
       !ReadParam(aMsg, aIter, &(aResult->mMediaTrackId)) ||
       !ReadParam(aMsg, aIter, &(aResult->mMediaType)) ||
+      !ReadParam(aMsg, aIter, &(aResult->mKind)) ||
       !ReadParam(aMsg, aIter, &(aResult->mRemoteId)) ||
       !ReadParam(aMsg, aIter, &(aResult->mSsrc)) ||
       !ReadParam(aMsg, aIter, &(aResult->mTransportId))) {
     return false;
   }
 
   return true;
 }

--- a/dom/media/webrtc/moz.build
+++ b/dom/media/webrtc/moz.build
@@ -83,11 +83,8 @@ FINAL_LIBRARY = 'xul'
 
 if CONFIG['CC_TYPE'] in ('msvc', 'clang-cl'):
     CXXFLAGS += [
         '-wd4275', # non dll-interface class used as base for dll-interface class
         '-wd4312', # This is intended as a temporary hack to support building with VS2015
                    # 'reinterpret_cast': conversion from 'DWORD' to 'HANDLE' of greater size
     ]
     DEFINES['__PRETTY_FUNCTION__'] = '__FUNCSIG__'
-
-if CONFIG['MOZ_ASAN'] and CONFIG['CC_TYPE'] == 'clang-cl':
-    AllowCompilerWarnings()  # workaround for bug 1306642

--- a/dom/serviceworkers/ServiceWorkerPrivate.cpp
+++ b/dom/serviceworkers/ServiceWorkerPrivate.cpp
@@ -1936,17 +1936,17 @@ ServiceWorkerPrivate::TerminateWorker()
     if (DOMPrefs::ServiceWorkersTestingEnabled()) {
       nsCOMPtr<nsIObserverService> os = services::GetObserverService();
       if (os) {
         os->NotifyObservers(nullptr, "service-worker-shutdown", nullptr);
       }
     }
 
     Unused << NS_WARN_IF(!mWorkerPrivate->Cancel());
-    mWorkerPrivate = nullptr;
+    RefPtr<WorkerPrivate> workerPrivate(mWorkerPrivate.forget());
     mSupportsArray.Clear();
 
     // Any pending events are never going to fire on this worker.  Cancel
     // them so that intercepted channels can be reset and other resources
     // cleaned up.
     nsTArray<RefPtr<WorkerRunnable>> pendingEvents;
     mPendingFunctionalEvents.SwapElements(pendingEvents);
     for (uint32_t i = 0; i < pendingEvents.Length(); ++i) {

--- a/dom/tests/mochitest/general/mochitest.ini
+++ b/dom/tests/mochitest/general/mochitest.ini
@@ -85,16 +85,17 @@ subsuite = clipboard
 [test_bug1434273.html]
 [test_clientRects.html]
 [test_clipboard_disallowed.html]
 [test_clipboard_events.html]
 subsuite = clipboard
 [test_consoleAPI.html]
 [test_contentViewer_overrideDPPX.html]
 [test_CCW_optimization.html]
+[test_datatransfer_disallowed.html]
 [test_devicePixelRatio_with_zoom.html]
 [test_DOMMatrix.html]
 [test_domWindowUtils.html]
 [test_domWindowUtils_scrollbarSize.html]
 [test_domWindowUtils_scrollXY.html]
 [test_donottrack.html]
 [test_focus_scrollchildframe.html]
 [test_focus_legend_noparent.html]

--- a/dom/tests/mochitest/general/test_clipboard_disallowed.html
+++ b/dom/tests/mochitest/general/test_clipboard_disallowed.html
@@ -19,41 +19,33 @@ function doTest()
 }
 
 function checkAllowed(event)
 {
   let clipboardData = event.clipboardData;
 
   let exception;
   try {
-    clipboardData.mozSetDataAt("text/customdata", document.getElementById("input"), 0);
-  } catch(ex) {
-    exception = ex;
-  }
-  is(String(exception).indexOf("SecurityError"), 0, "Cannot set non-string");
-
-  exception = null;
-  try {
-    clipboardData.mozSetDataAt("application/x-moz-file", "Test", 0);
+    clipboardData.setData("application/x-moz-file", "Test");
   } catch(ex) {
     exception = ex;
   }
   is(String(exception).indexOf("SecurityError"), 0, "Cannot set file");
 
   exception = null;
   try {
-    clipboardData.mozSetDataAt("application/x-moz-file-promise", "Test", 0);
+    clipboardData.setData("application/x-moz-file-promise", "Test");
   } catch(ex) {
     exception = ex;
   }
   is(String(exception).indexOf("SecurityError"), 0, "Cannot set file promise");
 
   exception = null;
   try {
-    clipboardData.mozSetDataAt("application/something", "This is data", 0);
+    clipboardData.setData("application/something", "This is data");
   } catch(ex) {
     exception = ex;
   }
   is(exception, null, "Can set custom data to a string");
   SimpleTest.finish();
 }
 
 SimpleTest.waitForExplicitFinish();

--- a/dom/tests/mochitest/general/test_clipboard_events.html
+++ b/dom/tests/mochitest/general/test_clipboard_events.html
@@ -297,17 +297,17 @@ add_task(async function test_input_cut_d
 
   // Cut using event.dataTransfer. The event is not cancelled so the default
   // cut should occur
   selectContentInput();
   contentInput.oncut = function(event) {
     ok(event instanceof ClipboardEvent, "cut event is a ClipboardEvent");
     ok(event.clipboardData instanceof DataTransfer, "cut event dataTransfer is a DataTransfer");
     is(event.target, contentInput, "cut event target");
-    is(event.clipboardData.mozItemCount, 0, "cut event mozItemCount");
+    is(SpecialPowers.wrap(event.clipboardData).mozItemCount, 0, "cut event mozItemCount");
     is(event.clipboardData.getData("text/plain"), "", "cut event getData");
     event.clipboardData.setData("text/plain", "This is some dataTransfer text");
     cachedCutData = event.clipboardData;
   };
   try {
     await putOnClipboard("INPUT TEXT", () => {
       synthesizeKey("x", {accelKey: 1});
     }, "cut using dataTransfer on plaintext editor set clipboard correctly");
@@ -344,17 +344,17 @@ add_task(async function test_input_copy_
   await reset();
 
   // Copy using event.dataTransfer
   selectContentInput();
   contentInput.oncopy = function(event) {
     ok(event instanceof ClipboardEvent, "copy event is a ClipboardEvent");
     ok(event.clipboardData instanceof DataTransfer, "copy event dataTransfer is a DataTransfer");
     is(event.target, contentInput, "copy event target");
-    is(event.clipboardData.mozItemCount, 0, "copy event mozItemCount");
+    is(SpecialPowers.wrap(event.clipboardData).mozItemCount, 0, "copy event mozItemCount");
     is(event.clipboardData.getData("text/plain"), "", "copy event getData");
     event.clipboardData.setData("text/plain", "Copied dataTransfer text");
     cachedCopyData = event.clipboardData;
   };
   try {
     await putOnClipboard("INPUT TEXT", () => {
       synthesizeKey("c", {accelKey: 1});
     }, "copy using dataTransfer on plaintext editor set clipboard correctly");
@@ -389,17 +389,17 @@ add_task(async function test_input_paste
   await reset();
 
   // Paste using event.dataTransfer
   selectContentInput();
   contentInput.onpaste = function(event) {
     ok(event instanceof ClipboardEvent, "paste event is an ClipboardEvent");
     ok(event.clipboardData instanceof DataTransfer, "paste event dataTransfer is a DataTransfer");
     is(event.target, contentInput, "paste event target");
-    is(event.clipboardData.mozItemCount, 1, "paste event mozItemCount");
+    is(SpecialPowers.wrap(event.clipboardData).mozItemCount, 1, "paste event mozItemCount");
     is(event.clipboardData.getData("text/plain"), clipboardInitialValue, "paste event getData");
     cachedPasteData = event.clipboardData;
   };
   try {
     synthesizeKey("v", {accelKey: 1});
     is(getClipboardText(), clipboardInitialValue,
       "paste using dataTransfer on plaintext editor did not modify clipboard contents");
     is(contentInput.value, clipboardInitialValue,
@@ -435,31 +435,31 @@ add_task(async function test_input_copyp
 
   // Cut several types of data and paste it again
   contentInput.value = "This is a line of text";
   contentInput.oncopy = function(event) {
     var cd = event.clipboardData;
     cd.setData("text/plain", "would be a phrase");
 
     var exh = false;
-    try { cd.mozSetDataAt("text/plain", "Text", 1); } catch (ex) { exh = true; }
+    try { SpecialPowers.wrap(cd).mozSetDataAt("text/plain", "Text", 1); } catch (ex) { exh = true; }
     ok(exh, "exception occured mozSetDataAt 1");
     exh = false;
-    try { cd.mozTypesAt(1); } catch (ex) { exh = true; }
+    try { SpecialPowers.wrap(cd).mozTypesAt(1); } catch (ex) { exh = true; }
     ok(exh, "exception occured mozTypesAt 1");
     exh = false;
-    try { cd.mozGetDataAt("text/plain", 1); } catch (ex) { exh = true; }
+    try { SpecialPowers.wrap(cd).mozGetDataAt("text/plain", 1); } catch (ex) { exh = true; }
     ok(exh, "exception occured mozGetDataAt 1");
     exh = false;
     try { cd.mozClearDataAt("text/plain", 1); } catch (ex) { exh = true; }
     ok(exh, "exception occured mozClearDataAt 1");
 
     cd.setData("text/x-moz-url", "http://www.mozilla.org");
-    cd.mozSetDataAt("text/x-custom", "Custom Text with \u0000 null", 0);
-    is(cd.mozItemCount, 1, "mozItemCount after set multiple types");
+    SpecialPowers.wrap(cd).mozSetDataAt("text/x-custom", "Custom Text with \u0000 null", 0);
+    is(SpecialPowers.wrap(cd).mozItemCount, 1, "mozItemCount after set multiple types");
     return false;
   };
 
   try {
     selectContentInput();
 
     await putOnClipboard("would be a phrase", () => {
       synthesizeKey("c", {accelKey: 1});
@@ -468,17 +468,17 @@ add_task(async function test_input_copyp
   finally {
     contentInput.oncopy = null;
   }
 
   contentInput.setSelectionRange(5, 14);
 
   contentInput.onpaste = function(event) {
     var cd = event.clipboardData;
-    is(cd.mozItemCount, 1, "paste after copy multiple types mozItemCount");
+    is(SpecialPowers.wrap(cd).mozItemCount, 1, "paste after copy multiple types mozItemCount");
     is(cd.getData("text/plain"), "would be a phrase", "paste text/plain multiple types");
 
     // Firefox for Android's clipboard code doesn't handle x-moz-url. Therefore
     // disabling the following test. Enable this once bug #840101 is fixed.
     if (!navigator.appVersion.includes("Android")) {
       is(cd.getData("text/x-moz-url"), "http://www.mozilla.org", "paste text/x-moz-url multiple types");
       is(cd.getData("text/x-custom"), "Custom Text with \u0000 null", "paste text/custom multiple types");
     } else {
@@ -635,20 +635,20 @@ function compareSynthetic(event, eventty
   if (step == "during") {
     is(eventtype, expectedData.type, "synthetic " + eventtype + " event fired");
   }
 
   ok(event.clipboardData instanceof DataTransfer, "clipboardData is assigned");
 
   is(event.type, expectedData.type, "synthetic " + eventtype + " event type");
   if (expectedData.data === null) {
-    is(event.clipboardData.mozItemCount, 0, "synthetic " + eventtype + " empty data");
+    is(SpecialPowers.wrap(event.clipboardData).mozItemCount, 0, "synthetic " + eventtype + " empty data");
   }
   else {
-    is(event.clipboardData.mozItemCount, 1, "synthetic " + eventtype + " item count");
+    is(SpecialPowers.wrap(event.clipboardData).mozItemCount, 1, "synthetic " + eventtype + " item count");
     is(event.clipboardData.types.length, 1, "synthetic " + eventtype + " types length");
     is(event.clipboardData.getData(expectedData.dataType), expectedData.data,
        "synthetic " + eventtype + " data");
   }
 
   is(getClipboardText(), "empty", "event does not change the clipboard " + step + " dispatch");
 
   if (step == "during") {
@@ -661,17 +661,17 @@ async function checkCachedDataTransfer(c
 
   await putOnClipboard("Some Clipboard Text", () => { setClipboardText("Some Clipboard Text") },
                        "change clipboard outside of event");
 
   var oldtext = cd.getData("text/plain");
   ok(!oldtext, "clipboard get using " + testprefix);
 
   try {
-    cd.mozSetDataAt("text/plain", "Test Cache Data", 0);
+    SpecialPowers.wrap(cd).mozSetDataAt("text/plain", "Test Cache Data", 0);
   } catch (ex) {}
   ok(!cd.getData("text/plain"), "clipboard set using " + testprefix);
 
   is(getClipboardText(), "Some Clipboard Text", "clipboard not changed using " + testprefix);
 
   try {
     cd.mozClearDataAt("text/plain", 0);
   } catch (ex) {}

new file mode 100644
--- /dev/null
+++ b/dom/tests/mochitest/general/test_datatransfer_disallowed.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for DataTransfer moz* APIs</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<script>
+function run_test()
+{
+  SpecialPowers.pushPrefEnv({"set": [
+    ["dom.datatransfer.moz", false],
+  ]}, function() {
+    let hiddenMethods = ["mozTypesAt", "mozClearDataAt", "mozGetDataAt", "mozSetDataAt", "mozItemCount"];
+    let exposedMethods = Object.getOwnPropertyNames(DataTransfer.prototype);
+    for (var idx in hiddenMethods) {
+      if (exposedMethods.includes(hiddenMethods[idx])) {
+        ok(false, hiddenMethods[idx] + " should not be exposed");
+      } else {
+        ok(true, hiddenMethods[idx] + " was not exposed");
+      }
+    }
+    SimpleTest.finish();
+  });
+}
+
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(run_test);
+</script>

--- a/dom/webidl/DataTransfer.webidl
+++ b/dom/webidl/DataTransfer.webidl
@@ -49,17 +49,17 @@ partial interface DataTransfer {
    * @throws NO_MODIFICATION_ALLOWED_ERR if the item cannot be modified
    */
   [Throws, UseCounter]
   void addElement(Element element);
 
   /**
    * The number of items being dragged.
    */
-  [UseCounter]
+  [Func="DataTransfer::MozAtAPIsEnabled"]
   readonly attribute unsigned long mozItemCount;
 
   /**
    * Sets the drag cursor state. Primarily used to control the cursor during
    * tab drags, but could be expanded to other uses. XXX Currently implemented
    * on Win32 only.
    *
    * Possible values:
@@ -72,34 +72,34 @@ partial interface DataTransfer {
   [UseCounter]
   attribute DOMString mozCursor;
 
   /**
    * Holds a list of the format types of the data that is stored for an item
    * at the specified index. If the index is not in the range from 0 to
    * itemCount - 1, an empty string list is returned.
    */
-  [Throws, NeedsCallerType, UseCounter]
+  [Throws, NeedsCallerType, Func="DataTransfer::MozAtAPIsEnabled"]
   DOMStringList mozTypesAt(unsigned long index);
 
   /**
    * Remove the data associated with the given format for an item at the
    * specified index. The index is in the range from zero to itemCount - 1.
    *
    * If the last format for the item is removed, the entire item is removed,
    * reducing the itemCount by one.
    *
    * If format is empty, then the data associated with all formats is removed.
    * If the format is not found, then this method has no effect.
    *
    * @param format the format to remove
    * @throws NS_ERROR_DOM_INDEX_SIZE_ERR if index is greater or equal than itemCount
    * @throws NO_MODIFICATION_ALLOWED_ERR if the item cannot be modified
    */
-  [Throws, NeedsSubjectPrincipal, UseCounter]
+  [Throws, NeedsSubjectPrincipal, Func="DataTransfer::MozAtAPIsEnabled"]
   void mozClearDataAt(DOMString format, unsigned long index);
 
   /*
    * A data transfer may store multiple items, each at a given zero-based
    * index. setDataAt may only be called with an index argument less than
    * itemCount in which case an existing item is modified, or equal to
    * itemCount in which case a new item is added, and the itemCount is
    * incremented by one.
@@ -113,29 +113,29 @@ partial interface DataTransfer {
    * (which will be converted into a string) or an nsISupports.
    *
    * @param format the format to add
    * @param data the data to add
    * @throws NS_ERROR_NULL_POINTER if the data is null
    * @throws NS_ERROR_DOM_INDEX_SIZE_ERR if index is greater than itemCount
    * @throws NO_MODIFICATION_ALLOWED_ERR if the item cannot be modified
    */
-  [Throws, NeedsSubjectPrincipal, UseCounter]
+  [Throws, NeedsSubjectPrincipal, Func="DataTransfer::MozAtAPIsEnabled"]
   void mozSetDataAt(DOMString format, any data, unsigned long index);
 
   /**
    * Retrieve the data associated with the given format for an item at the
    * specified index, or null if it does not exist. The index should be in the
    * range from zero to itemCount - 1.
    *
    * @param format the format of the data to look up
    * @returns the data of the given format, or null if it doesn't exist.
    * @throws NS_ERROR_DOM_INDEX_SIZE_ERR if index is greater or equal than itemCount
    */
-  [Throws, NeedsSubjectPrincipal, UseCounter]
+  [Throws, NeedsSubjectPrincipal, Func="DataTransfer::MozAtAPIsEnabled"]
   any mozGetDataAt(DOMString format, unsigned long index);
 
   /**
    * Update the drag image. Arguments are the same as setDragImage. This is only
    * valid within the parent chrome process.
    */
   [ChromeOnly]
   void updateDragImage(Element image, long x, long y);

--- a/dom/webidl/RTCStatsReport.webidl
+++ b/dom/webidl/RTCStatsReport.webidl
@@ -24,16 +24,17 @@ dictionary RTCStats {
   DOMHighResTimeStamp timestamp;
   RTCStatsType type;
   DOMString id;
 };
 
 dictionary RTCRtpStreamStats : RTCStats {
   unsigned long ssrc;
   DOMString mediaType;
+  DOMString kind;
   DOMString remoteId;
   boolean isRemote = false;
   DOMString mediaTrackId;
   DOMString transportId;
   DOMString codecId;
 
   // Video encoder/decoder measurements, not present in RTCP case
   double bitrateMean;

--- a/gfx/layers/ImageContainer.cpp
+++ b/gfx/layers/ImageContainer.cpp
@@ -117,16 +117,25 @@ ImageContainerListener::NotifyComposite(
 {
   MutexAutoLock lock(mLock);
   if (mImageContainer) {
     mImageContainer->NotifyComposite(aNotification);
   }
 }
 
 void
+ImageContainerListener::NotifyDropped(uint32_t aDropped)
+{
+  MutexAutoLock lock(mLock);
+  if (mImageContainer) {
+    mImageContainer->NotifyDropped(aDropped);
+  }
+}
+
+void
 ImageContainerListener::ClearImageContainer()
 {
   MutexAutoLock lock(mLock);
   mImageContainer = nullptr;
 }
 
 void
 ImageContainerListener::DropImageClient()
@@ -253,39 +262,17 @@ ImageContainer::SetCurrentImageInternal(
   mGenerationCounter = ++sGenerationCounter;
 
   if (!aImages.IsEmpty()) {
     NS_ASSERTION(mCurrentImages.IsEmpty() ||
                  mCurrentImages[0].mProducerID != aImages[0].mProducerID ||
                  mCurrentImages[0].mFrameID <= aImages[0].mFrameID,
                  "frame IDs shouldn't go backwards");
     if (aImages[0].mProducerID != mCurrentProducerID) {
-      mFrameIDsNotYetComposited.Clear();
       mCurrentProducerID = aImages[0].mProducerID;
-    } else if (!aImages[0].mTimeStamp.IsNull()) {
-      // Check for expired frames
-      for (auto& img : mCurrentImages) {
-        if (img.mProducerID != aImages[0].mProducerID ||
-            img.mTimeStamp.IsNull() ||
-            img.mTimeStamp >= aImages[0].mTimeStamp) {
-          break;
-        }
-        if (!img.mComposited && !img.mTimeStamp.IsNull() &&
-            img.mFrameID != aImages[0].mFrameID) {
-          mFrameIDsNotYetComposited.AppendElement(img.mFrameID);
-        }
-      }
-
-      // Remove really old frames, assuming they'll never be composited.
-      const uint32_t maxFrames = 100;
-      if (mFrameIDsNotYetComposited.Length() > maxFrames) {
-        uint32_t dropFrames = mFrameIDsNotYetComposited.Length() - maxFrames;
-        mDroppedImageCount += dropFrames;
-        mFrameIDsNotYetComposited.RemoveElementsAt(0, dropFrames);
-      }
     }
   }
 
   nsTArray<OwningImage> newImages;
 
   for (uint32_t i = 0; i < aImages.Length(); ++i) {
     NS_ASSERTION(aImages[i].mImage, "image can't be null");
     NS_ASSERTION(!aImages[i].mTimeStamp.IsNull() || aImages.Length() == 1,
@@ -298,17 +285,17 @@ ImageContainer::SetCurrentImageInternal(
       NS_ASSERTION(aImages[i].mProducerID == aImages[i - 1].mProducerID,
                    "ProducerIDs must be the same");
     }
     OwningImage* img = newImages.AppendElement();
     img->mImage = aImages[i].mImage;
     img->mTimeStamp = aImages[i].mTimeStamp;
     img->mFrameID = aImages[i].mFrameID;
     img->mProducerID = aImages[i].mProducerID;
-    for (auto& oldImg : mCurrentImages) {
+    for (const auto& oldImg : mCurrentImages) {
       if (oldImg.mFrameID == img->mFrameID &&
           oldImg.mProducerID == img->mProducerID) {
         img->mComposited = oldImg.mComposited;
         break;
       }
     }
   }
 
@@ -434,40 +421,35 @@ ImageContainer::NotifyComposite(const Im
   RecursiveMutexAutoLock lock(mRecursiveMutex);
 
   // An image composition notification is sent the first time a particular
   // image is composited by an ImageHost. Thus, every time we receive such
   // a notification, a new image has been painted.
   ++mPaintCount;
 
   if (aNotification.producerID() == mCurrentProducerID) {
-    uint32_t i;
-    for (i = 0; i < mFrameIDsNotYetComposited.Length(); ++i) {
-      if (mFrameIDsNotYetComposited[i] <= aNotification.frameID()) {
-        if (mFrameIDsNotYetComposited[i] < aNotification.frameID()) {
-          ++mDroppedImageCount;
-        }
-      } else {
-        break;
-      }
-    }
-    mFrameIDsNotYetComposited.RemoveElementsAt(0, i);
     for (auto& img : mCurrentImages) {
       if (img.mFrameID == aNotification.frameID()) {
         img.mComposited = true;
       }
     }
   }
 
   if (!aNotification.imageTimeStamp().IsNull()) {
-    mPaintDelay = aNotification.firstCompositeTimeStamp() -
-        aNotification.imageTimeStamp();
+    mPaintDelay =
+      aNotification.firstCompositeTimeStamp() - aNotification.imageTimeStamp();
   }
 }
 
+void
+ImageContainer::NotifyDropped(uint32_t aDropped)
+{
+  mDroppedImageCount += aDropped;
+}
+
 #ifdef XP_WIN
 D3D11YCbCrRecycleAllocator*
 ImageContainer::GetD3D11YCbCrRecycleAllocator(KnowsCompositor* aAllocator)
 {
   if (mD3D11YCbCrRecycleAllocator &&
       aAllocator == mD3D11YCbCrRecycleAllocator->GetAllocator()) {
     return mD3D11YCbCrRecycleAllocator;
   }