summaryrefslogtreecommitdiffstats
path: root/devtools/shared/gcli/commands/measure.js
blob: 7f6233a95c9fe9605574eed3b24c49aa0ff169c7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/* 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/. */
 /* globals getOuterId, getBrowserForTab */

"use strict";

const EventEmitter = require("devtools/shared/event-emitter");
const eventEmitter = new EventEmitter();
const events = require("sdk/event/core");

loader.lazyRequireGetter(this, "getOuterId", "sdk/window/utils", true);
loader.lazyRequireGetter(this, "getBrowserForTab", "sdk/tabs/utils", true);

const l10n = require("gcli/l10n");
require("devtools/server/actors/inspector");
const { MeasuringToolHighlighter, HighlighterEnvironment } =
  require("devtools/server/actors/highlighters");

const highlighters = new WeakMap();
const visibleHighlighters = new Set();

const isCheckedFor = (tab) =>
  tab ? visibleHighlighters.has(getBrowserForTab(tab).outerWindowID) : false;

exports.items = [
  // The client measure command is used to maintain the toolbar button state
  // only and redirects to the server command to actually toggle the measuring
  // tool (see `measure_server` below).
  {
    name: "measure",
    runAt: "client",
    description: l10n.lookup("measureDesc"),
    manual: l10n.lookup("measureManual"),
    buttonId: "command-button-measure",
    buttonClass: "command-button command-button-invertable",
    tooltipText: l10n.lookup("measureTooltip"),
    state: {
      isChecked: ({_tab}) => isCheckedFor(_tab),
      onChange: (target, handler) => eventEmitter.on("changed", handler),
      offChange: (target, handler) => eventEmitter.off("changed", handler)
    },
    exec: function*(args, context) {
      let { target } = context.environment;

      // Pipe the call to the server command.
      let response = yield context.updateExec("measure_server");
      let { visible, id } = response.data;

      if (visible) {
        visibleHighlighters.add(id);
      } else {
        visibleHighlighters.delete(id);
      }

      eventEmitter.emit("changed", { target });

      // Toggle off the button when the page navigates because the measuring
      // tool is removed automatically by the MeasuringToolHighlighter on the
      // server then.
      let onNavigate = () => {
        visibleHighlighters.delete(id);
        eventEmitter.emit("changed", { target });
      };
      target.off("will-navigate", onNavigate);
      target.once("will-navigate", onNavigate);
    }
  },
  // The server measure command is hidden by default, it's just used by the
  // client command.
  {
    name: "measure_server",
    runAt: "server",
    hidden: true,
    returnType: "highlighterVisibility",
    exec: function(args, context) {
      let env = context.environment;
      let { document } = env;
      let id = getOuterId(env.window);

      // Calling the command again after the measuring tool has been shown once,
      // hides it.
      if (highlighters.has(document)) {
        let { highlighter } = highlighters.get(document);
        highlighter.destroy();
        return {visible: false, id};
      }

      // Otherwise, display the measuring tool.
      let environment = new HighlighterEnvironment();
      environment.initFromWindow(env.window);
      let highlighter = new MeasuringToolHighlighter(environment);

      // Store the instance of the measuring tool highlighter for this document
      // so we can hide it later.
      highlighters.set(document, { highlighter, environment });

      // Listen to the highlighter's destroy event which may happen if the
      // window is refreshed or closed with the measuring tool shown.
      events.once(highlighter, "destroy", () => {
        if (highlighters.has(document)) {
          let { environment } = highlighters.get(document);
          environment.destroy();
          highlighters.delete(document);
        }
      });

      highlighter.show();
      return {visible: true, id};
    }
  }
];