--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -1,19 +1,22 @@
 /* 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 { throttle } = require("devtools/client/inspector/shared/utils");
 
 const Types = require("../types");
 
+const GRID_CELL_MOUSEOVER_TIMEOUT = 150;
+
 // 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;
 
@@ -30,16 +33,20 @@ module.exports = createClass({
   mixins: [ addons.PureRenderMixin ],
 
   getInitialState() {
     return {
       selectedGrids: [],
     };
   },
 
+  componentWillMount() {
+    this.highlightCell = throttle(this.highlightCell, GRID_CELL_MOUSEOVER_TIMEOUT);
+  },
+
   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
@@ -61,16 +68,41 @@ module.exports = createClass({
 
     if (!gridArea) {
       return null;
     }
 
     return gridArea.name;
   },
 
+  highlightCell({ target }) {
+    const {
+      grids,
+      onShowGridAreaHighlight,
+      onShowGridCellHighlight,
+    } = this.props;
+    const name = target.getAttribute("data-grid-area-name");
+    const id = target.getAttribute("data-grid-id");
+    const fragmentIndex = target.getAttribute("data-grid-fragment-index");
+    const color = target.getAttribute("stroke");
+    const rowNumber = target.getAttribute("data-grid-row");
+    const columnNumber = target.getAttribute("data-grid-column");
+
+    target.setAttribute("fill", color);
+
+    if (name) {
+      onShowGridAreaHighlight(grids[id].nodeFront, name, color);
+    }
+
+    if (fragmentIndex && rowNumber && columnNumber) {
+      onShowGridCellHighlight(grids[id].nodeFront, fragmentIndex,
+        rowNumber, columnNumber);
+    }
+  },
+
   /**
    * 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;
@@ -181,39 +213,19 @@ module.exports = createClass({
     const color = target.getAttribute("stroke");
 
     target.setAttribute("fill", "none");
 
     onShowGridAreaHighlight(grids[id].nodeFront, null, color);
     onShowGridCellHighlight(grids[id].nodeFront);
   },
 
-  onMouseOverCell({ target }) {
-    const {
-      grids,
-      onShowGridAreaHighlight,
-      onShowGridCellHighlight,
-    } = this.props;
-    const name = target.getAttribute("data-grid-area-name");
-    const id = target.getAttribute("data-grid-id");
-    const fragmentIndex = target.getAttribute("data-grid-fragment-index");
-    const color = target.getAttribute("stroke");
-    const rowNumber = target.getAttribute("data-grid-row");
-    const columnNumber = target.getAttribute("data-grid-column");
-
-    target.setAttribute("fill", color);
-
-    if (name) {
-      onShowGridAreaHighlight(grids[id].nodeFront, name, color);
-    }
-
-    if (fragmentIndex && rowNumber && columnNumber) {
-      onShowGridCellHighlight(grids[id].nodeFront, fragmentIndex,
-        rowNumber, columnNumber);
-    }
+  onMouseOverCell(event) {
+    event.persist();
+    this.highlightCell(event);
   },
 
   render() {
     return this.state.selectedGrids.length ?
       dom.svg(
         {
           className: "grid-outline",
           width: "100%",