Merge inbound to central, a=merge

MozReview-Commit-ID: 7vInHaD1geB

CLOBBER

@@ -22,4 +22,4 @@
 # changes to stick? As of bug 928195, this shouldn't be necessary! Please
 # don't change CLOBBER for WebIDL changes any more.
 
-Touching clobber for Telemetry IPC refactor in bug 1339749.
+Touching clobber for Bug 1322703 - Use -Fd to specify unique PDB filename per-compile for MSVC

browser/app/nsBrowserApp.cpp

@@ -21,7 +21,6 @@
 
 #include "nsCOMPtr.h"
 #include "nsIFile.h"
-#include "nsStringGlue.h"
 
 #ifdef XP_WIN
 #ifdef MOZ_ASAN
@@ -40,7 +39,7 @@
 #include "nsXPCOMPrivate.h" // for MAXPATHLEN and XPCOM_DLL
 
 #include "mozilla/Sprintf.h"
-#include "mozilla/Telemetry.h"
+#include "mozilla/StartupTimeline.h"
 #include "mozilla/WindowsDllBlocklist.h"
 
 #ifdef LIBFUZZER

browser/installer/Makefile.in

@@ -138,13 +138,6 @@ endif
 ifdef CLANG_CL
 DEFINES += -DCLANG_CL
 endif
-ifeq (x86,$(CPU_ARCH))
-ifdef _MSC_VER
-ifndef CLANG_CL
-DEFINES += -DWOW_HELPER
-endif
-endif
-endif
 
 
 # Builds using the hybrid FasterMake/RecursiveMake backend will

browser/installer/package-manifest.in

@@ -726,14 +726,6 @@
 @RESPATH@/components/pippki.xpt
 
 ; For process sandboxing
-#if defined(MOZ_SANDBOX)
-#if defined(XP_WIN)
-#if defined(WOW_HELPER)
-@BINPATH@/wow_helper.exe
-#endif
-#endif
-#endif
-
 #if defined(MOZ_SANDBOX)
 #if defined(XP_LINUX)
 @BINPATH@/@DLL_PREFIX@mozsandbox@DLL_SUFFIX@

config/rules.mk

@@ -153,7 +153,22 @@ endif # LIBRARY
 ifeq ($(OS_ARCH),WINNT)
 ifndef GNU_CC
 
+#
+# Unless we're building SIMPLE_PROGRAMS, all C++ files share a PDB file per
+# directory. For parallel builds, this PDB file is shared and locked by
+# MSPDBSRV.EXE, starting with MSVC8 SP1. If you're using MSVC 7.1 or MSVC8
+# without SP1, don't do parallel builds.
+#
+# The final PDB for libraries and programs is created by the linker and uses
+# a different name from the single PDB file created by the compiler. See
+# bug 462740.
+#
+
+ifdef SIMPLE_PROGRAMS
 COMPILE_PDB_FLAG ?= -Fd$(basename $(@F)).pdb
+else
+COMPILE_PDB_FLAG ?= -Fdgenerated.pdb
+endif
 COMPILE_CFLAGS += $(COMPILE_PDB_FLAG)
 COMPILE_CXXFLAGS += $(COMPILE_PDB_FLAG)
 

devtools/client/inspector/grids/components/Grid.js

