--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -1,25 +1,24 @@
 /* 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 COLUMNS = "cols";
 const ROWS = "rows";
 
 // The delay prior to executing the grid cell highlighting.
-const GRID_CELL_MOUSEOVER_TIMEOUT = 150;
+const GRID_HIGHLIGHTING_DEBOUNCE = 50;
 
 // Move SVG grid to the right 100 units, so that it is not flushed against the edge of
 // layout border
 const TRANSLATE_X = 0;
 const TRANSLATE_Y = 0;
 
 const GRID_CELL_SCALE_FACTOR = 50;
 
@@ -42,23 +41,16 @@ module.exports = createClass({
   getInitialState() {
     return {
       selectedGrid: null,
       height: 0,
       width: 0,
     };
   },
 
-  componentWillMount() {
-    // Throttle the grid highlighting of grid cells. It makes the UX smoother by not
-    // lagging the grid cell highlighting if a lot of grid cells are mouseover in a
-    // quick succession.
-    this.highlightCell = throttle(this.highlightCell, GRID_CELL_MOUSEOVER_TIMEOUT);
-  },
-
   componentWillReceiveProps({ grids }) {
     let selectedGrid = grids.find(grid => grid.highlighted);
 
     // Store the height of the grid container in the component state to prevent overflow
     // issues. We want to store the width of the grid container as well so that the
     // viewbox is only the calculated width of the grid outline.
     let { width, height } = selectedGrid
                             ? this.getTotalWidthAndHeight(selectedGrid)
@@ -130,17 +122,31 @@ module.exports = createClass({
       return VIEWPORT_MAX_HEIGHT;
     } else if (height <= VIEWPORT_MIN_HEIGHT) {
       return VIEWPORT_MIN_HEIGHT;
     }
 
     return height;
   },
 
-  highlightCell({ target }) {
+  highlightCell(e) {
+    // Debounce the highlighting of cells.
+    // This way we don't end up sending many requests to the server for highlighting when
+    // cells get hovered in a rapid succession We only send a request if the user settles
+    // on a cell for some time.
+    if (this.highlightTimeout) {
+      clearTimeout(this.highlightTimeout);
+    }
+    this.highlightTimeout = setTimeout(() => {
+      this.doHighlightCell(e);
+      this.highlightTimeout = null;
+    }, GRID_HIGHLIGHTING_DEBOUNCE);
+  },
+
+  doHighlightCell({ target }) {
     const {
       grids,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
     } = this.props;
     const name = target.dataset.gridAreaName;
     const id = target.dataset.gridId;
     const fragmentIndex = target.dataset.gridFragmentIndex;