Bug 1348256 - Throttle the grid outline mouseover. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 23 Mar 2017 16:45:01 -0400
changeset 349189 0c88e3aa3e3a29c17845b84d9b9e632867f15542
parent 349188 7145d2ae3fab42d776cad260afdb5ec6e3e23f9b
child 349190 5d8420156bc280ee05562d6bcf9093ffa2360b0a
push id88392
push usergabriel.luong@gmail.com
push dateThu, 23 Mar 2017 20:45:26 +0000
treeherdermozilla-inbound@0c88e3aa3e3a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1348256
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1348256 - Throttle the grid outline mouseover. r=pbro
devtools/client/inspector/grids/components/GridOutline.js
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -1,19 +1,23 @@
 /* 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");
 
+// The delay prior to executing the grid cell highlighting.
+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 +34,23 @@ module.exports = createClass({
   mixins: [ addons.PureRenderMixin ],
 
   getInitialState() {
     return {
       selectedGrids: [],
     };
   },
 
+  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 }) {
     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 +72,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 +217,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%",