Skip to content
This repository was archived by the owner on Jul 23, 2024. It is now read-only.

Commit 2abfa38

Browse files
dadaadadaa
authored
Merge pull request #20 from firefox-devtools/mdn-link
MDN link
2 parents 456b303 + 63142d7 commit 2abfa38

File tree

12 files changed

+162
-14
lines changed

12 files changed

+162
-14
lines changed

‎extension/experiments/inspectedNode/api-client.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,11 @@
6868
};
6969

7070
port.onMessage.addListener(listener);
71-
port.postMessage({ method, timestamp });
71+
port.postMessage({
72+
namespace: "browser.experiments.inspectedNode",
73+
method,
74+
timestamp,
75+
});
7276
});
7377
}
7478
};

‎extension/experiments/inspectedNode/api-server.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ browser.runtime.onConnect.addListener(port => {
1414
port.postMessage({ method: "onChange" });
1515
}
1616

17-
const onMessage = async ({ method, timestamp }) => {
17+
const onMessage = async ({ namespace, method, timestamp }) => {
18+
if (namespace !== "browser.experiments.inspectedNode") {
19+
return;
20+
}
21+
1822
switch (method) {
1923
case "onChange": {
2024
browser.experiments.inspectedNode.onChange.addListener(onChange, clientId);

‎extension/lib/tests/css-property.test.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ test("a non supported property", () => {
5555
const expectedIssue = {
5656
type: WebCompat.ISSUE_TYPE.CSS_PROPERTY,
5757
property: "grid-column",
58+
url: "https://developer.mozilla.org/docs/Web/CSS/grid-column",
5859
unsupportedBrowsers: [FIREFOX_1],
5960
};
6061
assertIssue(issues[0], expectedIssue);
@@ -84,6 +85,7 @@ test("a deprecated property", () => {
8485
const expectedIssue = {
8586
type: WebCompat.ISSUE_TYPE.CSS_PROPERTY,
8687
property: "clip",
88+
url: "https://developer.mozilla.org/docs/Web/CSS/clip",
8789
deprecated: true,
8890
unsupportedBrowsers: [],
8991
};
@@ -103,6 +105,7 @@ test("a experimental property", () => {
103105
const expectedIssue = {
104106
type: WebCompat.ISSUE_TYPE.CSS_PROPERTY,
105107
property: "border-block-color",
108+
url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
106109
experimental: true,
107110
unsupportedBrowsers: [],
108111
};
@@ -122,6 +125,7 @@ test("a property having some issues", () => {
122125
const expectedIssue = {
123126
type: WebCompat.ISSUE_TYPE.CSS_PROPERTY,
124127
property: "font-variant-alternates",
128+
url: "https://developer.mozilla.org/docs/Web/CSS/font-variant-alternates",
125129
deprecated: true,
126130
experimental: true,
127131
unsupportedBrowsers: [FIREFOX_1],
@@ -144,6 +148,7 @@ test("a aliased property which does not support all", () => {
144148
type: WebCompat.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
145149
property: "user-select",
146150
aliases: ["-moz-user-select"],
151+
url: "https://developer.mozilla.org/docs/Web/CSS/user-select",
147152
experimental: true,
148153
unsupportedBrowsers: [SAFARI_13],
149154
};
@@ -168,6 +173,7 @@ test("aliased properties which support all", () => {
168173
type: WebCompat.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
169174
property: "user-select",
170175
aliases: ["-moz-user-select", "-webkit-user-select"],
176+
url: "https://developer.mozilla.org/docs/Web/CSS/user-select",
171177
experimental: true,
172178
unsupportedBrowsers: [],
173179
};
@@ -177,6 +183,7 @@ test("aliased properties which support all", () => {
177183
function assertIssue(actualIssue, expectedIssue) {
178184
expect(actualIssue.type).toBe(expectedIssue.type);
179185
expect(actualIssue.property).toBe(expectedIssue.property);
186+
expect(actualIssue.url).toBe(expectedIssue.url);
180187
expect(!!actualIssue.deprecated).toBe(!!expectedIssue.deprecated);
181188
expect(!!actualIssue.experimental).toBe(!!expectedIssue.experimental);
182189
expect(!!actualIssue.unsupportedBrowsers).toBe(!!expectedIssue.unsupportedBrowsers);

‎extension/lib/tests/css-value.test.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ test("a non supported css value", () => {
4747
type: WebCompat.ISSUE_TYPE.CSS_VALUE,
4848
property: "display",
4949
value: "inline-table",
50+
url: "https://developer.mozilla.org/docs/Web/CSS/display",
5051
unsupportedBrowsers: [FIREFOX_1],
5152
};
5253
assertIssue(issues[0], expectedIssue);
@@ -68,6 +69,7 @@ test("an experimental css value", () => {
6869
experimental: true,
6970
property: "display",
7071
value: "flow-root",
72+
url: "https://developer.mozilla.org/docs/Web/CSS/display",
7173
unsupportedBrowsers: [],
7274
};
7375
assertIssue(issues[0], expectedIssue);
@@ -89,6 +91,7 @@ test("an deprecated css value", () => {
8991
deprecated: true,
9092
property: "display",
9193
value: "subgrid",
94+
url: "https://developer.mozilla.org/docs/Web/CSS/display",
9295
unsupportedBrowsers: [FIREFOX_69],
9396
};
9497
assertIssue(issues[0], expectedIssue);
@@ -109,6 +112,7 @@ test("mapped css types", () => {
109112
type: WebCompat.ISSUE_TYPE.CSS_VALUE,
110113
property: "padding",
111114
value: "1rem",
115+
url: "https://developer.mozilla.org/docs/Web/CSS/length",
112116
unsupportedBrowsers: [FIREFOX_1],
113117
};
114118
assertIssue(issues[0], expectedIssue);
@@ -142,13 +146,15 @@ test("mixed type in shorthand property", () => {
142146
type: WebCompat.ISSUE_TYPE.CSS_VALUE,
143147
property: "padding",
144148
value: "1rem",
149+
url: "https://developer.mozilla.org/docs/Web/CSS/length",
145150
unsupportedBrowsers: [FIREFOX_1],
146151
},
147152
{
148153
type: WebCompat.ISSUE_TYPE.CSS_VALUE,
149154
experimental: true,
150155
property: "padding",
151156
value: "1mozmm",
157+
url: "https://developer.mozilla.org/docs/Web/CSS/length",
152158
unsupportedBrowsers: [FIREFOX_1],
153159
},
154160
];
@@ -181,6 +187,7 @@ test("aliases does not support all browsers", () => {
181187
property: "background-image",
182188
value: "linear-gradient",
183189
aliases: ["linear-gradient", "-moz-linear-gradient"],
190+
url: "https://developer.mozilla.org/docs/Web/CSS/linear-gradient",
184191
unsupportedBrowsers: [FIREFOX_1]
185192
};
186193
assertIssue(issues[0], expectedIssue);
@@ -208,6 +215,7 @@ function assertIssue(actualIssue, expectedIssue) {
208215
expect(actualIssue.property).toBe(expectedIssue.property);
209216
expect(actualIssue.value).toBe(expectedIssue.value);
210217
expect(actualIssue.issueTerm).toBe(expectedIssue.issueTerm);
218+
expect(actualIssue.url).toBe(expectedIssue.url);
211219
expect(!!actualIssue.deprecated).toBe(!!expectedIssue.deprecated);
212220
expect(!!actualIssue.experimental).toBe(!!expectedIssue.experimental);
213221
expect(!!actualIssue.unsupportedBrowsers).toBe(!!expectedIssue.unsupportedBrowsers);

‎extension/lib/tests/html-attribute.test.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ const FIREFOX_1 = {
1414
version: "1",
1515
};
1616

17+
const EDGE_18 = {
18+
id: "edge",
19+
version: "18",
20+
};
21+
1722
test("a supported global attribute", () => {
1823
const elementName = "body";
1924
const attributes = [{ name: "id", value: "test-id" }];
@@ -28,6 +33,25 @@ test("a supported global attribute but different element", () => {
2833
expect(issues.length).toBe(0);
2934
});
3035

36+
test("a non supported global attribute", () => {
37+
const elementName = "body";
38+
const attributeName = "is";
39+
const attributeValue = "test";
40+
const attributes = [{ name: attributeName, value: attributeValue }];
41+
const issues = webcompat.getHTMLElementIssues(elementName, attributes, [EDGE_18]);
42+
expect(issues.length).toBe(1);
43+
44+
const expectedIssue = {
45+
type: WebCompat.ISSUE_TYPE.HTML_ATTRIBUTE,
46+
element: elementName,
47+
attribute: attributeName,
48+
value: attributeValue,
49+
url: "https://developer.mozilla.org/docs/Web/HTML/Global_attributes/is",
50+
unsupportedBrowsers: [EDGE_18],
51+
};
52+
assertIssue(issues[0], expectedIssue);
53+
});
54+
3155
test("a non supported html attribute", () => {
3256
const elementName = "a";
3357
const attributeName = "download";
@@ -42,6 +66,7 @@ test("a non supported html attribute", () => {
4266
element: elementName,
4367
attribute: attributeName,
4468
value: attributeValue,
69+
url: "https://developer.mozilla.org/docs/Web/HTML/Element/a",
4570
unsupportedBrowsers: [FIREFOX_1],
4671
};
4772
assertIssue(issues[0], expectedIssue);
@@ -58,6 +83,7 @@ test("an experimental html attribute", () => {
5883
const expectedElementIssue = {
5984
type: WebCompat.ISSUE_TYPE.HTML_ELEMENT,
6085
element: elementName,
86+
url: "https://developer.mozilla.org/docs/Web/HTML/Element/menu",
6187
experimental: true,
6288
unsupportedBrowsers: [],
6389
};
@@ -68,6 +94,7 @@ test("an experimental html attribute", () => {
6894
element: elementName,
6995
attribute: attributeName,
7096
value: attributeValue,
97+
url: "https://developer.mozilla.org/docs/Web/HTML/Element/menu",
7198
experimental: true,
7299
unsupportedBrowsers: [],
73100
};
@@ -87,6 +114,7 @@ test("a deprecated html attribute", () => {
87114
element: elementName,
88115
attribute: attributeName,
89116
value: attributeValue,
117+
url: "https://developer.mozilla.org/docs/Web/HTML/Element/table",
90118
deprecated: true,
91119
unsupportedBrowsers: [],
92120
};
@@ -115,6 +143,7 @@ function assertIssue(actualIssue, expectedIssue) {
115143
expect(actualIssue.element).toBe(expectedIssue.element);
116144
expect(actualIssue.attribute).toBe(expectedIssue.attribute);
117145
expect(actualIssue.value).toBe(expectedIssue.value);
146+
expect(actualIssue.url).toBe(expectedIssue.url);
118147
expect(!!actualIssue.invalid).toBe(!!expectedIssue.invalid);
119148
expect(!!actualIssue.deprecated).toBe(!!expectedIssue.deprecated);
120149
expect(!!actualIssue.experimental).toBe(!!expectedIssue.experimental);

‎extension/lib/tests/html-element.test.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ test("a non supported html element", () => {
2828
const expectedIssue = {
2929
type: WebCompat.ISSUE_TYPE.HTML_ELEMENT,
3030
element: elementName,
31+
url: "https://developer.mozilla.org/docs/Web/HTML/Element/main",
3132
unsupportedBrowsers: [FIREFOX_1],
3233
};
3334
assertIssue(issues[0], expectedIssue);
@@ -41,6 +42,7 @@ test("an experimental html element", () => {
4142
const expectedIssue = {
4243
type: WebCompat.ISSUE_TYPE.HTML_ELEMENT,
4344
element: elementName,
45+
url: "https://developer.mozilla.org/docs/Web/HTML/Element/menu",
4446
experimental: true,
4547
unsupportedBrowsers: [],
4648
};
@@ -55,6 +57,7 @@ test("a deprecated html element", () => {
5557
const expectedIssue = {
5658
type: WebCompat.ISSUE_TYPE.HTML_ELEMENT,
5759
element: elementName,
60+
url: "https://developer.mozilla.org/docs/Web/HTML/Element/frame",
5861
deprecated: true,
5962
unsupportedBrowsers: [],
6063
};
@@ -70,6 +73,7 @@ test("an invalid html element", () => {
7073
function assertIssue(actualIssue, expectedIssue) {
7174
expect(actualIssue.type).toBe(expectedIssue.type);
7275
expect(actualIssue.element).toBe(expectedIssue.element);
76+
expect(actualIssue.url).toBe(expectedIssue.url);
7377
expect(!!actualIssue.deprecated).toBe(!!expectedIssue.deprecated);
7478
expect(!!actualIssue.experimental).toBe(!!expectedIssue.experimental);
7579
expect(!!actualIssue.unsupportedBrowsers).toBe(!!expectedIssue.unsupportedBrowsers);

‎extension/lib/webcompat.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,10 +335,12 @@ class WebCompat {
335335
: state === _SUPPORT_STATE.UNSUPPORTED;
336336
});
337337
const { deprecated, experimental } = this._getStatus(database, ...terms);
338+
const url = this._getMDNLink(database, ...terms);
338339

339340
return {
340341
database,
341342
terms,
343+
url,
342344
deprecated,
343345
experimental,
344346
unsupportedBrowsers,
@@ -425,6 +427,22 @@ class WebCompat {
425427
return summaries;
426428
}
427429

430+
_getMDNLink(compatNode, ...terms) {
431+
// In case of CSS value of particular CSS property such as `space-evenly` of
432+
// `align-content`, the link is not in the compat table of the CSS value.
433+
// Thus, we get the link while tracing the parents.
434+
for (; terms.length > 0; terms.pop()) {
435+
const compatTable = this._getCompatTable(compatNode, terms);
436+
const url = compatTable ? compatTable.mdn_url : null;
437+
438+
if (url) {
439+
return url;
440+
}
441+
}
442+
443+
return null;
444+
}
445+
428446
_getTermPath(database, ...terms) {
429447
const terminal = terms.pop();
430448
const compatNode = this._getCompatNode(database, terms);

‎extension/manifest.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
],
1414
"background": {
1515
"scripts": [
16-
"experiments/inspectedNode/api-server.js"
16+
"experiments/inspectedNode/api-server.js",
17+
"proxy/tabs/api-server.js"
1718
]
1819
},
1920
"devtools_page": "devtools.html",

‎extension/proxy/tabs/api-client.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
"use strict";
2+
3+
// We can not call any browser.tabs APIs in devtools page context.
4+
// Thus, introduce api-server / api-client that provides pseudo api to make the api
5+
// accessible even in devtools page context.
6+
//
7+
// This script should run on devtools page context.
8+
9+
(async function install() {
10+
if (browser.tabs) {
11+
return;
12+
}
13+
14+
const port = browser.runtime.connect();
15+
16+
browser.tabs = {
17+
async create(option) {
18+
port.postMessage({
19+
namespace: "browser.tabs",
20+
method: "create",
21+
option,
22+
});
23+
},
24+
};
25+
})();

‎extension/proxy/tabs/api-server.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
"use strict";
2+
3+
// We can not call any browser.tabs APIs in devtools page context.
4+
// Thus, introduce api-server / api-client that provides pseudo api to make the api
5+
// accessible even in devtools page context.
6+
//
7+
// This script should run on addon parent context (as background).
8+
9+
browser.runtime.onConnect.addListener(port => {
10+
const onMessage = async ({ namespace, method, option }) => {
11+
if (namespace !== "browser.tabs") {
12+
return;
13+
}
14+
15+
switch (method) {
16+
case "create": {
17+
browser.tabs.create(option);
18+
break;
19+
}
20+
}
21+
};
22+
port.onMessage.addListener(onMessage);
23+
24+
const onDisconnect = () => {
25+
port.onDisconnect.removeListener(onDisconnect);
26+
port.onMessage.removeListener(onMessage);
27+
};
28+
port.onDisconnect.addListener(onDisconnect);
29+
});

0 commit comments

Comments
 (0)