wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-05 15:28:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/tracking' into custom

Browse source
This commit is contained in:
roytam1 2025-08-14 08:55:16 +08:00
commit ae1f9364cd
38 changed files with 85 additions and 1993 deletions
Download patch file Download diff file Expand all files Collapse all files

8
devtools/client/shared/test/browser.ini
View file

@ -13,11 +13,6 @@ support-files =
helper_color_data.js
helper_html_tooltip.js
helper_inplace_editor.js
html-mdn-css-basic-testing.html
html-mdn-css-no-summary.html
html-mdn-css-no-summary-or-syntax.html
html-mdn-css-no-syntax.html
html-mdn-css-syntax-old-style.html
leakhunt.js
test-actor.js
test-actor-registry.js
@ -140,9 +135,6 @@ skip-if = e10s # Bug 1221911, bug 1222289, frequent e10s timeouts
skip-if = e10s # Layouthelpers test should not run in a content page.
[browser_layoutHelpers-getBoxQuads.js]
skip-if = e10s # Layouthelpers test should not run in a content page.
[browser_mdn-docs-01.js]
[browser_mdn-docs-02.js]
[browser_mdn-docs-03.js]
[browser_num-l10n.js]
[browser_options-view-01.js]
[browser_outputparser.js]

167
devtools/client/shared/test/browser_mdn-docs-01.js
View file

