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
|
/* 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 {
FrontClassWithSpec,
registerFront,
} = require("resource://devtools/shared/protocol.js");
const {
cssPropertiesSpec,
} = require("resource://devtools/shared/specs/css-properties.js");
loader.lazyRequireGetter(
this,
"cssColors",
"resource://devtools/shared/css/color-db.js",
true
);
loader.lazyRequireGetter(
this,
"CSS_TYPES",
"resource://devtools/shared/css/constants.js",
true
);
loader.lazyRequireGetter(
this,
"isCssVariable",
"resource://devtools/shared/inspector/css-logic.js",
true
);
/**
* The CssProperties front provides a mechanism to have a one-time asynchronous
* load of a CSS properties database. This is then fed into the CssProperties
* interface that provides synchronous methods for finding out what CSS
* properties the current server supports.
*/
class CssPropertiesFront extends FrontClassWithSpec(cssPropertiesSpec) {
constructor(client, targetFront) {
super(client, targetFront);
// Attribute name from which to retrieve the actorID out of the target actor's form
this.formAttributeName = "cssPropertiesActor";
}
async initialize() {
const db = await super.getCSSDatabase();
this.cssProperties = new CssProperties(normalizeCssData(db));
}
destroy() {
this.cssProperties = null;
super.destroy();
}
}
/**
* Ask questions to a CSS database. This class does not care how the database
* gets loaded in, only the questions that you can ask to it.
* Prototype functions are bound to 'this' so they can be passed around as helper
* functions.
*
* @param {Object} db
* A database of CSS properties
* @param {Object} inheritedList
* The key is the property name, the value is whether or not
* that property is inherited.
*/
function CssProperties(db) {
this.properties = db.properties;
this.isKnown = this.isKnown.bind(this);
this.isInherited = this.isInherited.bind(this);
this.supportsType = this.supportsType.bind(this);
}
CssProperties.prototype = {
/**
* Checks to see if the property is known by the browser. This function has
* `this` already bound so that it can be passed around by reference.
*
* @param {String} property The property name to be checked.
* @return {Boolean}
*/
isKnown(property) {
// Custom Property Names (aka CSS Variables) are case-sensitive; do not lowercase.
property = property.startsWith("--") ? property : property.toLowerCase();
return !!this.properties[property] || isCssVariable(property);
},
/**
* Checks to see if the property is an inherited one.
*
* @param {String} property The property name to be checked.
* @return {Boolean}
*/
isInherited(property) {
return this.properties[property]?.isInherited;
},
/**
* Checks if the property supports the given CSS type.
*
* @param {String} property The property to be checked.
* @param {String} type One of the values from InspectorPropertyType.
* @return {Boolean}
*/
supportsType(property, type) {
const id = CSS_TYPES[type];
return (
this.properties[property] &&
(this.properties[property].supports.includes(type) ||
this.properties[property].supports.includes(id))
);
},
/**
* Gets the CSS values for a given property name.
*
* @param {String} property The property to use.
* @return {Array} An array of strings.
*/
getValues(property) {
return this.properties[property] ? this.properties[property].values : [];
},
/**
* Gets the CSS property names.
*
* @return {Array} An array of strings.
*/
getNames() {
return Object.keys(this.properties);
},
/**
* Return a list of subproperties for the given property. If |name|
* does not name a valid property, an empty array is returned. If
* the property is not a shorthand property, then array containing
* just the property itself is returned.
*
* @param {String} name The property to query
* @return {Array} An array of subproperty names.
*/
getSubproperties(name) {
// Custom Property Names (aka CSS Variables) are case-sensitive; do not lowercase.
name = name.startsWith("--") ? name : name.toLowerCase();
if (this.isKnown(name)) {
if (this.properties[name] && this.properties[name].subproperties) {
return this.properties[name].subproperties;
}
return [name];
}
return [];
},
};
/**
* Even if the target has the cssProperties actor, the returned data may not be in the
* same shape or have all of the data we need. This normalizes the data and fills in
* any missing information like color values.
*
* @return {Object} The normalized CSS database.
*/
function normalizeCssData(db) {
// If there is a `from` attributes, it means that it comes from RDP
// and it is not the client `generateCssProperties()` object passed by tests.
if (typeof db.from == "string") {
// This is where to put backward compat tweaks here to support old runtimes.
}
reattachCssColorValues(db);
return db;
}
/**
* Color values are omitted to save on space. Add them back here.
* @param {Object} The CSS database.
*/
function reattachCssColorValues(db) {
if (db.properties.color.values[0] === "COLOR") {
const colors = Object.keys(cssColors);
for (const name in db.properties) {
const property = db.properties[name];
// "values" can be undefined if {name} was not found in CSS_PROPERTIES_DB.
if (property.values && property.values[0] === "COLOR") {
property.values.shift();
property.values = property.values.concat(colors).sort();
}
}
}
}
module.exports = {
CssPropertiesFront,
CssProperties,
normalizeCssData,
};
registerFront(CssPropertiesFront);
|
