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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
/* 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 { Cu } = require("chrome");
const EventEmitter = require("devtools/shared/event-emitter");
const { isNodeValid } = require("./utils/markup");
const { getAdjustedQuads } = require("devtools/shared/layout/utils");
// Note that the order of items in this array is important because it is used
// for drawing the BoxModelHighlighter's path elements correctly.
const BOX_MODEL_REGIONS = ["margin", "border", "padding", "content"];
/**
* Base class for auto-refresh-on-change highlighters. Sub classes will have a
* chance to update whenever the current node's geometry changes.
*
* Sub classes must implement the following methods:
* _show: called when the highlighter should be shown,
* _hide: called when the highlighter should be hidden,
* _update: called while the highlighter is shown and the geometry of the
* current node changes.
*
* Sub classes will have access to the following properties:
* - this.currentNode: the node to be shown
* - this.currentQuads: all of the node's box model region quads
* - this.win: the current window
*
* Emits the following events:
* - shown
* - hidden
* - updated
*/
function AutoRefreshHighlighter(highlighterEnv) {
EventEmitter.decorate(this);
this.highlighterEnv = highlighterEnv;
this.currentNode = null;
this.currentQuads = {};
this.update = this.update.bind(this);
}
AutoRefreshHighlighter.prototype = {
/**
* Window corresponding to the current highlighterEnv
*/
get win() {
if (!this.highlighterEnv) {
return null;
}
return this.highlighterEnv.window;
},
/**
* Show the highlighter on a given node
* @param {DOMNode} node
* @param {Object} options
* Object used for passing options
*/
show: function (node, options = {}) {
let isSameNode = node === this.currentNode;
let isSameOptions = this._isSameOptions(options);
if (!this._isNodeValid(node) || (isSameNode && isSameOptions)) {
return false;
}
this.options = options;
this._stopRefreshLoop();
this.currentNode = node;
this._updateAdjustedQuads();
this._startRefreshLoop();
let shown = this._show();
if (shown) {
this.emit("shown");
}
return shown;
},
/**
* Hide the highlighter
*/
hide: function () {
if (!this._isNodeValid(this.currentNode)) {
return;
}
this._hide();
this._stopRefreshLoop();
this.currentNode = null;
this.currentQuads = {};
this.options = null;
this.emit("hidden");
},
/**
* Whether the current node is valid for this highlighter type.
* This is implemented by default to check if the node is an element node. Highlighter
* sub-classes should override this method if they want to highlight other node types.
* @param {DOMNode} node
* @return {Boolean}
*/
_isNodeValid: function (node) {
return isNodeValid(node);
},
/**
* Are the provided options the same as the currently stored options?
* Returns false if there are no options stored currently.
*/
_isSameOptions: function (options) {
if (!this.options) {
return false;
}
let keys = Object.keys(options);
if (keys.length !== Object.keys(this.options).length) {
return false;
}
for (let key of keys) {
if (this.options[key] !== options[key]) {
return false;
}
}
return true;
},
/**
* Update the stored box quads by reading the current node's box quads.
*/
_updateAdjustedQuads: function () {
for (let region of BOX_MODEL_REGIONS) {
this.currentQuads[region] = getAdjustedQuads(
this.win,
this.currentNode, region);
}
},
/**
* Update the knowledge we have of the current node's boxquads and return true
* if any of the points x/y or bounds have change since.
* @return {Boolean}
*/
_hasMoved: function () {
let oldQuads = JSON.stringify(this.currentQuads);
this._updateAdjustedQuads();
let newQuads = JSON.stringify(this.currentQuads);
return oldQuads !== newQuads;
},
/**
* Update the highlighter if the node has moved since the last update.
*/
update: function () {
if (!this._isNodeValid(this.currentNode) || !this._hasMoved()) {
return;
}
this._update();
this.emit("updated");
},
_show: function () {
// To be implemented by sub classes
// When called, sub classes should actually show the highlighter for
// this.currentNode, potentially using options in this.options
throw new Error("Custom highlighter class had to implement _show method");
},
_update: function () {
// To be implemented by sub classes
// When called, sub classes should update the highlighter shown for
// this.currentNode
// This is called as a result of a page scroll, zoom or repaint
throw new Error("Custom highlighter class had to implement _update method");
},
_hide: function () {
// To be implemented by sub classes
// When called, sub classes should actually hide the highlighter
throw new Error("Custom highlighter class had to implement _hide method");
},
_startRefreshLoop: function () {
let win = this.currentNode.ownerDocument.defaultView;
this.rafID = win.requestAnimationFrame(this._startRefreshLoop.bind(this));
this.rafWin = win;
this.update();
},
_stopRefreshLoop: function () {
if (this.rafID && !Cu.isDeadWrapper(this.rafWin)) {
this.rafWin.cancelAnimationFrame(this.rafID);
}
this.rafID = this.rafWin = null;
},
destroy: function () {
this.hide();
this.highlighterEnv = null;
this.currentNode = null;
}
};
exports.AutoRefreshHighlighter = AutoRefreshHighlighter;
|