@ -1,167 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/**
* This file tests the MdnDocsWidget object, and specifically its
* loadCssDocs() function.
*
* The MdnDocsWidget is initialized with a document which has a specific
* structure. You then call loadCssDocs(), passing in a CSS property name.
* MdnDocsWidget then fetches docs for that property by making an XHR to
* a docs page, and loads the results into the document. While the XHR is
* still not resolved the document is put into an "initializing" state in
* which the devtools throbber is displayed.
*
* In this file we test:
* - the initial state of the document before the docs have loaded
* - the state of the document after the docs have loaded
*/
"use strict";
const {setBaseCssDocsUrl, MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
/**
* Test properties
*
* In the real tooltip, a CSS property name is used to look up an MDN page
* for that property.
* In the test code, the names defined here is used to look up a page
* served by the test server.
*/
const BASIC_TESTING_PROPERTY = "html-mdn-css-basic-testing.html";
const BASIC_EXPECTED_SUMMARY = "A summary of the property.";
const BASIC_EXPECTED_SYNTAX = [{type: "comment", text: "/* The part we want */"},
{type: "text", text: "\n"},
{type: "property-name", text: "this"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "is-the-part-we-want"},
{type: "text", text: ";"}];
const URI_PARAMS =
"?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
add_task(function* () {
setBaseCssDocsUrl(TEST_URI_ROOT);
yield addTab("about:blank");
let [host, win] = yield createHost("bottom", "data:text/html," +
"<div class='mdn-container'></div>");
let widget = new MdnDocsWidget(win.document.querySelector("div"));
yield testTheBasics(widget);
host.destroy();
gBrowser.removeCurrentTab();
});
/**
* Test all the basics
* - initial content, before docs have loaded, is as expected
* - throbber is set before docs have loaded
* - contents are as expected after docs have loaded
* - throbber is gone after docs have loaded
* - mdn link text is correct and onclick behavior is correct
*/
function* testTheBasics(widget) {
info("Test all the basic functionality in the widget");
info("Get the widget state before docs have loaded");
let promise = widget.loadCssDocs(BASIC_TESTING_PROPERTY);
info("Check initial contents before docs have loaded");
checkTooltipContents(widget.elements, {
propertyName: BASIC_TESTING_PROPERTY,
summary: "",
syntax: ""
});
// throbber is set
ok(widget.elements.info.classList.contains("devtools-throbber"),
"Throbber is set");
info("Now let the widget finish loading");
yield promise;
info("Check contents after docs have loaded");
checkTooltipContents(widget.elements, {
propertyName: BASIC_TESTING_PROPERTY,
summary: BASIC_EXPECTED_SUMMARY,
syntax: BASIC_EXPECTED_SYNTAX
});
// throbber is gone
ok(!widget.elements.info.classList.contains("devtools-throbber"),
"Throbber is not set");
info("Check that MDN link text is correct and onclick behavior is correct");
let mdnLink = widget.elements.linkToMdn;
let expectedHref = TEST_URI_ROOT + BASIC_TESTING_PROPERTY + URI_PARAMS;
is(mdnLink.href, expectedHref, "MDN link href is correct");
let uri = yield checkLinkClick(mdnLink);
is(uri, expectedHref, "New tab opened with the expected URI");
}
/**
* Clicking the "Visit MDN Page" in the tooltip panel
* should open a new browser tab with the page loaded.
*
* To test this we'll listen for a new tab opening, and
* when it does, add a listener to that new tab to tell
* us when it has loaded.
*
* Then we click the link.
*
* In the tab's load listener, we'll resolve the promise
* with the URI, which is expected to match the href
* in the orginal link.
*
* One complexity is that when you open a new tab,
* "about:blank" is first loaded into the tab before the
* actual page. So we ignore that first load event, and keep
* listening until "load" is triggered for a different URI.
*/
function checkLinkClick(link) {
function loadListener(tab) {
let browser = getBrowser().getBrowserForTab(tab);
let uri = browser.currentURI.spec;
info("New browser tab has loaded");
gBrowser.removeTab(tab);
info("Resolve promise with new tab URI");
deferred.resolve(uri);
}
function newTabListener(e) {
gBrowser.tabContainer.removeEventListener("TabOpen", newTabListener);
let tab = e.target;
BrowserTestUtils.browserLoaded(tab.linkedBrowser, false, url => url != "about:blank")
.then(url => loadListener(tab));
}
let deferred = defer();
info("Check that clicking the link opens a new tab with the correct URI");
gBrowser.tabContainer.addEventListener("TabOpen", newTabListener, false);
info("Click the link to MDN");
link.click();
return deferred.promise;
}
/**
* Utility function to check content of the tooltip.
*/
function checkTooltipContents(doc, expected) {
is(doc.heading.textContent,
expected.propertyName,
"Property name is correct");
is(doc.summary.textContent,
expected.summary,
"Summary is correct");
checkCssSyntaxHighlighterOutput(expected.syntax, doc.syntax);
}

127
devtools/client/shared/test/browser_mdn-docs-02.js
View file

@ -1,127 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/**
* This file tests the MdnDocsWidget object, and specifically its
* loadCssDocs() function.
*
* The MdnDocsWidget is initialized with a document which has a specific
* structure. You then call loadCssDocs(), passing in a CSS property name.
* MdnDocsWidget then fetches docs for that property by making an XHR to
* a docs page, and loads the results into the document.
*
* In this file we test that the tooltip can properly handle the different
* structures that the docs page might have, including variant structures and
* error conditions like parts of the document being missing.
*
* We also test that the tooltip properly handles the case where the page
* doesn't exist at all.
*/
"use strict";
const {
setBaseCssDocsUrl,
MdnDocsWidget
} = require("devtools/client/shared/widgets/MdnDocsWidget");
const BASIC_EXPECTED_SUMMARY = "A summary of the property.";
const BASIC_EXPECTED_SYNTAX = [{type: "comment", text: "/* The part we want */"},
{type: "text", text: "\n"},
{type: "property-name", text: "this"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "is-the-part-we-want"},
{type: "text", text: ";"}];
const ERROR_MESSAGE = "Could not load docs page.";
/**
* Test properties
*
* In the real tooltip, a CSS property name is used to look up an MDN page
* for that property.
* In the test code, the names defined here are used to look up a page
* served by the test server. We have different properties to test
* different ways that the docs pages might be constructed, including errors
* like pages that don't include docs where we expect.
*/
const SYNTAX_OLD_STYLE = "html-mdn-css-syntax-old-style.html";
const NO_SUMMARY = "html-mdn-css-no-summary.html";
const NO_SYNTAX = "html-mdn-css-no-syntax.html";
const NO_SUMMARY_OR_SYNTAX = "html-mdn-css-no-summary-or-syntax.html";
const TEST_DATA = [{
desc: "Test a property for which we don't have a page",
docsPageUrl: "i-dont-exist.html",
expectedContents: {
propertyName: "i-dont-exist.html",
summary: ERROR_MESSAGE,
syntax: []
}
}, {
desc: "Test a property whose syntax section is specified using an old-style page",
docsPageUrl: SYNTAX_OLD_STYLE,
expectedContents: {
propertyName: SYNTAX_OLD_STYLE,
summary: BASIC_EXPECTED_SUMMARY,
syntax: BASIC_EXPECTED_SYNTAX
}
}, {
desc: "Test a property whose page doesn't have a summary",
docsPageUrl: NO_SUMMARY,
expectedContents: {
propertyName: NO_SUMMARY,
summary: "",
syntax: BASIC_EXPECTED_SYNTAX
}
}, {
desc: "Test a property whose page doesn't have a syntax",
docsPageUrl: NO_SYNTAX,
expectedContents: {
propertyName: NO_SYNTAX,
summary: BASIC_EXPECTED_SUMMARY,
syntax: []
}
}, {
desc: "Test a property whose page doesn't have a summary or a syntax",
docsPageUrl: NO_SUMMARY_OR_SYNTAX,
expectedContents: {
propertyName: NO_SUMMARY_OR_SYNTAX,
summary: ERROR_MESSAGE,
syntax: []
}
}
];
add_task(function* () {
setBaseCssDocsUrl(TEST_URI_ROOT);
yield addTab("about:blank");
let [host, win] = yield createHost("bottom", "data:text/html," +
"<div class='mdn-container'></div>");
let widget = new MdnDocsWidget(win.document.querySelector("div"));
for (let {desc, docsPageUrl, expectedContents} of TEST_DATA) {
info(desc);
yield widget.loadCssDocs(docsPageUrl);
checkTooltipContents(widget.elements, expectedContents);
}
host.destroy();
gBrowser.removeCurrentTab();
});
/*
* Utility function to check content of the tooltip.
*/
function checkTooltipContents(doc, expected) {
is(doc.heading.textContent,
expected.propertyName,
"Property name is correct");
is(doc.summary.textContent,
expected.summary,
"Summary is correct");
checkCssSyntaxHighlighterOutput(expected.syntax, doc.syntax);
}

276
devtools/client/shared/test/browser_mdn-docs-03.js
View file

@ -1,276 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/**
* This file tests the CSS syntax highlighter in the MdnDocsWidget object.
*
* The CSS syntax highlighter accepts:
* - a string containing CSS
* - a DOM node
*
* It parses the string and creates a collection of DOM nodes for different
* CSS token types. These DOM nodes have CSS classes applied to them,
* to apply the right style for that particular token type. The DOM nodes
* are returned as children of the node that was passed to the function.
*
* This test code defines a number of different strings containing valid and
* invalid CSS in various forms. For each string it defines the DOM nodes
* that it expects to get from the syntax highlighter.
*
* It then calls the syntax highlighter, and checks that the resulting
* collection of DOM nodes is what we expected.
*/
"use strict";
const {appendSyntaxHighlightedCSS} = require("devtools/client/shared/widgets/MdnDocsWidget");
/**
* An array containing the actual test cases.
*
* The test code tests every case in the array. If you want to add more
* test cases, just add more items to the array.
*
* Each test case consists of:
* - description: string describing the salient features of this test case
* - example: the string to test
* - expected: an array of objects, one for each DOM node we expect, that
* captures the information about the node that we expect to test.
*/
const TEST_DATA = [{
description: "Valid syntax, string value.",
example: "name: stringValue;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, numeric value.",
example: "name: 1;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "1"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, url value.",
example: "name: url(./name);",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "url(./name)"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, space before ':'.",
example: "name : stringValue;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: " "},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, space before ';'.",
example: "name: stringValue ;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: " "},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, trailing space.",
example: "name: stringValue; ",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"},
{type: "text", text: " "}
]}, {
description: "Valid syntax, leading space.",
example: " name: stringValue;",
expected: [{type: "text", text: " "},
{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, two spaces.",
example: "name: stringValue;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, no spaces.",
example: "name:stringValue;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, two-part value.",
example: "name: stringValue 1;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: " "},
{type: "property-value", text: "1"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, two declarations.",
example: "name: stringValue;\n" +
"name: 1;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"},
{type: "text", text: "\n"},
{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "1"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, commented, numeric value.",
example: "/* comment */\n" +
"name: 1;",
expected: [{type: "comment", text: "/* comment */"},
{type: "text", text: "\n"},
{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "1"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, multiline commented, string value.",
example: "/* multiline \n" +
"comment */\n" +
"name: stringValue;",
expected: [{type: "comment", text: "/* multiline \ncomment */"},
{type: "text", text: "\n"},
{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, commented, two declarations.",
example: "/* comment 1 */\n" +
"name: 1;\n" +
"/* comment 2 */\n" +
"name: stringValue;",
expected: [{type: "comment", text: "/* comment 1 */"},
{type: "text", text: "\n"},
{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "1"},
{type: "text", text: ";"},
{type: "text", text: "\n"},
{type: "comment", text: "/* comment 2 */"},
{type: "text", text: "\n"},
{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, multiline.",
example: "name: \n" +
"stringValue;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " \n"},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Valid syntax, multiline, two declarations.",
example: "name: \n" +
"stringValue \n" +
"stringValue2;",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " \n"},
{type: "property-value", text: "stringValue"},
{type: "text", text: " \n"},
{type: "property-value", text: "stringValue2"},
{type: "text", text: ";"}
]}, {
description: "Invalid: not CSS at all.",
example: "not CSS at all",
expected: [{type: "property-name", text: "not"},
{type: "text", text: " "},
{type: "property-name", text: "CSS"},
{type: "text", text: " "},
{type: "property-name", text: "at"},
{type: "text", text: " "},
{type: "property-name", text: "all"}
]}, {
description: "Invalid: switched ':' and ';'.",
example: "name; stringValue:",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ";"},
{type: "text", text: " "},
{type: "property-name", text: "stringValue"},
{type: "text", text: ":"}
]}, {
description: "Invalid: unterminated comment.",
example: "/* unterminated comment\n" +
"name: stringValue;",
expected: [{type: "comment", text: "/* unterminated comment\nname: stringValue;"}
]}, {
description: "Invalid: bad comment syntax.",
example: "// invalid comment\n" +
"name: stringValue;",
expected: [{type: "text", text: "/"},
{type: "text", text: "/"},
{type: "text", text: " "},
{type: "property-name", text: "invalid"},
{type: "text", text: " "},
{type: "property-name", text: "comment"},
{type: "text", text: "\n"},
{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: ";"}
]}, {
description: "Invalid: no trailing ';'.",
example: "name: stringValue\n" +
"name: stringValue2",
expected: [{type: "property-name", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue"},
{type: "text", text: "\n"},
{type: "property-value", text: "name"},
{type: "text", text: ":"},
{type: "text", text: " "},
{type: "property-value", text: "stringValue2"},
]}
];
/**
* Iterate through every test case, calling the syntax highlighter,
* then calling a helper function to check the output.
*/
add_task(function* () {
let doc = gBrowser.selectedTab.ownerDocument;
let parent = doc.createElement("div");
info("Testing all CSS syntax highlighter test cases");
for (let {description, example, expected} of TEST_DATA) {
info("Testing: " + description);
appendSyntaxHighlightedCSS(example, parent);
checkCssSyntaxHighlighterOutput(expected, parent);
while (parent.firstChild) {
parent.firstChild.remove();
}
}
});

102
devtools/client/shared/test/head.js
View file

@ -242,105 +242,3 @@ Task.async(function* (widget, name, value) {
yield onRender;
});
/**
* Utility function for testing CSS code samples that have been
* syntax-highlighted.
*
* The CSS syntax highlighter emits a collection of DOM nodes that have
* CSS classes applied to them. This function checks that those nodes
* are what we expect.
*
* @param {array} expectedNodes
* A representation of the nodes we expect to see.
* Each node is an object containing two properties:
* - type: a string which can be one of:
* - text, comment, property-name, property-value
* - text: the textContent of the node
*
* For example, given a string like this:
* "<comment> The part we want </comment>\n this: is-the-part-we-want;"
*
* we would represent the expected output like this:
* [{type: "comment", text: "<comment> The part we want </comment>"},
* {type: "text", text: "\n"},
* {type: "property-name", text: "this"},
* {type: "text", text: ":"},
* {type: "text", text: " "},
* {type: "property-value", text: "is-the-part-we-want"},
* {type: "text", text: ";"}];
*
* @param {Node} parent
* The DOM node whose children are the output of the syntax highlighter.
*/
function checkCssSyntaxHighlighterOutput(expectedNodes, parent) {
/**
* The classes applied to the output nodes by the syntax highlighter.
* These must be same as the definitions in MdnDocsWidget.js.
*/
const PROPERTY_NAME_COLOR = "theme-fg-color5";
const PROPERTY_VALUE_COLOR = "theme-fg-color1";
const COMMENT_COLOR = "theme-comment";
/**
* Check the type and content of a single node.
*/
function checkNode(expected, actual) {
ok(actual.textContent == expected.text,
"Check that node has the expected textContent");
info("Expected text content: [" + expected.text + "]");
info("Actual text content: [" + actual.textContent + "]");
info("Check that node has the expected type");
if (expected.type == "text") {
ok(actual.nodeType == 3, "Check that node is a text node");
} else {
ok(actual.tagName.toUpperCase() == "SPAN", "Check that node is a SPAN");
}
info("Check that node has the expected className");
let expectedClassName = null;
let actualClassName = null;
switch (expected.type) {
case "property-name":
expectedClassName = PROPERTY_NAME_COLOR;
break;
case "property-value":
expectedClassName = PROPERTY_VALUE_COLOR;
break;
case "comment":
expectedClassName = COMMENT_COLOR;
break;
default:
ok(!actual.classList, "No className expected");
return;
}
ok(actual.classList.length == 1, "One className expected");
actualClassName = actual.classList[0];
ok(expectedClassName == actualClassName, "Check className value");
info("Expected className: " + expectedClassName);
info("Actual className: " + actualClassName);
}
info("Logging the actual nodes we have:");
for (let j = 0; j < parent.childNodes.length; j++) {
let n = parent.childNodes[j];
info(j + " / " +
"nodeType: " + n.nodeType + " / " +
"textContent: " + n.textContent);
}
ok(parent.childNodes.length == parent.childNodes.length,
"Check we have the expected number of nodes");
info("Expected node count " + expectedNodes.length);
info("Actual node count " + expectedNodes.length);
for (let i = 0; i < expectedNodes.length; i++) {
info("Check node " + i);
checkNode(expectedNodes[i], parent.childNodes[i]);
}
}

21
devtools/client/shared/test/html-mdn-css-basic-testing.html
View file

@ -1,21 +0,0 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<h2 id="Summary">Summary</h2>
<p>A summary of the property.</p>
<h2 id="Syntax">Syntax</h2>
<pre>/* The part we want */
this: is-the-part-we-want;</pre>
</body>
</html>

12
devtools/client/shared/test/html-mdn-css-no-summary-or-syntax.html
View file

@ -1,12 +0,0 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>This is not the summary or the syntax.</p>
</body>
</html>

21
devtools/client/shared/test/html-mdn-css-no-summary.html
View file

@ -1,21 +0,0 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>This is not the summary.</p>
<h2 id="Syntax">Syntax</h2>
<pre>To be ignored.</pre>
<pre>/* The part we want */
this: is-the-part-we-want;</pre>
</body>
</html>

17
devtools/client/shared/test/html-mdn-css-no-syntax.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<h2 id="Summary">Summary</h2>
<p>A summary of the property.</p>
<p>This is not the syntax.</p>
</body>
</html>

23
devtools/client/shared/test/html-mdn-css-syntax-old-style.html
View file

@ -1,23 +0,0 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<h2 id="Summary">Summary</h2>
<p>A summary of the property.</p>
<h2 id="Syntax">Syntax</h2>
<pre>The part we should ignore</pre>
<pre>/* The part we want */
this: is-the-part-we-want;</pre>
</body>
</html>

510
devtools/client/shared/widgets/MdnDocsWidget.js
View file

@ -1,510 +0,0 @@
/* 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/. */
/**
* This file contains functions to retrieve docs content from
* MDN (developer.mozilla.org) for particular items, and to display
* the content in a tooltip.
*
* At the moment it only supports fetching content for CSS properties,
* but it might support other types of content in the future
* (Web APIs, for example).
*
* It's split into two parts:
*
* - functions like getCssDocs that just fetch content from MDN,
* without any constraints on what to do with the content. If you
* want to embed the content in some custom way, use this.
*
* - the MdnDocsWidget class, that manages and updates a tooltip
* document whose content is taken from MDN. If you want to embed
* the content in a tooltip, use this in conjunction with Tooltip.js.
*/
"use strict";
const Services = require("Services");
const defer = require("devtools/shared/defer");
const {getCSSLexer} = require("devtools/shared/css/lexer");
const EventEmitter = require("devtools/shared/event-emitter");
const {gDevTools} = require("devtools/client/framework/devtools");
const {LocalizationHelper} = require("devtools/shared/l10n");
const L10N = new LocalizationHelper("devtools/client/locales/inspector.properties");
const XHTML_NS = "http://www.w3.org/1999/xhtml";
// Parameters for the XHR request
// see https://developer.mozilla.org/en-US/docs/MDN/Kuma/API#Document_parameters
const XHR_PARAMS = "?raw&macros";
// URL for the XHR request
var XHR_CSS_URL = "https://developer.mozilla.org/en-US/docs/Web/CSS/";
// Parameters for the link to MDN in the tooltip, so
// so we know which MDN visits come from this feature
const PAGE_LINK_PARAMS =
"?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
// URL for the page link omits locale, so a locale-specific page will be loaded
var PAGE_LINK_URL = "https://developer.mozilla.org/docs/Web/CSS/";
exports.PAGE_LINK_URL = PAGE_LINK_URL;
const PROPERTY_NAME_COLOR = "theme-fg-color5";
const PROPERTY_VALUE_COLOR = "theme-fg-color1";
const COMMENT_COLOR = "theme-comment";
/**
* Turns a string containing a series of CSS declarations into
* a series of DOM nodes, with classes applied to provide syntax
* highlighting.
*
* It uses the CSS tokenizer to generate a stream of CSS tokens.
* https://dxr.mozilla.org/mozilla-central/source/dom/webidl/CSSLexer.webidl
* lists all the token types.
*
* - "whitespace", "comment", and "symbol" tokens are appended as TEXT nodes,
* and will inherit the default style for text.
*
* - "ident" tokens that we think are property names are considered to be
* a property name, and are appended as SPAN nodes with a distinct color class.
*
* - "ident" nodes which we do not think are property names, and nodes
* of all other types ("number", "url", "percentage", ...) are considered
* to be part of a property value, and are appended as SPAN nodes with
* a different color class.
*
* @param {Document} doc
* Used to create nodes.
*
* @param {String} syntaxText
* The CSS input. This is assumed to consist of a series of
* CSS declarations, with trailing semicolons.
*
* @param {DOM node} syntaxSection
* This is the parent for the output nodes. Generated nodes
* are appended to this as children.
*/
function appendSyntaxHighlightedCSS(cssText, parentElement) {
let doc = parentElement.ownerDocument;
let identClass = PROPERTY_NAME_COLOR;
let lexer = getCSSLexer(cssText);
/**
* Create a SPAN node with the given text content and class.
*/
function createStyledNode(textContent, className) {
let newNode = doc.createElementNS(XHTML_NS, "span");
newNode.classList.add(className);
newNode.textContent = textContent;
return newNode;
}
/**
* If the symbol is ":", we will expect the next
* "ident" token to be part of a property value.
*
* If the symbol is ";", we will expect the next
* "ident" token to be a property name.
*/
function updateIdentClass(tokenText) {
if (tokenText === ":") {
identClass = PROPERTY_VALUE_COLOR;
} else if (tokenText === ";") {
identClass = PROPERTY_NAME_COLOR;
}
}
/**
* Create the appropriate node for this token type.
*
* If this token is a symbol, also update our expectations
* for what the next "ident" token represents.
*/
function tokenToNode(token, tokenText) {
switch (token.tokenType) {
case "ident":
return createStyledNode(tokenText, identClass);
case "symbol":
updateIdentClass(tokenText);
return doc.createTextNode(tokenText);
case "whitespace":
return doc.createTextNode(tokenText);
case "comment":
return createStyledNode(tokenText, COMMENT_COLOR);
default:
return createStyledNode(tokenText, PROPERTY_VALUE_COLOR);
}
}
let token = lexer.nextToken();
while (token) {
let tokenText = cssText.slice(token.startOffset, token.endOffset);
let newNode = tokenToNode(token, tokenText);
parentElement.appendChild(newNode);
token = lexer.nextToken();
}
}
exports.appendSyntaxHighlightedCSS = appendSyntaxHighlightedCSS;
/**
* Fetch an MDN page.
*
* @param {string} pageUrl
* URL of the page to fetch.
*
* @return {promise}
* The promise is resolved with the page as an XML document.
*
* The promise is rejected with an error message if
* we could not load the page.
*/
function getMdnPage(pageUrl) {
let deferred = defer();
let xhr = new XMLHttpRequest();
xhr.addEventListener("load", onLoaded, false);
xhr.addEventListener("error", onError, false);
xhr.open("GET", pageUrl);
xhr.responseType = "document";
xhr.send();
function onLoaded(e) {
if (xhr.status != 200) {
deferred.reject({page: pageUrl, status: xhr.status});
} else {
deferred.resolve(xhr.responseXML);
}
}
function onError(e) {
deferred.reject({page: pageUrl, status: xhr.status});
}
return deferred.promise;
}
/**
* Gets some docs for the given CSS property.
* Loads an MDN page for the property and gets some
* information about the property.
*
* @param {string} cssProperty
* The property for which we want docs.
*
* @return {promise}
* The promise is resolved with an object containing:
* - summary: a short summary of the property
* - syntax: some example syntax
*
* The promise is rejected with an error message if
* we could not load the page.
*/
function getCssDocs(cssProperty) {
let deferred = defer();
let pageUrl = XHR_CSS_URL + cssProperty + XHR_PARAMS;
getMdnPage(pageUrl).then(parseDocsFromResponse, handleRejection);
function parseDocsFromResponse(responseDocument) {
let theDocs = {};
theDocs.summary = getSummary(responseDocument);
theDocs.syntax = getSyntax(responseDocument);
if (theDocs.summary || theDocs.syntax) {
deferred.resolve(theDocs);
} else {
deferred.reject("Couldn't find the docs in the page.");
}
}
function handleRejection(e) {
deferred.reject(e.status);
}
return deferred.promise;
}
exports.getCssDocs = getCssDocs;
/**
* The MdnDocsWidget is used by tooltip code that needs to display docs
* from MDN in a tooltip.
*
* In the constructor, the widget does some general setup that's not
* dependent on the particular item we need docs for.
*
* After that, when the tooltip code needs to display docs for an item, it
* asks the widget to retrieve the docs and update the document with them.
*
* @param {Element} tooltipContainer
* A DOM element where the MdnDocs widget markup should be created.
*/
function MdnDocsWidget(tooltipContainer) {
EventEmitter.decorate(this);
tooltipContainer.innerHTML =
`<header>
<h1 class="mdn-property-name theme-fg-color5"></h1>
</header>
<div class="mdn-property-info">
<div class="mdn-summary"></div>
<pre class="mdn-syntax devtools-monospace"></pre>
</div>
<footer>
<a class="mdn-visit-page theme-link" href="#">Visit MDN (placeholder)</a>
</footer>`;
// fetch all the bits of the document that we will manipulate later
this.elements = {
heading: tooltipContainer.querySelector(".mdn-property-name"),
summary: tooltipContainer.querySelector(".mdn-summary"),
syntax: tooltipContainer.querySelector(".mdn-syntax"),
info: tooltipContainer.querySelector(".mdn-property-info"),
linkToMdn: tooltipContainer.querySelector(".mdn-visit-page")
};
// get the localized string for the link text
this.elements.linkToMdn.textContent = L10N.getStr("docsTooltip.visitMDN");
// listen for clicks and open in the browser window instead
let mainWindow = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
this.elements.linkToMdn.addEventListener("click", (e) => {
e.stopPropagation();
e.preventDefault();
mainWindow.openUILinkIn(e.target.href, "tab");
this.emit("visitlink");
});
}
exports.MdnDocsWidget = MdnDocsWidget;
MdnDocsWidget.prototype = {
/**
* This is called just before the tooltip is displayed, and is
* passed the CSS property for which we want to display help.
*
* Its job is to make sure the document contains the docs
* content for that CSS property.
*
* First, it initializes the document, setting the things it can
* set synchronously, resetting the things it needs to get
* asynchronously, and making sure the throbber is throbbing.
*
* Then it tries to get the content asynchronously, updating
* the document with the content or with an error message.
*
* It returns immediately, so the caller can display the tooltip
* without waiting for the asynch operation to complete.
*
* @param {string} propertyName
* The name of the CSS property for which we need to display help.
*/
loadCssDocs: function (propertyName) {
/**
* Do all the setup we can do synchronously, and get the document in
* a state where it can be displayed while we are waiting for the
* MDN docs content to be retrieved.
*/
function initializeDocument(propName) {
// set property name heading
elements.heading.textContent = propName;
// set link target
elements.linkToMdn.setAttribute("href",
PAGE_LINK_URL + propName + PAGE_LINK_PARAMS);
// clear docs summary and syntax
elements.summary.textContent = "";
while (elements.syntax.firstChild) {
elements.syntax.firstChild.remove();
}
// reset the scroll position
elements.info.scrollTop = 0;
elements.info.scrollLeft = 0;
// show the throbber
elements.info.classList.add("devtools-throbber");
}
/**
* This is called if we successfully got the docs content.
* Finishes setting up the tooltip content, and disables the throbber.
*/
function finalizeDocument({summary, syntax}) {
// set docs summary and syntax
elements.summary.textContent = summary;
appendSyntaxHighlightedCSS(syntax, elements.syntax);
// hide the throbber
elements.info.classList.remove("devtools-throbber");
deferred.resolve(this);
}
/**
* This is called if we failed to get the docs content.
* Sets the content to contain an error message, and disables the throbber.
*/
function gotError(error) {
// show error message
elements.summary.textContent = L10N.getStr("docsTooltip.loadDocsError");
// hide the throbber
elements.info.classList.remove("devtools-throbber");
// although gotError is called when there's an error, we have handled
// the error, so call resolve not reject.
deferred.resolve(this);
}
let deferred = defer();
let elements = this.elements;
initializeDocument(propertyName);
getCssDocs(propertyName).then(finalizeDocument, gotError);
return deferred.promise;
},
destroy: function () {
this.elements = null;
}
};
/**
* Test whether a node is all whitespace.
*
* @return {boolean}
* True if the node all whitespace, otherwise false.
*/
function isAllWhitespace(node) {
return !(/[^\t\n\r ]/.test(node.textContent));
}
/**
* Test whether a node is a comment or whitespace node.
*
* @return {boolean}
* True if the node is a comment node or is all whitespace, otherwise false.
*/
function isIgnorable(node) {
// Comment nodes (8), text nodes (3) or whitespace
return (node.nodeType == 8) ||
((node.nodeType == 3) && isAllWhitespace(node));
}
/**
* Get the next node, skipping comments and whitespace.
*
* @return {node}
* The next sibling node that is not a comment or whitespace, or null if
* there isn't one.
*/
function nodeAfter(sib) {
while ((sib = sib.nextSibling)) {
if (!isIgnorable(sib)) {
return sib;
}
}
return null;
}
/**
* Test whether the argument `node` is a node whose tag is `tagName`.
*
* @param {node} node
* The code to test. May be null.
*
* @param {string} tagName
* The tag name to test against.
*
* @return {boolean}
* True if the node is not null and has the tag name `tagName`,
* otherwise false.
*/
function hasTagName(node, tagName) {
return node && node.tagName &&
node.tagName.toLowerCase() == tagName.toLowerCase();
}
/**
* Given an MDN page, get the "summary" portion.
*
* This is the textContent of the first non-whitespace
* element in the #Summary section of the document.
*
* It's expected to be a <P> element.
*
* @param {Document} mdnDocument
* The document in which to look for the "summary" section.
*
* @return {string}
* The summary section as a string, or null if it could not be found.
*/
function getSummary(mdnDocument) {
let summary = mdnDocument.getElementById("Summary");
if (!hasTagName(summary, "H2")) {
return null;
}
let firstParagraph = nodeAfter(summary);
if (!hasTagName(firstParagraph, "P")) {
return null;
}
return firstParagraph.textContent;
}
/**
* Given an MDN page, get the "syntax" portion.
*
* First we get the #Syntax section of the document. The syntax
* section we want is somewhere inside there.
*
* If the page is in the old structure, then the *first two*
* non-whitespace elements in the #Syntax section will be <PRE>
* nodes, and the second of these will be the syntax section.
*
* If the page is in the new structure, then the only the *first*
* non-whitespace element in the #Syntax section will be a <PRE>
* node, and it will be the syntax section.
*
* @param {Document} mdnDocument
* The document in which to look for the "syntax" section.
*
* @return {string}
* The syntax section as a string, or null if it could not be found.
*/
function getSyntax(mdnDocument) {
let syntax = mdnDocument.getElementById("Syntax");
if (!hasTagName(syntax, "H2")) {
return null;
}
let firstParagraph = nodeAfter(syntax);
if (!hasTagName(firstParagraph, "PRE")) {
return null;
}
let secondParagraph = nodeAfter(firstParagraph);
if (hasTagName(secondParagraph, "PRE")) {
return secondParagraph.textContent;
}
return firstParagraph.textContent;
}
/**
* Use a different URL for CSS docs pages. Used only for testing.
*
* @param {string} baseUrl
* The baseURL to use.
*/
function setBaseCssDocsUrl(baseUrl) {
PAGE_LINK_URL = baseUrl;
XHR_CSS_URL = baseUrl;
}
exports.setBaseCssDocsUrl = setBaseCssDocsUrl;

39
devtools/client/shared/widgets/mdn-docs.css
View file

@ -1,39 +0,0 @@
/* 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/. */
.mdn-container {
height: 300px;
margin: 4px;
overflow: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.mdn-container header,
.mdn-container footer {
flex: 1;
padding: 0 1em;
}
.mdn-property-info {
flex: 10;
padding: 0 1em;
overflow: auto;
transition: opacity 400ms ease-in;
}
.mdn-syntax {
margin-top: 1em;
}
.devtools-throbber {
align-self: center;
opacity: 0;
}
.mdn-visit-page {
display: inline-block;
padding: 1em 0;
}

1
devtools/client/shared/widgets/moz.build
View file

@ -20,7 +20,6 @@ DevToolsModules(
'Graphs.js',
'GraphsWorker.js',
'LineGraphWidget.js',
'MdnDocsWidget.js',
'MountainGraphWidget.js',
'SideMenuWidget.jsm',
'SimpleListWidget.jsm',

93
devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
View file

@ -1,93 +0,0 @@
/* 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 {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
const {MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts");
const XHTML_NS = "http://www.w3.org/1999/xhtml";
const TOOLTIP_WIDTH = 418;
const TOOLTIP_HEIGHT = 308;
/**
* Tooltip for displaying docs for CSS properties from MDN.
*
* @param {Document} toolboxDoc
* The toolbox document to attach the CSS docs tooltip.
*/
function CssDocsTooltip(toolboxDoc) {
this.tooltip = new HTMLTooltip(toolboxDoc, {
type: "arrow",
consumeOutsideClicks: true,
autofocus: true,
useXulWrapper: true,
stylesheet: "chrome://devtools/content/shared/widgets/mdn-docs.css",
});
this.widget = this.setMdnDocsContent();
this._onVisitLink = this._onVisitLink.bind(this);
this.widget.on("visitlink", this._onVisitLink);
// Initialize keyboard shortcuts
this.shortcuts = new KeyShortcuts({ window: this.tooltip.topWindow });
this._onShortcut = this._onShortcut.bind(this);
this.shortcuts.on("Escape", this._onShortcut);
}
CssDocsTooltip.prototype = {
/**
* Load CSS docs for the given property,
* then display the tooltip.
*/
show: function (anchor, propertyName) {
this.tooltip.once("shown", () => {
this.widget.loadCssDocs(propertyName);
});
this.tooltip.show(anchor);
},
hide: function () {
this.tooltip.hide();
},
_onShortcut: function (shortcut, event) {
if (!this.tooltip.isVisible()) {
return;
}
event.stopPropagation();
event.preventDefault();
this.hide();
},
_onVisitLink: function () {
this.hide();
},
/**
* Set the content of this tooltip to the MDN docs widget. This is called when the
* tooltip is first constructed.
* The caller can use the MdnDocsWidget to update the tooltip's UI with new content
* each time the tooltip is shown.
*
* @return {MdnDocsWidget} the created MdnDocsWidget instance.
*/
setMdnDocsContent: function () {
let container = this.tooltip.doc.createElementNS(XHTML_NS, "div");
container.setAttribute("class", "mdn-container theme-body");
this.tooltip.setContent(container, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
return new MdnDocsWidget(container);
},
destroy: function () {
this.widget.off("visitlink", this._onVisitLink);
this.widget.destroy();
this.shortcuts.destroy();
this.tooltip.destroy();
}
};
module.exports = CssDocsTooltip;

1
devtools/client/shared/widgets/tooltip/moz.build
View file

@ -4,7 +4,6 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
'CssDocsTooltip.js',
'EventTooltipHelper.js',
'HTMLTooltip.js',
'ImageTooltipHelper.js',