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
|
/* 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 EventEmitter = require("resource://devtools/shared/event-emitter.js");
const WalkerEventListener = require("resource://devtools/client/inspector/shared/walker-event-listener.js");
/**
* The InspectorStyleChangeTracker simply emits an event when it detects any changes in
* the page that may cause the current inspector selection to have different style applied
* to it.
* It currently tracks:
* - markup mutations, because they may cause different CSS rules to apply to the current
* node.
* - window resize, because they may cause media query changes and therefore also
* different CSS rules to apply to the current node.
*/
class InspectorStyleChangeTracker {
constructor(inspector) {
this.selection = inspector.selection;
this.onMutations = this.onMutations.bind(this);
this.onResized = this.onResized.bind(this);
this.walkerEventListener = new WalkerEventListener(inspector, {
mutations: this.onMutations,
resize: this.onResized,
});
EventEmitter.decorate(this);
}
destroy() {
this.walkerEventListener.destroy();
this.walkerEventListener = null;
this.selection = null;
}
/**
* When markup mutations occur, if an attribute of the selected node, one of its
* ancestors or siblings changes, we need to consider this as potentially causing a
* style change for the current node.
*/
onMutations(mutations) {
const canMutationImpactCurrentStyles = ({
type,
target: mutationTarget,
}) => {
// Only attributes mutations are interesting here.
if (type !== "attributes") {
return false;
}
// Is the mutation on the current selected node?
const currentNode = this.selection.nodeFront;
if (mutationTarget === currentNode) {
return true;
}
// Is the mutation on one of the current selected node's siblings?
// We can't know the order of nodes on the client-side without calling
// walker.children, so don't attempt to check the previous or next element siblings.
// It's good enough to know that one sibling changed.
let parent = currentNode.parentNode();
const siblings = parent.treeChildren();
if (siblings.includes(mutationTarget)) {
return true;
}
// Is the mutation on one of the current selected node's parents?
while (parent) {
if (mutationTarget === parent) {
return true;
}
parent = parent.parentNode();
}
return false;
};
for (const mutation of mutations) {
if (canMutationImpactCurrentStyles(mutation)) {
this.emit("style-changed");
break;
}
}
}
/**
* When the window gets resized, this may cause media-queries to match, and we therefore
* need to consider this as a style change for the current node.
*/
onResized() {
this.emit("style-changed");
}
}
module.exports = InspectorStyleChangeTracker;
|
