--- a/build/moz.configure/toolchain.configure
+++ b/build/moz.configure/toolchain.configure
@@ -1325,19 +1325,19 @@ js_option(env='RUSTC_OPT_LEVEL',
           nargs=1,
           help='Rust compiler optimization level (-C opt-level=%s)')
 
 # --enable-release kicks in full optimizations.
 imply_option('RUSTC_OPT_LEVEL', '2', when='--enable-release')
 
 
 @depends('RUSTC_OPT_LEVEL', debug_rust, '--enable-debug-symbols',
-         moz_optimize)
+         moz_optimize, host, target)
 def rust_compiler_flags(opt_level_option, debug_rust, debug_symbols,
-                        moz_optimize):
+                        moz_optimize, host, target):
     optimize = moz_optimize.optimize
 
     # Cargo currently supports only two interesting profiles for building:
     # development and release. Those map (roughly) to --enable-debug and
     # --disable-debug in Gecko, respectively.
     #
     # But we'd also like to support an additional axis of control for
     # optimization level. Since Cargo only supports 2 profiles, we're in
@@ -1357,17 +1357,21 @@ def rust_compiler_flags(opt_level_option
         opt_level = '1' if optimize else '0'
 
     # opt-level=0 implies -C debug-assertions, which may not be desired
     # unless Rust debugging is enabled.
     if opt_level == '0' and not debug_rust:
         debug_assertions = False
 
     if debug_symbols:
-        debug_info = '2'
+        if host.kernel == 'Linux' and target.kernel == 'Darwin':
+            # hack to work around dsymutil failing on cross-OSX builds (bug 1410148)
+            debug_info = '1'
+        else:
+            debug_info = '2'
 
     opts = []
 
     if opt_level is not None:
         opts.append('opt-level=%s' % opt_level)
     if debug_assertions is not None:
         opts.append('debug-assertions=%s' %
                     ('yes' if debug_assertions else 'no'))

--- a/devtools/client/debugger/new/README.mozilla
+++ b/devtools/client/debugger/new/README.mozilla
@@ -1,11 +1,11 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Taken from upstream commit: 09d6d4f93135367b2639d78ad884434f73ab449c
+Taken from upstream commit: d2e91e574acbe3d5b546508d028bd278eaabd286
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.0
 - babel-preset-react @6.24.1
 - react @15.6.2
 - react-dom @15.6.2
 - webpack @3.8.1

--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
@@ -599,16 +599,40 @@ button:focus {
 
 /* Utils */
 .absolute-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.d-flex {
+  display: flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.rounded-circle {
+  border-radius: 50%;
+}
+
+.text-white {
+  color: white;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.min-width-0 {
+  min-width: 0;
+}
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 menupopup {
   position: fixed;
   z-index: 10000;
   background: white;
@@ -2870,16 +2894,32 @@ html .breakpoints-list .breakpoint.pause
 .frames ul .frames-group .frames-list li {
   padding-left: 30px;
 }
 
 .frames ul .frames-group .frames-list {
   border-top: 1px solid var(--theme-splitter-color);
   border-bottom: 1px solid var(--theme-splitter-color);
 }
+
+.frames ul .frames-group.expanded .badge {
+  color: var(--theme-highlight-blue);
+}
+.badge {
+  --size: 17px;
+  --radius: calc(var(--size) / 2);
+  height: var(--size);
+  min-width: var(--size);
+  line-height: var(--size);
+  background: var(--theme-toolbar-background-hover);
+  color: var(--theme-body-color);
+  border-radius: var(--radius);
+  padding: 0 4px;
+  font-size: 0.9em;
+}
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .why-paused {
   background-color: var(--theme-body-background);
   color: var(--theme-body-color);
   padding: 10px 10px 10px 20px;
@@ -2913,53 +2953,59 @@ html .breakpoints-list .breakpoint.pause
 
 .frames ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .frames ul li {
-  padding: 7px 10px 7px 21px;
+  padding: 0 10px 0 21px;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
   margin: 0;
 }
 
 .frames ul li * {
   -moz-user-select: none;
   user-select: none;
 }
 
+.frames .badge {
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
 .frames .location {
   font-weight: lighter;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
   margin: 0;
+  flex-shrink: 0;
 }
 
 .theme-light .frames .location,
 .theme-firebug .frames .location {
   color: var(--theme-comment);
 }
 
 :root.theme-dark .frames .location {
   color: var(--theme-body-color);
   opacity: 0.6;
 }
 
 .frames .title {
   text-overflow: ellipsis;
   overflow: hidden;
-  margin-right: 1em;
+  margin: 7px 0.5em 7px 0;
 }
 
 .frames ul li:hover,
 .frames ul li:focus {
   background-color: var(--theme-toolbar-background-alt);
   outline: none;
 }
 
@@ -3589,17 +3635,17 @@ html .welcomebox .toggle-button-end.coll
   border: 1px solid var(--theme-splitter-color);
   box-shadow: 0 4px 4px 0 var(--search-overlays-semitransparent);
   max-height: 300px;
   position: absolute;
   right: 0;
   top: 23px;
   width: var(--width);
   z-index: 1000;
-  overflow: scroll;
+  overflow: auto;
 }
 
 html[dir="rtl"] .dropdown {
   right: calc((var(--width) - 11px) * (-1));
 }
 
 .dropdown-block {
   padding: 0px 2px;

--- a/devtools/client/debugger/new/debugger.js
+++ b/devtools/client/debugger/new/debugger.js
@@ -26981,17 +26981,17 @@ FrameComponent.displayName = "Frame";
 "use strict";
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FrameMenu;
 
-var _devtoolsLaunchpad = __webpack_require__(1362);
+var _devtoolsContextmenu = __webpack_require__(1413);
 
 var _clipboard = __webpack_require__(1388);
 
 var _lodash = __webpack_require__(2);
 
 const blackboxString = "sourceFooter.blackbox"; /* This Source Code Form is subject to the terms of the Mozilla Public
                                                  * License, v. 2.0. If a copy of the MPL was not distributed with this
                                                  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
@@ -27047,17 +27047,17 @@ function FrameMenu(frame, frameworkGroup
     menuOptions.push(copySourceUri2);
     menuOptions.push(blackBoxSource(source, callbacks.toggleBlackBox));
   }
 
   const copyStackTraceItem = copyStackTraceElement(callbacks.copyStackTrace);
 
   menuOptions.push(copyStackTraceItem);
 
-  (0, _devtoolsLaunchpad.showMenu)(event, menuOptions);
+  (0, _devtoolsContextmenu.showMenu)(event, menuOptions);
 }
 
 /***/ }),
 /* 1455 */,
 /* 1456 */,
 /* 1457 */,
 /* 1458 */,
 /* 1459 */
@@ -35312,17 +35312,17 @@ var _ManagedTree2 = _interopRequireDefau
 var _Svg = __webpack_require__(1359);
 
 var _Svg2 = _interopRequireDefault(_Svg);
 
 var _sourcesTree = __webpack_require__(1442);
 
 var _immutable = __webpack_require__(146);
 
-var _devtoolsLaunchpad = __webpack_require__(1362);
+var _devtoolsContextmenu = __webpack_require__(1413);
 
 var _clipboard = __webpack_require__(1388);
 
 var _utils = __webpack_require__(1366);
 
 var _prefs = __webpack_require__(226);
 
 var _ui = __webpack_require__(1385);
@@ -35490,17 +35490,17 @@ class SourcesTree extends _react.Compone
       menuOptions.push({
         id: "node-set-directory-root",
         label: setDirectoryRootLabel,
         accesskey: setDirectoryRootKey,
         disabled: false,
         click: () => (0, _ui.setProjectDirectoryRoot)(item.path)
       });
     }
-    (0, _devtoolsLaunchpad.showMenu)(event, menuOptions);
+    (0, _devtoolsContextmenu.showMenu)(event, menuOptions);
   }
 
   renderItem(item, depth, focused, _, expanded, { setExpanded }) {
     const arrow = (0, _sourcesTree.nodeHasChildren)(item) ? _react2.default.createElement("img", {
       className: (0, _classnames2.default)("arrow", {
         expanded: expanded
       }),
       onClick: e => {
@@ -40603,17 +40603,17 @@ Object.defineProperty(exports, "__esModu
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* This Source Code Form is subject to the terms of the Mozilla Public
                                                                                                                                                                                                                                                                    * License, v. 2.0. If a copy of the MPL was not distributed with this
                                                                                                                                                                                                                                                                    * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 exports.gutterMenu = gutterMenu;
 
 var _react = __webpack_require__(0);
 
-var _devtoolsLaunchpad = __webpack_require__(1362);
+var _devtoolsContextmenu = __webpack_require__(1413);
 
 var _redux = __webpack_require__(3);
 
 var _reactRedux = __webpack_require__(1189);
 
 var _editor = __webpack_require__(1358);
 
 var _selectors = __webpack_require__(1352);
@@ -40704,17 +40704,17 @@ function gutterMenu({
     const disableBreakpoint = _extends({
       accesskey: L10N.getStr("editor.disableBreakpoint.accesskey"),
       disabled: false,
       click: () => toggleDisabledBreakpoint(line)
     }, breakpoint.disabled ? gutterItems.enableBreakpoint : gutterItems.disableBreakpoint);
     items.push(disableBreakpoint);
   }
 
-  (0, _devtoolsLaunchpad.showMenu)(event, items);
+  (0, _devtoolsContextmenu.showMenu)(event, items);
 }
 
 class GutterContextMenuComponent extends _react.PureComponent {
 
   constructor() {
     super();
   }
 
@@ -40768,17 +40768,17 @@ exports.default = (0, _reactRedux.connec
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
 var _react = __webpack_require__(0);
 
-var _devtoolsLaunchpad = __webpack_require__(1362);
+var _devtoolsContextmenu = __webpack_require__(1413);
 
 var _devtoolsSourceMap = __webpack_require__(1360);
 
 var _clipboard = __webpack_require__(1388);
 
 var _source = __webpack_require__(1356);
 
 var _editor = __webpack_require__(1358);
@@ -40853,23 +40853,25 @@ function getMenuItems(event, {
 
   const sourceLocation = (0, _editor.getSourceLocationFromMouseEvent)(editor, selectedLocation, event);
 
   const isOriginal = (0, _devtoolsSourceMap.isOriginalId)(selectedLocation.sourceId);
   const hasSourceMap = selectedSource.get("sourceMapURL");
   const isPrettyPrinted = (0, _source.isPretty)(selectedSource.toJS());
 
   const jumpLabel = {
+    id: "node-menu-jump",
     accesskey: L10N.getStr("editor.jumpToMappedLocation1.accesskey"),
     disabled: _devtoolsSourceMap.isGeneratedId && !hasSourceMap,
     label: L10N.getFormatStr("editor.jumpToMappedLocation1", isOriginal ? L10N.getStr("generated") : L10N.getStr("original")),
     click: () => jumpToMappedLocation(sourceLocation)
   };
 
   const watchExpressionLabel = {
+    id: "node-menu-add-watch-expression",
     accesskey: L10N.getStr("expressions.accesskey"),
     label: L10N.getStr("expressions.label"),
     click: () => addExpression(editor.codeMirror.getSelection())
   };
 
   const blackBoxMenuItem = {
     id: "node-menu-blackbox",
     label: toggleBlackBoxLabel,
@@ -40930,17 +40932,17 @@ class EditorMenu extends _react.PureComp
     this.props.setContextMenu("", null);
     return this.showMenu(nextProps);
   }
 
   showMenu(nextProps) {
     const { contextMenu } = nextProps,
           options = _objectWithoutProperties(nextProps, ["contextMenu"]);
     const { event } = contextMenu;
-    (0, _devtoolsLaunchpad.showMenu)(event, getMenuItems(event, options));
+    (0, _devtoolsContextmenu.showMenu)(event, getMenuItems(event, options));
   }
 
   render() {
     return null;
   }
 }
 
 exports.default = (0, _reactRedux.connect)(state => {
@@ -41169,20 +41171,16 @@ var _react = __webpack_require__(0);
 var _react2 = _interopRequireDefault(_react);
 
 var _reactRedux = __webpack_require__(1189);
 
 var _redux = __webpack_require__(3);
 
 var _prefs = __webpack_require__(226);
 
-var _reactImmutableProptypes = __webpack_require__(150);
-
-var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);
-
 var _actions = __webpack_require__(1354);
 
 var _actions2 = _interopRequireDefault(_actions);
 
 var _selectors = __webpack_require__(1352);
 
 var _devtoolsConfig = __webpack_require__(1355);
 
@@ -41233,21 +41231,19 @@ var _ChromeScopes2 = _interopRequireDefa
 var _Scopes2 = __webpack_require__(1611);
 
 var _Scopes3 = _interopRequireDefault(_Scopes2);
 
 __webpack_require__(1342);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
-
-const Scopes = (0, _devtoolsConfig.isEnabled)("chromeScopes") ? _ChromeScopes2.default : _Scopes3.default;
+const Scopes = (0, _devtoolsConfig.isEnabled)("chromeScopes") ? _ChromeScopes2.default : _Scopes3.default; /* This Source Code Form is subject to the terms of the Mozilla Public
+                                                                                                            * License, v. 2.0. If a copy of the MPL was not distributed with this
+                                                                                                            * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 function debugBtn(onClick, type, className, tooltip) {
   return _react2.default.createElement(
     "button",
     {
       onClick: onClick,
       className: `${type} ${className}`,
       key: type,
@@ -41428,17 +41424,17 @@ class SecondaryPanes extends _react.Comp
     );
   }
 }
 
 SecondaryPanes.propTypes = {
   evaluateExpressions: _propTypes2.default.func.isRequired,
   pauseData: _propTypes2.default.object,
   horizontal: _propTypes2.default.bool,
-  breakpoints: _reactImmutableProptypes2.default.map.isRequired,
+  breakpoints: _propTypes2.default.object,
   breakpointsDisabled: _propTypes2.default.bool,
   breakpointsLoading: _propTypes2.default.bool,
   toggleAllBreakpoints: _propTypes2.default.func.isRequired,
   toggleShortcutsModal: _propTypes2.default.func
 };
 
 SecondaryPanes.contextTypes = {
   shortcuts: _propTypes2.default.object
@@ -41493,17 +41489,17 @@ var _actions2 = _interopRequireDefault(_
 var _selectors = __webpack_require__(1352);
 
 var _breakpoint = __webpack_require__(1364);
 
 var _utils = __webpack_require__(1366);
 
 var _source = __webpack_require__(1356);
 
-var _devtoolsLaunchpad = __webpack_require__(1362);
+var _devtoolsContextmenu = __webpack_require__(1413);
 
 var _Close = __webpack_require__(1374);
 
 var _Close2 = _interopRequireDefault(_Close);
 
 __webpack_require__(1334);
 
 var _lodash = __webpack_require__(2);
@@ -41728,17 +41724,17 @@ class Breakpoints extends _react.PureCom
     }, {
       item: editCondition,
       hidden: () => !breakpoint.condition
     }, {
       item: removeCondition,
       hidden: () => !breakpoint.condition
     }];
 
-    (0, _devtoolsLaunchpad.showMenu)(e, (0, _devtoolsLaunchpad.buildMenu)(items));
+    (0, _devtoolsContextmenu.showMenu)(e, (0, _devtoolsContextmenu.buildMenu)(items));
   }
 
   selectBreakpoint(breakpoint) {
     const sourceId = breakpoint.location.sourceId;
     const { location } = breakpoint;
     this.props.selectSource(sourceId, { location });
   }
 
@@ -42296,33 +42292,39 @@ var _FrameMenu = __webpack_require__(145
 var _FrameMenu2 = _interopRequireDefault(_FrameMenu);
 
 __webpack_require__(1336);
 
 var _Frame = __webpack_require__(1453);
 
 var _Frame2 = _interopRequireDefault(_Frame);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Badge = __webpack_require__(1704);
+
+var _Badge2 = _interopRequireDefault(_Badge);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 function FrameLocation({ frame }) {
   const library = (0, _frame.getLibraryFromUrl)(frame);
   if (!library) {
     return null;
   }
 
   return _react2.default.createElement(
     "div",
     { className: "location" },
     library,
     _react2.default.createElement(_Svg2.default, { name: library.toLowerCase(), className: "annotation-logo" })
   );
-} /* This Source Code Form is subject to the terms of the Mozilla Public
-   * License, v. 2.0. If a copy of the MPL was not distributed with this
-   * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+}
 
 FrameLocation.displayName = "FrameLocation";
 
 class Group extends _react.Component {
 
   constructor(...args) {
     super(...args);
 
@@ -42387,18 +42389,27 @@ class Group extends _react.Component {
       {
         key: frame.id,
         className: (0, _classnames2.default)("group"),
         onClick: this.toggleFrames,
         tabIndex: 0
       },
       _react2.default.createElement(
         "div",
-        { className: "title" },
-        displayName
+        { className: "d-flex align-items-center min-width-0" },
+        _react2.default.createElement(
+          "div",
+          { className: "title" },
+          displayName
+        ),
+        _react2.default.createElement(
+          _Badge2.default,
+          null,
+          this.props.group.length
+        )
       ),
       _react2.default.createElement(FrameLocation, { frame: frame })
     );
   }
 
   render() {
     const { expanded } = this.state;
     return _react2.default.createElement(
@@ -43770,17 +43781,17 @@ var _classnames2 = _interopRequireDefaul
 var _actions = __webpack_require__(1354);
 
 var _actions2 = _interopRequireDefault(_actions);
 
 var _Close = __webpack_require__(1374);
 
 var _Close2 = _interopRequireDefault(_Close);
 
-var _devtoolsLaunchpad = __webpack_require__(1362);
+var _devtoolsContextmenu = __webpack_require__(1413);
 
 var _lodash = __webpack_require__(2);
 
 __webpack_require__(1344);
 
 var _PaneToggle = __webpack_require__(1407);
 
 var _PaneToggle2 = _interopRequireDefault(_PaneToggle);
@@ -43988,17 +43999,17 @@ class SourceTabs extends _react.PureComp
       hidden: () => tabs.some((t, i) => t === tab && tabs.size - 1 === i)
     }, { item: closeAllTabsMenuItem }, { item: { type: "separator" } }, { item: copySourceUri2 }];
 
     if (!isPrettySource) {
       items.push({ item: showSourceMenuItem });
       items.push({ item: prettyPrint });
     }
 
-    (0, _devtoolsLaunchpad.showMenu)(e, (0, _devtoolsLaunchpad.buildMenu)(items));
+    (0, _devtoolsContextmenu.showMenu)(e, (0, _devtoolsContextmenu.buildMenu)(items));
   }
 
   /*
    * Updates the hiddenSourceTabs state, by
    * finding the source tabs which are wrapped and are not on the top row.
    */
   updateHiddenSourceTabs() {
     if (!this.refs.sourceTabs) {
@@ -45933,11 +45944,84 @@ function timing(store) {
     mark(`${action.type}_start`);
     const result = next(action);
     mark(`${action.type}_end`);
     measure(`${action.type}`, `${action.type}_start`, `${action.type}_end`);
     return result;
   };
 }
 
+/***/ }),
+/* 1664 */,
+/* 1665 */,
+/* 1666 */,
+/* 1667 */,
+/* 1668 */,
+/* 1669 */,
+/* 1670 */,
+/* 1671 */,
+/* 1672 */,
+/* 1673 */,
+/* 1674 */,
+/* 1675 */,
+/* 1676 */,
+/* 1677 */,
+/* 1678 */,
+/* 1679 */,
+/* 1680 */,
+/* 1681 */,
+/* 1682 */,
+/* 1683 */,
+/* 1684 */,
+/* 1685 */,
+/* 1686 */,
+/* 1687 */,
+/* 1688 */,
+/* 1689 */,
+/* 1690 */,
+/* 1691 */,
+/* 1692 */,
+/* 1693 */,
+/* 1694 */,
+/* 1695 */,
+/* 1696 */,
+/* 1697 */,
+/* 1698 */,
+/* 1699 */,
+/* 1700 */,
+/* 1701 */,
+/* 1702 */,
+/* 1703 */,
+/* 1704 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+__webpack_require__(1705);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Badge = ({ children }) => _react2.default.createElement(
+  "div",
+  { className: "badge text-white text-center" },
+  children
+);
+
+exports.default = Badge;
+
+/***/ }),
+/* 1705 */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
 /***/ })
 /******/ ]);
 });
\ No newline at end of file

--- a/devtools/client/framework/components/toolbox-controller.js
+++ b/devtools/client/framework/components/toolbox-controller.js
@@ -142,16 +142,20 @@ class ToolboxController extends Componen
     this.updateButtonIds();
   }
 
   setPanelDefinitions(panelDefinitions) {
     this.setState({ panelDefinitions });
     this.updateButtonIds();
   }
 
+  get panelDefinitions() {
+    return this.state.panelDefinitions;
+  }
+
   setToolboxButtons(toolboxButtons) {
     // Listen for updates of the checked attribute.
     this.state.toolboxButtons.forEach(button => {
       button.off("updatechecked", this.state.checkedButtonsUpdated);
     });
     toolboxButtons.forEach(button => {
       button.on("updatechecked", this.state.checkedButtonsUpdated);
     });

--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -1920,35 +1920,35 @@ Toolbox.prototype = {
   reloadTarget: function (force) {
     this.target.activeTab.reload({ force: force });
   },
 
   /**
    * Loads the tool next to the currently selected tool.
    */
   selectNextTool: function () {
-    const index = this.panelDefinitions.findIndex(({id}) => id === this.currentToolId);
-    let definition = this.panelDefinitions[index + 1];
+    let definitions = this.component.panelDefinitions;
+    const index = definitions.findIndex(({id}) => id === this.currentToolId);
+    let definition = definitions[index + 1];
     if (!definition) {
-      definition = index === -1
-        ? this.panelDefinitions[0]
-        : this.optionsDefinition;
+      definition = index === -1 ? definitions[0] : this.optionsDefinition;
     }
     return this.selectTool(definition.id);
   },
 
   /**
    * Loads the tool just left to the currently selected tool.
    */
   selectPreviousTool: function () {
-    const index = this.panelDefinitions.findIndex(({id}) => id === this.currentToolId);
-    let definition = this.panelDefinitions[index - 1];
+    let definitions = this.component.panelDefinitions;
+    const index = definitions.findIndex(({id}) => id === this.currentToolId);
+    let definition = definitions[index - 1];
     if (!definition) {
       definition = index === -1
-        ? this.panelDefinitions[this.panelDefinitions.length - 1]
+        ? definitions[definitions.length - 1]
         : this.optionsDefinition;
     }
     return this.selectTool(definition.id);
   },
 
   /**
    * Highlights the tool's tab if it is not the currently selected tool.
    *

--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -164,17 +164,17 @@ class CssGridHighlighter extends AutoRef
     this.onPageHide = this.onPageHide.bind(this);
     this.onWillNavigate = this.onWillNavigate.bind(this);
 
     this.highlighterEnv.on("will-navigate", this.onWillNavigate);
 
     let { pageListenerTarget } = highlighterEnv;
     pageListenerTarget.addEventListener("pagehide", this.onPageHide);
 
-    // Initialize the <canvas> position to the top left corner of the page
+    // Initialize the <canvas> position to the top left corner of the page.
     this._canvasPosition = {
       x: 0,
       y: 0
     };
 
     // Calling `updateCanvasPosition` anyway since the highlighter could be initialized
     // on a page that has scrolled already.
     updateCanvasPosition(this._canvasPosition, this._scroll, this.win,
@@ -208,17 +208,17 @@ class CssGridHighlighter extends AutoRef
         "class": "canvas",
         "hidden": "true",
         "width": CANVAS_SIZE,
         "height": CANVAS_SIZE
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
-    // Build the SVG element
+    // Build the SVG element.
     let svg = createSVGNode(this.win, {
       nodeType: "svg",
       parent: root,
       attributes: {
         "id": "elements",
         "width": "100%",
         "height": "100%",
         "hidden": "true"
@@ -250,17 +250,17 @@ class CssGridHighlighter extends AutoRef
       parent: regions,
       attributes: {
         "class": "cells",
         "id": "cells"
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
-    // Building the grid area infobar markup
+    // Build the grid area infobar markup.
     let areaInfobarContainer = createNode(this.win, {
       parent: container,
       attributes: {
         "class": "area-infobar-container",
         "id": "area-infobar-container",
         "position": "top",
         "hidden": "true"
       },
@@ -296,17 +296,17 @@ class CssGridHighlighter extends AutoRef
       parent: areaTextbox,
       attributes: {
         "class": "area-infobar-dimensions",
         "id": "area-infobar-dimensions"
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
-    // Building the grid cell infobar markup
+    // Build the grid cell infobar markup.
     let cellInfobarContainer = createNode(this.win, {
       parent: container,
       attributes: {
         "class": "cell-infobar-container",
         "id": "cell-infobar-container",
         "position": "top",
         "hidden": "true"
       },
@@ -342,17 +342,17 @@ class CssGridHighlighter extends AutoRef
       parent: cellTextbox,
       attributes: {
         "class": "cell-infobar-dimensions",
         "id": "cell-infobar-dimensions"
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
-    // Building the grid line infobar markup
+    // Build the grid line infobar markup.
     let lineInfobarContainer = createNode(this.win, {
       parent: container,
       attributes: {
         "class": "line-infobar-container",
         "id": "line-infobar-container",
         "position": "top",
         "hidden": "true"
       },
@@ -391,48 +391,76 @@ class CssGridHighlighter extends AutoRef
         "id": "line-infobar-names"
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
     return container;
   }
 
+  clearCache() {
+    gCachedGridPattern.clear();
+  }
+
+  /**
+   * Clear the grid area highlights.
+   */
+  clearGridAreas() {
+    let areas = this.getElement("areas");
+    areas.setAttribute("d", "");
+  }
+
+  /**
+   * Clear the grid cell highlights.
+   */
+  clearGridCell() {
+    let cells = this.getElement("cells");
+    cells.setAttribute("d", "");
+  }
+
   destroy() {
     let { highlighterEnv } = this;
     highlighterEnv.off("will-navigate", this.onWillNavigate);
 
     let { pageListenerTarget } = highlighterEnv;
     if (pageListenerTarget) {
       pageListenerTarget.removeEventListener("pagehide", this.onPageHide);
     }
 
     this.markup.destroy();
 
     // Clear the pattern cache to avoid dead object exceptions (Bug 1342051).
-    this._clearCache();
+    this.clearCache();
     AutoRefreshHighlighter.prototype.destroy.call(this);
   }
 
-  getElement(id) {
-    return this.markup.getElement(this.ID_CLASS_PREFIX + id);
-  }
-
-  get ctx() {
-    return this.canvas.getCanvasContext("2d");
-  }
-
   get canvas() {
     return this.getElement("canvas");
   }
 
   get color() {
     return this.options.color || DEFAULT_COLOR;
   }
 
+  get ctx() {
+    return this.canvas.getCanvasContext("2d");
+  }
+
+  getElement(id) {
+    return this.markup.getElement(this.ID_CLASS_PREFIX + id);
+  }
+
+  getFirstColLinePos(fragment) {
+    return fragment.cols.lines[0].start;
+  }
+
+  getFirstRowLinePos(fragment) {
+    return fragment.rows.lines[0].start;
+  }
+
   /**
    * Gets the grid gap pattern used to render the gap regions based on the device
    * pixel ratio given.
    *
    * @param  {Number} devicePixelRatio
    *         The device pixel ratio we want the pattern for.
    * @param  {Object} dimension
    *         Refers to the Map key for the grid dimension type which is either the
@@ -479,82 +507,179 @@ class CssGridHighlighter extends AutoRef
     let pattern = ctx.createPattern(canvas, "repeat");
 
     gridPatternMap.set(dimension, pattern);
     gCachedGridPattern.set(devicePixelRatio, gridPatternMap);
 
     return pattern;
   }
 
-  onPageHide({ target }) {
-    // If a page hide event is triggered for current window's highlighter, hide the
-    // highlighter.
-    if (target.defaultView === this.win) {
-      this.hide();
+  getLastColLinePos(fragment) {
+    return fragment.cols.lines[fragment.cols.lines.length - 1].start;
+  }
+
+  /**
+   * Get the GridLine index of the last edge of the explicit grid for a grid dimension.
+   *
+   * @param  {GridTracks} tracks
+   *         The grid track of a given grid dimension.
+   * @return {Number} index of the last edge of the explicit grid for a grid dimension.
+   */
+  getLastEdgeLineIndex(tracks) {
+    let trackIndex = tracks.length - 1;
+
+    // Traverse the grid track backwards until we find an explicit track.
+    while (trackIndex >= 0 && tracks[trackIndex].type != "explicit") {
+      trackIndex--;
     }
+
+    // The grid line index is the grid track index + 1.
+    return trackIndex + 1;
+  }
+
+  getLastRowLinePos(fragment) {
+    return fragment.rows.lines[fragment.rows.lines.length - 1].start;
+  }
+
+  /**
+   * The AutoRefreshHighlighter's _hasMoved method returns true only if the
+   * element's quads have changed. Override it so it also returns true if the
+   * element's grid has changed (which can happen when you change the
+   * grid-template-* CSS properties with the highlighter displayed).
+   */
+  _hasMoved() {
+    let hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this);
+
+    let oldGridData = stringifyGridFragments(this.gridData);
+    this.gridData = this.currentNode.getGridFragments();
+    let newGridData = stringifyGridFragments(this.gridData);
+
+    return hasMoved || oldGridData !== newGridData;
   }
 
   /**
-   * Called when the page will-navigate. Used to hide the grid highlighter and clear
-   * the cached gap patterns and avoid using DeadWrapper obejcts as gap patterns the
-   * next time.
+   * Hide the highlighter, the canvas and the infobars.
    */
-  onWillNavigate({ isTopLevel }) {
-    this._clearCache();
+  _hide() {
+    setIgnoreLayoutChanges(true);
+    this._hideGrid();
+    this._hideGridElements();
+    this._hideGridAreaInfoBar();
+    this._hideGridCellInfoBar();
+    this._hideGridLineInfoBar();
+    setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
+  }
+
+  _hideGrid() {
+    this.getElement("canvas").setAttribute("hidden", "true");
+  }
+
+  _hideGridAreaInfoBar() {
+    this.getElement("area-infobar-container").setAttribute("hidden", "true");
+  }
+
+  _hideGridCellInfoBar() {
+    this.getElement("cell-infobar-container").setAttribute("hidden", "true");
+  }
+
+  _hideGridElements() {
+    this.getElement("elements").setAttribute("hidden", "true");
+  }
+
+  _hideGridLineInfoBar() {
+    this.getElement("line-infobar-container").setAttribute("hidden", "true");
+  }
 
-    if (isTopLevel) {
-      this.hide();
+  /**
+   * Checks if the current node has a CSS Grid layout.
+   *
+   * @return {Boolean} true if the current node has a CSS grid layout, false otherwise.
+   */
+  isGrid() {
+    return this.currentNode.getGridFragments().length > 0;
+  }
+
+  /**
+   * Is a given grid fragment valid? i.e. does it actually have tracks? In some cases, we
+   * may have a fragment that defines column tracks but doesn't have any rows (or vice
+   * versa). In which case we do not want to draw anything for that fragment.
+   *
+   * @param  {Object} fragment
+   * @return {Boolean}
+   */
+  isValidFragment(fragment) {
+    return fragment.cols.tracks.length && fragment.rows.tracks.length;
+  }
+
+  /**
+   * The <canvas>'s position needs to be updated if the page scrolls too much, in order
+   * to give the illusion that it always covers the viewport.
+   */
+  _scrollUpdate() {
+    let hasUpdated = updateCanvasPosition(this._canvasPosition, this._scroll, this.win,
+      this._winDimensions);
+
+    if (hasUpdated) {
+      this._update();
     }
   }
 
   _show() {
     if (!this.isGrid()) {
       this.hide();
       return false;
     }
 
     // The grid pattern cache should be cleared in case the color changed.
-    this._clearCache();
+    this.clearCache();
 
     // Hide the canvas, grid element highlights and infobar.
     this._hide();
 
     return this._update();
   }
 
-  _clearCache() {
-    gCachedGridPattern.clear();
+  _showGrid() {
+    this.getElement("canvas").removeAttribute("hidden");
+  }
+
+  _showGridAreaInfoBar() {
+    this.getElement("area-infobar-container").removeAttribute("hidden");
+  }
+
+  _showGridCellInfoBar() {
+    this.getElement("cell-infobar-container").removeAttribute("hidden");
+  }
+
+  _showGridElements() {
+    this.getElement("elements").removeAttribute("hidden");
+  }
+
+  _showGridLineInfoBar() {
+    this.getElement("line-infobar-container").removeAttribute("hidden");
+  }
+
+  /**
+   * Shows all the grid area highlights for the current grid.
+   */
+  showAllGridAreas() {
+    this.renderGridArea();
   }
 
   /**
    * Shows the grid area highlight for the given area name.
    *
    * @param  {String} areaName
    *         Grid area name.
    */
   showGridArea(areaName) {
     this.renderGridArea(areaName);
   }
 
   /**
-   * Shows all the grid area highlights for the current grid.
-   */
-  showAllGridAreas() {
-    this.renderGridArea();
-  }
-
-  /**
-   * Clear the grid area highlights.
-   */
-  clearGridAreas() {
-    let areas = this.getElement("areas");
-    areas.setAttribute("d", "");
-  }
-
-  /**
    * Shows the grid cell highlight for the given grid cell options.
    *
    * @param  {Number} options.gridFragmentIndex
    *         Index of the grid fragment to render the grid cell highlight.
    * @param  {Number} options.rowNumber
    *         Row number of the grid cell to highlight.
    * @param  {Number} options.columnNumber
    *         Column number of the grid cell to highlight.
@@ -573,64 +698,756 @@ class CssGridHighlighter extends AutoRef
    * @param  {String} options.type
    *         The dimension type of the grid line.
    */
   showGridLineNames({ gridFragmentIndex, lineNumber, type }) {
     this.renderGridLineNames(gridFragmentIndex, lineNumber, type);
   }
 
   /**
-   * Clear the grid cell highlights.
+   * If a page hide event is triggered for current window's highlighter, hide the
+   * highlighter.
+   */
+  onPageHide({ target }) {
+    if (target.defaultView === this.win) {
+      this.hide();
+    }
+  }
+
+  /**
+   * Called when the page will-navigate. Used to hide the grid highlighter and clear
+   * the cached gap patterns and avoid using DeadWrapper obejcts as gap patterns the
+   * next time.
    */
-  clearGridCell() {
-    let cells = this.getElement("cells");
-    cells.setAttribute("d", "");
+  onWillNavigate({ isTopLevel }) {
+    this.clearCache();
+
+    if (isTopLevel) {
+      this.hide();
+    }
+  }
+
+  renderFragment(fragment) {
+    if (!this.isValidFragment(fragment)) {
+      return;
+    }
+
+    this.renderLines(fragment.cols, COLUMNS, this.getFirstRowLinePos(fragment),
+      this.getLastRowLinePos(fragment));
+    this.renderLines(fragment.rows, ROWS, this.getFirstColLinePos(fragment),
+      this.getLastColLinePos(fragment));
+
+    if (this.options.showGridAreasOverlay) {
+      this.renderGridAreaOverlay();
+    }
+
+    // Line numbers are rendered in a 2nd step to avoid overlapping with existing lines.
+    if (this.options.showGridLineNumbers) {
+      this.renderLineNumbers(fragment.cols, COLUMNS, this.getFirstRowLinePos(fragment));
+      this.renderLineNumbers(fragment.rows, ROWS, this.getFirstColLinePos(fragment));
+
+      if (Services.prefs.getBoolPref(NEGATIVE_LINE_NUMBERS_PREF)) {
+        this.renderNegativeLineNumbers(fragment.cols, COLUMNS,
+          this.getLastRowLinePos(fragment));
+        this.renderNegativeLineNumbers(fragment.rows, ROWS,
+          this.getLastColLinePos(fragment));
+      }
+    }
+  }
+
+  /**
+   * Render the grid area highlight for the given area name or for all the grid areas.
+   *
+   * @param  {String} areaName
+   *         Name of the grid area to be highlighted. If no area name is provided, all
+   *         the grid areas should be highlighted.
+   */
+  renderGridArea(areaName) {
+    let { devicePixelRatio } = this.win;
+    let displayPixelRatio = getDisplayPixelRatio(this.win);
+    let paths = [];
+
+    for (let i = 0; i < this.gridData.length; i++) {
+      let fragment = this.gridData[i];
+
+      for (let area of fragment.areas) {
+        if (areaName && areaName != area.name) {
+          continue;
+        }
+
+        let rowStart = fragment.rows.lines[area.rowStart - 1];
+        let rowEnd = fragment.rows.lines[area.rowEnd - 1];
+        let columnStart = fragment.cols.lines[area.columnStart - 1];
+        let columnEnd = fragment.cols.lines[area.columnEnd - 1];
+
+        let x1 = columnStart.start + columnStart.breadth;
+        let y1 = rowStart.start + rowStart.breadth;
+        let x2 = columnEnd.start;
+        let y2 = rowEnd.start;
+
+        let points = getPointsFromDiagonal(x1, y1, x2, y2, this.currentMatrix);
+
+        // Scale down by `devicePixelRatio` since SVG element already take them into
+        // account.
+        let svgPoints = points.map(point => ({
+          x: Math.round(point.x / devicePixelRatio),
+          y: Math.round(point.y / devicePixelRatio)
+        }));
+
+        // Scale down by `displayPixelRatio` since infobar's HTML elements already take it
+        // into account; and the zoom scaling is handled by `moveInfobar`.
+        let bounds = getBoundsFromPoints(points.map(point => ({
+          x: Math.round(point.x / displayPixelRatio),
+          y: Math.round(point.y / displayPixelRatio)
+        })));
+
+        paths.push(getPathDescriptionFromPoints(svgPoints));
+
+        // Update and show the info bar when only displaying a single grid area.
+        if (areaName) {
+          this._showGridAreaInfoBar();
+          this._updateGridAreaInfobar(area, bounds);
+        }
+      }
+    }
+
+    let areas = this.getElement("areas");
+    areas.setAttribute("d", paths.join(" "));
   }
 
   /**
-   * Checks if the current node has a CSS Grid layout.
+   * Render grid area name on the containing grid area cell.
    *
-   * @return {Boolean} true if the current node has a CSS grid layout, false otherwise.
+   * @param  {Object} fragment
+   *         The grid fragment of the grid container.
+   * @param  {Object} area
+   *         The area overlay to render on the CSS highlighter canvas.
+   */
+  renderGridAreaName(fragment, area) {
+    let { rowStart, rowEnd, columnStart, columnEnd } = area;
+    let { devicePixelRatio } = this.win;
+    let displayPixelRatio = getDisplayPixelRatio(this.win);
+    let offset = (displayPixelRatio / 2) % 1;
+    let fontSize = GRID_AREA_NAME_FONT_SIZE * displayPixelRatio;
+    let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
+    let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
+
+    this.ctx.save();
+    this.ctx.translate(offset - canvasX, offset - canvasY);
+    this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
+    this.ctx.strokeStyle = this.color;
+    this.ctx.textAlign = "center";
+    this.ctx.textBaseline = "middle";
+
+    // Draw the text for the grid area name.
+    for (let rowNumber = rowStart; rowNumber < rowEnd; rowNumber++) {
+      for (let columnNumber = columnStart; columnNumber < columnEnd; columnNumber++) {
+        let row = fragment.rows.tracks[rowNumber - 1];
+        let column = fragment.cols.tracks[columnNumber - 1];
+
+        // Check if the font size is exceeds the bounds of the containing grid cell.
+        if (fontSize > (column.breadth * displayPixelRatio) ||
+            fontSize > (row.breadth * displayPixelRatio)) {
+          fontSize = (column.breadth + row.breadth) / 2;
+          this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
+        }
+
+        let textWidth = this.ctx.measureText(area.name).width;
+        // The width of the character 'm' approximates the height of the text.
+        let textHeight = this.ctx.measureText("m").width;
+        // Padding in pixels for the line number text inside of the line number container.
+        let padding = 3 * displayPixelRatio;
+
+        let boxWidth = textWidth + 2 * padding;
+        let boxHeight = textHeight + 2 * padding;
+
+        let x = column.start + column.breadth / 2;
+        let y = row.start + row.breadth / 2;
+
+        [x, y] = apply(this.currentMatrix, [x, y]);
+
+        let rectXPos = x - boxWidth / 2;
+        let rectYPos = y - boxHeight / 2;
+
+        // Draw a rounded rectangle with a border width of 1 pixel,
+        // a border color matching the grid color, and a white background.
+        this.ctx.lineWidth = 1 * displayPixelRatio;
+        this.ctx.strokeStyle = this.color;
+        this.ctx.fillStyle = "white";
+        let radius = 2 * displayPixelRatio;
+        drawRoundedRect(this.ctx, rectXPos, rectYPos, boxWidth, boxHeight, radius);
+
+        this.ctx.fillStyle = this.color;
+        this.ctx.fillText(area.name, x, y + padding);
+      }
+    }
+
+    this.ctx.restore();
+  }
+
+  /**
+   * Renders the grid area overlay on the css grid highlighter canvas.
    */
-  isGrid() {
-    return this.currentNode.getGridFragments().length > 0;
+  renderGridAreaOverlay() {
+    let padding = 1;
+
+    for (let i = 0; i < this.gridData.length; i++) {
+      let fragment = this.gridData[i];
+
+      for (let area of fragment.areas) {
+        let { rowStart, rowEnd, columnStart, columnEnd, type } = area;
+
+        if (type === "implicit") {
+          continue;
+        }
+
+        // Draw the line edges for the grid area.
+        const areaColStart = fragment.cols.lines[columnStart - 1];
+        const areaColEnd = fragment.cols.lines[columnEnd - 1];
+
+        const areaRowStart = fragment.rows.lines[rowStart - 1];
+        const areaRowEnd = fragment.rows.lines[rowEnd - 1];
+
+        const areaColStartLinePos = areaColStart.start + areaColStart.breadth;
+        const areaRowStartLinePos = areaRowStart.start + areaRowStart.breadth;
+
+        this.renderLine(areaColStartLinePos + padding, areaRowStartLinePos,
+          areaRowEnd.start, COLUMNS, "areaEdge");
+        this.renderLine(areaColEnd.start - padding, areaRowStartLinePos,
+          areaRowEnd.start, COLUMNS, "areaEdge");
+
+        this.renderLine(areaRowStartLinePos + padding, areaColStartLinePos,
+          areaColEnd.start, ROWS, "areaEdge");
+        this.renderLine(areaRowEnd.start - padding, areaColStartLinePos, areaColEnd.start,
+          ROWS, "areaEdge");
+
+        this.renderGridAreaName(fragment, area);
+      }
+    }
+  }
+
+  /**
+   * Render the grid cell highlight for the given grid fragment index, row and column
+   * number.
+   *
+   * @param  {Number} gridFragmentIndex
+   *         Index of the grid fragment to render the grid cell highlight.
+   * @param  {Number} rowNumber
+   *         Row number of the grid cell to highlight.
+   * @param  {Number} columnNumber
+   *         Column number of the grid cell to highlight.
+   */
+  renderGridCell(gridFragmentIndex, rowNumber, columnNumber) {
+    let fragment = this.gridData[gridFragmentIndex];
+
+    if (!fragment) {
+      return;
+    }
+
+    let row = fragment.rows.tracks[rowNumber - 1];
+    let column = fragment.cols.tracks[columnNumber - 1];
+
+    if (!row || !column) {
+      return;
+    }
+
+    let x1 = column.start;
+    let y1 = row.start;
+    let x2 = column.start + column.breadth;
+    let y2 = row.start + row.breadth;
+
+    let { devicePixelRatio } = this.win;
+    let displayPixelRatio = getDisplayPixelRatio(this.win);
+    let points = getPointsFromDiagonal(x1, y1, x2, y2, this.currentMatrix);
+
+    // Scale down by `devicePixelRatio` since SVG element already take them into account.
+    let svgPoints = points.map(point => ({
+      x: Math.round(point.x / devicePixelRatio),
+      y: Math.round(point.y / devicePixelRatio)
+    }));
+
+    // Scale down by `displayPixelRatio` since infobar's HTML elements already take it
+    // into account, and the zoom scaling is handled by `moveInfobar`.
+    let bounds = getBoundsFromPoints(points.map(point => ({
+      x: Math.round(point.x / displayPixelRatio),
+      y: Math.round(point.y / displayPixelRatio)
+    })));
+
+    let cells = this.getElement("cells");
+    cells.setAttribute("d", getPathDescriptionFromPoints(svgPoints));
+
+    this._showGridCellInfoBar();
+    this._updateGridCellInfobar(rowNumber, columnNumber, bounds);
+  }
+
+  /**
+   * Render the grid gap area on the css grid highlighter canvas.
+   *
+   * @param  {Number} linePos
+   *         The line position along the x-axis for a column grid line and
+   *         y-axis for a row grid line.
+   * @param  {Number} startPos
+   *         The start position of the cross side of the grid line.
+   * @param  {Number} endPos
+   *         The end position of the cross side of the grid line.
+   * @param  {Number} breadth
+   *         The grid line breadth value.
+   * @param  {String} dimensionType
+   *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   */
+  renderGridGap(linePos, startPos, endPos, breadth, dimensionType) {
+    let { devicePixelRatio } = this.win;
+    let displayPixelRatio = getDisplayPixelRatio(this.win);
+    let offset = (displayPixelRatio / 2) % 1;
+    let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
+    let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
+
+    linePos = Math.round(linePos);
+    startPos = Math.round(startPos);
+    breadth = Math.round(breadth);
+
+    this.ctx.save();
+    this.ctx.fillStyle = this.getGridGapPattern(devicePixelRatio, dimensionType);
+    this.ctx.translate(offset - canvasX, offset - canvasY);
+
+    if (dimensionType === COLUMNS) {
+      if (isFinite(endPos)) {
+        endPos = Math.round(endPos);
+      } else {
+        endPos = this._winDimensions.height;
+        startPos = -endPos;
+      }
+      drawRect(this.ctx, linePos, startPos, linePos + breadth, endPos,
+        this.currentMatrix);
+    } else {
+      if (isFinite(endPos)) {
+        endPos = Math.round(endPos);
+      } else {
+        endPos = this._winDimensions.width;
+        startPos = -endPos;
+      }
+      drawRect(this.ctx, startPos, linePos, endPos, linePos + breadth,
+        this.currentMatrix);
+    }
+
+    this.ctx.fill();
+    this.ctx.restore();
   }
 
   /**
-   * Is a given grid fragment valid? i.e. does it actually have tracks? In some cases, we
-   * may have a fragment that defines column tracks but doesn't have any rows (or vice
-   * versa). In which case we do not want to draw anything for that fragment.
+   * Render the grid line name highlight for the given grid fragment index, lineNumber,
+   * and dimensionType.
+   *
+   * @param  {Number} gridFragmentIndex
+   *         Index of the grid fragment to render the grid line highlight.
+   * @param  {Number} lineNumber
+   *         Line number of the grid line to highlight.
+   * @param  {String} dimensionType
+   *         The dimension type of the grid line.
+   */
+  renderGridLineNames(gridFragmentIndex, lineNumber, dimensionType) {
+    let fragment = this.gridData[gridFragmentIndex];
+
+    if (!fragment || !lineNumber || !dimensionType) {
+      return;
+    }
+
+    const { names } = fragment[dimensionType].lines[lineNumber - 1];
+    let linePos;
+
+    if (dimensionType === ROWS) {
+      linePos = fragment.rows.lines[lineNumber - 1];
+    } else if (dimensionType === COLUMNS) {
+      linePos = fragment.cols.lines[lineNumber - 1];
+    }
+
+    if (!linePos) {
+      return;
+    }
+
+    let currentZoom = getCurrentZoom(this.win);
+    let { bounds } = this.currentQuads.content[gridFragmentIndex];
+
+    const rowYPosition = fragment.rows.lines[0];
+    const colXPosition = fragment.rows.lines[0];
+
+    let x = dimensionType === COLUMNS
+      ? linePos.start + (bounds.left / currentZoom)
+      : colXPosition.start + (bounds.left / currentZoom);
+
+    let y = dimensionType === ROWS
+      ? linePos.start + (bounds.top / currentZoom)
+      : rowYPosition.start + (bounds.top / currentZoom);
+
+    this._showGridLineInfoBar();
+    this._updateGridLineInfobar(names.join(", "), lineNumber, x, y);
+  }
+
+  /**
+   * Render the grid line number on the css grid highlighter canvas.
    *
-   * @param {Object} fragment
-   * @return {Boolean}
+   * @param  {Number} lineNumber
+   *         The grid line number.
+   * @param  {Number} linePos
+   *         The line position along the x-axis for a column grid line and
+   *         y-axis for a row grid line.
+   * @param  {Number} startPos
+   *         The start position of the cross side of the grid line.
+   * @param  {Number} breadth
+   *         The grid line breadth value.
+   * @param  {String} dimensionType
+   *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   * @param  {Number||undefined} stackedLineIndex
+   *         The line index position of the stacked line.
    */
-  isValidFragment(fragment) {
-    return fragment.cols.tracks.length && fragment.rows.tracks.length;
+  renderGridLineNumber(lineNumber, linePos, startPos, breadth, dimensionType,
+    stackedLineIndex) {
+    let displayPixelRatio = getDisplayPixelRatio(this.win);
+    let { devicePixelRatio } = this.win;
+    let offset = (displayPixelRatio / 2) % 1;
+    let fontSize = GRID_FONT_SIZE * displayPixelRatio;
+    let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
+    let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
+
+    linePos = Math.round(linePos);
+    startPos = Math.round(startPos);
+    breadth = Math.round(breadth);
+
+    if (linePos + breadth < 0) {
+      // Don't render the line number since the line is not visible on screen.
+      return;
+    }
+
+    this.ctx.save();
+    this.ctx.translate(offset - canvasX, offset - canvasY);
+    this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
+
+    // For a general grid box, the height of the character "m" will be its minimum width
+    // and height. If line number's text width is greater, then use the grid box's text
+    // width instead.
+    let textHeight = this.ctx.measureText("m").width;
+    let textWidth = Math.max(textHeight, this.ctx.measureText(lineNumber).width);
+
+    // Padding in pixels for the line number text inside of the line number container.
+    let padding = 3 * displayPixelRatio;
+    let offsetFromEdge = 2 * displayPixelRatio;
+
+    let boxWidth = textWidth + 2 * padding;
+    let boxHeight = textHeight + 2 * padding;
+
+    // Calculate the x & y coordinates for the line number container, so that its arrow
+    // tip is centered on the line (or the gap if there is one), and is offset by the
+    // calculated padding value from the grid container edge.
+    let x, y;
+
+    if (dimensionType === COLUMNS) {
+      x = linePos + breadth / 2;
+      y = startPos;
+
+      if (lineNumber > 0) {
+        y -= offsetFromEdge;
+      } else {
+        y += offsetFromEdge;
+      }
+    } else if (dimensionType === ROWS) {
+      x = startPos;
+      y = linePos + breadth / 2;
+
+      if (lineNumber > 0) {
+        x -= offsetFromEdge;
+      } else {
+        x += offsetFromEdge;
+      }
+    }
+
+    [x, y] = apply(this.currentMatrix, [x, y]);
+
+    if (stackedLineIndex) {
+      // Offset the stacked line number by half of the box's width/height.
+      const xOffset = boxWidth / 4;
+      const yOffset = boxHeight / 4;
+
+      if (lineNumber > 0) {
+        x -= xOffset;
+        y -= yOffset;
+      } else {
+        x += xOffset;
+        y += yOffset;
+      }
+    }
+
+    if (!this.hasNodeTransformations) {
+      x = Math.max(x, padding);
+      y = Math.max(y, padding);
+    }
+
+    // Draw a bubble rectanglular arrow with a border width of 2 pixels, a border color
+    // matching the grid color and a white background (the line number will be written in
+    // black).
+    this.ctx.lineWidth = 2 * displayPixelRatio;
+    this.ctx.strokeStyle = this.color;
+    this.ctx.fillStyle = "white";
+
+    // See param definitions of drawBubbleRect.
+    let radius = 2 * displayPixelRatio;
+    let margin = 2 * displayPixelRatio;
+    let arrowSize = 8 * displayPixelRatio;
+
+    let minBoxSize = arrowSize * 2 + padding;
+    boxWidth = Math.max(boxWidth, minBoxSize);
+    boxHeight = Math.max(boxHeight, minBoxSize);
+
+    if (dimensionType === COLUMNS) {
+      if (lineNumber > 0) {
+        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
+          "top");
+        // After drawing the number box, we need to center the x/y coordinates of the
+        // number text written it.
+        y -= (boxHeight + arrowSize + radius) - boxHeight / 2;
+      } else {
+        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
+          "bottom");
+        y += (boxHeight + arrowSize + radius) - boxHeight / 2;
+      }
+    } else if (dimensionType === ROWS) {
+      if (lineNumber > 0) {
+        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
+          "left");
+        x -= (boxWidth + arrowSize + radius) - boxWidth / 2;
+      } else {
+        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
+          "right");
+        x += (boxWidth + arrowSize + radius) - boxWidth / 2;
+      }
+    }
+
+    // Write the line number inside of the rectangle.
+    this.ctx.textAlign = "center";
+    this.ctx.textBaseline = "middle";
+    this.ctx.fillStyle = "black";
+    const numberText = stackedLineIndex ? "" : lineNumber;
+    this.ctx.fillText(numberText, x, y);
+    this.ctx.restore();
   }
 
   /**
-   * The AutoRefreshHighlighter's _hasMoved method returns true only if the
-   * element's quads have changed. Override it so it also returns true if the
-   * element's grid has changed (which can happen when you change the
-   * grid-template-* CSS properties with the highlighter displayed).
+   * Render the grid line on the css grid highlighter canvas.
+   *
+   * @param  {Number} linePos
+   *         The line position along the x-axis for a column grid line and
+   *         y-axis for a row grid line.
+   * @param  {Number} startPos
+   *         The start position of the cross side of the grid line.
+   * @param  {Number} endPos
+   *         The end position of the cross side of the grid line.
+   * @param  {String} dimensionType
+   *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   * @param  {String} lineType
+   *         The grid line type - "edge", "explicit", or "implicit".
+   */
+  renderLine(linePos, startPos, endPos, dimensionType, lineType) {
+    let { devicePixelRatio } = this.win;
+    let lineWidth = getDisplayPixelRatio(this.win);
+    let offset = (lineWidth / 2) % 1;
+    let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
+    let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
+
+    linePos = Math.round(linePos);
+    startPos = Math.round(startPos);
+    endPos = Math.round(endPos);
+
+    this.ctx.save();
+    this.ctx.setLineDash(GRID_LINES_PROPERTIES[lineType].lineDash);
+    this.ctx.beginPath();
+    this.ctx.translate(offset - canvasX, offset - canvasY);
+
+    let lineOptions = {
+      matrix: this.currentMatrix
+    };
+
+    if (this.options.showInfiniteLines) {
+      lineOptions.extendToBoundaries = [canvasX, canvasY, canvasX + CANVAS_SIZE,
+                                        canvasY + CANVAS_SIZE];
+    }
+
+    if (dimensionType === COLUMNS) {
+      drawLine(this.ctx, linePos, startPos, linePos, endPos, lineOptions);
+    } else {
+      drawLine(this.ctx, startPos, linePos, endPos, linePos, lineOptions);
+    }
+
+    this.ctx.strokeStyle = this.color;
+    this.ctx.globalAlpha = GRID_LINES_PROPERTIES[lineType].alpha;
+
+    if (GRID_LINES_PROPERTIES[lineType].lineWidth) {
+      this.ctx.lineWidth = GRID_LINES_PROPERTIES[lineType].lineWidth * devicePixelRatio;
+    } else {
+      this.ctx.lineWidth = lineWidth;
+    }
+
+    this.ctx.stroke();
+    this.ctx.restore();
+  }
+
+  /**
+   * Render the grid lines given the grid dimension information of the
+   * column or row lines.
+   *
+   * @param  {GridDimension} gridDimension
+   *         Column or row grid dimension object.
+   * @param  {Object} quad.bounds
+   *         The content bounds of the box model region quads.
+   * @param  {String} dimensionType
+   *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   * @param  {Number} startPos
+   *         The start position of the cross side ("left" for ROWS and "top" for COLUMNS)
+   *         of the grid dimension.
+   * @param  {Number} endPos
+   *         The end position of the cross side ("left" for ROWS and "top" for COLUMNS)
+   *         of the grid dimension.
    */
-  _hasMoved() {
-    let hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this);
+  renderLines(gridDimension, dimensionType, startPos, endPos) {
+    const { lines, tracks } = gridDimension;
+    const lastEdgeLineIndex = this.getLastEdgeLineIndex(tracks);
+
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+      let linePos = line.start;
+
+      if (i == 0 || i == lastEdgeLineIndex) {
+        this.renderLine(linePos, startPos, endPos, dimensionType, "edge");
+      } else {
+        this.renderLine(linePos, startPos, endPos, dimensionType, tracks[i - 1].type);
+      }
+
+      // Render a second line to illustrate the gutter for non-zero breadth.
+      if (line.breadth > 0) {
+        this.renderGridGap(linePos, startPos, endPos, line.breadth, dimensionType);
+        this.renderLine(linePos + line.breadth, startPos, endPos, dimensionType,
+          tracks[i].type);
+      }
+    }
+  }
+
+  /**
+   * Render the grid lines given the grid dimension information of the
+   * column or row lines.
+   *
+   * @param  {GridDimension} gridDimension
+   *         Column or row grid dimension object.
+   * @param  {String} dimensionType
+   *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   * @param  {Number} startPos
+   *         The start position of the cross side ("left" for ROWS and "top" for COLUMNS)
+   *         of the grid dimension.
+   */
+  renderLineNumbers(gridDimension, dimensionType, startPos) {
+    const { lines, tracks } = gridDimension;
+    // Keep track of the number of collapsed lines per line position.
+    let stackedLines = [];
+
+    for (let i = 0, line; (line = lines[i++]);) {
+      // If you place something using negative numbers, you can trigger some implicit
+      // grid creation above and to the left of the explicit grid (assuming a
+      // horizontal-tb writing mode).
+      //
+      // The first explicit grid line gets the number of 1, and any implicit grid lines
+      // before 1 get negative numbers. Since here we're rendering only the positive line
+      // numbers, we have to skip any implicit grid lines before the first one that is
+      // explicit. The API returns a 0 as the line's number for these implicit lines that
+      // occurs before the first explicit line.
+      if (line.number === 0) {
+        continue;
+      }
+
+      // Check for overlapping lines. We render a second box beneath the last overlapping
+      // line number to indicate there are lines beneath it.
+      const gridLine = tracks[line.number - 1];
+
+      if (gridLine) {
+        const { breadth }  = gridLine;
+
+        if (breadth === 0) {
+          stackedLines.push(lines[i].number);
 
-    let oldGridData = stringifyGridFragments(this.gridData);
-    this.gridData = this.currentNode.getGridFragments();
-    let newGridData = stringifyGridFragments(this.gridData);
+          if (stackedLines.length > 0) {
+            this.renderGridLineNumber(line.number, line.start, startPos, line.breadth,
+              dimensionType, 1);
+          }
+
+          continue;
+        }
+      }
+
+      this.renderGridLineNumber(line.number, line.start, startPos, line.breadth,
+        dimensionType);
+    }
+  }
+
+  /**
+   * Render the negative grid lines given the grid dimension information of the
+   * column or row lines.
+   *
+   * @param  {GridDimension} gridDimension
+   *         Column or row grid dimension object.
+   * @param  {String} dimensionType
+   *         The grid dimension type which is either the constant COLUMNS or ROWS.
+   * @param  {Number} startPos
+   *         The start position of the cross side ("left" for ROWS and "top" for COLUMNS)
+   *         of the grid dimension.
+   */
+  renderNegativeLineNumbers(gridDimension, dimensionType, startPos) {
+    const { lines, tracks } = gridDimension;
+    // Keep track of the number of collapsed lines per line position.
+    let stackedLines = [];
+
+    for (let i = 0, line; (line = lines[i++]);) {
+      let linePos = line.start;
+      let negativeLineNumber = line.negativeNumber;
 
-    return hasMoved || oldGridData !== newGridData;
+      // Don't render any negative line number greater than -1.
+      if (negativeLineNumber == 0) {
+        break;
+      }
+
+      // Check for overlapping lines. We render a second box beneath the last overlapping
+      // line number to indicate there are lines beneath it.
+      const gridLine = tracks[line.number - 1];
+
+      if (gridLine) {
+        const { breadth }  = gridLine;
+
+        if (breadth === 0) {
+          stackedLines.push(negativeLineNumber);
+
+          if (stackedLines.length > 0) {
+            this.renderGridLineNumber(negativeLineNumber, linePos, startPos,
+              line.breadth, dimensionType, 1);
+          }
+
+          continue;
+        }
+      }
+
+      // For negative line numbers, we want to display the smallest
+      // value at the front of the stack.
+      if (stackedLines.length) {
+        negativeLineNumber = stackedLines[0];
+        stackedLines = [];
+      }
+
+      this.renderGridLineNumber(negativeLineNumber, linePos, startPos, line.breadth,
+        dimensionType);
+    }
   }
 
   /**
    * Update the highlighter on the current highlighted node (the one that was
-   * passed as an argument to show(node)).
-   * Should be called whenever node's geometry or grid changes.
+   * passed as an argument to show(node)). Should be called whenever node's geometry
+   * or grid changes.
    */
   _update() {
     setIgnoreLayoutChanges(true);
 
     let root = this.getElement("root");
     let cells = this.getElement("cells");
     let areas = this.getElement("areas");
 
@@ -648,17 +1465,17 @@ class CssGridHighlighter extends AutoRef
     // Updates the <canvas> element's position and size.
     // It also clear the <canvas>'s drawing context.
     updateCanvasElement(this.canvas, this._canvasPosition, this.win.devicePixelRatio);
 
     // Clear the grid area highlights.
     this.clearGridAreas();
     this.clearGridCell();
 
-    // Update the current matrix used in our canvas' rendering
+    // Update the current matrix used in our canvas' rendering.
     let { currentMatrix, hasNodeTransformations } = getCurrentMatrix(this.currentNode,
       this.win);
     this.currentMatrix = currentMatrix;
     this.hasNodeTransformations = hasNodeTransformations;
 
     // Start drawing the grid fragments.
     for (let i = 0; i < this.gridData.length; i++) {
       this.renderFragment(this.gridData[i]);
@@ -725,18 +1542,18 @@ class CssGridHighlighter extends AutoRef
    * @param  {Object} bounds
    *         A DOMRect-like object represent the grid cell rectangle.
    */
   _updateGridCellInfobar(rowNumber, columnNumber, bounds) {
     let { width, height } = bounds;
     let dim = parseFloat(width.toPrecision(6)) +
               " \u00D7 " +
               parseFloat(height.toPrecision(6));
-    let position = LAYOUT_L10N.getFormatStr("layout.rowColumnPositions",
-                   rowNumber, columnNumber);
+    let position = LAYOUT_L10N.getFormatStr("layout.rowColumnPositions", rowNumber,
+      columnNumber);
 
     this.getElement("cell-infobar-position").setTextContent(position);
     this.getElement("cell-infobar-dimensions").setTextContent(dim);
 
     let container = this.getElement("cell-infobar-container");
     moveInfobar(container, bounds, this.win, {
       position: "top",
       hideIfOffscreen: true
@@ -755,850 +1572,14 @@ class CssGridHighlighter extends AutoRef
    * @param  {Number} y
    *         The y-coordinate of the grid line.
    */
   _updateGridLineInfobar(gridLineNames, gridLineNumber, x, y) {
     this.getElement("line-infobar-number").setTextContent(gridLineNumber);
     this.getElement("line-infobar-names").setTextContent(gridLineNames);
 
     let container = this.getElement("line-infobar-container");
-    moveInfobar(container,
-      getBoundsFromPoints([{x, y}, {x, y}, {x, y}, {x, y}]), this.win);
-  }
-
-  /**
-   * The <canvas>'s position needs to be updated if the page scrolls too much, in order
-   * to give the illusion that it always covers the viewport.
-   */
-  _scrollUpdate() {
-    let hasUpdated = updateCanvasPosition(this._canvasPosition, this._scroll, this.win,
-      this._winDimensions);
-
-    if (hasUpdated) {
-      this._update();
-    }
-  }
-
-  getFirstRowLinePos(fragment) {
-    return fragment.rows.lines[0].start;
-  }
-
-  getLastRowLinePos(fragment) {
-    return fragment.rows.lines[fragment.rows.lines.length - 1].start;
-  }
-
-  getFirstColLinePos(fragment) {
-    return fragment.cols.lines[0].start;
-  }
-
-  getLastColLinePos(fragment) {
-    return fragment.cols.lines[fragment.cols.lines.length - 1].start;
-  }
-
-  /**
-   * Get the GridLine index of the last edge of the explicit grid for a grid dimension.
-   *
-   * @param  {GridTracks} tracks
-   *         The grid track of a given grid dimension.
-   * @return {Number} index of the last edge of the explicit grid for a grid dimension.
-   */
-  getLastEdgeLineIndex(tracks) {
-    let trackIndex = tracks.length - 1;
-
-    // Traverse the grid track backwards until we find an explicit track.
-    while (trackIndex >= 0 && tracks[trackIndex].type != "explicit") {
-      trackIndex--;
-    }
-
-    // The grid line index is the grid track index + 1.
-    return trackIndex + 1;
-  }
-
-  renderFragment(fragment) {
-    if (!this.isValidFragment(fragment)) {
-      return;
-    }
-
-    this.renderLines(fragment.cols, COLUMNS, "left", "top", "height",
-                     this.getFirstRowLinePos(fragment),
-                     this.getLastRowLinePos(fragment));
-    this.renderLines(fragment.rows, ROWS, "top", "left", "width",
-                     this.getFirstColLinePos(fragment),
-                     this.getLastColLinePos(fragment));
-
-    if (this.options.showGridAreasOverlay) {
-      this.renderGridAreaOverlay();
-    }
-
-    // Line numbers are rendered in a 2nd step to avoid overlapping with existing lines.
-    if (this.options.showGridLineNumbers) {
-      this.renderLineNumbers(fragment.cols, COLUMNS, "left", "top",
-                       this.getFirstRowLinePos(fragment));
-      this.renderLineNumbers(fragment.rows, ROWS, "top", "left",
-                       this.getFirstColLinePos(fragment));
-
-      if (Services.prefs.getBoolPref(NEGATIVE_LINE_NUMBERS_PREF)) {
-        this.renderNegativeLineNumbers(fragment.cols, COLUMNS, "left", "top",
-                          this.getLastRowLinePos(fragment));
-        this.renderNegativeLineNumbers(fragment.rows, ROWS, "top", "left",
-                          this.getLastColLinePos(fragment));
-      }
-    }
-  }
-
-  /**
-   * Render the negative grid lines given the grid dimension information of the
-   * column or row lines.
-   *
-   * See @param for renderLines.
-   */
-  renderNegativeLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
-            startPos) {
-    let lineStartPos = startPos;
-
-    // Keep track of the number of collapsed lines per line position
-    let stackedLines = [];
-
-    const { lines } = gridDimension;
-
-    for (let i = 0, line; (line = lines[i++]);) {
-      let linePos = line.start;
-      let negativeLineNumber = i - lines.length - 1;
-
-      // Check for overlapping lines. We render a second box beneath the last overlapping
-      // line number to indicate there are lines beneath it.
-      const gridLine = gridDimension.tracks[line.number - 1];
-
-      if (gridLine) {
-        const { breadth }  = gridLine;
-
-        if (breadth === 0) {
-          stackedLines.push(negativeLineNumber);
-
-          if (stackedLines.length > 0) {
-            this.renderGridLineNumber(negativeLineNumber, linePos, lineStartPos,
-              line.breadth, dimensionType, 1);
-          }
-
-          continue;
-        }
-      }
-
-      // For negative line numbers, we want to display the smallest
-      // value at the front of the stack.
-      if (stackedLines.length) {
-        negativeLineNumber = stackedLines[0];
-        stackedLines = [];
-      }
-
-      this.renderGridLineNumber(negativeLineNumber, linePos, lineStartPos, line.breadth,
-        dimensionType);
-    }
-  }
-
-  /**
-   * Renders the grid area overlay on the css grid highlighter canvas.
-   */
-  renderGridAreaOverlay() {
-    let padding = 1;
-
-    for (let i = 0; i < this.gridData.length; i++) {
-      let fragment = this.gridData[i];
-
-      for (let area of fragment.areas) {
-        let { rowStart, rowEnd, columnStart, columnEnd, type } = area;
-
-        if (type === "implicit") {
-          continue;
-        }
-
-        // Draw the line edges for the grid area
-        const areaColStart = fragment.cols.lines[columnStart - 1];
-        const areaColEnd = fragment.cols.lines[columnEnd - 1];
-
-        const areaRowStart = fragment.rows.lines[rowStart - 1];
-        const areaRowEnd = fragment.rows.lines[rowEnd - 1];
-
-        const areaColStartLinePos = areaColStart.start + areaColStart.breadth;
-        const areaRowStartLinePos = areaRowStart.start + areaRowStart.breadth;
-
-        this.renderLine(areaColStartLinePos + padding,
-                        areaRowStartLinePos, areaRowEnd.start,
-                        COLUMNS, "areaEdge");
-        this.renderLine(areaColEnd.start - padding,
-                        areaRowStartLinePos, areaRowEnd.start,
-                        COLUMNS, "areaEdge");
-
-        this.renderLine(areaRowStartLinePos + padding,
-                        areaColStartLinePos, areaColEnd.start,
-                        ROWS, "areaEdge");
-        this.renderLine(areaRowEnd.start - padding,
-                        areaColStartLinePos, areaColEnd.start,
-                        ROWS, "areaEdge");
-
-        this.renderGridAreaName(fragment, area);
-      }
-    }
-
-    this.ctx.restore();
-  }
-
-  /**
-   * Render grid area name on the containing grid area cell.
-   *
-   * @param  {Object} fragment
-   *         The grid fragment of the grid container.
-   * @param  {Object} area
-   *         The area overlay to render on the CSS highlighter canvas.
-   */
-  renderGridAreaName(fragment, area) {
-    let { rowStart, rowEnd, columnStart, columnEnd } = area;
-    let { devicePixelRatio } = this.win;
-    let displayPixelRatio = getDisplayPixelRatio(this.win);
-    let offset = (displayPixelRatio / 2) % 1;
-    let fontSize = (GRID_AREA_NAME_FONT_SIZE * displayPixelRatio);
-
-    this.ctx.save();
-
-    let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
-    let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
-    this.ctx.translate(offset - canvasX, offset - canvasY);
-
-    this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
-    this.ctx.strokeStyle = this.color;
-    this.ctx.textAlign = "center";
-    this.ctx.textBaseline = "middle";
-
-    // Draw the text for the grid area name.
-    for (let rowNumber = rowStart; rowNumber < rowEnd; rowNumber++) {
-      for (let columnNumber = columnStart; columnNumber < columnEnd; columnNumber++) {
-        let row = fragment.rows.tracks[rowNumber - 1];
-        let column = fragment.cols.tracks[columnNumber - 1];
-
-        // Check if the font size is exceeds the bounds of the containing grid cell.
-        if (fontSize > (column.breadth * displayPixelRatio) ||
-            fontSize > (row.breadth * displayPixelRatio)) {
-          fontSize = (column.breadth + row.breadth) / 2;
-          this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
-        }
-
-        let textWidth = this.ctx.measureText(area.name).width;
-
-        // The width of the character 'm' approximates the height of the text.
-        let textHeight = this.ctx.measureText("m").width;
-
-        // Padding in pixels for the line number text inside of the line number container.
-        let padding = 3 * displayPixelRatio;
-
-        let boxWidth = textWidth + 2 * padding;
-        let boxHeight = textHeight + 2 * padding;
-
-        let x = column.start + column.breadth / 2;
-        let y = row.start + row.breadth / 2;
-
-        [x, y] = apply(this.currentMatrix, [x, y]);
-
-        let rectXPos = x - boxWidth / 2;
-        let rectYPos = y - boxHeight / 2;
-
-        // Draw a rounded rectangle with a border width of 1 pixel,
-        // a border color matching the grid color, and a white background
-        this.ctx.lineWidth = 1 * displayPixelRatio;
-        this.ctx.strokeStyle = this.color;
-        this.ctx.fillStyle = "white";
-        let radius = 2 * displayPixelRatio;
-        drawRoundedRect(this.ctx, rectXPos, rectYPos, boxWidth, boxHeight, radius);
-
-        this.ctx.fillStyle = this.color;
-        this.ctx.fillText(area.name, x, y + padding);
-      }
-    }
-
-    this.ctx.restore();
-  }
-
-  /**
-   * Render the grid lines given the grid dimension information of the
-   * column or row lines.
-   *
-   * @param  {GridDimension} gridDimension
-   *         Column or row grid dimension object.
-   * @param  {Object} quad.bounds
-   *         The content bounds of the box model region quads.
-   * @param  {String} dimensionType
-   *         The grid dimension type which is either the constant COLUMNS or ROWS.
-   * @param  {String} mainSide
-   *         The main side of the given grid dimension - "top" for rows and
-   *         "left" for columns.
-   * @param  {String} crossSide
-   *         The cross side of the given grid dimension - "left" for rows and
-   *         "top" for columns.
-   * @param  {String} mainSize
-   *         The main size of the given grid dimension - "width" for rows and
-   *         "height" for columns.
-   * @param  {Number} startPos
-   *         The start position of the cross side of the grid dimension.
-   * @param  {Number} endPos
-   *         The end position of the cross side of the grid dimension.
-   */
-  renderLines(gridDimension, dimensionType, mainSide, crossSide,
-              mainSize, startPos, endPos) {
-    let lineStartPos = startPos;
-    let lineEndPos = endPos;
-
-    let lastEdgeLineIndex = this.getLastEdgeLineIndex(gridDimension.tracks);
-
-    for (let i = 0; i < gridDimension.lines.length; i++) {
-      let line = gridDimension.lines[i];
-      let linePos = line.start;
-
-      if (i == 0 || i == lastEdgeLineIndex) {
-        this.renderLine(linePos, lineStartPos, lineEndPos, dimensionType, "edge");
-      } else {
-        this.renderLine(linePos, lineStartPos, lineEndPos, dimensionType,
-                        gridDimension.tracks[i - 1].type);
-      }
-
-      // Render a second line to illustrate the gutter for non-zero breadth.
-      if (line.breadth > 0) {
-        this.renderGridGap(linePos, lineStartPos, lineEndPos, line.breadth,
-                           dimensionType);
-        this.renderLine(linePos + line.breadth, lineStartPos, lineEndPos, dimensionType,
-                        gridDimension.tracks[i].type);
-      }
-    }
-  }
-
-  /**
-   * Render the grid lines given the grid dimension information of the
-   * column or row lines.
-   *
-   * see @param for renderLines.
-   */
-  renderLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
-              startPos) {
-    let lineStartPos = startPos;
-
-    // Keep track of the number of collapsed lines per line position
-    let stackedLines = [];
-
-    const { lines } = gridDimension;
-
-    for (let i = 0, line; (line = lines[i++]);) {
-      let linePos = line.start;
-
-      // If you place something using negative numbers, you can trigger some implicit grid
-      // creation above and to the left of the explicit grid (assuming a horizontal-tb
-      // writing mode).
-      // The first explicit grid line gets the number of 1; any implicit grid lines
-      // before 1 get negative numbers, but do not get any positivity numbers.
-      // Since here we're rendering only the positive line numbers, we have to skip any
-      // implicit grid lines before the first tha is explicit.
-      // For such lines the API returns always 0 as line's number.
-      if (line.number === 0) {
-        continue;
-      }
-
-      // Check for overlapping lines. We render a second box beneath the last overlapping
-      // line number to indicate there are lines beneath it.
-      const gridLine = gridDimension.tracks[line.number - 1];
-
-      if (gridLine) {
-        const { breadth }  = gridLine;
-
-        if (breadth === 0) {
-          stackedLines.push(gridDimension.lines[i].number);
-
-          if (stackedLines.length > 0) {
-            this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
-              dimensionType, 1);
-          }
-
-          continue;
-        }
-      }
-
-      this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
-        dimensionType);
-    }
-  }
-
-  /**
-   * Render the grid line on the css grid highlighter canvas.
-   *
-   * @param  {Number} linePos
-   *         The line position along the x-axis for a column grid line and
-   *         y-axis for a row grid line.
-   * @param  {Number} startPos
-   *         The start position of the cross side of the grid line.
-   * @param  {Number} endPos
-   *         The end position of the cross side of the grid line.
-   * @param  {String} dimensionType
-   *         The grid dimension type which is either the constant COLUMNS or ROWS.
-   * @param  {String} lineType
-   *         The grid line type - "edge", "explicit", or "implicit".
-   */
-  renderLine(linePos, startPos, endPos, dimensionType, lineType) {
-    let { devicePixelRatio } = this.win;
-    let lineWidth = getDisplayPixelRatio(this.win);
-    let offset = (lineWidth / 2) % 1;
-
-    let x = Math.round(this._canvasPosition.x * devicePixelRatio);
-    let y = Math.round(this._canvasPosition.y * devicePixelRatio);
-
-    linePos = Math.round(linePos);
-    startPos = Math.round(startPos);
-    endPos = Math.round(endPos);
-
-    this.ctx.save();
-    this.ctx.setLineDash(GRID_LINES_PROPERTIES[lineType].lineDash);
-    this.ctx.beginPath();
-    this.ctx.translate(offset - x, offset - y);
-
-    let lineOptions = {
-      matrix: this.currentMatrix
-    };
-
-    if (this.options.showInfiniteLines) {
-      lineOptions.extendToBoundaries = [x, y, x + CANVAS_SIZE, y + CANVAS_SIZE];
-    }
-
-    if (dimensionType === COLUMNS) {
-      drawLine(this.ctx, linePos, startPos, linePos, endPos, lineOptions);
-    } else {
-      drawLine(this.ctx, startPos, linePos, endPos, linePos, lineOptions);
-    }
-
-    this.ctx.strokeStyle = this.color;
-    this.ctx.globalAlpha = GRID_LINES_PROPERTIES[lineType].alpha;
-
-    if (GRID_LINES_PROPERTIES[lineType].lineWidth) {
-      this.ctx.lineWidth = GRID_LINES_PROPERTIES[lineType].lineWidth * devicePixelRatio;
-    } else {
-      this.ctx.lineWidth = lineWidth;
-    }
-
-    this.ctx.stroke();
-    this.ctx.restore();
-  }
-
-  /**
-   * Render the grid line number on the css grid highlighter canvas.
-   *
-   * @param  {Number} lineNumber
-   *         The grid line number.
-   * @param  {Number} linePos
-   *         The line position along the x-axis for a column grid line and
-   *         y-axis for a row grid line.
-   * @param  {Number} startPos
-   *         The start position of the cross side of the grid line.
-   * @param  {Number} breadth
-   *         The grid line breadth value.
-   * @param  {String} dimensionType
-   *         The grid dimension type which is either the constant COLUMNS or ROWS.
-   * @param  {Number||undefined} stackedLineIndex
-   *         The line index position of the stacked line.
-   */
-  renderGridLineNumber(lineNumber, linePos, startPos, breadth, dimensionType,
-    stackedLineIndex) {
-    let displayPixelRatio = getDisplayPixelRatio(this.win);
-    let { devicePixelRatio } = this.win;
-    let offset = (displayPixelRatio / 2) % 1;
-
-    linePos = Math.round(linePos);
-    startPos = Math.round(startPos);
-    breadth = Math.round(breadth);
-
-    if (linePos + breadth < 0) {
-      // The line is not visible on screen, don't render the line number
-      return;
-    }
-
-    this.ctx.save();
-    let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
-    let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
-    this.ctx.translate(offset - canvasX, offset - canvasY);
-
-    let fontSize = (GRID_FONT_SIZE * displayPixelRatio);
-    this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
-
-    // For a general grid box, the height of the character "m" will be its minimum width
-    // and height. If line number's text width is greater then grid box's text width
-    // will use that instead.
-    let textHeight = this.ctx.measureText("m").width;
-    let textWidth = Math.max(textHeight, this.ctx.measureText(lineNumber).width);
-
-    // Padding in pixels for the line number text inside of the line number container.
-    let padding = 3 * displayPixelRatio;
-    let offsetFromEdge = 2 * displayPixelRatio;
-
-    let boxWidth = textWidth + 2 * padding;
-    let boxHeight = textHeight + 2 * padding;
-
-     // Calculate the x & y coordinates for the line number container, so that its arrow
-     // tip is centered on the line (or the gap if there is one), and is offset by the
-     // calculated padding value from the grid container edge.
-    let x, y;
-
-    if (dimensionType === COLUMNS) {
-      x = linePos + breadth / 2;
-      y = startPos;
-
-      if (lineNumber > 0) {
-        y -= offsetFromEdge;
-      } else {
-        y += offsetFromEdge;
-      }
-    } else if (dimensionType === ROWS) {
-      x = startPos;
-      y = linePos + breadth / 2;
-
-      if (lineNumber > 0) {
-        x -= offsetFromEdge;
-      } else {
-        x += offsetFromEdge;
-      }
-    }
-
-    [x, y] = apply(this.currentMatrix, [x, y]);
-
-    if (stackedLineIndex) {
-      // Offset the stacked line number by half of the box's width/height
-      const xOffset = boxWidth / 4;
-      const yOffset = boxHeight / 4;
-
-      if (lineNumber > 0) {
-        x -= xOffset;
-        y -= yOffset;
-      } else {
-        x += xOffset;
-        y += yOffset;
-      }
-    }
-
-    if (!this.hasNodeTransformations) {
-      x = Math.max(x, padding);
-      y = Math.max(y, padding);
-    }
-
-    // Draw a bubble rectanglular arrow with a border width of 2 pixels, a border color
-    // matching the grid color and a white background (the line number will be written in
-    // black).
-    this.ctx.lineWidth = 2 * displayPixelRatio;
-    this.ctx.strokeStyle = this.color;
-    this.ctx.fillStyle = "white";
-
-    // See param definitions of drawBubbleRect
-    let radius = 2 * displayPixelRatio;
-    let margin = 2 * displayPixelRatio;
-    let arrowSize = 8 * displayPixelRatio;
-
-    let minBoxSize = arrowSize * 2 + padding;
-    boxWidth = Math.max(boxWidth, minBoxSize);
-    boxHeight = Math.max(boxHeight, minBoxSize);
-
-    if (dimensionType === COLUMNS) {
-      if (lineNumber > 0) {
-        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
-          "top");
-        // After drawing the number box, we need to center the x/y coordinates of the
-        // number text written it.
-        y -= (boxHeight + arrowSize + radius) - boxHeight / 2;
-      } else {
-        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
-          "bottom");
-        y += (boxHeight + arrowSize + radius) - boxHeight / 2;
-      }
-    } else if (dimensionType === ROWS) {
-      if (lineNumber > 0) {
-        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
-          "left");
-        x -= (boxWidth + arrowSize + radius) - boxWidth / 2;
-      } else {
-        drawBubbleRect(this.ctx, x, y, boxWidth, boxHeight, radius, margin, arrowSize,
-          "right");
-        x += (boxWidth + arrowSize + radius) - boxWidth / 2;
-      }
-    }
-
-    // Write the line number inside of the rectangle.
-    this.ctx.textAlign = "center";
-    this.ctx.textBaseline = "middle";
-    this.ctx.fillStyle = "black";
-    const numberText = stackedLineIndex ? "" : lineNumber;
-    this.ctx.fillText(numberText, x, y);
-
-    this.ctx.restore();
-  }
-
-  /**
-   * Render the grid gap area on the css grid highlighter canvas.
-   *
-   * @param  {Number} linePos
-   *         The line position along the x-axis for a column grid line and
-   *         y-axis for a row grid line.
-   * @param  {Number} startPos
-   *         The start position of the cross side of the grid line.
-   * @param  {Number} endPos
-   *         The end position of the cross side of the grid line.
-   * @param  {Number} breadth
-   *         The grid line breadth value.
-   * @param  {String} dimensionType
-   *         The grid dimension type which is either the constant COLUMNS or ROWS.
-   */
-  renderGridGap(linePos, startPos, endPos, breadth, dimensionType) {
-    let { devicePixelRatio } = this.win;
-    let displayPixelRatio = getDisplayPixelRatio(this.win);
-    let offset = (displayPixelRatio / 2) % 1;
-
-    let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
-    let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
-
-    linePos = Math.round(linePos);
-    startPos = Math.round(startPos);
-    breadth = Math.round(breadth);
-
-    this.ctx.save();
-    this.ctx.fillStyle = this.getGridGapPattern(devicePixelRatio, dimensionType);
-    this.ctx.translate(offset - canvasX, offset - canvasY);
-
-    if (dimensionType === COLUMNS) {
-      if (isFinite(endPos)) {
-        endPos = Math.round(endPos);
-      } else {
-        endPos = this._winDimensions.height;
-        startPos = -endPos;
-      }
-      drawRect(this.ctx, linePos, startPos, linePos + breadth, endPos,
-        this.currentMatrix);
-    } else {
-      if (isFinite(endPos)) {
-        endPos = Math.round(endPos);
-      } else {
-        endPos = this._winDimensions.width;
-        startPos = -endPos;
-      }
-      drawRect(this.ctx, startPos, linePos, endPos, linePos + breadth,
-        this.currentMatrix);
-    }
-    this.ctx.fill();
-    this.ctx.restore();
-  }
-
-  /**
-   * Render the grid area highlight for the given area name or for all the grid areas.
-   *
-   * @param  {String} areaName
-   *         Name of the grid area to be highlighted. If no area name is provided, all
-   *         the grid areas should be highlighted.
-   */
-  renderGridArea(areaName) {
-    let paths = [];
-    let { devicePixelRatio } = this.win;
-    let displayPixelRatio = getDisplayPixelRatio(this.win);
-
-    for (let i = 0; i < this.gridData.length; i++) {
-      let fragment = this.gridData[i];
-
-      for (let area of fragment.areas) {
-        if (areaName && areaName != area.name) {
-          continue;
-        }
-
-        let rowStart = fragment.rows.lines[area.rowStart - 1];
-        let rowEnd = fragment.rows.lines[area.rowEnd - 1];
-        let columnStart = fragment.cols.lines[area.columnStart - 1];
-        let columnEnd = fragment.cols.lines[area.columnEnd - 1];
-
-        let x1 = columnStart.start + columnStart.breadth;
-        let y1 = rowStart.start + rowStart.breadth;
-        let x2 = columnEnd.start;
-        let y2 = rowEnd.start;
-
-        let points = getPointsFromDiagonal(x1, y1, x2, y2, this.currentMatrix);
-
-        // Scale down by `devicePixelRatio` since SVG element already take them into
-        // account.
-        let svgPoints = points.map(point => ({
-          x: Math.round(point.x / devicePixelRatio),
-          y: Math.round(point.y / devicePixelRatio)
-        }));
-
-        // Scale down by `displayPixelRatio` since infobar's HTML elements already take it
-        // into account; and the zoom scaling is handled by `moveInfobar`.
-        let bounds = getBoundsFromPoints(points.map(point => ({
-          x: Math.round(point.x / displayPixelRatio),
-          y: Math.round(point.y / displayPixelRatio)
-        })));
-
-        paths.push(getPathDescriptionFromPoints(svgPoints));
-
-        // Update and show the info bar when only displaying a single grid area.
-        if (areaName) {
-          this._showGridAreaInfoBar();
-          this._updateGridAreaInfobar(area, bounds);
-        }
-      }
-    }
-
-    let areas = this.getElement("areas");
-    areas.setAttribute("d", paths.join(" "));
-  }
-
-  /**
-   * Render the grid cell highlight for the given grid fragment index, row and column
-   * number.
-   *
-   * @param  {Number} gridFragmentIndex
-   *         Index of the grid fragment to render the grid cell highlight.
-   * @param  {Number} rowNumber
-   *         Row number of the grid cell to highlight.
-   * @param  {Number} columnNumber
-   *         Column number of the grid cell to highlight.
-   */
-  renderGridCell(gridFragmentIndex, rowNumber, columnNumber) {
-    let fragment = this.gridData[gridFragmentIndex];
-
-    if (!fragment) {
-      return;
-    }
-
-    let row = fragment.rows.tracks[rowNumber - 1];
-    let column = fragment.cols.tracks[columnNumber - 1];
-
-    if (!row || !column) {
-      return;
-    }
-
-    let x1 = column.start;
-    let y1 = row.start;
-    let x2 = column.start + column.breadth;
-    let y2 = row.start + row.breadth;
-
-    let { devicePixelRatio } = this.win;
-    let displayPixelRatio = getDisplayPixelRatio(this.win);
-
-    let points = getPointsFromDiagonal(x1, y1, x2, y2, this.currentMatrix);
-
-    // Scale down by `devicePixelRatio` since SVG element already take them into account.
-    let svgPoints = points.map(point => ({
-      x: Math.round(point.x / devicePixelRatio),
-      y: Math.round(point.y / devicePixelRatio)
-    }));
-
-    // Scale down by `displayPixelRatio` since infobar's HTML elements already take it
-    // into account, and the zoom scaling is handled by `moveInfobar`.
-    let bounds = getBoundsFromPoints(points.map(point => ({
-      x: Math.round(point.x / displayPixelRatio),
-      y: Math.round(point.y / displayPixelRatio)
-    })));
-
-    let cells = this.getElement("cells");
-    cells.setAttribute("d", getPathDescriptionFromPoints(svgPoints));
-
-    this._showGridCellInfoBar();
-    this._updateGridCellInfobar(rowNumber, columnNumber, bounds);
-  }
-
-  /**
-   * Render the grid line name highlight for the given grid fragment index, lineNumber,
-   * and dimensionType.
-   *
-   * @param  {Number} gridFragmentIndex
-   *         Index of the grid fragment to render the grid line highlight.
-   * @param  {Number} lineNumber
-   *         Line number of the grid line to highlight.
-   * @param  {String} dimensionType
-   *         The dimension type of the grid line.
-   */
-  renderGridLineNames(gridFragmentIndex, lineNumber, dimensionType) {
-    let fragment = this.gridData[gridFragmentIndex];
-
-    if (!fragment || !lineNumber || !dimensionType) {
-      return;
-    }
-
-    const { names } = fragment[dimensionType].lines[lineNumber - 1];
-    let linePos;
-
-    if (dimensionType === ROWS) {
-      linePos = fragment.rows.lines[lineNumber - 1];
-    } else if (dimensionType === COLUMNS) {
-      linePos = fragment.cols.lines[lineNumber - 1];
-    }
-
-    if (!linePos) {
-      return;
-    }
-
-    let currentZoom = getCurrentZoom(this.win);
-    let { bounds } = this.currentQuads.content[gridFragmentIndex];
-
-    const rowYPosition = fragment.rows.lines[0];
-    const colXPosition = fragment.rows.lines[0];
-
-    let x = dimensionType === COLUMNS
-      ? linePos.start + (bounds.left / currentZoom)
-      : colXPosition.start + (bounds.left / currentZoom);
-
-    let y = dimensionType === ROWS
-      ? linePos.start + (bounds.top / currentZoom)
-      : rowYPosition.start + (bounds.top / currentZoom);
-
-    this._showGridLineInfoBar();
-    this._updateGridLineInfobar(names.join(", "), lineNumber, x, y);
-  }
-
-  /**
-   * Hide the highlighter, the canvas and the infobars.
-   */
-  _hide() {
-    setIgnoreLayoutChanges(true);
-    this._hideGrid();
-    this._hideGridElements();
-    this._hideGridAreaInfoBar();
-    this._hideGridCellInfoBar();
-    this._hideGridLineInfoBar();
-    setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
-  }
-
-  _hideGrid() {
-    this.getElement("canvas").setAttribute("hidden", "true");
-  }
-
-  _showGrid() {
-    this.getElement("canvas").removeAttribute("hidden");
-  }
-
-  _hideGridElements() {
-    this.getElement("elements").setAttribute("hidden", "true");
-  }
-
-  _showGridElements() {
-    this.getElement("elements").removeAttribute("hidden");
-  }
-
-  _hideGridAreaInfoBar() {
-    this.getElement("area-infobar-container").setAttribute("hidden", "true");
-  }
-
-  _showGridAreaInfoBar() {
-    this.getElement("area-infobar-container").removeAttribute("hidden");
-  }
-
-  _hideGridCellInfoBar() {
-    this.getElement("cell-infobar-container").setAttribute("hidden", "true");
-  }
-
-  _showGridCellInfoBar() {
-    this.getElement("cell-infobar-container").removeAttribute("hidden");
-  }
-
-  _hideGridLineInfoBar() {
-    this.getElement("line-infobar-container").setAttribute("hidden", "true");
-  }
-
-  _showGridLineInfoBar() {
-    this.getElement("line-infobar-container").removeAttribute("hidden");
+    moveInfobar(container, getBoundsFromPoints([{x, y}, {x, y}, {x, y}, {x, y}]),
+      this.win);
   }
 }
 
 exports.CssGridHighlighter = CssGridHighlighter;

--- a/dom/animation/KeyframeEffectReadOnly.cpp
+++ b/dom/animation/KeyframeEffectReadOnly.cpp
@@ -1965,21 +1965,28 @@ KeyframeEffectReadOnly::UpdateEffectSet(
   EffectSet* effectSet =
     aEffectSet ? aEffectSet
                : EffectSet::GetEffectSet(mTarget->mElement,
                                          mTarget->mPseudoType);
   if (!effectSet) {
     return;
   }
 
+  nsIFrame* frame = GetAnimationFrame();
   if (HasAnimationOfProperty(eCSSProperty_opacity)) {
     effectSet->SetMayHaveOpacityAnimation();
+    if (frame) {
+      frame->SetMayHaveOpacityAnimation();
+    }
   }
   if (HasAnimationOfProperty(eCSSProperty_transform)) {
     effectSet->SetMayHaveTransformAnimation();
+    if (frame) {
+      frame->SetMayHaveTransformAnimation();
+    }
   }
 }
 
 template
 void
 KeyframeEffectReadOnly::ComposeStyle<RefPtr<AnimValuesStyleRule>&>(
   RefPtr<AnimValuesStyleRule>& aAnimationRule,
   const nsCSSPropertyIDSet& aPropertiesToSkip);

--- a/dom/clients/manager/ClientHandle.cpp
+++ b/dom/clients/manager/ClientHandle.cpp
@@ -84,16 +84,22 @@ ClientHandle::Activate(PClientManagerChi
   if (!actor) {
     Shutdown();
     return;
   }
 
   ActivateThing(static_cast<ClientHandleChild*>(actor));
 }
 
+void
+ClientHandle::ExecutionReady(const ClientInfo& aClientInfo)
+{
+  mClientInfo = aClientInfo;
+}
+
 const ClientInfo&
 ClientHandle::Info() const
 {
   return mClientInfo;
 }
 
 } // namespace dom
 } // namespace mozilla

