devtools/shared/fronts/highlighters.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 const {
   8   FrontClassWithSpec,
   9   registerFront,
  10 } = require("devtools/shared/protocol");
  11 const flags = require("devtools/shared/flags");
  12 const {
  13   customHighlighterSpec,
  14   highlighterSpec,
  15 } = require("devtools/shared/specs/highlighters");
  16
  17 class HighlighterFront extends FrontClassWithSpec(highlighterSpec) {
  18   constructor(client, targetFront, parentFront) {
  19     super(client, targetFront, parentFront);
  20
  21     this.isNodeFrontHighlighted = false;
  22     this.isPicking = false;
  23   }
  24
  25   // Update the object given a form representation off the wire.
  26   form(json) {
  27     this.actorID = json.actor;
  28     // FF42+ HighlighterActors starts exposing custom form, with traits object
  29     this.traits = json.traits || {};
  30   }
  31
  32   /**
  33    * Start the element picker on the debuggee target.
  34    * @param {Boolean} doFocus - Optionally focus the content area once the picker is
  35    *                            activated.
  36    * @return promise that resolves when the picker has started or immediately
  37    * if it is already started
  38    */
  39   pick(doFocus) {
  40     if (this.isPicking) {
  41       return null;
  42     }
  43     this.isPicking = true;
  44     if (doFocus && super.pickAndFocus) {
  45       return super.pickAndFocus();
  46     }
  47     return super.pick();
  48   }
  49
  50   /**
  51    * Stop the element picker.
  52    * @return promise that resolves when the picker has stopped or immediately
  53    * if it is already stopped
  54    */
  55   cancelPick() {
  56     if (!this.isPicking) {
  57       return Promise.resolve();
  58     }
  59     this.isPicking = false;
  60     return super.cancelPick();
  61   }
  62
  63   /**
  64    * Show the box model highlighter on a node in the content page.
  65    * The node needs to be a NodeFront, as defined by the inspector actor
  66    * @see devtools/server/actors/inspector/inspector.js
  67    * @param {NodeFront} nodeFront The node to highlight
  68    * @param {Object} options
  69    * @return A promise that resolves when the node has been highlighted
  70    */
  71   async highlight(nodeFront, options = {}) {
  72     if (!nodeFront) {
  73       return;
  74     }
  75
  76     this.isNodeFrontHighlighted = true;
  77     await this.showBoxModel(nodeFront, options);
  78     this.emit("node-highlight", nodeFront);
  79   }
  80
  81   /**
  82    * Hide the highlighter.
  83    * @param {Boolean} forceHide Only really matters in test mode (when
  84    * flags.testing is true). In test mode, hovering over several nodes
  85    * in the markup view doesn't hide/show the highlighter to ease testing. The
  86    * highlighter stays visible at all times, except when the mouse leaves the
  87    * markup view, which is when this param is passed to true
  88    * @return a promise that resolves when the highlighter is hidden
  89    */
  90   async unhighlight(forceHide = false) {
  91     forceHide = forceHide || !flags.testing;
  92
  93     if (this.isNodeFrontHighlighted && forceHide) {
  94       this.isNodeFrontHighlighted = false;
  95       await this.hideBoxModel();
  96     }
  97
  98     this.emit("node-unhighlight");
  99   }
 100 }
 101
 102 exports.HighlighterFront = HighlighterFront;
 103 registerFront(HighlighterFront);
 104
 105 class CustomHighlighterFront extends FrontClassWithSpec(customHighlighterSpec) {
 106   constructor(client, targetFront, parentFront) {
 107     super(client, targetFront, parentFront);
 108
 109     this._isShown = false;
 110   }
 111
 112   show(...args) {
 113     this._isShown = true;
 114     return super.show(...args);
 115   }
 116
 117   hide() {
 118     this._isShown = false;
 119     return super.hide();
 120   }
 121
 122   isShown() {
 123     return this._isShown;
 124   }
 125 }
 126
 127 exports.CustomHighlighterFront = CustomHighlighterFront;
 128 registerFront(CustomHighlighterFront);