@@ -27,6 +27,7 @@ module.exports = createClass({
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
     onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+    onShowGridAreaHighlight: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
@@ -47,6 +48,7 @@ module.exports = createClass({
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
+      onShowGridAreaHighlight,
     } = this.props;
 
     return grids.length ?
@@ -57,6 +59,7 @@ module.exports = createClass({
         showGridOutline ?
           GridOutline({
             grids,
+            onShowGridAreaHighlight,
           })
           :
           null,

devtools/client/inspector/grids/components/GridOutline.js

@@ -0,0 +1,208 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { addons, createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+
+const Types = require("../types");
+
+// Move SVG grid to the right 100 units, so that it is not flushed against the edge of
+// layout border
+const TRANSLATE_X = -100;
+const TRANSLATE_Y = 0;
+
+const VIEWPORT_HEIGHT = 100;
+const VIEWPORT_WIDTH = 450;
+
+module.exports = createClass({
+
+  displayName: "GridOutline",
+
+  propTypes: {
+    grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    onShowGridAreaHighlight: PropTypes.func.isRequired,
+  },
+
+  mixins: [ addons.PureRenderMixin ],
+
+  getInitialState() {
+    return {
+      selectedGrids: [],
+    };
+  },
+
+  componentWillReceiveProps({ grids }) {
+    this.setState({
+      selectedGrids: grids.filter(grid => grid.highlighted),
+    });
+  },
+
+  /**
+   * Returns the grid area name if the given grid cell is part of a grid area, otherwise
+   * null.
+   *
+   * @param  {Number} columnNumber
+   *         The column number of the grid cell.
+   * @param  {Number} rowNumber
+   *         The row number of the grid cell.
+   * @param  {Array} areas
+   *         Array of grid areas data stored in the grid fragment.
+   * @return {String} If there is a grid area return area name, otherwise null.
+   */
+  getGridAreaName(columnNumber, rowNumber, areas) {
+    const gridArea = areas.find(area =>
+      (area.rowStart <= rowNumber && area.rowEnd > rowNumber) &&
+      (area.columnStart <= columnNumber && area.columnEnd > columnNumber)
+    );
+
+    if (!gridArea) {
+      return null;
+    }
+
+    return gridArea.name;
+  },
+
+  /**
+   * Renders the grid outline for the given grid container object.
+   *
+   * @param  {Object} grid
+   *         A single grid container in the document.
+   */
+  renderGrid(grid) {
+    const { id, color, gridFragments } = grid;
+    // TODO: We are drawing the first fragment since only one is currently being stored.
+    // In the future we will need to iterate over all fragments of a grid.
+    const { rows, cols, areas } = gridFragments[0];
+    const numberOfColumns = cols.lines.length - 1;
+    const numberOfRows = rows.lines.length - 1;
+    const rectangles = [];
+
+    // Draw a rectangle that acts as a border for the grid outline.
+    const border = this.renderGridOutlineBorder(numberOfRows, numberOfColumns, color);
+    rectangles.push(border);
+
+    let x = 1;
+    let y = 1;
+    const width = 10;
+    const height = 10;
+
+    // Draw the cells within the grid outline border.
+    for (let rowNumber = 1; rowNumber <= numberOfRows; rowNumber++) {
+      for (let columnNumber = 1; columnNumber <= numberOfColumns; columnNumber++) {
+        const gridAreaName = this.getGridAreaName(columnNumber, rowNumber, areas);
+        const gridCell = this.renderGridCell(id, x, y, rowNumber, columnNumber, color,
+          gridAreaName);
+
+        rectangles.push(gridCell);
+        x += width;
+      }
+
+      x = 1;
+      y += height;
+    }
+
+    return rectangles;
+  },
+
+  /**
+   * Renders the grid cell of a grid fragment.
+   *
+   * @param  {Number} id
+   *         The grid id stored on the grid fragment
+   * @param  {Number} x
+   *         The x-position of the grid cell.
+   * @param  {Number} y
+   *         The y-position of the grid cell.
+   * @param  {Number} rowNumber
+   *         The row number of the grid cell.
+   * @param  {Number} columnNumber
+   *         The column number of the grid cell.
+   * @param  {String|null} gridAreaName
+   *         The grid area name or null if the grid cell is not part of a grid area.
+   */
+  renderGridCell(id, x, y, rowNumber, columnNumber, color, gridAreaName) {
+    return dom.rect(
+      {
+        className: "grid-outline-cell",
+        "data-grid-area-name": gridAreaName,
+        "data-grid-id": id,
+        x,
+        y,
+        width: 10,
+        height: 10,
+        fill: "none",
+        stroke: color,
+        onMouseOver: this.onMouseOverCell,
+        onMouseOut: this.onMouseLeaveCell,
+      }
+    );
+  },
+
+  renderGridOutline(grids) {
+    return dom.g(
+      {
+        className: "grid-cell-group",
+      },
+      grids.map(grid => this.renderGrid(grid))
+    );
+  },
+
+  renderGridOutlineBorder(numberOfRows, numberOfColumns, color) {
+    return dom.rect(
+      {
+        className: "grid-outline-border",
+        x: 1,
+        y: 1,
+        width: numberOfColumns * 10,
+        height: numberOfRows * 10,
+        stroke: color,
+      }
+    );
+  },
+
+  onMouseLeaveCell({ target }) {
+    const {
+      grids,
+      onShowGridAreaHighlight,
+    } = this.props;
+    const id = target.getAttribute("data-grid-id");
+    const color = target.getAttribute("stroke");
+
+    target.setAttribute("fill", "none");
+
+    onShowGridAreaHighlight(grids[id].nodeFront, null, color);
+  },
+
+  onMouseOverCell({ target }) {
+    const {
+      grids,
+      onShowGridAreaHighlight,
+    } = this.props;
+    const name = target.getAttribute("data-grid-area-name");
+    const id = target.getAttribute("data-grid-id");
+    const color = target.getAttribute("stroke");
+
+    target.setAttribute("fill", color);
+
+    onShowGridAreaHighlight(grids[id].nodeFront, name, color);
+  },
+
+  render() {
+    return this.state.selectedGrids.length ?
+      dom.svg(
+        {
+          className: "grid-outline",
+          width: "100%",
+          height: 100,
+          viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${VIEWPORT_WIDTH} ${VIEWPORT_HEIGHT}`,
+        },
+        this.renderGridOutline(this.state.selectedGrids)
+      )
+      :
+      null;
+  },
+
+});

devtools/client/inspector/grids/components/moz.build

@@ -4,8 +4,10 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-include('../objs.mozbuild')
-
-SOURCES += rdf_util_src_cppsrcs
-
-FINAL_LIBRARY = 'xul'
+DevToolsModules(
+    'Grid.js',
+    'GridDisplaySettings.js',
+    'GridItem.js',
+    'GridList.js',
+    'GridOutline.js',
+)

devtools/client/inspector/grids/grid-inspector.js

@@ -0,0 +1,404 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const Services = require("Services");
+const { Task } = require("devtools/shared/task");
+
+const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
+
+const {
+  updateGridColor,
+  updateGridHighlighted,
+  updateGrids,
+} = require("./actions/grids");
+const {
+  updateShowGridLineNumbers,
+  updateShowInfiniteLines,
+} = require("./actions/highlighter-settings");
+
+const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
+const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
+
+// Default grid colors.
+const GRID_COLORS = [
+  "#05E4EE",
+  "#BB9DFF",
+  "#FFB53B",
+  "#71F362",
+  "#FF90FF",
+  "#FF90FF",
+  "#1B80FF",
+  "#FF2647"
+];
+
+function GridInspector(inspector, window) {
+  this.document = window.document;
+  this.highlighters = inspector.highlighters;
+  this.inspector = inspector;
+  this.store = inspector.store;
+  this.walker = this.inspector.walker;
+
+  this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
+  this.setSelectedNode = this.setSelectedNode.bind(this);
+  this.updateGridPanel = this.updateGridPanel.bind(this);
+
+  this.onGridLayoutChange = this.onGridLayoutChange.bind(this);
+  this.onHighlighterChange = this.onHighlighterChange.bind(this);
+  this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
+  this.onShowBoxModelHighlighterForNode =
+    this.onShowBoxModelHighlighterForNode.bind(this);
+  this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
+  this.onSidebarSelect = this.onSidebarSelect.bind(this);
+  this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
+  this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
+  this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
+
+  this.init();
+}
+
+GridInspector.prototype = {
+
+  /**
+   * Initializes the grid inspector by fetching the LayoutFront from the walker, loading
+   * the highlighter settings and initalizing the SwatchColorPicker instance.
+   */
+  init: Task.async(function* () {
+    if (!this.inspector) {
+      return;
+    }
+
+    this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
+
+    this.loadHighlighterSettings();
+
+    // Create a shared SwatchColorPicker instance to be reused by all GridItem components.
+    this.swatchColorPickerTooltip = new SwatchColorPickerTooltip(
+      this.inspector.toolbox.doc,
+      this.inspector,
+      {
+        supportsCssColor4ColorFunction: () => false
+      }
+    );
+
+    this.highlighters.on("grid-highlighter-hidden", this.onHighlighterChange);
+    this.highlighters.on("grid-highlighter-shown", this.onHighlighterChange);
+    this.inspector.sidebar.on("select", this.onSidebarSelect);
+
+    this.onSidebarSelect();
+  }),
+
+  /**
+   * Destruction function called when the inspector is destroyed. Removes event listeners
+   * and cleans up references.
+   */
+  destroy() {
+    this.highlighters.off("grid-highlighter-hidden", this.onHighlighterChange);
+    this.highlighters.off("grid-highlighter-shown", this.onHighlighterChange);
+    this.inspector.sidebar.off("select", this.onSidebarSelect);
+    this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange);
+
+    this.swatchColorPickerTooltip.destroy();
+
+    this.document = null;
+    this.highlighters = null;
+    this.inspector = null;
+    this.layoutInspector = null;
+    this.store = null;
+    this.swatchColorPickerTooltip = null;
+    this.walker = null;
+  },
+
+  getComponentProps() {
+    return {
+      getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
+      setSelectedNode: this.setSelectedNode,
+      onSetGridOverlayColor: this.onSetGridOverlayColor,
+      onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode,
+      onShowGridAreaHighlight: this.onShowGridAreaHighlight,
+      onToggleGridHighlighter: this.onToggleGridHighlighter,
+      onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
+    };
+  },
+
+  /**
+   * Returns the color set for the grid highlighter associated with the provided
+   * nodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront for which we need the color.
+   */
+  getGridColorForNodeFront(nodeFront) {
+    let { grids } = this.store.getState();
+
+    for (let grid of grids) {
+      if (grid.nodeFront === nodeFront) {
+        return grid.color;
+      }
+    }
+
+    return null;
+  },
+
+  /**
+   * Create a highlighter settings object for the provided nodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront for which we need highlighter settings.
+   */
+  getGridHighlighterSettings(nodeFront) {
+    let { highlighterSettings } = this.store.getState();
+
+    // Get the grid color for the provided nodeFront.
+    let color = this.getGridColorForNodeFront(nodeFront);
+
+    // Merge the grid color to the generic highlighter settings.
+    return Object.assign({}, highlighterSettings, {
+      color
+    });
+  },
+
+  /**
+   * Retrieve the shared SwatchColorPicker instance.
+   */
+  getSwatchColorPickerTooltip() {
+    return this.swatchColorPickerTooltip;
+  },
+
+  /**
+   * Returns true if the layout panel is visible, and false otherwise.
+   */
+  isPanelVisible() {
+    return this.inspector.toolbox.currentToolId === "inspector" &&
+           this.inspector.sidebar &&
+           this.inspector.sidebar.getCurrentTabID() === "layoutview";
+  },
+
+  /**
+   * Load the grid highligher display settings into the store from the stored preferences.
+   */
+  loadHighlighterSettings() {
+    let { dispatch } = this.store;
+
+    let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
+    let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
+
+    dispatch(updateShowGridLineNumbers(showGridLineNumbers));
+    dispatch(updateShowInfiniteLines(showInfinteLines));
+  },
+
+  /**
+   * Set the inspector selection.
+   *
+   * @param {NodeFront} nodeFront
+   *        The NodeFront corresponding to the new selection.
+   */
+  setSelectedNode(nodeFront) {
+    this.inspector.selection.setNodeFront(nodeFront, "layout-panel");
+  },
+
+  /**
+   * Updates the grid panel by dispatching the new grid data. This is called when the
+   * layout view becomes visible or the view needs to be updated with new grid data.
+   *
+   * @param  {Array|null} gridFronts
+   *         Optional array of all GridFront in the current page.
+   */
+  updateGridPanel: Task.async(function* (gridFronts) {
+    // Stop refreshing if the inspector or store is already destroyed.
+    if (!this.inspector || !this.store) {
+      return;
+    }
+
+    // Get all the GridFront from the server if no gridFronts were provided.
+    if (!gridFronts) {
+      gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
+    }
+
+    let grids = [];
+    for (let i = 0; i < gridFronts.length; i++) {
+      let grid = gridFronts[i];
+      let nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
+
+      let fallbackColor = GRID_COLORS[i % GRID_COLORS.length];
+      let color = this.getGridColorForNodeFront(nodeFront) || fallbackColor;
+
+      grids.push({
+        id: i,
+        color,
+        gridFragments: grid.gridFragments,
+        highlighted: nodeFront == this.highlighters.gridHighlighterShown,
+        nodeFront,
+      });
+    }
+
+    this.store.dispatch(updateGrids(grids));
+  }),
+
+  /**
+   * Handler for "grid-layout-changed" events emitted from the LayoutActor.
+   *
+   * @param  {Array} grids
+   *         Array of all GridFront in the current page.
+   */
+  onGridLayoutChange(grids) {
+    if (this.isPanelVisible()) {
+      this.updateGridPanel(grids);
+    }
+  },
+
+  /**
+   * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
+   * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state.
+   *
+   * @param  {Event} event
+   *         Event that was triggered.
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the grid container element for which the grid highlighter
+   *         is shown for.
+   */
+  onHighlighterChange(event, nodeFront) {
+    let highlighted = event === "grid-highlighter-shown";
+    this.store.dispatch(updateGridHighlighted(nodeFront, highlighted));
+  },
+
+  /**
+   * Handler for a change in the grid overlay color picker for a grid container.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element for which the grid color is
+   *         being updated.
+   * @param  {String} color
+   *         A hex string representing the color to use.
+   */
+  onSetGridOverlayColor(node, color) {
+    this.store.dispatch(updateGridColor(node, color));
+    let { grids } = this.store.getState();
+
+    // If the grid for which the color was updated currently has a highlighter, update
+    // the color.
+    for (let grid of grids) {
+      if (grid.nodeFront === node && grid.highlighted) {
+        let highlighterSettings = this.getGridHighlighterSettings(node);
+        this.highlighters.showGridHighlighter(node, highlighterSettings);
+      }
+    }
+  },
+
+  /**
+   * Shows the box-model highlighter on the element corresponding to the provided
+   * NodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node to highlight.
+   * @param  {Object} options
+   *         Options passed to the highlighter actor.
+   */
+  onShowBoxModelHighlighterForNode(nodeFront, options) {
+    let toolbox = this.inspector.toolbox;
+    toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
+  },
+
+  /**
+   * Highlights the grid area in the CSS Grid Highlighter for the given grid.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element for which the grid
+   *         highlighter is highlighted for.
+   * @param  {String} gridAreaName
+   *         The name of the grid area for which the grid highlighter
+   *         is highlighted for.
+   * @param  {String} color
+   *         The color of the grid area for which the grid highlighter
+   *         is highlighted for.
+   */
+  onShowGridAreaHighlight(node, gridAreaName, color) {
+    let { highlighterSettings } = this.store.getState();
+
+    highlighterSettings.showGridArea = gridAreaName;
+    highlighterSettings.color = color;
+
+    this.highlighters.showGridHighlighter(node, highlighterSettings);
+  },
+
+  /**
+   * Handler for the inspector sidebar select event. Starts listening for
+   * "grid-layout-changed" if the layout panel is visible. Otherwise, stop
+   * listening for grid layout changes. Finally, refresh the layout view if
+   * it is visible.
+   */
+  onSidebarSelect() {
+    if (!this.isPanelVisible()) {
+      this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange);
+      return;
+    }
+
+    this.layoutInspector.on("grid-layout-changed", this.onGridLayoutChange);
+    this.updateGridPanel();
+  },
+
+  /**
+   * Handler for a change in the input checkboxes in the GridList component.
+   * Toggles on/off the grid highlighter for the provided grid container element.
+   *
+   * @param  {NodeFront} node
+   *         The NodeFront of the grid container element for which the grid
+   *         highlighter is toggled on/off for.
+   */
+  onToggleGridHighlighter(node) {
+    let highlighterSettings = this.getGridHighlighterSettings(node);
+    this.highlighters.toggleGridHighlighter(node, highlighterSettings);
+  },
+
+  /**
+   * Handler for a change in the show grid line numbers checkbox in the
+   * GridDisplaySettings component. Toggles on/off the option to show the grid line
+   * numbers in the grid highlighter. Refreshes the shown grid highlighter for the
+   * grids currently highlighted.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should show the grid line numbers.
+   */
+  onToggleShowGridLineNumbers(enabled) {
+    this.store.dispatch(updateShowGridLineNumbers(enabled));
+    Services.prefs.setBoolPref(SHOW_GRID_LINE_NUMBERS, enabled);
+
+    let { grids } = this.store.getState();
+
+    for (let grid of grids) {
+      if (grid.highlighted) {
+        let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront);
+        this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
+      }
+    }
+  },
+
+  /**
+   * Handler for a change in the extend grid lines infinitely checkbox in the
+   * GridDisplaySettings component. Toggles on/off the option to extend the grid
+   * lines infinitely in the grid highlighter. Refreshes the shown grid highlighter
+   * for grids currently highlighted.
+   *
+   * @param  {Boolean} enabled
+   *         Whether or not the grid highlighter should extend grid lines infinitely.
+   */
+  onToggleShowInfiniteLines(enabled) {
+    this.store.dispatch(updateShowInfiniteLines(enabled));
+    Services.prefs.setBoolPref(SHOW_INFINITE_LINES_PREF, enabled);
+
+    let { grids } = this.store.getState();
+
+    for (let grid of grids) {
+      if (grid.highlighted) {
+        let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront);
+        this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
+      }
+    }
+  },
+
+};
+
+module.exports = GridInspector;

devtools/client/inspector/grids/moz.build

@@ -4,6 +4,14 @@
 # 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/.
 
-rdf_util_src_cppsrcs = [
-    '/rdf/util/nsRDFResource.cpp',
+DIRS += [
+    'actions',
+    'components',
+    'reducers',
+    'utils',
 ]
+
+DevToolsModules(
+    'grid-inspector.js',
+    'types.js',
+)

devtools/client/inspector/inspector.js

@@ -25,6 +25,7 @@ const MenuItem = require("devtools/client/framework/menu-item");
 const {HTMLBreadcrumbs} = require("devtools/client/inspector/breadcrumbs");
 const BoxModel = require("devtools/client/inspector/boxmodel/box-model");
 const {FontInspector} = require("devtools/client/inspector/fonts/fonts");
+const GridInspector = require("devtools/client/inspector/grids/grid-inspector");
 const {InspectorSearch} = require("devtools/client/inspector/inspector-search");
 const {RuleViewTool} = require("devtools/client/inspector/rules/rules");
 const HighlightersOverlay = require("devtools/client/inspector/shared/highlighters-overlay");
@@ -577,6 +578,8 @@ Inspector.prototype = {
     this.computedview = new ComputedViewTool(this, this.panelWin);
 
     if (Services.prefs.getBoolPref("devtools.layoutview.enabled")) {
+      this.gridInspector = new GridInspector(this, this.panelWin);
+
       const LayoutView = this.browserRequire("devtools/client/inspector/layout/layout");
       this.layoutview = new LayoutView(this, this.panelWin);
     }

devtools/client/inspector/layout/components/App.js

@@ -10,26 +10,29 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 
-const Accordion = createFactory(require("./Accordion"));
-const Grid = createFactory(require("./Grid"));
-
 const BoxModel = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModel"));
+const Grid = createFactory(require("devtools/client/inspector/grids/components/Grid"));
 
-const Types = require("../types");
-const { getStr } = require("../utils/l10n");
+const BoxModelTypes = require("devtools/client/inspector/boxmodel/types");
+const GridTypes = require("devtools/client/inspector/grids/types");
+
+const Accordion = createFactory(require("./Accordion"));
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
 
+const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
+const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
+
 const App = createClass({
 
   displayName: "App",
 
   propTypes: {
-    boxModel: PropTypes.shape(Types.boxModel).isRequired,
+    boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
     getSwatchColorPickerTooltip: PropTypes.func.isRequired,
-    grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
-    highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
+    grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired,
+    highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
     setSelectedNode: PropTypes.func.isRequired,
     showBoxModelProperties: PropTypes.bool.isRequired,
     showGridOutline: PropTypes.bool.isRequired,
@@ -58,7 +61,7 @@ const App = createClass({
             opened: true,
           },
           {
-            header: getStr("layout.header"),
+            header: LAYOUT_L10N.getStr("layout.header"),
             component: Grid,
             componentProps: this.props,
             opened: true,

devtools/client/inspector/layout/components/GridOutline.js

@@ -1,123 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const { addons, createClass, DOM: dom, PropTypes } =
-  require("devtools/client/shared/vendor/react");
-
-const Types = require("../types");
-
-// Move SVG grid to the right 100 units, so that it is not flushed against the edge of
-// layout border
-const TRANSLATE_X = -100;
-const TRANSLATE_Y = 0;
-
-const VIEWPORT_HEIGHT = 100;
-const VIEWPORT_WIDTH = 450;
-
-module.exports = createClass({
-
-  displayName: "GridOutline",
-
-  propTypes: {
-    grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
-  },
-
-  mixins: [ addons.PureRenderMixin ],
-
-  getInitialState() {
-    return {
-      selectedGrids: [],
-    };
-  },
-
-  componentWillReceiveProps({ grids }) {
-    this.setState({
-      selectedGrids: grids.filter(grid => grid.highlighted),
-    });
-  },
-
-  renderGridCell(columnNumber, rowNumber, color) {
-    return dom.rect(
-      {
-        className: "grid-outline-cell",
-        x: columnNumber,
-        y: rowNumber,
-        width: 10,
-        height: 10,
-        stroke: color,
-      }
-    );
-  },
-
-  renderGridFragment({ color, gridFragments }) {
-    // TODO: We are drawing the first fragment since only one is currently being stored.
-    // In future we will need to iterate over all fragments of a grid.
-    const { rows, cols } = gridFragments[0];
-    const numOfColLines = cols.lines.length - 1;
-    const numOfRowLines = rows.lines.length - 1;
-    const rectangles = [];
-
-    // Draw a rectangle that acts as a border for the grid outline
-    const border = this.renderGridOutlineBorder(numOfRowLines, numOfColLines, color);
-    rectangles.push(border);
-
-    let x = 1;
-    let y = 1;
-    const width = 10;
-    const height = 10;
-
-    // Draw the cells within the grid outline border
-    for (let row = 0; row < numOfRowLines; row++) {
-      for (let col = 0; col < numOfColLines; col++) {
-        rectangles.push(this.renderGridCell(x, y, color));
-        x += width;
-      }
-
-      x = 1;
-      y += height;
-    }
-
-    return rectangles;
-  },
-
-  renderGridOutline(gridFragments) {
-    return dom.g(
-      {
-        className: "grid-cell-group",
-      },
-      gridFragments.map(gridFragment => this.renderGridFragment(gridFragment))
-    );
-  },
-
-  renderGridOutlineBorder(numberOfRows, numberOfCols, color) {
-    return dom.rect(
-      {
-        className: "grid-outline-border",
-        x: 1,
-        y: 1,
-        width: numberOfCols * 10,
-        height: numberOfRows * 10,
-        stroke: color,
-      }
-    );
-  },
-
-  render() {
-    return this.state.selectedGrids.length ?
-      dom.svg(
-        {
-          className: "grid-outline",
-          width: "100%",
-          height: 100,
-          viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${VIEWPORT_WIDTH} ${VIEWPORT_HEIGHT}`,
-        },
-        this.renderGridOutline(this.state.selectedGrids)
-      )
-      :
-      null;
-  },
-
-});

devtools/client/inspector/layout/components/moz.build

@@ -8,9 +8,4 @@ DevToolsModules(
     'Accordion.css',
     'Accordion.js',
     'App.js',
-    'Grid.js',
-    'GridDisplaySettings.js',
-    'GridItem.js',
-    'GridList.js',
-    'GridOutline.js',
 )

devtools/client/inspector/layout/layout.js

@@ -5,66 +5,29 @@
 "use strict";
 
 const Services = require("Services");
-const { Task } = require("devtools/shared/task");
 
 const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
-const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
-
-const {
-  updateGridColor,
-  updateGridHighlighted,
-  updateGrids,
-} = require("./actions/grids");
-const {
-  updateShowGridLineNumbers,
-  updateShowInfiniteLines,
-} = require("./actions/highlighter-settings");
-
 const App = createFactory(require("./components/App"));
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
-const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
 const SHOW_GRID_OUTLINE_PREF = "devtools.gridinspector.showGridOutline";
-const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
-
-// Default grid colors.
-const GRID_COLORS = [
-  "#05E4EE",
-  "#BB9DFF",
-  "#FFB53B",
-  "#71F362",
-  "#FF90FF",
-  "#FF90FF",
-  "#1B80FF",
-  "#FF2647"
-];
 
 function LayoutView(inspector, window) {
   this.document = window.document;
-  this.highlighters = inspector.highlighters;
   this.inspector = inspector;
   this.store = inspector.store;
-  this.walker = this.inspector.walker;
-
-  this.onGridLayoutChange = this.onGridLayoutChange.bind(this);
-  this.onHighlighterChange = this.onHighlighterChange.bind(this);
-  this.onSidebarSelect = this.onSidebarSelect.bind(this);
 
   this.init();
 }
 
 LayoutView.prototype = {
 
-  /**
-   * Initializes the layout view by fetching the LayoutFront from the walker, creating
-   * the redux store and adding the view into the inspector sidebar.
-   */
-  init: Task.async(function* () {
+  init() {
     if (!this.inspector) {
       return;
     }
@@ -75,40 +38,20 @@ LayoutView.prototype = {
       onShowBoxModelHighlighter,
     } = this.inspector.boxmodel.getComponentProps();
 
-    this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
-
-    this.loadHighlighterSettings();
-
-    this.highlighters.on("grid-highlighter-hidden", this.onHighlighterChange);
-    this.highlighters.on("grid-highlighter-shown", this.onHighlighterChange);
-    this.inspector.sidebar.on("select", this.onSidebarSelect);
-
-    // Create a shared SwatchColorPicker instance to be reused by all GridItem components.
-    this.swatchColorPickerTooltip = new SwatchColorPickerTooltip(
-      this.inspector.toolbox.doc,
-      this.inspector,
-      {
-        supportsCssColor4ColorFunction: () => false
-      }
-    );
+    let {
+      getSwatchColorPickerTooltip,
+      setSelectedNode,
+      onSetGridOverlayColor,
+      onShowBoxModelHighlighterForNode,
+      onShowGridAreaHighlight,
+      onToggleGridHighlighter,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
+    } = this.inspector.gridInspector.getComponentProps();
 
     let app = App({
-      /**
-       * Retrieve the shared SwatchColorPicker instance.
-       */
-      getSwatchColorPickerTooltip: () => {
-        return this.swatchColorPickerTooltip;
-      },
-
-      /**
-       * Set the inspector selection.
-       * @param {NodeFront} nodeFront
-       *        The NodeFront corresponding to the new selection.
-       */
-      setSelectedNode: (nodeFront) => {
-        this.inspector.selection.setNodeFront(nodeFront, "layout-panel");
-      },
-
+      getSwatchColorPickerTooltip,
+      setSelectedNode,
       /**
        * Shows the box model properties under the box model if true, otherwise, hidden by
        * default.
@@ -122,105 +65,14 @@ LayoutView.prototype = {
       showGridOutline: Services.prefs.getBoolPref(SHOW_GRID_OUTLINE_PREF),
 
       onHideBoxModelHighlighter,
-
-      /**
-       * Handler for a change in the grid overlay color picker for a grid container.
-       *
-       * @param  {NodeFront} node
-       *         The NodeFront of the grid container element for which the grid color is
-       *         being updated.
-       * @param  {String} color
-       *         A hex string representing the color to use.
-       */
-      onSetGridOverlayColor: (node, color) => {
-        this.store.dispatch(updateGridColor(node, color));
-        let { grids } = this.store.getState();
-
-        // If the grid for which the color was updated currently has a highlighter, update
-        // the color.
-        for (let grid of grids) {
-          if (grid.nodeFront === node && grid.highlighted) {
-            let highlighterSettings = this.getGridHighlighterSettings(node);
-            this.highlighters.showGridHighlighter(node, highlighterSettings);
-          }
-        }
-      },
-
+      onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
-
-     /**
-       * Shows the box-model highlighter on the element corresponding to the provided
-       * NodeFront.
-       *
-       * @param  {NodeFront} nodeFront
-       *         The node to highlight.
-       * @param  {Object} options
-       *         Options passed to the highlighter actor.
-       */
-      onShowBoxModelHighlighterForNode: (nodeFront, options) => {
-        let toolbox = this.inspector.toolbox;
-        toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
-      },
-
-      /**
-       * Handler for a change in the input checkboxes in the GridList component.
-       * Toggles on/off the grid highlighter for the provided grid container element.
-       *
-       * @param  {NodeFront} node
-       *         The NodeFront of the grid container element for which the grid
-       *         highlighter is toggled on/off for.
-       */
-      onToggleGridHighlighter: node => {
-        let highlighterSettings = this.getGridHighlighterSettings(node);
-        this.highlighters.toggleGridHighlighter(node, highlighterSettings);
-      },
-
-      /**
-       * Handler for a change in the show grid line numbers checkbox in the
-       * GridDisplaySettings component. Toggles on/off the option to show the grid line
-       * numbers in the grid highlighter. Refreshes the shown grid highlighter for the
-       * grids currently highlighted.
-       *
-       * @param  {Boolean} enabled
-       *         Whether or not the grid highlighter should show the grid line numbers.
-       */
-      onToggleShowGridLineNumbers: enabled => {
-        this.store.dispatch(updateShowGridLineNumbers(enabled));
-        Services.prefs.setBoolPref(SHOW_GRID_LINE_NUMBERS, enabled);
-
-        let { grids } = this.store.getState();
-
-        for (let grid of grids) {
-          if (grid.highlighted) {
-            let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront);
-            this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
-          }
-        }
-      },
-
-      /**
-       * Handler for a change in the extend grid lines infinitely checkbox in the
-       * GridDisplaySettings component. Toggles on/off the option to extend the grid
-       * lines infinitely in the grid highlighter. Refreshes the shown grid highlighter
-       * for grids currently highlighted.
-       *
-       * @param  {Boolean} enabled
-       *         Whether or not the grid highlighter should extend grid lines infinitely.
-       */
-      onToggleShowInfiniteLines: enabled => {
-        this.store.dispatch(updateShowInfiniteLines(enabled));
-        Services.prefs.setBoolPref(SHOW_INFINITE_LINES_PREF, enabled);
-
-        let { grids } = this.store.getState();
-
-        for (let grid of grids) {
-          if (grid.highlighted) {
-            let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront);
-            this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
-          }
-        }
-      }
+      onShowBoxModelHighlighterForNode,
+      onShowGridAreaHighlight,
+      onToggleGridHighlighter,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
     });
 
     let provider = createElement(Provider, {
@@ -238,163 +90,15 @@ LayoutView.prototype = {
       provider,
       defaultTab == "layoutview"
     );
-  }),
+  },
 
   /**
-   * Destruction function called when the inspector is destroyed. Removes event listeners
-   * and cleans up references.
+   * Destruction function called when the inspector is destroyed. Cleans up references.
    */
   destroy() {
-    this.highlighters.off("grid-highlighter-hidden", this.onHighlighterChange);
-    this.highlighters.off("grid-highlighter-shown", this.onHighlighterChange);
-    this.inspector.sidebar.off("select", this.onSidebarSelect);
-    this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange);
-
     this.document = null;
     this.inspector = null;
-    this.layoutInspector = null;
     this.store = null;
-    this.walker = null;
-  },
-
-  /**
-   * Returns the color set for the grid highlighter associated with the provided
-   * nodeFront.
-   *
-   * @param  {NodeFront} nodeFront
-   *         The NodeFront for which we need the color.
-   */
-  getGridColorForNodeFront(nodeFront) {
-    let { grids } = this.store.getState();
-
-    for (let grid of grids) {
-      if (grid.nodeFront === nodeFront) {
-        return grid.color;
-      }
-    }
-
-    return null;
-  },
-
-  /**
-   * Create a highlighter settings object for the provided nodeFront.
-   *
-   * @param  {NodeFront} nodeFront
-   *         The NodeFront for which we need highlighter settings.
-   */
-  getGridHighlighterSettings(nodeFront) {
-    let { highlighterSettings } = this.store.getState();
-
-    // Get the grid color for the provided nodeFront.
-    let color = this.getGridColorForNodeFront(nodeFront);
-
-    // Merge the grid color to the generic highlighter settings.
-    return Object.assign({}, highlighterSettings, {
-      color
-    });
-  },
-
-  /**
-   * Returns true if the layout panel is visible, and false otherwise.
-   */
-  isPanelVisible() {
-    return this.inspector.toolbox.currentToolId === "inspector" &&
-           this.inspector.sidebar &&
-           this.inspector.sidebar.getCurrentTabID() === "layoutview";
-  },
-
-  /**
-   * Load the grid highligher display settings into the store from the stored preferences.
-   */
-  loadHighlighterSettings() {
-    let { dispatch } = this.store;
-
-    let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
-    let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
-
-    dispatch(updateShowGridLineNumbers(showGridLineNumbers));
-    dispatch(updateShowInfiniteLines(showInfinteLines));
-  },
-
-  /**
-   * Updates the grid panel by dispatching the new grid data. This is called when the
-   * layout view becomes visible or the view needs to be updated with new grid data.
-   *
-   * @param {Array|null} gridFronts
-   *        Optional array of all GridFront in the current page.
-   */
-  updateGridPanel: Task.async(function* (gridFronts) {
-    // Stop refreshing if the inspector or store is already destroyed.
-    if (!this.inspector || !this.store) {
-      return;
-    }
-
-    // Get all the GridFront from the server if no gridFronts were provided.
-    if (!gridFronts) {
-      gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
-    }
-
-    let grids = [];
-    for (let i = 0; i < gridFronts.length; i++) {
-      let grid = gridFronts[i];
-      let nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
-
-      let fallbackColor = GRID_COLORS[i % GRID_COLORS.length];
-      let color = this.getGridColorForNodeFront(nodeFront) || fallbackColor;
-
-      grids.push({
-        id: i,
-        color,
-        gridFragments: grid.gridFragments,
-        highlighted: nodeFront == this.highlighters.gridHighlighterShown,
-        nodeFront,
-      });
-    }
-
-    this.store.dispatch(updateGrids(grids));
-  }),
-
-  /**
-   * Handler for "grid-layout-changed" events emitted from the LayoutActor.
-   *
-   * @param  {Array} grids
-   *         Array of all GridFront in the current page.
-   */
-  onGridLayoutChange(grids) {
-    if (this.isPanelVisible()) {
-      this.updateGridPanel(grids);
-    }
-  },
-
-  /**
-   * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
-   * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state.
-   *
-   * @param  {Event} event
-   *         Event that was triggered.
-   * @param  {NodeFront} nodeFront
-   *         The NodeFront of the grid container element for which the grid highlighter
-   *         is shown for.
-   */
-  onHighlighterChange(event, nodeFront) {
-    let highlighted = event === "grid-highlighter-shown";
-    this.store.dispatch(updateGridHighlighted(nodeFront, highlighted));
-  },
-
-  /**
-   * Handler for the inspector sidebar select event. Starts listening for
-   * "grid-layout-changed" if the layout panel is visible. Otherwise, stop
-   * listening for grid layout changes. Finally, refresh the layout view if
-   * it is visible.
-   */
-  onSidebarSelect() {
-    if (!this.isPanelVisible()) {
-      this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange);
-      return;
-    }
-
-    this.layoutInspector.on("grid-layout-changed", this.onGridLayoutChange);
-    this.updateGridPanel();
   },
 
 };

devtools/client/inspector/layout/moz.build

@@ -5,13 +5,9 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
-    'actions',
     'components',
-    'reducers',
-    'utils',
 ]
 
 DevToolsModules(
     'layout.js',
-    'types.js',
 )

devtools/client/inspector/moz.build

@@ -7,6 +7,7 @@ DIRS += [
     'components',
     'computed',
     'fonts',
+    'grids',
     'layout',
     'markup',
     'rules',

devtools/client/inspector/reducers.js

@@ -8,5 +8,5 @@
 // settings.
 
 exports.boxModel = require("devtools/client/inspector/boxmodel/reducers/box-model");
-exports.grids = require("devtools/client/inspector/layout/reducers/grids");
-exports.highlighterSettings = require("devtools/client/inspector/layout/reducers/highlighter-settings");
+exports.grids = require("devtools/client/inspector/grids/reducers/grids");
+exports.highlighterSettings = require("devtools/client/inspector/grids/reducers/highlighter-settings");

devtools/client/shared/browser-loader.js

@@ -14,6 +14,7 @@ const { AppConstants } = devtools.require("resource://gre/modules/AppConstants.j
 const BROWSER_BASED_DIRS = [
   "resource://devtools/client/inspector/boxmodel",
   "resource://devtools/client/inspector/computed",
+  "resource://devtools/client/inspector/grids",
   "resource://devtools/client/inspector/layout",
   "resource://devtools/client/jsonview",
   "resource://devtools/client/shared/vendor",

devtools/client/themes/layout.css

@@ -67,11 +67,14 @@
 }
 
 .grid-outline-cell {
-  fill: none;
   pointer-events: all;
   stroke-dasharray: 0.5, 2;
 }
 
+.grid-outline-cell:hover {
+  opacity: 0.45;
+}
+
 /**
  * Container when no grids are present
  */

devtools/server/actors/highlighters.css

@@ -230,13 +230,15 @@
   opacity: 0.6;
 }
 
-:-moz-native-anonymous .css-grid-areas {
+:-moz-native-anonymous .css-grid-areas,
+:-moz-native-anonymous .css-grid-cells {
   fill: #CEC0ED;
   stroke: none;
 }
 
-:-moz-native-anonymous .css-grid-infobar-areaname {
-  color: hsl(285,100%, 75%);
+:-moz-native-anonymous .css-grid-area-infobar-name,
+:-moz-native-anonymous .css-grid-cell-infobar-position {
+  color: hsl(285, 100%, 75%);
 }
 
 /* CSS Transform Highlighter */

devtools/server/actors/highlighters/css-grid.js

@@ -21,9 +21,11 @@ const {
 const { stringifyGridFragments } = require("devtools/server/actors/utils/css-grid-utils");
 
 const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled";
+
 const DEFAULT_GRID_COLOR = "#4B0082";
-const ROWS = "rows";
+
 const COLUMNS = "cols";
+const ROWS = "rows";
 
 const GRID_LINES_PROPERTIES = {
   "edge": {
@@ -69,13 +71,19 @@ const COLUMN_KEY = {};
  * - color(colorValue)
  *     @param  {String} colorValue
  *     The color that should be used to draw the highlighter for this grid.
+ * - showAllGridAreas(isShown)
+ *     @param  {Boolean} isShown
+ *     Shows all the grid area highlights for the current grid if isShown is true.
  * - showGridArea(areaName)
  *     @param  {String} areaName
  *     Shows the grid area highlight for the given area name.
- * - showAllGridAreas
- *     Shows all the grid area highlights for the current grid.
+ * - showGridCell({ gridFragmentIndex: Number, rowNumber: Number, columnNumber: Number })
+ *     @param  {Object} { gridFragmentIndex: Number, rowNumber: Number,
+ *                        columnNumber: Number }
+ *     An object containing the grid fragment index, row and column numbers to the
+ *     corresponding grid cell to highlight for the current grid.
  * - showGridLineNumbers(isShown)
- *     @param  {Boolean}
+ *     @param  {Boolean} isShown
  *     Displays the grid line numbers on the grid lines if isShown is true.
  * - showInfiniteLines(isShown)
  *     @param  {Boolean} isShown
@@ -87,13 +95,22 @@ const COLUMN_KEY = {};
  *   <svg class="css-grid-elements" hidden="true">
  *     <g class="css-grid-regions">
  *       <path class="css-grid-areas" points="..." />
+ *       <path class="css-grid-cells" points="..." />
  *     </g>
  *   </svg>
- *   <div class="css-grid-infobar-container">
+ *   <div class="css-grid-area-infobar-container">
  *     <div class="css-grid-infobar">
  *       <div class="css-grid-infobar-text">
- *         <span class="css-grid-infobar-areaname">Grid Area Name</span>
- *         <span class="css-grid-infobar-dimensions"Grid Area Dimensions></span>
+ *         <span class="css-grid-area-infobar-name">Grid Area Name</span>
+ *         <span class="css-grid-area-infobar-dimensions"Grid Area Dimensions></span>
+ *       </div>
+ *     </div>
+ *   </div>
+ *   <div class="css-grid-cell-infobar-container">
+ *     <div class="css-grid-infobar">
+ *       <div class="css-grid-infobar-text">
+ *         <span class="css-grid-cell-infobar-position">Grid Cell Position</span>
+ *         <span class="css-grid-cell-infobar-dimensions"Grid Cell Dimensions></span>
  *       </div>
  *     </div>
  *   </div>
@@ -183,28 +200,38 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
       prefix: this.ID_CLASS_PREFIX
     });
 
-    // Building the grid infobar markup
-    let infobarContainer = createNode(this.win, {
+    createSVGNode(this.win, {
+      nodeType: "path",
+      parent: regions,
+      attributes: {
+        "class": "cells",
+        "id": "cells"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+
+    // Building the grid area infobar markup
+    let areaInfobarContainer = createNode(this.win, {
       parent: container,
       attributes: {
-        "class": "infobar-container",
-        "id": "infobar-container",
+        "class": "area-infobar-container",
+        "id": "area-infobar-container",
         "position": "top",
         "hidden": "true"
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
-    let infobar = createNode(this.win, {
-      parent: infobarContainer,
+    let areaInfobar = createNode(this.win, {
+      parent: areaInfobarContainer,
       attributes: {
         "class": "infobar"
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
-    let textbox = createNode(this.win, {
-      parent: infobar,
+    let areaTextbox = createNode(this.win, {
+      parent: areaInfobar,
       attributes: {
         "class": "infobar-text"
       },
@@ -212,19 +239,65 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
     });
     createNode(this.win, {
       nodeType: "span",
-      parent: textbox,
+      parent: areaTextbox,
       attributes: {
-        "class": "infobar-areaname",
-        "id": "infobar-areaname"
+        "class": "area-infobar-name",
+        "id": "area-infobar-name"
       },
       prefix: this.ID_CLASS_PREFIX
     });
     createNode(this.win, {
       nodeType: "span",
-      parent: textbox,
+      parent: areaTextbox,
       attributes: {
-        "class": "infobar-dimensions",
-        "id": "infobar-dimensions"
+        "class": "area-infobar-dimensions",
+        "id": "area-infobar-dimensions"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+
+    // Building 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"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+
+    let cellInfobar = createNode(this.win, {
+      parent: cellInfobarContainer,
+      attributes: {
+        "class": "infobar"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+
+    let cellTextbox = createNode(this.win, {
+      parent: cellInfobar,
+      attributes: {
+        "class": "infobar-text"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+    createNode(this.win, {
+      nodeType: "span",
+      parent: cellTextbox,
+      attributes: {
+        "class": "cell-infobar-position",
+        "id": "cell-infobar-position"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+    createNode(this.win, {
+      nodeType: "span",
+      parent: cellTextbox,
+      attributes: {
+        "class": "cell-infobar-dimensions",
+        "id": "cell-infobar-dimensions"
       },
       prefix: this.ID_CLASS_PREFIX
     });
@@ -328,6 +401,9 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
     // The grid pattern cache should be cleared in case the color changed.
     this._clearCache();
 
+    // Hide the canvas, grid element highlights and infobar.
+    this._hide();
+
     return this._update();
   },
 
@@ -344,7 +420,6 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    */
   showGridArea(areaName) {
     this.renderGridArea(areaName);
-    this._showGridArea();
   },
 
   /**
@@ -352,15 +427,36 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    */
   showAllGridAreas() {
     this.renderGridArea();
-    this._showGridArea();
   },
 
   /**
    * Clear the grid area highlights.
    */
   clearGridAreas() {
-    let box = this.getElement("areas");
-    box.setAttribute("d", "");
+    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.
+   */
+  showGridCell({ gridFragmentIndex, rowNumber, columnNumber }) {
+    this.renderGridCell(gridFragmentIndex, rowNumber, columnNumber);
+  },
+
+  /**
+   * Clear the grid cell highlights.
+   */
+  clearGridCell() {
+    let cells = this.getElement("cells");
+    cells.setAttribute("d", "");
   },
 
   /**
@@ -422,7 +518,13 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
       this.showGridArea(this.options.showGridArea);
     }
 
+    // Display the grid cell highlights if needed.
+    if (this.options.showGridCell) {
+      this.showGridCell(this.options.showGridCell);
+    }
+
     this._showGrid();
+    this._showGridElements();
 
     root.setAttribute("style",
       `position:absolute; width:${width}px;height:${height}px; overflow:hidden`);
@@ -432,7 +534,7 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
   },
 
   /**
-   * Update the grid information displayed in the grid info bar.
+   * Update the grid information displayed in the grid area info bar.
    *
    * @param  {GridArea} area
    *         The grid area object.
@@ -445,32 +547,48 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    * @param  {Number} y2
    *         The second y-coordinate of the grid area rectangle.
    */
-  _updateInfobar(area, x1, x2, y1, y2) {
+  _updateGridAreaInfobar(area, x1, x2, y1, y2) {
     let width = x2 - x1;
     let height = y2 - y1;
     let dim = parseFloat(width.toPrecision(6)) +
               " \u00D7 " +
               parseFloat(height.toPrecision(6));
 
-    this.getElement("infobar-areaname").setTextContent(area.name);
-    this.getElement("infobar-dimensions").setTextContent(dim);
+    this.getElement("area-infobar-name").setTextContent(area.name);
+    this.getElement("area-infobar-dimensions").setTextContent(dim);
 
-    this._moveInfobar(x1, x2, y1, y2);
+    let container = this.getElement("area-infobar-container");
+    this._moveInfobar(container, x1, x2, y1, y2);
+  },
+
+  _updateGridCellInfobar(rowNumber, columnNumber, x1, x2, y1, y2) {
+    let width = x2 - x1;
+    let height = y2 - y1;
+    let dim = parseFloat(width.toPrecision(6)) +
+              " \u00D7 " +
+              parseFloat(height.toPrecision(6));
+    let position = `${rowNumber}\/${columnNumber}`;
+
+    this.getElement("cell-infobar-position").setTextContent(position);
+    this.getElement("cell-infobar-dimensions").setTextContent(dim);
+
+    let container = this.getElement("cell-infobar-container");
+    this._moveInfobar(container, x1, x2, y1, y2);
   },
 
   /**
-   * Move the grid infobar to the right place in the highlighter.
+   * Move the given grid infobar to the right place in the highlighter.
    *
    * @param  {Number} x1
-   *         The first x-coordinate of the grid area rectangle.
+   *         The first x-coordinate of the grid rectangle.
    * @param  {Number} x2
-   *         The second x-coordinate of the grid area rectangle.
+   *         The second x-coordinate of the grid rectangle.
    * @param  {Number} y1
-   *         The first y-coordinate of the grid area rectangle.
+   *         The first y-coordinate of the grid rectangle.
    * @param  {Number} y2
-   *         The second y-coordinate of the grid area rectangle.
+   *         The second y-coordinate of the grid rectangle.
    */
-  _moveInfobar(x1, x2, y1, y2) {
+  _moveInfobar(container, x1, x2, y1, y2) {
     let bounds = {
       bottom: y2,
       height: y2 - y1,
@@ -481,7 +599,6 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
       x: x1,
       y: y1,
     };
-    let container = this.getElement("infobar-container");
 
     moveInfobar(container, bounds, this.win);
   },
@@ -615,7 +732,7 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
    *         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  {[type]} lineType
+   * @param  {String} lineType
    *         The grid line type - "edge", "explicit", or "implicit".
    */
   renderLine(linePos, startPos, endPos, dimensionType, lineType) {
@@ -739,24 +856,68 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
 
         // Update and show the info bar when only displaying a single grid area.
         if (areaName) {
-          this._updateInfobar(area, x1, x2, y1, y2);
-          this._showInfoBar();
+          this._updateGridAreaInfobar(area, x1, x2, y1, y2);
+          this._showGridAreaInfoBar();
         }
       }
     }
 
-    let box = this.getElement("areas");
-    box.setAttribute("d", paths.join(" "));
+    let areas = this.getElement("areas");
+    areas.setAttribute("d", paths.join(" "));
   },
 
   /**
-   * Hide the highlighter, the canvas and the infobar.
+   * 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 currentZoom = getCurrentZoom(this.win);
+    let {bounds} = this.currentQuads.content[gridFragmentIndex];
+
+    let x1 = column.start + (bounds.left / currentZoom);
+    let x2 = column.start + column.breadth + (bounds.left / currentZoom);
+    let y1 = row.start + (bounds.top / currentZoom);
+    let y2 = row.start + row.breadth + (bounds.top / currentZoom);
+
+    let path = "M" + x1 + "," + y1 + " " +
+               "L" + x2 + "," + y1 + " " +
+               "L" + x2 + "," + y2 + " " +
+               "L" + x1 + "," + y2;
+    let cells = this.getElement("cells");
+    cells.setAttribute("d", path);
+
+    this._updateGridCellInfobar(rowNumber, columnNumber, x1, x2, y1, y2);
+    this._showGridCellInfoBar();
+  },
+
+  /**
+   * Hide the highlighter, the canvas and the infobars.
    */
   _hide() {
     setIgnoreLayoutChanges(true);
     this._hideGrid();
-    this._hideGridArea();
-    this._hideInfoBar();
+    this._hideGridElements();
+    this._hideGridAreaInfoBar();
+    this._hideGridCellInfoBar();
     setIgnoreLayoutChanges(false, this.highlighterEnv.window.document.documentElement);
   },
 
@@ -768,20 +929,28 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
     this.getElement("canvas").removeAttribute("hidden");
   },
 
-  _hideGridArea() {
+  _hideGridElements() {
     this.getElement("elements").setAttribute("hidden", "true");
   },
 
-  _showGridArea() {
+  _showGridElements() {
     this.getElement("elements").removeAttribute("hidden");
   },
 
-  _hideInfoBar() {
-    this.getElement("infobar-container").setAttribute("hidden", "true");
+  _hideGridAreaInfoBar() {
+    this.getElement("area-infobar-container").setAttribute("hidden", "true");
   },
 
-  _showInfoBar() {
-    this.getElement("infobar-container").removeAttribute("hidden");
+  _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");
   },
 
 });

dom/audiochannel/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIAudioChannelAgent.idl',
     'nsIAudioChannelService.idl',

dom/base/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 TEST_DIRS += ['test']
 
 XPIDL_SOURCES += [

dom/encoding/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "Internationalization")
+
 EXPORTS.mozilla.dom += [
     'EncodingUtils.h',
     'FallbackEncoding.h',

dom/events/DeviceMotionEvent.cpp

@@ -70,6 +70,11 @@ DeviceMotionEvent::InitDeviceMotionEvent(
   mInterval = aInterval;
   if (!aTimeStamp.IsNull()) {
     mEvent->mTime = aTimeStamp.Value();
+
+    static mozilla::TimeStamp sInitialNow = mozilla::TimeStamp::Now();
+    static uint64_t sInitialEventTime = aTimeStamp.Value();
+    mEvent->mTimeStamp = sInitialNow + mozilla::TimeDuration::FromMicroseconds(
+      aTimeStamp.Value() - sInitialEventTime);
   }
 }
 

dom/events/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Events")
+
 MOCHITEST_MANIFESTS += [
     'test/mochitest.ini',
     'test/pointerevents/mochitest.ini',

dom/fetch/Request.cpp

@@ -277,7 +277,7 @@ Request::Constructor(const GlobalObject& aGlobal,
                      const RequestOrUSVString& aInput,
                      const RequestInit& aInit, ErrorResult& aRv)
 {
-  nsCOMPtr<nsIInputStream> temporaryBody;
+  bool hasCopiedBody = false;
   RefPtr<InternalRequest> request;
 
   nsCOMPtr<nsIGlobalObject> global = do_QueryInterface(aGlobal.GetAsSupports());
@@ -290,8 +290,10 @@ Request::Constructor(const GlobalObject& aGlobal,
       aRv.ThrowTypeError<MSG_FETCH_BODY_CONSUMED_ERROR>();
       return nullptr;
     }
+
+    // The body will be copied when GetRequestConstructorCopy() is executed.
     if (body) {
-      temporaryBody = body;
+      hasCopiedBody = true;
     }
 
     request = inputReq->GetInternalRequest();
@@ -338,8 +340,7 @@ Request::Constructor(const GlobalObject& aGlobal,
 
   if (mode == RequestMode::Navigate ||
       (aInit.IsAnyMemberPresent() && request->Mode() == RequestMode::Navigate)) {
-    aRv.ThrowTypeError<MSG_INVALID_REQUEST_MODE>(NS_LITERAL_STRING("navigate"));
-    return nullptr;
+    mode = RequestMode::Same_origin;
   }
 
   if (aInit.IsAnyMemberPresent()) {
@@ -374,11 +375,7 @@ Request::Constructor(const GlobalObject& aGlobal,
             nsresult rv = principal->CheckMayLoad(uri, /* report */ false,
                                                   /* allowIfInheritsPrincipal */ false);
             if (NS_FAILED(rv)) {
-              nsAutoCString globalOrigin;
-              principal->GetOrigin(globalOrigin);
-              aRv.ThrowTypeError<MSG_CROSS_ORIGIN_REFERRER_URL>(referrer,
-                                                                NS_ConvertUTF8toUTF16(globalOrigin));
-              return nullptr;
+              referrerURL.AssignLiteral(kFETCH_CLIENT_REFERRER_STR);
             }
           }
         }
@@ -403,11 +400,10 @@ Request::Constructor(const GlobalObject& aGlobal,
           // this work in a single sync loop.
           RefPtr<ReferrerSameOriginChecker> checker =
             new ReferrerSameOriginChecker(worker, referrerURL, rv);
-          checker->Dispatch(Terminating, aRv);
-          if (aRv.Failed() || NS_FAILED(rv)) {
-            aRv.ThrowTypeError<MSG_CROSS_ORIGIN_REFERRER_URL>(referrer,
-                                                              worker->GetLocationInfo().mOrigin);
-            return nullptr;
+          IgnoredErrorResult error;
+          checker->Dispatch(Terminating, error);
+          if (error.Failed() || NS_FAILED(rv)) {
+            referrerURL.AssignLiteral(kFETCH_CLIENT_REFERRER_STR);
           }
         }
       }
@@ -535,7 +531,7 @@ Request::Constructor(const GlobalObject& aGlobal,
   }
 
   if ((aInit.mBody.WasPassed() && !aInit.mBody.Value().IsNull()) ||
-      temporaryBody) {
+      hasCopiedBody) {
     // HEAD and GET are not allowed to have a body.
     nsAutoCString method;
     request->GetMethod(method);
@@ -561,7 +557,7 @@ Request::Constructor(const GlobalObject& aGlobal,
         return nullptr;
       }
 
-      temporaryBody = stream;
+      nsCOMPtr<nsIInputStream> temporaryBody = stream;
 
       if (!contentTypeWithCharset.IsVoid() &&
           !requestHeaders->Has(NS_LITERAL_CSTRING("Content-Type"), aRv)) {
@@ -574,6 +570,11 @@ Request::Constructor(const GlobalObject& aGlobal,
       }
 
       request->ClearCreatedByFetchEvent();
+
+      if (hasCopiedBody) {
+        request->SetBody(nullptr);
+      }
+
       request->SetBody(temporaryBody);
     }
   }

dom/fetch/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 EXPORTS.mozilla.dom += [
     'BodyExtractor.h',
     'ChannelInfo.h',

dom/file/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 DIRS += ['ipc']
 
 XPIDL_SOURCES += [

dom/filehandle/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 EXPORTS.mozilla.dom.filehandle += [
     'ActorsChild.h',
     'ActorsParent.h',

dom/filesystem/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 DIRS += ['compat']
 
 TEST_DIRS += ['tests']

dom/grid/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "CSS Parsing and Computation")
+
 MOCHITEST_CHROME_MANIFESTS += ['test/chrome.ini']
 
 EXPORTS.mozilla.dom += [

dom/html/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 MOCHITEST_MANIFESTS += [
     'test/forms/mochitest.ini',
     'test/imports/mochitest.ini',

dom/imptests/moz.build

@@ -4,6 +4,21 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
+with Files("html/webgl/**"):
+    BUG_COMPONENT = ("Core", "Canvas 2D")
+
+with Files("html/typedarrays/**"):
+    BUG_COMPONENT = ("Core", "Javascript: Standard Library")
+
+with Files("html/js/**"):
+    BUG_COMPONENT = ("Core", "Javascript: Standard Library")
+
+with Files("html/html/**"):
+    BUG_COMPONENT = ("Core", "DOM: Core & HTML")
+
 MOCHITEST_MANIFESTS += [
     'html/mochitest.ini',
     'webapps/mochitest.ini',

dom/indexedDB/ActorsChild.cpp

@@ -990,7 +990,8 @@ public:
                             BackgroundFactoryRequestChild* aActor,
                             IDBFactory* aFactory,
                             const PrincipalInfo& aPrincipalInfo)
-    : mWorkerPrivate(aWorkerPrivate)
+    : Runnable("indexedDB::WorkerPermissionChallenge")
+    , mWorkerPrivate(aWorkerPrivate)
     , mActor(aActor)
     , mFactory(aFactory)
     , mPrincipalInfo(aPrincipalInfo)
@@ -1009,7 +1010,7 @@ public:
       return false;
     }
 
-    if (NS_WARN_IF(NS_FAILED(NS_DispatchToMainThread(this)))) {
+    if (NS_WARN_IF(NS_FAILED(mWorkerPrivate->DispatchToMainThread(this)))) {
       mWorkerPrivate->ModifyBusyCountFromWorker(false);
       return false;
     }
@@ -1106,6 +1107,8 @@ private:
     IPC::Principal ipcPrincipal(principal);
 
     auto* actor = new WorkerPermissionRequestChildProcessActor(this);
+    tabChild->SetEventTargetForActor(actor, wp->MainThreadEventTarget());
+    MOZ_ASSERT(actor->GetActorEventTarget());
     tabChild->SendPIndexedDBPermissionRequestConstructor(actor, ipcPrincipal);
     return false;
   }
@@ -1164,7 +1167,8 @@ class BackgroundRequestChild::PreprocessHelper final
 
 public:
   PreprocessHelper(uint32_t aModuleSetIndex, BackgroundRequestChild* aActor)
-    : mOwningThread(NS_GetCurrentThread())
+    : CancelableRunnable("indexedDB::BackgroundRequestChild::PreprocessHelper")
+    , mOwningThread(aActor->GetActorEventTarget())
     , mActor(aActor)
     , mModuleSetIndex(aModuleSetIndex)
     , mResultCode(NS_OK)
@@ -1400,6 +1404,20 @@ BackgroundFactoryChild::DeallocPBackgroundIDBDatabaseChild(
   return true;
 }
 
+mozilla::ipc::IPCResult
+BackgroundFactoryChild::RecvPBackgroundIDBDatabaseConstructor(
+                                    PBackgroundIDBDatabaseChild* aActor,
+                                    const DatabaseSpec& aSpec,
+                                    PBackgroundIDBFactoryRequestChild* aRequest)
+{
+  AssertIsOnOwningThread();
+  MOZ_ASSERT(aActor);
+  MOZ_ASSERT(aActor->GetActorEventTarget(),
+    "The event target shall be inherited from its manager actor.");
+
+  return IPC_OK();
+}
+
 /*******************************************************************************
  * BackgroundFactoryRequestChild
  ******************************************************************************/
@@ -1630,6 +1648,8 @@ BackgroundFactoryRequestChild::RecvPermissionChallenge(
 
   auto* actor = new PermissionRequestChildProcessActor(this, mFactory);
 
+  tabChild->SetEventTargetForActor(actor, this->GetActorEventTarget());
+  MOZ_ASSERT(actor->GetActorEventTarget());
   tabChild->SendPIndexedDBPermissionRequestConstructor(actor, ipcPrincipal);
 
   return IPC_OK();
@@ -1853,6 +1873,8 @@ BackgroundDatabaseChild::RecvPBackgroundIDBVersionChangeTransactionConstructor(
 {
   AssertIsOnOwningThread();
   MOZ_ASSERT(aActor);
+  MOZ_ASSERT(aActor->GetActorEventTarget(),
+    "The event target shall be inherited from its manager actor.");
   MOZ_ASSERT(mOpenRequestActor);
 
   MaybeCollectGarbageOnIPCMessage();
@@ -3127,7 +3149,8 @@ class BackgroundCursorChild::DelayedActionRunnable final
 public:
   explicit
   DelayedActionRunnable(BackgroundCursorChild* aActor, ActionFunc aActionFunc)
-    : mActor(aActor)
+    : CancelableRunnable("indexedDB::BackgroundCursorChild::DelayedActionRunnable")
+    , mActor(aActor)
     , mRequest(aActor->mRequest)
     , mActionFunc(aActionFunc)
   {
@@ -3280,7 +3303,8 @@ BackgroundCursorChild::HandleResponse(const void_t& aResponse)
   if (!mCursor) {
     nsCOMPtr<nsIRunnable> deleteRunnable = new DelayedActionRunnable(
       this, &BackgroundCursorChild::SendDeleteMeInternal);
-    MOZ_ALWAYS_SUCCEEDS(NS_DispatchToCurrentThread(deleteRunnable));
+      MOZ_ALWAYS_SUCCEEDS(this->GetActorEventTarget()->
+        Dispatch(deleteRunnable.forget(), NS_DISPATCH_NORMAL));
   }
 }
 

dom/indexedDB/ActorsChild.h

@@ -215,6 +215,13 @@ private:
   DeallocPBackgroundIDBDatabaseChild(PBackgroundIDBDatabaseChild* aActor)
                                      override;
 
+  mozilla::ipc::IPCResult
+  RecvPBackgroundIDBDatabaseConstructor(
+                                    PBackgroundIDBDatabaseChild* aActor,
+                                    const DatabaseSpec& aSpec,
+                                    PBackgroundIDBFactoryRequestChild* aRequest)
+                                    override;
+
   bool
   SendDeleteMe() = delete;
 };

dom/indexedDB/FileSnapshot.cpp

@@ -32,7 +32,7 @@ class StreamWrapper final
 public:
   StreamWrapper(nsIInputStream* aInputStream,
                 IDBFileHandle* aFileHandle)
-    : mOwningThread(NS_GetCurrentThread())
+    : mOwningThread(aFileHandle->GetMutableFile()->Database()->EventTarget())
     , mInputStream(aInputStream)
     , mFileHandle(aFileHandle)
     , mFinished(false)
@@ -86,8 +86,10 @@ private:
       return;
     }
 
-    nsCOMPtr<nsIRunnable> destroyRunnable =
-      NewNonOwningRunnableMethod(this, &StreamWrapper::Destroy);
+    RefPtr<Runnable> destroyRunnable =
+      NewNonOwningRunnableMethod("StreamWrapper::Destroy",
+                                 this,
+                                 &StreamWrapper::Destroy);
 
     MOZ_ALWAYS_SUCCEEDS(mOwningThread->Dispatch(destroyRunnable,
                                                 NS_DISPATCH_NORMAL));
@@ -111,7 +113,8 @@ public:
 private:
   explicit
   CloseRunnable(StreamWrapper* aStreamWrapper)
-    : mStreamWrapper(aStreamWrapper)
+    : Runnable("StreamWrapper::CloseRunnable")
+    , mStreamWrapper(aStreamWrapper)
   { }
 
   ~CloseRunnable()

dom/indexedDB/IDBDatabase.cpp

@@ -260,6 +260,13 @@ IDBDatabase::OwningThread() const
 
 #endif // DEBUG
 
+nsIEventTarget*
+IDBDatabase::EventTarget() const
+{
+  AssertIsOnOwningThread();
+  return Factory()->EventTarget();
+}
+
 void
 IDBDatabase::CloseInternal()
 {
@@ -710,6 +717,8 @@ IDBDatabase::Transaction(JSContext* aCx,
     mBackgroundActor->SendPBackgroundIDBTransactionConstructor(actor,
                                                                sortedStoreNames,
                                                                mode));
+  MOZ_ASSERT(actor->GetActorEventTarget(),
+    "The event target shall be inherited from it manager actor.");
 
   transaction->SetBackgroundActor(actor);
 
@@ -772,6 +781,9 @@ IDBDatabase::CreateMutableFile(JSContext* aCx,
 
   mBackgroundActor->SendPBackgroundIDBDatabaseRequestConstructor(actor, params);
 
+  MOZ_ASSERT(actor->GetActorEventTarget(),
+    "The event target shall be inherited from its manager actor.");
+
   return request.forget();
 }
 
@@ -942,6 +954,9 @@ IDBDatabase::GetOrCreateFileActorForBlob(Blob* aBlob)
       if (NS_WARN_IF(!actor)) {
         return nullptr;
       }
+
+      MOZ_ASSERT(actor->GetActorEventTarget(),
+        "The event target shall be inherited from its manager actor.");
     } else {
       // Make sure that the input stream we get here is one that can actually be
       // serialized to PBackground.
@@ -962,6 +977,9 @@ IDBDatabase::GetOrCreateFileActorForBlob(Blob* aBlob)
       if (NS_WARN_IF(!actor)) {
         return nullptr;
       }
+
+      MOZ_ASSERT(actor->GetActorEventTarget(),
+        "The event target shall be inherited from its manager actor.");
     }
 
     MOZ_ASSERT(actor);
@@ -1036,19 +1054,21 @@ IDBDatabase::DelayedMaybeExpireFileActors()
     return;
   }
 
-  nsCOMPtr<nsIRunnable> runnable =
-    NewRunnableMethod<bool>(this,
+  RefPtr<Runnable> runnable =
+    NewRunnableMethod<bool>("IDBDatabase::ExpireFileActors",
+                            this,
                             &IDBDatabase::ExpireFileActors,
                             /* aExpireAll */ false);
   MOZ_ASSERT(runnable);
 
   if (!NS_IsMainThread()) {
     // Wrap as a nsICancelableRunnable to make workers happy.
-    nsCOMPtr<nsIRunnable> cancelable = new CancelableRunnableWrapper(runnable);
+    RefPtr<Runnable> cancelable = new CancelableRunnableWrapper(runnable);
     cancelable.swap(runnable);
   }
 
-  MOZ_ALWAYS_SUCCEEDS(NS_DispatchToCurrentThread(runnable));
+  MOZ_ALWAYS_SUCCEEDS(
+    EventTarget()->Dispatch(runnable.forget(), NS_DISPATCH_NORMAL));
 }
 
 nsresult

dom/indexedDB/IDBDatabase.h

@@ -19,6 +19,7 @@
 #include "nsTHashtable.h"
 
 class nsIDocument;
+class nsIEventTarget;
 class nsPIDOMWindowInner;
 
 namespace mozilla {
@@ -107,6 +108,9 @@ public:
   { }
 #endif
 
+  nsIEventTarget*
+  EventTarget() const;
+
   const nsString&
   Name() const;
 

dom/indexedDB/IDBFactory.cpp

@@ -11,6 +11,7 @@
 #include "IndexedDatabaseManager.h"
 #include "mozilla/ErrorResult.h"
 #include "mozilla/Preferences.h"
+#include "mozilla/SystemGroup.h"
 #include "mozilla/dom/BindingDeclarations.h"
 #include "mozilla/dom/IDBFactoryBinding.h"
 #include "mozilla/dom/TabChild.h"
@@ -168,6 +169,8 @@ IDBFactory::CreateForWindow(nsPIDOMWindowInner* aWindow,
   factory->mPrincipalInfo = Move(principalInfo);
   factory->mWindow = aWindow;
   factory->mTabChild = TabChild::GetFrom(aWindow);
+  factory->mEventTarget =
+    nsGlobalWindow::Cast(aWindow)->EventTargetFor(TaskCategory::Other);
   factory->mInnerWindowID = aWindow->WindowID();
   factory->mPrivateBrowsingMode =
     loadContext && loadContext->UsePrivateBrowsing();
@@ -299,6 +302,8 @@ IDBFactory::CreateForJSInternal(JSContext* aCx,
   factory->mPrincipalInfo = aPrincipalInfo.forget();
   factory->mOwningObject = aOwningObject;
   mozilla::HoldJSObjects(factory.get());
+  factory->mEventTarget = NS_IsMainThread() ?
+    SystemGroup::EventTargetFor(TaskCategory::Other) : NS_GetCurrentThread();
   factory->mInnerWindowID = aInnerWindowID;
 
   factory.forget(aFactory);
@@ -789,6 +794,10 @@ IDBFactory::BackgroundActorCreated(PBackgroundChild* aBackgroundActor,
   {
     BackgroundFactoryChild* actor = new BackgroundFactoryChild(this);
 
+    // Set EventTarget for the top-level actor.
+    // All child actors created later inherit the same event target.
+    aBackgroundActor->SetEventTargetForActor(actor, EventTarget());
+    MOZ_ASSERT(actor->GetActorEventTarget());
     mBackgroundActor =
       static_cast<BackgroundFactoryChild*>(
         aBackgroundActor->SendPBackgroundIDBFactoryConstructor(actor,
@@ -885,6 +894,9 @@ IDBFactory::InitiateRequest(IDBOpenDBRequest* aRequest,
     return NS_ERROR_DOM_INDEXEDDB_UNKNOWN_ERR;
   }
 
+  MOZ_ASSERT(actor->GetActorEventTarget(),
+    "The event target shall be inherited from its manager actor.");
+
   return NS_OK;
 }
 

dom/indexedDB/IDBFactory.h

@@ -18,6 +18,7 @@
 #include "nsTArray.h"
 #include "nsWrapperCache.h"
 
+class nsIEventTarget;
 class nsIPrincipal;
 class nsPIDOMWindowInner;
 struct PRThread;
@@ -73,6 +74,11 @@ class IDBFactory final
 
   indexedDB::BackgroundFactoryChild* mBackgroundActor;
 
+  // A DocGroup-specific EventTarget if created by CreateForWindow().
+  // Otherwise, it must either be set to SystemGroup on main thread or
+  // NS_GetCurrentThread() off main thread.
+  nsCOMPtr<nsIEventTarget> mEventTarget;
+
 #ifdef DEBUG
   PRThread* mOwningThread;
 #endif
@@ -118,6 +124,14 @@ public:
   { }
 #endif
 
+  nsIEventTarget*
+  EventTarget() const
+  {
+    AssertIsOnOwningThread();
+    MOZ_RELEASE_ASSERT(mEventTarget);
+    return mEventTarget;
+  }
+
   void
   ClearBackgroundActor()
   {

dom/indexedDB/IDBTransaction.cpp

@@ -307,6 +307,9 @@ IDBTransaction::StartRequest(IDBRequest* aRequest, const RequestParams& aParams)
       SendPBackgroundIDBRequestConstructor(actor, aParams);
   }
 
+  MOZ_ASSERT(actor->GetActorEventTarget(),
+    "The event target shall be inherited from its manager actor.");
+
   // Balanced in BackgroundRequestChild::Recv__delete__().
   OnNewRequest();
 
@@ -333,6 +336,9 @@ IDBTransaction::OpenCursor(BackgroundCursorChild* aBackgroundActor,
       SendPBackgroundIDBCursorConstructor(aBackgroundActor, aParams);
   }
 
+  MOZ_ASSERT(aBackgroundActor->GetActorEventTarget(),
+    "The event target shall be inherited from its manager actor.");
+
   // Balanced in BackgroundCursorChild::RecvResponse().
   OnNewRequest();
 }

dom/indexedDB/IndexedDatabaseManager.cpp

@@ -994,6 +994,11 @@ IndexedDatabaseManager::BlockAndGetFileReferences(
 
     BackgroundUtilsChild* actor = new BackgroundUtilsChild(this);
 
+    // We don't set event target for BackgroundUtilsChild because:
+    // 1. BackgroundUtilsChild is a singleton.
+    // 2. SendGetFileReferences is a sync operation to be returned asap if unlabeled.
+    // 3. The rest operations like DeleteMe/__delete__ only happens at shutdown.
+    // Hence, we should keep it unlabeled.
     mBackgroundActor =
       static_cast<BackgroundUtilsChild*>(
         bgActor->SendPBackgroundIndexedDBUtilsConstructor(actor));

dom/indexedDB/ScriptErrorHelper.cpp

@@ -7,6 +7,7 @@
 #include "ScriptErrorHelper.h"
 
 #include "MainThreadUtils.h"
+#include "mozilla/SystemGroup.h"
 #include "nsCOMPtr.h"
 #include "nsContentUtils.h"
 #include "nsIConsoleService.h"
@@ -210,7 +211,10 @@ ScriptErrorHelper::Dump(const nsAString& aMessage,
                               aSeverityFlag,
                               aIsChrome,
                               aInnerWindowID);
-    MOZ_ALWAYS_SUCCEEDS(NS_DispatchToMainThread(runnable));
+    MOZ_ALWAYS_SUCCEEDS(
+      SystemGroup::Dispatch("indexedDB::ScriptErrorHelper::Dump",
+                            TaskCategory::Other,
+                            runnable.forget()));
   }
 }
 
@@ -240,7 +244,10 @@ ScriptErrorHelper::DumpLocalizedMessage(const nsACString& aMessageName,
                               aSeverityFlag,
                               aIsChrome,
                               aInnerWindowID);
-    MOZ_ALWAYS_SUCCEEDS(NS_DispatchToMainThread(runnable));
+    MOZ_ALWAYS_SUCCEEDS(
+      SystemGroup::Dispatch("indexedDB::ScriptErrorHelper::DumpLocalizedMessage",
+                            TaskCategory::Other,
+                            runnable.forget()));
   }
 }
 

dom/indexedDB/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: IndexedDB")
+
 TEST_DIRS += ['test/extensions']
 
 MOCHITEST_MANIFESTS += ['test/mochitest.ini']

dom/interfaces/base/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'domstubs.idl',
     'nsIBrowser.idl',

dom/interfaces/canvas/moz.build

@@ -4,6 +4,12 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "Canvas: 2D")
+
+with Files("nsIDOMWebGLRenderingContext.idl"):
+    BUG_COMPONENT = ("Core", "Canvas: WebGL")
+
 XPIDL_SOURCES += [
     'nsIDOMCanvasRenderingContext2D.idl',
     'nsIDOMWebGLRenderingContext.idl',

dom/interfaces/core/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIDOMAttr.idl',
     'nsIDOMCDATASection.idl',

dom/interfaces/css/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: CSS Object Model")
+
 XPIDL_SOURCES += [
     'nsIDOMCounter.idl',
     'nsIDOMCSSConditionRule.idl',

dom/interfaces/events/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Events")
+
 XPIDL_SOURCES += [
     'nsIDOMAnimationEvent.idl',
     'nsIDOMBeforeUnloadEvent.idl',

dom/interfaces/geolocation/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "Geolocation")
+
 XPIDL_SOURCES += [
     'nsIDOMGeoGeolocation.idl',
     'nsIDOMGeoPosition.idl',

dom/interfaces/html/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIDOMHTMLAnchorElement.idl',
     'nsIDOMHTMLAppletElement.idl',

dom/interfaces/json/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "JavaScript Engine")
+
 XPIDL_SOURCES += [
     'nsIJSON.idl',
 ]

dom/interfaces/notification/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsINotificationStorage.idl',
 ]

dom/interfaces/offline/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIDOMOfflineResourceList.idl',
 ]

dom/interfaces/push/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Push Notifications")
+
 XPIDL_SOURCES += [
     'nsIPushErrorReporter.idl',
     'nsIPushNotifier.idl',

dom/interfaces/range/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIDOMRange.idl',
 ]

dom/interfaces/security/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Security")
+
 XPIDL_SOURCES += [
     'nsIContentSecurityManager.idl',
     'nsIContentSecurityPolicy.idl'

dom/interfaces/settings/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Device Interfaces")
+
 XPIDL_SOURCES += [
     'nsISettingsService.idl',
 ]

dom/interfaces/sidebar/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIWebContentHandlerRegistrar.idl',
 ]

dom/interfaces/smil/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "SVG")
+
 XPIDL_SOURCES += [
     'nsIDOMTimeEvent.idl',
 ]

dom/interfaces/storage/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIDOMStorage.idl',
     'nsIDOMStorageManager.idl',

dom/interfaces/stylesheets/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: CSS Object Model")
+
 XPIDL_SOURCES += [
     'nsIDOMMediaList.idl',
     'nsIDOMStyleSheet.idl',

dom/interfaces/svg/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "SVG")
+
 XPIDL_SOURCES += [
     'nsIDOMSVGElement.idl',
     'nsIDOMSVGLength.idl',

dom/interfaces/traversal/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Core & HTML")
+
 XPIDL_SOURCES += [
     'nsIDOMNodeFilter.idl',
     'nsIDOMNodeIterator.idl',

dom/interfaces/xbl/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "XBL")
+
 XPIDL_SOURCES += [
     'nsIDOMDocumentXBL.idl',
 ]

dom/interfaces/xpath/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "XSLT")
+
 XPIDL_SOURCES += [
     'nsIDOMXPathEvaluator.idl',
     'nsIDOMXPathResult.idl',

dom/interfaces/xul/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "XUL")
+
 XPIDL_SOURCES += [
     'nsIDOMXULButtonElement.idl',
     'nsIDOMXULCheckboxElement.idl',

dom/ipc/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Content Processes")
+
 XPIDL_SOURCES += [
     'nsIHangReport.idl',
 ]

dom/json/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "JavaScript Engine")
+
 EXPORTS += [
     'nsJSON.h',
 ]

dom/jsurl/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "Document Navigation")
+
 EXPORTS += [
     'nsJSProtocolHandler.h',
 ]

dom/locales/moz.build

@@ -4,4 +4,58 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
+with Files("en-US/chrome/accessibility/**"):
+    BUG_COMPONENT = ("Core", "Disability Access APIs")
+
+with Files("en-US/chrome/dom/**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
+with Files("en-US/chrome/layout/**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
+with Files("en-US/chrome/layout/css.properties"):
+    BUG_COMPONENT = ("Core", "CSS Parsing and Computation")
+
+with Files("en-US/chrome/layout/htmlparser.properties"):
+    BUG_COMPONENT = ("Core", "HTML: Parser")
+
+with Files("en-US/chrome/layout/layout_errors.properties"):
+    BUG_COMPONENT = ("Core", "DOM: Animation")
+
+with Files("en-US/chrome/layout/MediaDocument.properties"):
+    BUG_COMPONENT = ("Core", "Layout: Images")
+
+with Files("en-US/chrome/layout/printing.properties"):
+    BUG_COMPONENT = ("Core", "Printing: Output")
+
+with Files("en-US/chrome/layout/xbl.properties"):
+    BUG_COMPONENT = ("Core", "XBL")
+
+with Files("en-US/chrome/layout/xmlparser.properties"):
+    BUG_COMPONENT = ("Core", "XML")
+
+with Files("en-US/chrome/layout/xul.properties"):
+    BUG_COMPONENT = ("Core", "XUL")
+
+with Files("en-US/chrome/mathml/**"):
+    BUG_COMPONENT = ("Core", "MathML")
+
+with Files("en-US/chrome/security/**"):
+    BUG_COMPONENT = ("Core", "Security")
+
+with Files("en-US/chrome/svg/**"):
+    BUG_COMPONENT = ("Core", "SVG")
+
+with Files("en-US/chrome/xml/**"):
+    BUG_COMPONENT = ("Core", "XML")
+
+with Files("en-US/chrome/xslt/**"):
+    BUG_COMPONENT = ("Core", "XSLT")
+
+with Files("en-US/chrome/plugins.properties"):
+    BUG_COMPONENT = ("Core", "Plug-ins")
+
 JAR_MANIFESTS += ['jar.mn']

dom/manifest/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 EXTRA_JS_MODULES += [
     'ImageObjectProcessor.jsm',
     'Manifest.jsm',

dom/mathml/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "MathML")
+
 UNIFIED_SOURCES += [
     'nsMathMLElement.cpp',
     'nsMathMLElementFactory.cpp',

dom/media/webrtc/PeerIdentity.h

@@ -7,11 +7,7 @@
 #ifndef PeerIdentity_h
 #define PeerIdentity_h
 
-#ifdef MOZILLA_INTERNAL_API
 #include "nsString.h"
-#else
-#include "nsStringAPI.h"
-#endif
 
 template <class T> class nsCOMPtr;
 class nsIIDNService;

dom/messagechannel/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 TEST_DIRS += ['tests']
 
 EXPORTS.mozilla.dom += [

dom/moz.build

@@ -4,6 +4,13 @@
 # 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/.
 
+# interfaces/*/ are annotated per directory, this is for new files
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
+with Files("plugins/**"):
+    BUG_COMPONENT = ("Core", "Plug-ins")
+
 JAR_MANIFESTS += ['jar.mn']
 
 interfaces = [

dom/offline/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "Networking")
+
 EXPORTS += [
     'nsDOMOfflineResourceList.h',
 ]

dom/performance/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 EXPORTS.mozilla.dom += [
     'Performance.h',
     'PerformanceEntry.h',

dom/permission/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 EXPORTS.mozilla.dom += [
     'Permissions.h',
     'PermissionStatus.h',

dom/power/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 XPIDL_SOURCES += [
     'nsIDOMWakeLockListener.idl',
     'nsIPowerManagerService.idl',

dom/presentation/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 DIRS += ['interfaces', 'provider']
 
 XPCSHELL_TESTS_MANIFESTS += ['tests/xpcshell/xpcshell.ini']

dom/promise/moz.build

@@ -4,6 +4,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM")
+
 EXPORTS.mozilla.dom += [
     'Promise.h',
     'PromiseDebugging.h',

dom/push/moz.build

@@ -3,6 +3,9 @@
 # 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/.
 
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Push Notifications")
+
 EXTRA_COMPONENTS += [
     'Push.js',
     'Push.manifest',

dom/quota/moz.build

@@ -4,6 +4,10 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Quota Manager")
+
 XPIDL_SOURCES += [
     'nsIQuotaCallbacks.idl',
     'nsIQuotaManagerService.idl',

dom/secureelement/moz.build

@@ -5,6 +5,10 @@
 #
 # Copyright © 2014 Deutsche Telekom, Inc.
 
+# All of this seems to be FirefoxOS::NFC
+with Files("**"):
+    BUG_COMPONENT = ("Core", "DOM: Device Interfaces")
+
 if CONFIG['MOZ_SECUREELEMENT']:
     EXTRA_COMPONENTS += [
         'DOMSecureElement.js',