--- a/dom/clients/manager/ClientHandle.h
+++ b/dom/clients/manager/ClientHandle.h
@@ -27,29 +27,34 @@ class PClientManagerChild;
 // convert it into a live actor-backed object attached to a particular
 // ClientSource somewhere in the browser.  If the ClientSource is
 // destroyed then the ClientHandle will simply begin to reject operations.
 // We do not currently provide a way to be notified when the ClientSource
 // is destroyed, but this could be added in the future.
 class ClientHandle final : public ClientThing<ClientHandleChild>
 {
   friend class ClientManager;
+  friend class ClientHandleChild;
 
   RefPtr<ClientManager> mManager;
   nsCOMPtr<nsISerialEventTarget> mSerialEventTarget;
   ClientInfo mClientInfo;
 
   ~ClientHandle();
 
   void
   Shutdown();
 
   already_AddRefed<ClientOpPromise>
   StartOp(const ClientOpConstructorArgs& aArgs);
 
+  // Private methods called by ClientHandleChild
+  void
+  ExecutionReady(const ClientInfo& aClientInfo);
+
   // Private methods called by ClientManager
   ClientHandle(ClientManager* aManager,
                nsISerialEventTarget* aSerialEventTarget,
                const ClientInfo& aClientInfo);
 
   void
   Activate(PClientManagerChild* aActor);
 

--- a/dom/clients/manager/ClientHandleChild.cpp
+++ b/dom/clients/manager/ClientHandleChild.cpp
@@ -9,16 +9,25 @@
 #include "ClientHandleOpChild.h"
 #include "mozilla/dom/ClientIPCTypes.h"
 
 namespace mozilla {
 namespace dom {
 
 using mozilla::ipc::IPCResult;
 
+IPCResult
+ClientHandleChild::RecvExecutionReady(const IPCClientInfo& aClientInfo)
+{
+  if (mHandle) {
+    mHandle->ExecutionReady(ClientInfo(aClientInfo));
+  }
+  return IPC_OK();
+}
+
 void
 ClientHandleChild::ActorDestroy(ActorDestroyReason aReason)
 {
   if (mHandle) {
     mHandle->RevokeActor(this);
 
     // Revoking the actor link should automatically cause the owner
     // to call RevokeOwner() as well.
@@ -45,25 +54,25 @@ ClientHandleChild::ClientHandleChild()
   , mTeardownStarted(false)
 {
 }
 
 void
 ClientHandleChild::SetOwner(ClientThing<ClientHandleChild>* aThing)
 {
   MOZ_DIAGNOSTIC_ASSERT(!mHandle);
-  mHandle = aThing;
+  mHandle = static_cast<ClientHandle*>(aThing);
   MOZ_DIAGNOSTIC_ASSERT(mHandle);
 }
 
 void
 ClientHandleChild::RevokeOwner(ClientThing<ClientHandleChild>* aThing)
 {
   MOZ_DIAGNOSTIC_ASSERT(mHandle);
-  MOZ_DIAGNOSTIC_ASSERT(mHandle == aThing);
+  MOZ_DIAGNOSTIC_ASSERT(mHandle == static_cast<ClientHandle*>(aThing));
   mHandle = nullptr;
 }
 
 void
 ClientHandleChild::MaybeStartTeardown()
 {
   if (mTeardownStarted) {
     return;

--- a/dom/clients/manager/ClientHandleChild.h
+++ b/dom/clients/manager/ClientHandleChild.h
@@ -14,20 +14,23 @@ namespace dom {
 
 class ClientHandle;
 class ClientInfo;
 
 template <typename ActorType> class ClientThing;
 
 class ClientHandleChild final : public PClientHandleChild
 {
-  ClientThing<ClientHandleChild>* mHandle;
+  ClientHandle* mHandle;
   bool mTeardownStarted;
 
   // PClientHandleChild interface
+  mozilla::ipc::IPCResult
+  RecvExecutionReady(const IPCClientInfo& aClientInfo) override;
+
   void
   ActorDestroy(ActorDestroyReason aReason) override;
 
   PClientHandleOpChild*
   AllocPClientHandleOpChild(const ClientOpConstructorArgs& aArgs) override;
 
   bool
   DeallocPClientHandleOpChild(PClientHandleOpChild* aActor) override;

--- a/dom/clients/manager/ClientIPCTypes.ipdlh
+++ b/dom/clients/manager/ClientIPCTypes.ipdlh
@@ -45,16 +45,22 @@ struct IPCClientWorkerState
 };
 
 union IPCClientState
 {
   IPCClientWindowState;
   IPCClientWorkerState;
 };
 
+struct ClientSourceExecutionReadyArgs
+{
+  nsCString url;
+  FrameType frameType;
+};
+
 struct ClientOpenWindowArgs
 {
 };
 
 struct ClientOpConstructorArgs
 {
 };
 

--- a/dom/clients/manager/ClientManager.cpp
+++ b/dom/clients/manager/ClientManager.cpp
@@ -4,16 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #include "ClientManager.h"
 
 #include "ClientHandle.h"
 #include "ClientManagerChild.h"
 #include "ClientManagerOpChild.h"
+#include "ClientPrefs.h"
 #include "ClientSource.h"
 #include "mozilla/dom/WorkerPrivate.h"
 #include "mozilla/dom/workers/bindings/WorkerHolderToken.h"
 #include "mozilla/ipc/BackgroundChild.h"
 #include "mozilla/ipc/PBackgroundChild.h"
 #include "prthread.h"
 
 namespace mozilla {
@@ -198,16 +199,18 @@ void
 ClientManager::Startup()
 {
   MOZ_ASSERT(NS_IsMainThread());
 #ifdef MOZ_DIAGNOSTIC_ASSERT_ENABLED
   PRStatus status =
 #endif
     PR_NewThreadPrivateIndex(&sClientManagerThreadLocalIndex, nullptr);
   MOZ_DIAGNOSTIC_ASSERT(status == PR_SUCCESS);
+
+  ClientPrefsInit();
 }
 
 // static
 UniquePtr<ClientSource>
 ClientManager::CreateSource(ClientType aType, nsIPrincipal* aPrincipal)
 {
   MOZ_ASSERT(NS_IsMainThread());
   MOZ_ASSERT(aPrincipal);

--- a/dom/clients/manager/ClientManagerParent.cpp
+++ b/dom/clients/manager/ClientManagerParent.cpp
@@ -96,16 +96,25 @@ ClientManagerParent::AllocPClientSourceP
 
 bool
 ClientManagerParent::DeallocPClientSourceParent(PClientSourceParent* aActor)
 {
   delete aActor;
   return true;
 }
 
+IPCResult
+ClientManagerParent::RecvPClientSourceConstructor(PClientSourceParent* aActor,
+                                                  const ClientSourceConstructorArgs& aArgs)
+{
+  ClientSourceParent* actor = static_cast<ClientSourceParent*>(aActor);
+  actor->Init();
+  return IPC_OK();
+}
+
 ClientManagerParent::ClientManagerParent()
   : mService(ClientManagerService::GetOrCreateInstance())
 {
 }
 
 ClientManagerParent::~ClientManagerParent()
 {
 }

--- a/dom/clients/manager/ClientManagerParent.h
+++ b/dom/clients/manager/ClientManagerParent.h
@@ -51,16 +51,20 @@ class ClientManagerParent final : public
   DeallocPClientNavigateOpParent(PClientNavigateOpParent* aActor) override;
 
   PClientSourceParent*
   AllocPClientSourceParent(const ClientSourceConstructorArgs& aArgs) override;
 
   bool
   DeallocPClientSourceParent(PClientSourceParent* aActor) override;
 
+  mozilla::ipc::IPCResult
+  RecvPClientSourceConstructor(PClientSourceParent* aActor,
+                               const ClientSourceConstructorArgs& aArgs) override;
+
 public:
   ClientManagerParent();
   ~ClientManagerParent();
 };
 
 } // namespace dom
 } // namespace mozilla
 

--- a/dom/clients/manager/ClientManagerService.cpp
+++ b/dom/clients/manager/ClientManagerService.cpp
@@ -78,34 +78,43 @@ ClientManagerService::GetOrCreateInstanc
   if (!sClientManagerServiceInstance) {
     sClientManagerServiceInstance = new ClientManagerService();
   }
 
   RefPtr<ClientManagerService> ref(sClientManagerServiceInstance);
   return ref.forget();
 }
 
-void
+bool
 ClientManagerService::AddSource(ClientSourceParent* aSource)
 {
   AssertIsOnBackgroundThread();
   MOZ_ASSERT(aSource);
   auto entry = mSourceTable.LookupForAdd(aSource->Info().Id());
-  MOZ_DIAGNOSTIC_ASSERT(!entry);
+  // Do not permit overwriting an existing ClientSource with the same
+  // UUID.  This would allow a spoofed ClientParentSource actor to
+  // intercept postMessage() intended for the real actor.
+  if (NS_WARN_IF(!!entry)) {
+    return false;
+  }
   entry.OrInsert([&] { return aSource; });
+  return true;
 }
 
-void
+bool
 ClientManagerService::RemoveSource(ClientSourceParent* aSource)
 {
   AssertIsOnBackgroundThread();
   MOZ_ASSERT(aSource);
   auto entry = mSourceTable.Lookup(aSource->Info().Id());
-  MOZ_DIAGNOSTIC_ASSERT(entry);
+  if (NS_WARN_IF(!entry)) {
+    return false;
+  }
   entry.Remove();
+  return true;
 }
 
 ClientSourceParent*
 ClientManagerService::FindSource(const nsID& aID, const PrincipalInfo& aPrincipalInfo)
 {
   AssertIsOnBackgroundThread();
 
   auto entry = mSourceTable.Lookup(aID);

--- a/dom/clients/manager/ClientManagerService.h
+++ b/dom/clients/manager/ClientManagerService.h
@@ -25,20 +25,20 @@ class ClientManagerService final
 
   ClientManagerService();
   ~ClientManagerService();
 
 public:
   static already_AddRefed<ClientManagerService>
   GetOrCreateInstance();
 
-  void
+  bool
   AddSource(ClientSourceParent* aSource);
 
-  void
+  bool
   RemoveSource(ClientSourceParent* aSource);
 
   ClientSourceParent*
   FindSource(const nsID& aID,
              const mozilla::ipc::PrincipalInfo& aPrincipalInfo);
 
   NS_INLINE_DECL_REFCOUNTING(mozilla::dom::ClientManagerService)
 };

new file mode 100644
--- /dev/null
+++ b/dom/clients/manager/ClientPrefs.cpp
@@ -0,0 +1,33 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "ClientPrefs.h"
+
+namespace mozilla {
+namespace dom {
+
+namespace {
+
+bool gDataURLUniqueOpaqueOrigin = false;
+
+} // anonymous namespace
+
+void
+ClientPrefsInit()
+{
+  Preferences::AddBoolVarCache(&gDataURLUniqueOpaqueOrigin,
+                               "security.data_uri.unique_opaque_origin",
+                               false);
+}
+
+bool
+ClientPrefsGetDataURLUniqueOpaqueOrigin()
+{
+  return gDataURLUniqueOpaqueOrigin;
+}
+
+} // namespace dom
+} // namespace mozilla

new file mode 100644
--- /dev/null
+++ b/dom/clients/manager/ClientPrefs.h
@@ -0,0 +1,21 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+#ifndef _mozilla_dom_ClientPrefs_h
+#define _mozilla_dom_ClientPrefs_h
+
+namespace mozilla {
+namespace dom {
+
+void
+ClientPrefsInit();
+
+bool
+ClientPrefsGetAllowUniqueOpaqueOrigin();
+
+} // namespace dom
+} // namespace mozilla
+
+#endif // _mozilla_dom_ClientPrefs_h

--- a/dom/clients/manager/ClientSource.cpp
+++ b/dom/clients/manager/ClientSource.cpp
@@ -4,54 +4,109 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #include "ClientSource.h"
 
 #include "ClientManager.h"
 #include "ClientManagerChild.h"
 #include "ClientSourceChild.h"
+#include "ClientValidation.h"
 #include "mozilla/dom/ClientIPCTypes.h"
+#include "mozilla/dom/WorkerPrivate.h"
+#include "nsIDocShell.h"
+#include "nsPIDOMWindow.h"
 
 namespace mozilla {
 namespace dom {
 
+using mozilla::dom::workers::WorkerPrivate;
 using mozilla::ipc::PrincipalInfo;
 
 void
 ClientSource::Shutdown()
 {
   NS_ASSERT_OWNINGTHREAD(ClientSource);
   if (IsShutdown()) {
     return;
   }
 
   ShutdownThing();
 
   mManager = nullptr;
 }
 
+void
+ClientSource::ExecutionReady(const ClientSourceExecutionReadyArgs& aArgs)
+{
+  // Fast fail if we don't understand this particular principal/URL combination.
+  // This can happen since we use MozURL for validation which does not handle
+  // some of the more obscure internal principal/url combinations.  Normal
+  // content pages will pass this check.
+  if (NS_WARN_IF(!ClientIsValidCreationURL(mClientInfo.PrincipalInfo(),
+                                           aArgs.url()))) {
+    Shutdown();
+    return;
+  }
+
+  mClientInfo.SetURL(aArgs.url());
+  mClientInfo.SetFrameType(aArgs.frameType());
+  MaybeExecute([aArgs](PClientSourceChild* aActor) {
+    aActor->SendExecutionReady(aArgs);
+  });
+}
+
+WorkerPrivate*
+ClientSource::GetWorkerPrivate() const
+{
+  NS_ASSERT_OWNINGTHREAD(ClientSource);
+  if (!mOwner.is<WorkerPrivate*>()) {
+    return nullptr;
+  }
+  return mOwner.as<WorkerPrivate*>();
+}
+
+nsIDocShell*
+ClientSource::GetDocShell() const
+{
+  NS_ASSERT_OWNINGTHREAD(ClientSource);
+  if (!mOwner.is<nsCOMPtr<nsIDocShell>>()) {
+    return nullptr;
+  }
+  return mOwner.as<nsCOMPtr<nsIDocShell>>();
+}
+
 ClientSource::ClientSource(ClientManager* aManager,
                            const ClientSourceConstructorArgs& aArgs)
   : mManager(aManager)
+  , mOwner(AsVariant(Nothing()))
   , mClientInfo(aArgs.id(), aArgs.type(), aArgs.principalInfo(), aArgs.creationTime())
 {
   MOZ_ASSERT(mManager);
 }
 
 void
 ClientSource::Activate(PClientManagerChild* aActor)
 {
   NS_ASSERT_OWNINGTHREAD(ClientSource);
   MOZ_ASSERT(!GetActor());
 
   if (IsShutdown()) {
     return;
   }
 
+  // Fast fail if we don't understand this particular kind of PrincipalInfo.
+  // This can happen since we use MozURL for validation which does not handle
+  // some of the more obscure internal principal/url combinations.  Normal
+  // content pages will pass this check.
+  if (NS_WARN_IF(!ClientIsValidPrincipalInfo(mClientInfo.PrincipalInfo()))) {
+    Shutdown();
+    return;
+  }
+
   ClientSourceConstructorArgs args(mClientInfo.Id(), mClientInfo.Type(),
                                    mClientInfo.PrincipalInfo(),
                                    mClientInfo.CreationTime());
   PClientSourceChild* actor = aActor->SendPClientSourceConstructor(args);
   if (!actor) {
     Shutdown();
     return;
   }
@@ -59,10 +114,123 @@ ClientSource::Activate(PClientManagerChi
   ActivateThing(static_cast<ClientSourceChild*>(actor));
 }
 
 ClientSource::~ClientSource()
 {
   Shutdown();
 }
 
+nsPIDOMWindowInner*
+ClientSource::GetInnerWindow() const
+{
+  NS_ASSERT_OWNINGTHREAD(ClientSource);
+  if (!mOwner.is<RefPtr<nsPIDOMWindowInner>>()) {
+    return nullptr;
+  }
+  return mOwner.as<RefPtr<nsPIDOMWindowInner>>();
+}
+
+void
+ClientSource::WorkerExecutionReady(WorkerPrivate* aWorkerPrivate)
+{
+  MOZ_DIAGNOSTIC_ASSERT(aWorkerPrivate);
+  aWorkerPrivate->AssertIsOnWorkerThread();
+
+  // Its safe to store the WorkerPrivate* here because the ClientSource
+  // is explicitly destroyed by WorkerPrivate before exiting its run loop.
+  MOZ_DIAGNOSTIC_ASSERT(mOwner.is<Nothing>());
+  mOwner = AsVariant(aWorkerPrivate);
+
+  ClientSourceExecutionReadyArgs args(
+    aWorkerPrivate->GetLocationInfo().mHref,
+    FrameType::None);
+
+  ExecutionReady(args);
+}
+
+nsresult
+ClientSource::WindowExecutionReady(nsPIDOMWindowInner* aInnerWindow)
+{
+  MOZ_ASSERT(NS_IsMainThread());
+  MOZ_DIAGNOSTIC_ASSERT(aInnerWindow);
+  MOZ_DIAGNOSTIC_ASSERT(aInnerWindow->IsCurrentInnerWindow());
+  MOZ_DIAGNOSTIC_ASSERT(aInnerWindow->HasActiveDocument());
+
+  nsIDocument* doc = aInnerWindow->GetExtantDoc();
+  if (NS_WARN_IF(!doc)) {
+    return NS_ERROR_UNEXPECTED;
+  }
+
+  // Don't use nsAutoCString here since IPC requires a full nsCString anyway.
+  nsCString spec;
+
+  nsIURI* uri = doc->GetOriginalURI();
+  if (uri) {
+    nsresult rv = uri->GetSpec(spec);
+    if (NS_WARN_IF(NS_FAILED(rv))) {
+      return rv;
+    }
+  }
+
+  nsPIDOMWindowOuter* outer = aInnerWindow->GetOuterWindow();
+  if (NS_WARN_IF(!outer)) {
+    return NS_ERROR_UNEXPECTED;
+  }
+
+  FrameType frameType = FrameType::Top_level;
+  if (!outer->IsTopLevelWindow()) {
+    frameType = FrameType::Nested;
+  } else if(outer->HadOriginalOpener()) {
+    frameType = FrameType::Auxiliary;
+  }
+
+  // We should either be setting a window execution ready for the
+  // first time or setting the same window execution ready again.
+  // The secondary calls are due to initial about:blank replacement.
+  MOZ_DIAGNOSTIC_ASSERT(mOwner.is<Nothing>() ||
+                        mOwner.is<nsCOMPtr<nsIDocShell>>() ||
+                        GetInnerWindow() == aInnerWindow);
+
+  // This creates a cycle with the window.  It is broken when
+  // nsGlobalWindow::FreeInnerObjects() deletes the ClientSource.
+  mOwner = AsVariant(RefPtr<nsPIDOMWindowInner>(aInnerWindow));
+
+  ClientSourceExecutionReadyArgs args(spec, frameType);
+  ExecutionReady(args);
+
+  return NS_OK;
+}
+
+nsresult
+ClientSource::DocShellExecutionReady(nsIDocShell* aDocShell)
+{
+  MOZ_ASSERT(NS_IsMainThread());
+  MOZ_DIAGNOSTIC_ASSERT(aDocShell);
+
+  nsPIDOMWindowOuter* outer = aDocShell->GetWindow();
+  if (NS_WARN_IF(!outer)) {
+    return NS_ERROR_UNEXPECTED;
+  }
+
+  // TODO: dedupe this with WindowExecutionReady
+  FrameType frameType = FrameType::Top_level;
+  if (!outer->IsTopLevelWindow()) {
+    frameType = FrameType::Nested;
+  } else if(outer->HadOriginalOpener()) {
+    frameType = FrameType::Auxiliary;
+  }
+
+  MOZ_DIAGNOSTIC_ASSERT(mOwner.is<Nothing>());
+
+  // This creates a cycle with the docshell.  It is broken when
+  // nsDocShell::Destroy() deletes the ClientSource.
+  mOwner = AsVariant(nsCOMPtr<nsIDocShell>(aDocShell));
+
+  ClientSourceExecutionReadyArgs args(NS_LITERAL_CSTRING("about:blank"),
+                                      frameType);
+  ExecutionReady(args);
+
+  return NS_OK;
+}
+
 } // namespace dom
 } // namespace mozilla

--- a/dom/clients/manager/ClientSource.h
+++ b/dom/clients/manager/ClientSource.h
@@ -4,22 +4,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 #ifndef _mozilla_dom_ClientSource_h
 #define _mozilla_dom_ClientSource_h
 
 #include "mozilla/dom/ClientInfo.h"
 #include "mozilla/dom/ClientThing.h"
 
+class nsIDocShell;
+class nsPIDOMWindowInner;
+
 namespace mozilla {
 namespace dom {
 
 class ClientManager;
 class ClientSourceChild;
 class ClientSourceConstructorArgs;
+class ClientSourceExecutionReadyArgs;
 class PClientManagerChild;
 
 namespace workers {
 class WorkerPrivate;
 } // workers namespace
 
 // ClientSource is an RAII style class that is designed to be held via
 // a UniquePtr<>.  When created ClientSource will register the existence
@@ -30,28 +34,54 @@ class WorkerPrivate;
 class ClientSource final : public ClientThing<ClientSourceChild>
 {
   friend class ClientManager;
 
   NS_DECL_OWNINGTHREAD
 
   RefPtr<ClientManager> mManager;
 
+  Variant<Nothing,
+          RefPtr<nsPIDOMWindowInner>,
+          nsCOMPtr<nsIDocShell>,
+          mozilla::dom::workers::WorkerPrivate*> mOwner;
+
   ClientInfo mClientInfo;
 
   void
   Shutdown();
 
+  void
+  ExecutionReady(const ClientSourceExecutionReadyArgs& aArgs);
+
+  mozilla::dom::workers::WorkerPrivate*
+  GetWorkerPrivate() const;
+
+  nsIDocShell*
+  GetDocShell() const;
+
   // Private methods called by ClientManager
   ClientSource(ClientManager* aManager,
                const ClientSourceConstructorArgs& aArgs);
 
   void
   Activate(PClientManagerChild* aActor);
 
 public:
   ~ClientSource();
+
+  nsPIDOMWindowInner*
+  GetInnerWindow() const;
+
+  void
+  WorkerExecutionReady(mozilla::dom::workers::WorkerPrivate* aWorkerPrivate);
+
+  nsresult
+  WindowExecutionReady(nsPIDOMWindowInner* aInnerWindow);
+
+  nsresult
+  DocShellExecutionReady(nsIDocShell* aDocShell);
 };
 
 } // namespace dom
 } // namespace mozilla
 
 #endif // _mozilla_dom_ClientSource_h

--- a/dom/clients/manager/ClientSourceParent.cpp
+++ b/dom/clients/manager/ClientSourceParent.cpp
@@ -4,36 +4,123 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #include "ClientSourceParent.h"
 
 #include "ClientHandleParent.h"
 #include "ClientManagerService.h"
 #include "ClientSourceOpParent.h"
+#include "ClientValidation.h"
 #include "mozilla/dom/ClientIPCTypes.h"
+#include "mozilla/dom/ContentParent.h"
+#include "mozilla/dom/PClientManagerParent.h"
+#include "mozilla/ipc/BackgroundParent.h"
+#include "mozilla/SystemGroup.h"
 #include "mozilla/Unused.h"
 
 namespace mozilla {
 namespace dom {
 
+using mozilla::ipc::BackgroundParent;
 using mozilla::ipc::IPCResult;
 using mozilla::ipc::PrincipalInfo;
 
+namespace {
+
+// It would be nice to use a lambda instead of this class, but we cannot
+// move capture in lambdas yet and ContentParent cannot be AddRef'd off
+// the main thread.
+class KillContentParentRunnable final : public Runnable
+{
+  RefPtr<ContentParent> mContentParent;
+
+public:
+  explicit KillContentParentRunnable(RefPtr<ContentParent>&& aContentParent)
+    : Runnable("KillContentParentRunnable")
+    , mContentParent(Move(aContentParent))
+  {
+    MOZ_ASSERT(mContentParent);
+  }
+
+  NS_IMETHOD
+  Run()
+  {
+    MOZ_ASSERT(NS_IsMainThread());
+    mContentParent->KillHard("invalid ClientSourceParent actor");
+    mContentParent = nullptr;
+    return NS_OK;
+  }
+};
+
+} // anonymous namespace
+
+void
+ClientSourceParent::KillInvalidChild()
+{
+  // Try to get the content process before we destroy the actor below.
+  RefPtr<ContentParent> process =
+    BackgroundParent::GetContentParent(Manager()->Manager());
+
+  // First, immediately teardown the ClientSource actor.  No matter what
+  // we want to start this process as soon as possible.
+  Unused << ClientSourceParent::Send__delete__(this);
+
+  // If we are running in non-e10s, then there is nothing else to do here.
+  // There is no child process and we don't want to crash the entire browser
+  // in release builds.  In general, though, this should not happen in non-e10s
+  // so we do assert this condition.
+  if (!process) {
+    MOZ_DIAGNOSTIC_ASSERT(false, "invalid ClientSourceParent in non-e10s");
+    return;
+  }
+
+  // In e10s mode we also want to kill the child process.  Validation failures
+  // typically mean someone sent us bogus data over the IPC link.  We can't
+  // trust that process any more.  We have to do this on the main thread, so
+  // there is a small window of time before we kill the process.  This is why
+  // we start the actor destruction immediately above.
+  nsCOMPtr<nsIRunnable> r = new KillContentParentRunnable(Move(process));
+  MOZ_ALWAYS_SUCCEEDS(SystemGroup::Dispatch(TaskCategory::Other, r.forget()));
+}
+
 IPCResult
 ClientSourceParent::RecvTeardown()
 {
   Unused << Send__delete__(this);
   return IPC_OK();
 }
 
+IPCResult
+ClientSourceParent::RecvExecutionReady(const ClientSourceExecutionReadyArgs& aArgs)
+{
+  // Now that we have the creation URL for the Client we can do some validation
+  // to make sure the child actor is not giving us garbage.  Since we validate
+  // on the child side as well we treat a failure here as fatal.
+  if (!ClientIsValidCreationURL(mClientInfo.PrincipalInfo(), aArgs.url())) {
+    KillInvalidChild();
+    return IPC_OK();
+  }
+
+  mClientInfo.SetURL(aArgs.url());
+  mClientInfo.SetFrameType(aArgs.frameType());
+  mExecutionReady = true;
+
+  for (ClientHandleParent* handle : mHandleList) {
+    Unused << handle->SendExecutionReady(mClientInfo.ToIPC());
+  }
+
+  return IPC_OK();
+};
+
 void
 ClientSourceParent::ActorDestroy(ActorDestroyReason aReason)
 {
-  mService->RemoveSource(this);
+  DebugOnly<bool> removed = mService->RemoveSource(this);
+  MOZ_ASSERT(removed);
 
   nsTArray<ClientHandleParent*> handleList(mHandleList);
   for (ClientHandleParent* handle : handleList) {
     // This should trigger DetachHandle() to be called removing
     // the entry from the mHandleList.
     Unused << ClientHandleParent::Send__delete__(handle);
   }
   MOZ_DIAGNOSTIC_ASSERT(mHandleList.IsEmpty());
@@ -51,25 +138,45 @@ ClientSourceParent::DeallocPClientSource
 {
   delete aActor;
   return true;
 }
 
 ClientSourceParent::ClientSourceParent(const ClientSourceConstructorArgs& aArgs)
   : mClientInfo(aArgs.id(), aArgs.type(), aArgs.principalInfo(), aArgs.creationTime())
   , mService(ClientManagerService::GetOrCreateInstance())
+  , mExecutionReady(false)
 {
-  mService->AddSource(this);
 }
 
 ClientSourceParent::~ClientSourceParent()
 {
   MOZ_DIAGNOSTIC_ASSERT(mHandleList.IsEmpty());
 }
 
+void
+ClientSourceParent::Init()
+{
+  // Ensure the principal is reasonable before adding ourself to the service.
+  // Since we validate the principal on the child side as well, any failure
+  // here is treated as fatal.
+  if (NS_WARN_IF(!ClientIsValidPrincipalInfo(mClientInfo.PrincipalInfo()))) {
+    KillInvalidChild();
+    return;
+  }
+
+  // Its possible for AddSource() to fail if there is already an entry for
+  // our UUID.  This should not normally happen, but could if someone is
+  // spoofing IPC messages.
+  if (NS_WARN_IF(!mService->AddSource(this))) {
+    KillInvalidChild();
+    return;
+  }
+}
+
 const ClientInfo&
 ClientSourceParent::Info() const
 {
   return mClientInfo;
 }
 
 void
 ClientSourceParent::AttachHandle(ClientHandleParent* aClientHandle)

--- a/dom/clients/manager/ClientSourceParent.h
+++ b/dom/clients/manager/ClientSourceParent.h
@@ -15,34 +15,44 @@ namespace dom {
 class ClientHandleParent;
 class ClientManagerService;
 
 class ClientSourceParent final : public PClientSourceParent
 {
   ClientInfo mClientInfo;
   RefPtr<ClientManagerService> mService;
   nsTArray<ClientHandleParent*> mHandleList;
+  bool mExecutionReady;
+
+  void
+  KillInvalidChild();
 
   // PClientSourceParent
   IPCResult
   RecvTeardown() override;
 
+  IPCResult
+  RecvExecutionReady(const ClientSourceExecutionReadyArgs& aArgs) override;
+
   void
   ActorDestroy(ActorDestroyReason aReason) override;
 
   PClientSourceOpParent*
   AllocPClientSourceOpParent(const ClientOpConstructorArgs& aArgs) override;
 
   bool
   DeallocPClientSourceOpParent(PClientSourceOpParent* aActor) override;
 
 public:
   explicit ClientSourceParent(const ClientSourceConstructorArgs& aArgs);
   ~ClientSourceParent();
 
+  void
+  Init();
+
   const ClientInfo&
   Info() const;
 
   void
   AttachHandle(ClientHandleParent* aClientSource);
 
   void
   DetachHandle(ClientHandleParent* aClientSource);

new file mode 100644
--- /dev/null
+++ b/dom/clients/manager/ClientValidation.cpp
@@ -0,0 +1,184 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "ClientValidation.h"
+
+#include "ClientPrefs.h"
+#include "mozilla/net/MozURL.h"
+
+namespace mozilla {
+namespace dom {
+
+using mozilla::ipc::ContentPrincipalInfo;
+using mozilla::ipc::PrincipalInfo;
+using mozilla::net::MozURL;
+
+bool
+ClientIsValidPrincipalInfo(const PrincipalInfo& aPrincipalInfo)
+{
+  // Ideally we would verify that the source process has permission to
+  // create a window or worker with the given principal, but we don't
+  // currently have any such restriction in place.  Instead, at least
+  // verify the PrincipalInfo is an expected type and has a parsable
+  // origin/spec.
+  switch (aPrincipalInfo.type()) {
+    // Any system and null principal is acceptable.
+    case PrincipalInfo::TSystemPrincipalInfo:
+    case PrincipalInfo::TNullPrincipalInfo:
+    {
+      return true;
+    }
+
+    // Validate content principals to ensure that the origin and spec are sane.
+    case PrincipalInfo::TContentPrincipalInfo:
+    {
+      const ContentPrincipalInfo& content =
+       aPrincipalInfo.get_ContentPrincipalInfo();
+
+      // Verify the principal spec parses.
+      RefPtr<MozURL> specURL;
+      nsresult rv = MozURL::Init(getter_AddRefs(specURL), content.spec());
+      NS_ENSURE_SUCCESS(rv, false);
+
+      // Verify the principal originNoSuffix parses.
+      RefPtr<MozURL> originURL;
+      rv = MozURL::Init(getter_AddRefs(originURL),
+                        content.originNoSuffix().get_nsCString());
+      NS_ENSURE_SUCCESS(rv, false);
+
+      nsAutoCString originOrigin;
+      rv = originURL->GetOrigin(originOrigin);
+      NS_ENSURE_SUCCESS(rv, false);
+
+      nsAutoCString specOrigin;
+      rv = specURL->GetOrigin(specOrigin);
+      NS_ENSURE_SUCCESS(rv, false);
+
+      // For now require Clients to have a principal where both its
+      // originNoSuffix and spec have the same origin.  This will
+      // exclude a variety of unusual combinations within the browser
+      // but its adequate for the features need to support right now.
+      // If necessary we could expand this function to handle more
+      // cases in the future.
+      return specOrigin == originOrigin;
+    }
+    default:
+    {
+      break;
+    }
+  }
+
+  // Windows and workers should not have expanded URLs, etc.
+  return false;
+}
+
+bool
+ClientIsValidCreationURL(const PrincipalInfo& aPrincipalInfo,
+                         const nsACString& aURL)
+{
+  RefPtr<MozURL> url;
+  nsresult rv = MozURL::Init(getter_AddRefs(url), aURL);
+  NS_ENSURE_SUCCESS(rv, false);
+
+  switch (aPrincipalInfo.type()) {
+    case PrincipalInfo::TContentPrincipalInfo:
+    {
+      // Any origin can create an about:blank or about:srcdoc Client.
+      if (aURL.LowerCaseEqualsLiteral("about:blank") ||
+          aURL.LowerCaseEqualsLiteral("about:srcdoc")) {
+        return true;
+      }
+
+      const ContentPrincipalInfo& content =
+        aPrincipalInfo.get_ContentPrincipalInfo();
+
+      // Parse the principal origin URL as well.  This ensures any MozURL
+      // parser issues effect both URLs equally.
+      RefPtr<MozURL> principalURL;
+      rv = MozURL::Init(getter_AddRefs(principalURL),
+                        content.originNoSuffix().get_nsCString());
+      NS_ENSURE_SUCCESS(rv, false);
+
+      nsAutoCString origin;
+      rv = url->GetOrigin(origin);
+      NS_ENSURE_SUCCESS(rv, false);
+
+      nsAutoCString principalOrigin;
+      rv = principalURL->GetOrigin(principalOrigin);
+      NS_ENSURE_SUCCESS(rv, false);
+
+      // The vast majority of sites should simply result in the same principal
+      // and URL origin.
+      if (principalOrigin == origin) {
+        return true;
+      }
+
+      nsAutoCString scheme;
+      rv = url->GetScheme(scheme);
+      NS_ENSURE_SUCCESS(rv, false);
+
+      // Generally any origin can also open javascript: windows and workers.
+      if (scheme.LowerCaseEqualsLiteral("javascript")) {
+        return true;
+      }
+
+      // We have some tests that use data: URL windows without an opaque
+      // origin.  This should only happen when a pref is set.
+      if (!ClientPrefsGetDataURLUniqueOpaqueOrigin() &&
+          scheme.LowerCaseEqualsLiteral("data")) {
+        return true;
+      }
+
+      nsAutoCString principalScheme;
+      rv = principalURL->GetScheme(principalScheme);
+      NS_ENSURE_SUCCESS(rv, false);
+
+      // Otherwise don't support this URL type in the clients sub-system for
+      // now.  This will exclude a variety of internal browser clients, but
+      // currently we don't need to support those.  This function can be
+      // expanded to handle more cases as necessary.
+      return false;
+    }
+    case PrincipalInfo::TSystemPrincipalInfo:
+    {
+      nsAutoCString scheme;
+      rv = url->GetScheme(scheme);
+      NS_ENSURE_SUCCESS(rv, false);
+
+      // While many types of documents can be created with a system principal,
+      // there are only a few that can reasonably become windows.  We attempt
+      // to validate the list of known cases here with a simple scheme check.
+      return scheme.LowerCaseEqualsLiteral("about") ||
+             scheme.LowerCaseEqualsLiteral("chrome") ||
+             scheme.LowerCaseEqualsLiteral("resource") ||
+             scheme.LowerCaseEqualsLiteral("blob") ||
+             scheme.LowerCaseEqualsLiteral("javascript") ||
+             scheme.LowerCaseEqualsLiteral("view-source") ||
+
+             (!ClientPrefsGetDataURLUniqueOpaqueOrigin() &&
+              scheme.LowerCaseEqualsLiteral("data"));
+    }
+    case PrincipalInfo::TNullPrincipalInfo:
+    {
+      // A wide variety of clients can have a null principal.  For example,
+      // sandboxed iframes can have a normal content URL.  For now allow
+      // any parsable URL for null principals.  This is relatively safe since
+      // null principals have unique origins and won't most ClientManagerService
+      // queries anyway.
+      return true;
+    }
+    default:
+    {
+      break;
+    }
+  }
+
+  // Clients (windows/workers) should never have an expanded principal type.
+  return false;
+}
+
+} // namespace dom
+} // namespace mozilla