wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge m-c to inbound. a=merge

Browse Source 
CLOSED TREE
This commit is contained in:
Ryan VanderMeulen 2015-08-11 10:53:56 -04:00
commit 5ccb9e6d6b
348 changed files with 4636 additions and 3624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
b2g/config/aries/sources.xml
View File

@ -15,7 +15,7 @@
<project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

2
b2g/config/dolphin/sources.xml
View File

@ -15,7 +15,7 @@
<project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

2
b2g/config/emulator-ics/sources.xml
View File

@ -19,7 +19,7 @@
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
<project name="gaia.git" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia.git" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
<project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="2d58f4b9206b50b8fda0d5036da6f0c62608db7c"/>

2
b2g/config/emulator-jb/sources.xml
View File

@ -17,7 +17,7 @@
</project>
<project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="moztt" path="external/moztt" remote="b2g" revision="657894b4a1dc0a926117f4812e0940229f9f676f"/>
<project name="apitrace" path="external/apitrace" remote="apitrace" revision="36b945cb98a4e9009d57b8c20a720fc1a5905452"/>

2
b2g/config/emulator-kk/sources.xml
View File

@ -15,7 +15,7 @@
<project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

2
b2g/config/emulator-l/sources.xml
View File

@ -15,7 +15,7 @@
<project name="platform_build" path="build" remote="b2g" revision="05a36844c1046a1eb07d5b1325f85ed741f961ea">
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

2
b2g/config/emulator/sources.xml
View File

@ -19,7 +19,7 @@
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
<project name="gaia.git" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia.git" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
<project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="2d58f4b9206b50b8fda0d5036da6f0c62608db7c"/>

2
b2g/config/flame-kk/sources.xml
View File

@ -15,7 +15,7 @@
<project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

4
b2g/config/gaia.json
View File

@ -1,9 +1,9 @@
{
"git": {
"git_revision": "9a8880a95ee4a4aea7895d4e2bcab31bc49ea281",
"git_revision": "2d7f369fd923b6df3b00d76844c413c1202c04ba",
"remote": "https://git.mozilla.org/releases/gaia.git",
"branch": ""
},
"revision": "aa0cf409f343d966a552839ab5d3bc85d1ebdda9",
"revision": "5c86f4cf87b91d2bfe9a3e49aa8706b452e4f97e",
"repo_path": "integration/gaia-central"
}

2
b2g/config/nexus-4/sources.xml
View File

@ -17,7 +17,7 @@
</project>
<project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="moztt" path="external/moztt" remote="b2g" revision="657894b4a1dc0a926117f4812e0940229f9f676f"/>
<project name="apitrace" path="external/apitrace" remote="apitrace" revision="36b945cb98a4e9009d57b8c20a720fc1a5905452"/>

2
b2g/config/nexus-5-l/sources.xml
View File

@ -15,7 +15,7 @@
<project name="platform_build" path="build" remote="b2g" revision="05a36844c1046a1eb07d5b1325f85ed741f961ea">
<copyfile dest="Makefile" src="core/root.mk"/>
</project>
<project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
<project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
<project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
<project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

1
browser/base/content/test/general/browser.ini
View File

@ -357,6 +357,7 @@ skip-if = buildapp == 'mulet' || e10s # Bug 1101973 - breaks the next test in e1
skip-if = buildapp == 'mulet'
[browser_private_no_prompt.js]
skip-if = buildapp == 'mulet'
[browser_purgehistory_clears_sh.js]
[browser_PageMetaData_pushstate.js]
[browser_relatedTabs.js]
[browser_remoteTroubleshoot.js]

66
browser/base/content/test/general/browser_purgehistory_clears_sh.js Normal file
View File

@ -0,0 +1,66 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
const url = "http://example.org/browser/browser/base/content/test/general/dummy_page.html";
add_task(function* purgeHistoryTest() {
let tab = yield BrowserTestUtils.withNewTab({
gBrowser,
url,
}, function* purgeHistoryTestInner(browser) {
let backButton = browser.ownerDocument.getElementById("Browser:Back");
let forwardButton = browser.ownerDocument.getElementById("Browser:Forward");
ok(!browser.webNavigation.canGoBack,
"Initial value for webNavigation.canGoBack");
ok(!browser.webNavigation.canGoForward,
"Initial value for webNavigation.canGoBack");
ok(backButton.hasAttribute("disabled"), "Back button is disabled");
ok(forwardButton.hasAttribute("disabled"), "Forward button is disabled");
let pushState = ContentTask.spawn(browser, null, function*() {
let startHistory = content.history.length;
content.history.pushState({}, "");
content.history.pushState({}, "");
content.history.back();
let newHistory = content.history.length;
return [startHistory, newHistory];
});
let [startHistory, newHistory] = yield pushState;
is(startHistory, 1, "Initial SHistory size");
is(newHistory, 3, "New SHistory size");
ok(browser.webNavigation.canGoBack, true,
"New value for webNavigation.canGoBack");
ok(browser.webNavigation.canGoForward, true,
"New value for webNavigation.canGoForward");
ok(!backButton.hasAttribute("disabled"), "Back button was enabled");
ok(!forwardButton.hasAttribute("disabled"), "Forward button was enabled");
let tmp = {};
Cc["@mozilla.org/moz/jssubscript-loader;1"]
.getService(Ci.mozIJSSubScriptLoader)
.loadSubScript("chrome://browser/content/sanitize.js", tmp);
let {Sanitizer} = tmp;
let sanitizer = new Sanitizer();
yield sanitizer.sanitize(["history"]);
let historyAfterPurge = yield ContentTask.spawn(browser, null, function*() {
return content.history.length;
});
is(historyAfterPurge, 1, "SHistory correctly cleared");
ok(!browser.webNavigation.canGoBack,
"webNavigation.canGoBack correctly cleared");
ok(!browser.webNavigation.canGoForward,
"webNavigation.canGoForward correctly cleared");
ok(backButton.hasAttribute("disabled"), "Back button was disabled");
ok(forwardButton.hasAttribute("disabled"), "Forward button was disabled");
});
});

27
browser/components/loop/content/css/contacts.css
View File

@ -2,6 +2,11 @@
* 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/. */
html {
font-size: 10px;
font-family: sans-serif; /* XXX will be changed to a system font in bug 1191398 */
}
.contact-import-spinner {
display: none;
}
@ -281,8 +286,26 @@ html[dir="rtl"] .contact > .dropdown-menu {
top: auto;
}
.contact-form > .button-group {
margin-top: 1rem;
.contact-form {
padding: 14px; /* Override based on spacing in Mockup */
}
/* This will effect the header displayed at the top of the contact details form
*/
.contact-form header {
text-align: center;
font-size: 1.3rem;
font-weight: 500;
color: #4a4a4a;
}
.contact-form .form-content-container {
height: 24.1rem; /* This height is needed to keep the panel height at 400px and
the bottom elements at the bottom of the panel
Can likely go away if we switched this pane to flexbox model */
padding-top: 4px; /* Based on spacing in Mockup
replaced margin-top
See http://stackoverflow.com/questions/6204670/css-clean-solution-to-the-margin-collapse-issue-when-floating-an-element
*/
}
.contacts-gravatar-promo {

74
browser/components/loop/content/css/panel.css
View File

@ -15,6 +15,8 @@ body {
.panel {
/* hide the extra margin space that the panel resizer now wants to show */
overflow: hidden;
font: menu;
background-color: #fbfbfb;
}
/* Notifications displayed over tabs */
@ -83,8 +85,6 @@ body {
.tab-view > li {
display: inline-block;
vertical-align: middle;
line-height: 1.2rem;
text-align: center;
padding: 0;
cursor: pointer;
@ -252,20 +252,26 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
display: block;
width: 100%;
outline: none;
border-radius: 2px;
margin: 5px 0;
border: 1px solid #ccc;
height: 24px;
padding: 0 10px;
}
.content-area input:invalid {
border-radius: 4px;
margin: 10px 0;
border: 1px solid #c3c3c3;
height: 2.6rem;
padding: 0 6px;
font-size: 1.1rem;
color: #4a4a4a;
box-shadow: none;
}
.content-area input::-moz-placeholder {
color: #999;
}
.content-area input:not(.pristine):invalid {
border-color: #d74345;
box-shadow: 0 0 4px #c43c3e;
border: 0.1rem solid #d13f1a;
}
.content-area input:focus {
border: 0.1rem solid #5cccee;
}
/* Rooms */
@ -475,11 +481,17 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
display: flex;
flex-direction: row;
width: 100%;
padding-top: 6px;
}
.button-group > .button {
flex: 1;
margin: 0 7px;
margin: 0 5px;
min-height: 3rem;
font-size: 1.2rem;
line-height: 1rem;
font-weight: 300;
border-radius: 4px;
}
.button-group > .button:first-child {
@ -494,11 +506,11 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
padding: 2px 5px;
background-color: #fbfbfb;
color: #333;
border: 1px solid #c1c1c1;
border-radius: 2px;
min-height: 26px;
font-size: 1.2rem;
line-height: 1.2rem;
border: none;
}
.button:hover {
@ -507,27 +519,39 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
.button:hover:active {
background-color: #ccc;
color: #111;
color: #fff;
}
.button.button-accept {
background-color: #5bc0a4;
border-color: #5bc0a4;
color: #fff;
}
.button.button-accept:hover {
background-color: #47b396;
border-color: #47b396;
background-color: #00a9dc;
color: #fff;
}
.button.button-accept:hover,
.button.button-accept:hover:active {
background-color: #3aa689;
border-color: #3aa689;
background-color: #5cccee;
color: #fff;
}
.button.button-cancel {
background-color: #ebebeb;
border: 0;
color: #000;
width: 105px; /* based on fixed width of Cancel button from mockup */
flex: 0 0 auto;
}
.button.button-cancel:hover,
.button.button-cancel:hover:active {
background-color: #dcd6d6;
color: #000;
}
.button.button-cancel:disabled {
background-color: #ebebeb;
color: #c3c3c3;
}
.button-close {
background-color: transparent;
background-image: url(../shared/img/icons-10x10.svg#close);

51
browser/components/loop/content/js/contacts.js
View File

@ -740,31 +740,40 @@ loop.contacts = (function(_, mozL10n) {
render: function() {
let cx = React.addons.classSet;
let phoneOrEmailRequired = !this.state.email && !this.state.tel;
let contactFormMode = "contact-form-mode-" + this.props.mode;
let contentAreaClassesLiteral = {
"content-area": true,
"contact-form": true
};
contentAreaClassesLiteral[contactFormMode] = true;
let contentAreaClasses = cx(contentAreaClassesLiteral);
return (
React.createElement("div", {className: "content-area contact-form"},
React.createElement("div", {className: contentAreaClasses},
React.createElement("header", null, this.props.mode == "add"
? mozL10n.get("add_contact_button")
? mozL10n.get("add_contact_title")
: mozL10n.get("edit_contact_title")),
React.createElement("label", null, mozL10n.get("edit_contact_name_label")),
React.createElement("input", {className: cx({pristine: this.state.pristine}),
pattern: "\\s*\\S.*",
ref: "name",
required: true,
type: "text",
valueLink: this.linkState("name")}),
React.createElement("label", null, mozL10n.get("edit_contact_email_label")),
React.createElement("input", {className: cx({pristine: this.state.pristine}),
ref: "email",
required: phoneOrEmailRequired,
type: "email",
valueLink: this.linkState("email")}),
React.createElement("label", null, mozL10n.get("new_contact_fxos_phone_placeholder")),
React.createElement("input", {className: cx({pristine: this.state.pristine}),
ref: "tel",
required: phoneOrEmailRequired,
type: "tel",
valueLink: this.linkState("tel")}),
React.createElement("div", {className: cx({"form-content-container": true})},
React.createElement("input", {className: cx({pristine: this.state.pristine}),
pattern: "\\s*\\S.*",
placeholder: mozL10n.get("contact_form_name_placeholder"),
ref: "name",
required: true,
type: "text",
valueLink: this.linkState("name")}),
React.createElement("input", {className: cx({pristine: this.state.pristine}),
placeholder: mozL10n.get("contact_form_email_placeholder"),
ref: "email",
required: phoneOrEmailRequired,
type: "email",
valueLink: this.linkState("email")}),
React.createElement("input", {className: cx({pristine: this.state.pristine}),
placeholder: mozL10n.get("contact_form_fxos_phone_placeholder"),
ref: "tel",
required: phoneOrEmailRequired,
type: "tel",
valueLink: this.linkState("tel")})
),
React.createElement(ButtonGroup, null,
React.createElement(Button, {additionalClass: "button-cancel",
caption: mozL10n.get("cancel_button"),

51
browser/components/loop/content/js/contacts.jsx
View File

@ -740,31 +740,40 @@ loop.contacts = (function(_, mozL10n) {
render: function() {
let cx = React.addons.classSet;
let phoneOrEmailRequired = !this.state.email && !this.state.tel;
let contactFormMode = "contact-form-mode-" + this.props.mode;
let contentAreaClassesLiteral = {
"content-area": true,
"contact-form": true
};
contentAreaClassesLiteral[contactFormMode] = true;
let contentAreaClasses = cx(contentAreaClassesLiteral);
return (
<div className="content-area contact-form">
<div className={contentAreaClasses}>
<header>{this.props.mode == "add"
? mozL10n.get("add_contact_button")
? mozL10n.get("add_contact_title")
: mozL10n.get("edit_contact_title")}</header>
<label>{mozL10n.get("edit_contact_name_label")}</label>
<input className={cx({pristine: this.state.pristine})}
pattern="\s*\S.*"
ref="name"
required
type="text"
valueLink={this.linkState("name")} />
<label>{mozL10n.get("edit_contact_email_label")}</label>
<input className={cx({pristine: this.state.pristine})}
ref="email"
required={phoneOrEmailRequired}
type="email"
valueLink={this.linkState("email")} />
<label>{mozL10n.get("new_contact_fxos_phone_placeholder")}</label>
<input className={cx({pristine: this.state.pristine})}
ref="tel"
required={phoneOrEmailRequired}
type="tel"
valueLink={this.linkState("tel")} />
<div className={cx({"form-content-container": true})}>
<input className={cx({pristine: this.state.pristine})}
pattern="\s*\S.*"
placeholder={mozL10n.get("contact_form_name_placeholder")}
ref="name"
required
type="text"
valueLink={this.linkState("name")} />
<input className={cx({pristine: this.state.pristine})}
placeholder={mozL10n.get("contact_form_email_placeholder")}
ref="email"
required={phoneOrEmailRequired}
type="email"
valueLink={this.linkState("email")} />
<input className={cx({pristine: this.state.pristine})}
placeholder={mozL10n.get("contact_form_fxos_phone_placeholder")}
ref="tel"
required={phoneOrEmailRequired}
type="tel"
valueLink={this.linkState("tel")} />
</div>
<ButtonGroup>
<Button additionalClass="button-cancel"
caption={mozL10n.get("cancel_button")}

9
browser/components/loop/test/desktop-local/contacts_test.js
View File

@ -8,7 +8,8 @@ describe("loop.contacts", function() {
var expect = chai.expect;
var TestUtils = React.addons.TestUtils;
var fakeAddContactButtonText = "Fake Add Contact";
var fakeAddContactButtonText = "Fake Add Contact Button";
var fakeAddContactTitleText = "Fake Add Contact Title";
var fakeEditContactButtonText = "Fake Edit Contact";
var fakeDoneButtonText = "Fake Done";
// The fake contacts array is copied each time mozLoop.contacts.getAll() is called.
@ -86,7 +87,9 @@ describe("loop.contacts", function() {
navigator.mozLoop = {
getStrings: function(entityName) {
var textContentValue = "fakeText";
if (entityName == "add_contact_button") {
if (entityName == "add_contact_title") {
textContentValue = fakeAddContactTitleText;
} else if (entityName == "add_contact_button") {
textContentValue = fakeAddContactButtonText;
} else if (entityName == "edit_contact_title") {
textContentValue = fakeEditContactButtonText;
@ -400,7 +403,7 @@ describe("loop.contacts", function() {
var header = view.getDOMNode().querySelector("header");
expect(header).to.not.equal(null);
expect(header.textContent).to.eql(fakeAddContactButtonText);
expect(header.textContent).to.eql(fakeAddContactTitleText);
});
it("should render name input", function() {

13
browser/components/loop/ui/ui-showcase.js
View File

@ -18,6 +18,7 @@
var AvailabilityDropdown = loop.panel.AvailabilityDropdown;
var PanelView = loop.panel.PanelView;
var SignInRequestView = loop.panel.SignInRequestView;
var ContactDetailsForm = loop.contacts.ContactDetailsForm;
var ContactDropdown = loop.contacts.ContactDropdown;
var ContactDetail = loop.contacts.ContactDetail;
// 1.2. Conversation Window
@ -787,6 +788,18 @@
notifications: new loop.shared.models.NotificationCollection([{level: "error", message: "Import error"}]),
roomStore: roomStore,
selectedTab: "contacts"})
),
React.createElement(FramedExample, {cssClass: "fx-embedded-panel", dashed: true, height: 400,
summary: "Contact Form - Add", width: 332},
React.createElement("div", {className: "panel"},
React.createElement(PanelView, {client: mockClient,
dispatcher: dispatcher,
mozLoop: mockMozLoopLoggedIn,
notifications: notifications,
roomStore: roomStore,
selectedTab: "contacts_add",
userProfile: {email: "test@example.com"}})
)
)
),

13
browser/components/loop/ui/ui-showcase.jsx
View File

@ -18,6 +18,7 @@
var AvailabilityDropdown = loop.panel.AvailabilityDropdown;
var PanelView = loop.panel.PanelView;
var SignInRequestView = loop.panel.SignInRequestView;
var ContactDetailsForm = loop.contacts.ContactDetailsForm;
var ContactDropdown = loop.contacts.ContactDropdown;
var ContactDetail = loop.contacts.ContactDetail;
// 1.2. Conversation Window
@ -788,6 +789,18 @@
roomStore={roomStore}
selectedTab="contacts" />
</Example>
<FramedExample cssClass="fx-embedded-panel" dashed={true} height={400}
summary="Contact Form - Add" width={332}>
<div className="panel">
<PanelView client={mockClient}
dispatcher={dispatcher}
mozLoop={mockMozLoopLoggedIn}
notifications={notifications}
roomStore={roomStore}
selectedTab="contacts_add"
userProfile={{email: "test@example.com"}} />
</div>
</FramedExample>
</Section>
<Section name="Availability Dropdown">

14
browser/components/sessionstore/SessionStorage.jsm
View File

@ -9,6 +9,7 @@ this.EXPORTED_SYMBOLS = ["SessionStorage"];
const Cu = Components.utils;
const Ci = Components.interfaces;
Cu.import("resource://gre/modules/BrowserUtils.jsm");
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@ -72,9 +73,9 @@ let SessionStorageInternal = {
return;
}
// Get the root domain of the current history entry
// and use that as a key for the per-host storage data.
let origin = principal.jarPrefix + principal.originNoSuffix;
// Get the origin of the current history entry
// and use that as a key for the per-principal storage data.
let origin = principal.origin;
if (visitedOrigins.has(origin)) {
// Don't read a host twice.
return;
@ -102,10 +103,9 @@ let SessionStorageInternal = {
* {"example.com": {"key": "value", "my_number": 123}}
*/
restore: function (aDocShell, aStorageData) {
for (let host of Object.keys(aStorageData)) {
let data = aStorageData[host];
let uri = Services.io.newURI(host, null, null);
let principal = Services.scriptSecurityManager.getDocShellCodebasePrincipal(uri, aDocShell);
for (let origin of Object.keys(aStorageData)) {
let data = aStorageData[origin];
let principal = BrowserUtils.principalFromOrigin(origin);
let storageManager = aDocShell.QueryInterface(Ci.nsIDOMStorageManager);
let window = aDocShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindow);

43
browser/devtools/animationinspector/test/browser_animation_target_highlight_select.js
View File

@ -19,19 +19,14 @@ add_task(function*() {
function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
info("Select the simple animated node");
yield selectNode(".animated", inspector);
// Make sure to wait for the target-retrieved event if the nodeFront hasn't
// yet been retrieved by the TargetNodeComponent.
let targetNodeComponent;
if (isNewUI) {
targetNodeComponent = panel.animationsTimelineComponent.targetNodes[0];
} else {
targetNodeComponent = panel.playerWidgets[0].targetNodeComponent;
}
if (!targetNodeComponent.nodeFront) {
yield targetNodeComponent.once("target-retrieved");
}
let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
yield selectNode(".animated", inspector);
yield onPanelUpdated;
let targets = yield waitForAllAnimationTargets(panel);
// Arbitrary select the first one
let targetNodeComponent = targets[0];
info("Retrieve the part of the widget that highlights the node on hover");
let highlightingEl = targetNodeComponent.previewEl;
@ -42,6 +37,12 @@ function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
highlightingEl.ownerDocument.defaultView);
let nodeFront = yield onHighlight;
// Do not forget to mouseout, otherwise we get random mouseover event
// when selecting another node, which triggers some requests in animation
// inspector
EventUtils.synthesizeMouse(highlightingEl, 10, 5, {type: "mouseout"},
highlightingEl.ownerDocument.defaultView);
ok(true, "The node-highlight event was fired");
is(targetNodeComponent.nodeFront, nodeFront,
"The highlighted node is the one stored on the animation widget");
@ -53,23 +54,17 @@ function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
"The highlighted node has the correct class");
info("Select the body node in order to have the list of all animations");
onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
yield selectNode("body", inspector);
yield onPanelUpdated;
// Make sure to wait for the target-retrieved event if the nodeFront hasn't
// yet been retrieved by the TargetNodeComponent.
if (isNewUI) {
targetNodeComponent = panel.animationsTimelineComponent.targetNodes[0];
} else {
targetNodeComponent = panel.playerWidgets[0].targetNodeComponent;
}
if (!targetNodeComponent.nodeFront) {
yield targetNodeComponent.once("target-retrieved");
}
targets = yield waitForAllAnimationTargets(panel);
targetNodeComponent = targets[0];
info("Click on the first animation widget's selector icon and wait for the " +
"selection to change");
let onSelection = inspector.selection.once("new-node-front");
let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
let selectIconEl = targetNodeComponent.selectNodeEl;
EventUtils.sendMouseEvent({type: "click"}, selectIconEl,
selectIconEl.ownerDocument.defaultView);
@ -79,4 +74,6 @@ function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
"The selected node is the one stored on the animation widget");
yield onPanelUpdated;
yield waitForAllAnimationTargets(panel);
}

23
browser/devtools/animationinspector/test/head.js
View File

@ -462,3 +462,26 @@ let getAnimationPlayerState = Task.async(function*(selector, animationIndex=0) {
function isNodeVisible(node) {
return !!node.getClientRects().length;
}
/**
* Wait for all AnimationTargetNode instances to be fully loaded
* (fetched their related actor and rendered), and return them.
* @param {AnimationsPanel} panel
* @return {Array} all AnimationTargetNode instances
*/
let waitForAllAnimationTargets = Task.async(function*(panel) {
let targets = [];
if (panel.animationsTimelineComponent) {
targets = targets.concat(panel.animationsTimelineComponent.targetNodes);
}
if (panel.playerWidgets) {
targets = targets.concat(panel.playerWidgets.map(w => w.targetNodeComponent));
}
yield promise.all(targets.map(t => {
if (!t.nodeFront) {
return t.once("target-retrieved");
}
return false;
}));
return targets;
});

80
browser/devtools/framework/toolbox.js
View File

@ -1743,52 +1743,52 @@ Toolbox.prototype = {
* Returns a promise that resolves when the fronts are destroyed
*/
destroyInspector: function() {
if (this._destroying) {
return this._destroying;
if (this._destroyingInspector) {
return this._destroyingInspector;
}
if (!this._inspector) {
return promise.resolve();
}
return this._destroyingInspector = Task.spawn(function*() {
if (!this._inspector) {
return;
}
let outstanding = () => {
return Task.spawn(function*() {
yield this.highlighterUtils.stopPicker();
yield this._inspector.destroy();
if (this._highlighter) {
// Note that if the toolbox is closed, this will work fine, but will fail
// in case the browser is closed and will trigger a noSuchActor message.
// We ignore the promise that |_hideBoxModel| returns, since we should still
// proceed with the rest of destruction if it fails.
// FF42+ now does the cleanup from the actor.
if (!this.highlighter.traits.autoHideOnDestroy) {
this.highlighterUtils.unhighlight();
}
yield this._highlighter.destroy();
}
if (this._selection) {
this._selection.destroy();
// Releasing the walker (if it has been created)
// This can fail, but in any case, we want to continue destroying the
// inspector/highlighter/selection
// FF42+: Inspector actor starts managing Walker actor and auto destroy it.
if (this._walker && !this.walker.traits.autoReleased) {
try {
yield this._walker.release();
} catch(e) {}
}
yield this.highlighterUtils.stopPicker();
yield this._inspector.destroy();
if (this._highlighter) {
// Note that if the toolbox is closed, this will work fine, but will fail
// in case the browser is closed and will trigger a noSuchActor message.
// We ignore the promise that |_hideBoxModel| returns, since we should still
// proceed with the rest of destruction if it fails.
// FF42+ now does the cleanup from the actor.
if (!this.highlighter.traits.autoHideOnDestroy) {
this.highlighterUtils.unhighlight();
}
yield this._highlighter.destroy();
}
if (this._selection) {
this._selection.destroy();
}
if (this.walker) {
this.walker.off("highlighter-ready", this._highlighterReady);
this.walker.off("highlighter-hide", this._highlighterHidden);
}
if (this.walker) {
this.walker.off("highlighter-ready", this._highlighterReady);
this.walker.off("highlighter-hide", this._highlighterHidden);
}
this._inspector = null;
this._highlighter = null;
this._selection = null;
this._walker = null;
}.bind(this));
};
// Releasing the walker (if it has been created)
// This can fail, but in any case, we want to continue destroying the
// inspector/highlighter/selection
let walker = (this._destroying = this._walker) ?
this._walker.release() :
promise.resolve();
return walker.then(outstanding, outstanding);
this._inspector = null;
this._highlighter = null;
this._selection = null;
this._walker = null;
}.bind(this));
},
/**

255
browser/devtools/styleinspector/computed-view.js
View File

@ -19,8 +19,10 @@ const {OutputParser} = require("devtools/output-parser");
const {PrefObserver, PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
loader.lazyRequireGetter(this, "overlays", "devtools/styleinspector/style-inspector-overlays");
loader.lazyRequireGetter(this, "StyleInspectorMenu", "devtools/styleinspector/style-inspector-menu");
loader.lazyRequireGetter(this, "overlays",
"devtools/styleinspector/style-inspector-overlays");
loader.lazyRequireGetter(this, "StyleInspectorMenu",
"devtools/styleinspector/style-inspector-menu");
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@ -35,11 +37,11 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
* Helper for long-running processes that should yield occasionally to
* the mainloop.
*
* @param {Window} aWin
* @param {Window} win
* Timeouts will be set on this window when appropriate.
* @param {Generator} aGenerator
* @param {Generator} generator
* Will iterate this generator.
* @param {object} aOptions
* @param {Object} options
* Options for the update process:
* onItem {function} Will be called with the value of each iteration.
* onBatch {function} Will be called after each batch of iterations,
@ -47,17 +49,15 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
* onDone {function} Will be called when iteration is complete.
* onCancel {function} Will be called if the process is canceled.
* threshold {int} How long to process before yielding, in ms.
*
* @constructor
*/
function UpdateProcess(aWin, aGenerator, aOptions) {
this.win = aWin;
this.iter = _Iterator(aGenerator);
this.onItem = aOptions.onItem || function() {};
this.onBatch = aOptions.onBatch || function() {};
this.onDone = aOptions.onDone || function() {};
this.onCancel = aOptions.onCancel || function() {};
this.threshold = aOptions.threshold || 45;
function UpdateProcess(win, generator, options) {
this.win = win;
this.iter = _Iterator(generator);
this.onItem = options.onItem || function() {};
this.onBatch = options.onBatch || function() {};
this.onDone = options.onDone || function() {};
this.onCancel = options.onCancel || function() {};
this.threshold = options.threshold || 45;
this.canceled = false;
}
@ -121,13 +121,13 @@ UpdateProcess.prototype = {
* sorted by style. There should be one instance of CssComputedView
* per style display (of which there will generally only be one).
*
* @param {Inspector} inspector toolbox panel
* @param {Document} document The document that will contain the computed view.
* @param {Inspector} inspector
* Inspector toolbox panel
* @param {Document} document
* The document that will contain the computed view.
* @param {PageStyleFront} pageStyle
* Front for the page style actor that will be providing
* the style information.
*
* @constructor
*/
function CssComputedView(inspector, document, pageStyle) {
this.inspector = inspector;
@ -153,14 +153,16 @@ function CssComputedView(inspector, document, pageStyle) {
this._onFilterKeyPress = this._onFilterKeyPress.bind(this);
this._onClearSearch = this._onClearSearch.bind(this);
this._onIncludeBrowserStyles = this._onIncludeBrowserStyles.bind(this);
this._onFilterTextboxContextMenu = this._onFilterTextboxContextMenu.bind(this);
this._onFilterTextboxContextMenu =
this._onFilterTextboxContextMenu.bind(this);
let doc = this.styleDocument;
this.root = doc.getElementById("root");
this.element = doc.getElementById("propertyContainer");
this.searchField = doc.getElementById("computedview-searchbox");
this.searchClearButton = doc.getElementById("computedview-searchinput-clear");
this.includeBrowserStylesCheckbox = doc.getElementById("browser-style-checkbox");
this.includeBrowserStylesCheckbox =
doc.getElementById("browser-style-checkbox");
this.styleDocument.addEventListener("keypress", this._onKeypress);
this.styleDocument.addEventListener("mousedown", this.focusWindow);
@ -169,7 +171,8 @@ function CssComputedView(inspector, document, pageStyle) {
this.element.addEventListener("contextmenu", this._onContextMenu);
this.searchField.addEventListener("input", this._onFilterStyles);
this.searchField.addEventListener("keypress", this._onFilterKeyPress);
this.searchField.addEventListener("contextmenu", this._onFilterTextboxContextMenu);
this.searchField.addEventListener("contextmenu",
this._onFilterTextboxContextMenu);
this.searchClearButton.addEventListener("click", this._onClearSearch);
this.includeBrowserStylesCheckbox.addEventListener("command",
this._onIncludeBrowserStyles);
@ -205,15 +208,17 @@ function CssComputedView(inspector, document, pageStyle) {
/**
* Memoized lookup of a l10n string from a string bundle.
* @param {string} aName The key to lookup.
* @returns A localized version of the given key.
*
* @param {String} name
* The key to lookup.
* @returns {String} localized version of the given key.
*/
CssComputedView.l10n = function(aName) {
CssComputedView.l10n = function(name) {
try {
return CssComputedView._strings.GetStringFromName(aName);
return CssComputedView._strings.GetStringFromName(name);
} catch (ex) {
Services.console.logStringMessage("Error reading '" + aName + "'");
throw new Error("l10n error with " + aName);
Services.console.logStringMessage("Error reading '" + name + "'");
throw new Error("l10n error with " + name);
}
};
@ -252,8 +257,8 @@ CssComputedView.prototype = {
},
_handlePrefChange: function(event, data) {
if (this._computed && (data.pref == "devtools.defaultColorUnit" ||
data.pref == PREF_ORIG_SOURCES)) {
if (this._computed && (data.pref === "devtools.defaultColorUnit" ||
data.pref === PREF_ORIG_SOURCES)) {
this.refreshPanel();
}
},
@ -262,11 +267,12 @@ CssComputedView.prototype = {
* Update the view with a new selected element. The CssComputedView panel
* will show the style information for the given element.
*
* @param {NodeFront} aElement The highlighted node to get styles for.
* @param {NodeFront} element
* The highlighted node to get styles for.
* @returns a promise that will be resolved when highlighting is complete.
*/
selectElement: function(aElement) {
if (!aElement) {
selectElement: function(element) {
if (!element) {
this.viewedElement = null;
this.noResults.hidden = false;
@ -280,11 +286,11 @@ CssComputedView.prototype = {
return promise.resolve(undefined);
}
if (aElement === this.viewedElement) {
if (element === this.viewedElement) {
return promise.resolve(undefined);
}
this.viewedElement = aElement;
this.viewedElement = element;
this.refreshSourceFilter();
return this.refreshPanel();
@ -292,7 +298,9 @@ CssComputedView.prototype = {
/**
* Get the type of a given node in the computed-view
* @param {DOMNode} node The node which we want information about
*
* @param {DOMNode} node
* The node which we want information about
* @return {Object} The type information object contains the following props:
* - type {String} One of the VIEW_NODE_XXX_TYPE const in
* style-inspector-overlays
@ -393,9 +401,9 @@ CssComputedView.prototype = {
this._createViewsProcess = new UpdateProcess(
this.styleWindow, CssComputedView.propertyNames, {
onItem: (aPropertyName) => {
onItem: (propertyName) => {
// Per-item callback.
let propView = new PropertyView(this, aPropertyName);
let propView = new PropertyView(this, propertyName);
fragment.appendChild(propView.buildMain());
fragment.appendChild(propView.buildSelectorContainer());
@ -466,8 +474,8 @@ CssComputedView.prototype = {
let deferred = promise.defer();
this._refreshProcess = new UpdateProcess(
this.styleWindow, this.propertyViews, {
onItem: (aPropView) => {
aPropView.refresh();
onItem: (propView) => {
propView.refresh();
},
onDone: () => {
this._refreshProcess = null;
@ -476,7 +484,8 @@ CssComputedView.prototype = {
if (this.searchField.value.length > 0 && !this.numVisibleProperties) {
this.searchField.classList.add("devtools-style-searchbox-no-match");
} else {
this.searchField.classList.remove("devtools-style-searchbox-no-match");
this.searchField.classList
.remove("devtools-style-searchbox-no-match");
}
this.inspector.emit("computed-view-refreshed");
@ -492,7 +501,7 @@ CssComputedView.prototype = {
* Handle the keypress event in the computed view.
*/
_onKeypress: function(event) {
let isOSX = Services.appinfo.OS == "Darwin";
let isOSX = Services.appinfo.OS === "Darwin";
if (((isOSX && event.metaKey && !event.ctrlKey && !event.altKey) ||
(!isOSX && event.ctrlKey && !event.metaKey && !event.altKey)) &&
@ -504,10 +513,8 @@ CssComputedView.prototype = {
/**
* Called when the user enters a search term in the filter style search box.
*
* @param {Event} aEvent the DOM Event object.
*/
_onFilterStyles: function(aEvent) {
_onFilterStyles: function() {
let win = this.styleWindow;
if (this._filterChangedTimeout) {
@ -534,11 +541,11 @@ CssComputedView.prototype = {
* Handle the search box's keypress event. If the escape key is pressed,
* clear the search box field.
*/
_onFilterKeyPress: function(aEvent) {
if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE &&
_onFilterKeyPress: function(event) {
if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE &&
this._onClearSearch()) {
aEvent.preventDefault();
aEvent.stopPropagation();
event.preventDefault();
event.stopPropagation();
}
},
@ -572,10 +579,8 @@ CssComputedView.prototype = {
/**
* The change event handler for the includeBrowserStyles checkbox.
*
* @param {Event} aEvent the DOM Event object.
*/
_onIncludeBrowserStyles: function(aEvent) {
_onIncludeBrowserStyles: function() {
this.refreshSourceFilter();
this.refreshPanel();
},
@ -612,7 +617,8 @@ CssComputedView.prototype = {
// Here we build and cache a list of css properties supported by the browser
// We could use any element but let's use the main document's root element
let styles = this.styleWindow.getComputedStyle(this.styleDocument.documentElement);
let styles = this.styleWindow
.getComputedStyle(this.styleDocument.documentElement);
let mozProps = [];
for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
let prop = styles.item(i);
@ -651,10 +657,8 @@ CssComputedView.prototype = {
/**
* Focus the window on mousedown.
*
* @param event The event object
*/
focusWindow: function(event) {
focusWindow: function() {
let win = this.styleDocument.defaultView;
win.focus();
},
@ -679,13 +683,13 @@ CssComputedView.prototype = {
/**
* Callback for copy event. Copy selected text.
* @param {Event} event copy event object.
*
* @param {Event} event
* copy event object.
*/
_onCopy: function(event) {
this.copySelection();
if (event) {
event.preventDefault();
}
event.preventDefault();
},
/**
@ -759,7 +763,8 @@ CssComputedView.prototype = {
this.element.removeEventListener("contextmenu", this._onContextMenu);
this.searchField.removeEventListener("input", this._onFilterStyles);
this.searchField.removeEventListener("keypress", this._onFilterKeyPress);
this.searchField.removeEventListener("contextmenu", this._onFilterTextboxContextMenu);
this.searchField.removeEventListener("contextmenu",
this._onFilterTextboxContextMenu);
this.searchClearButton.removeEventListener("click", this._onClearSearch);
this.includeBrowserStylesCheckbox.removeEventListener("command",
this.includeBrowserStylesChanged);
@ -786,10 +791,11 @@ CssComputedView.prototype = {
}
};
function PropertyInfo(aTree, aName) {
this.tree = aTree;
this.name = aName;
function PropertyInfo(tree, name) {
this.tree = tree;
this.name = name;
}
PropertyInfo.prototype = {
get value() {
if (this.tree._computed) {
@ -802,19 +808,20 @@ PropertyInfo.prototype = {
/**
* A container to give easy access to property data from the template engine.
*
* @constructor
* @param {CssComputedView} aTree the CssComputedView instance we are working with.
* @param {string} aName the CSS property name for which this PropertyView
* instance will render the rules.
* @param {CssComputedView} tree
* The CssComputedView instance we are working with.
* @param {String} name
* The CSS property name for which this PropertyView
* instance will render the rules.
*/
function PropertyView(aTree, aName) {
this.tree = aTree;
this.name = aName;
this.getRTLAttr = aTree.getRTLAttr;
function PropertyView(tree, name) {
this.tree = tree;
this.name = name;
this.getRTLAttr = tree.getRTLAttr;
this.link = "https://developer.mozilla.org/CSS/" + aName;
this.link = "https://developer.mozilla.org/CSS/" + name;
this._propertyInfo = new PropertyInfo(aTree, aName);
this._propertyInfo = new PropertyInfo(tree, name);
}
PropertyView.prototype = {
@ -848,7 +855,7 @@ PropertyView.prototype = {
/**
* Get the computed style for the current property.
*
* @return {string} the computed style for the current property of the
* @return {String} the computed style for the current property of the
* currently highlighted element.
*/
get value() {
@ -884,8 +891,8 @@ PropertyView.prototype = {
let searchTerm = this.tree.searchField.value.toLowerCase();
let isValidSearchTerm = searchTerm.trim().length > 0;
if (isValidSearchTerm &&
this.name.toLowerCase().indexOf(searchTerm) == -1 &&
this.value.toLowerCase().indexOf(searchTerm) == -1) {
this.name.toLowerCase().indexOf(searchTerm) === -1 &&
this.value.toLowerCase().indexOf(searchTerm) === -1) {
return false;
}
@ -894,7 +901,8 @@ PropertyView.prototype = {
/**
* Returns the className that should be assigned to the propertyView.
* @return string
*
* @return {String}
*/
get propertyHeaderClassName() {
if (this.visible) {
@ -907,7 +915,8 @@ PropertyView.prototype = {
/**
* Returns the className that should be assigned to the propertyView content
* container.
* @return string
*
* @return {String}
*/
get propertyContentClassName() {
if (this.visible) {
@ -919,7 +928,8 @@ PropertyView.prototype = {
/**
* Build the markup for on computed style
* @return Element
*
* @return {Element}
*/
buildMain: function() {
let doc = this.tree.styleDocument;
@ -932,14 +942,14 @@ PropertyView.prototype = {
// Make it keyboard navigable
this.element.setAttribute("tabindex", "0");
this.onKeyDown = (aEvent) => {
this.onKeyDown = (event) => {
let keyEvent = Ci.nsIDOMKeyEvent;
if (aEvent.keyCode == keyEvent.DOM_VK_F1) {
if (event.keyCode === keyEvent.DOM_VK_F1) {
this.mdnLinkClick();
}
if (aEvent.keyCode == keyEvent.DOM_VK_RETURN ||
aEvent.keyCode == keyEvent.DOM_VK_SPACE) {
this.onMatchedToggle(aEvent);
if (event.keyCode === keyEvent.DOM_VK_RETURN ||
event.keyCode === keyEvent.DOM_VK_SPACE) {
this.onMatchedToggle(event);
}
};
this.element.addEventListener("keydown", this.onKeyDown, false);
@ -996,7 +1006,7 @@ PropertyView.prototype = {
this.element.className = this.propertyHeaderClassName;
this.element.nextElementSibling.className = this.propertyContentClassName;
if (this.prevViewedElement != this.tree.viewedElement) {
if (this.prevViewedElement !== this.tree.viewedElement) {
this._matchedSelectorViews = null;
this.prevViewedElement = this.tree.viewedElement;
}
@ -1112,8 +1122,8 @@ PropertyView.prototype = {
if (!this._matchedSelectorViews) {
this._matchedSelectorViews = [];
this._matchedSelectorResponse.forEach(
function(aSelectorInfo) {
let selectorView = new SelectorView(this.tree, aSelectorInfo);
function(selectorInfo) {
let selectorView = new SelectorView(this.tree, selectorInfo);
this._matchedSelectorViews.push(selectorView);
}, this);
}
@ -1136,29 +1146,30 @@ PropertyView.prototype = {
/**
* The action when a user expands matched selectors.
*
* @param {Event} aEvent Used to determine the class name of the targets click
* event.
* @param {Event} event
* Used to determine the class name of the targets click
* event.
*/
onMatchedToggle: function(aEvent) {
if (aEvent.shiftKey) {
onMatchedToggle: function(event) {
if (event.shiftKey) {
return;
}
this.matchedExpanded = !this.matchedExpanded;
this.refreshMatchedSelectors();
aEvent.preventDefault();
event.preventDefault();
},
/**
* The action when a user clicks on the MDN help link for a property.
*/
mdnLinkClick: function(aEvent) {
mdnLinkClick: function(event) {
let inspector = this.tree.inspector;
if (inspector.target.tab) {
let browserWin = inspector.target.tab.ownerDocument.defaultView;
browserWin.openUILinkIn(this.link, "tab");
}
aEvent.preventDefault();
event.preventDefault();
},
/**
@ -1169,7 +1180,8 @@ PropertyView.prototype = {
this.element.removeEventListener("keydown", this.onKeyDown, false);
this.element = null;
this.matchedExpander.removeEventListener("click", this.onMatchedToggle, false);
this.matchedExpander.removeEventListener("click", this.onMatchedToggle,
false);
this.matchedExpander = null;
this.nameNode.removeEventListener("click", this.onFocus, false);
@ -1182,12 +1194,14 @@ PropertyView.prototype = {
/**
* A container to give us easy access to display data from a CssRule
* @param CssComputedView aTree, the owning CssComputedView
* @param aSelectorInfo
*
* @param CssComputedView tree
* the owning CssComputedView
* @param selectorInfo
*/
function SelectorView(aTree, aSelectorInfo) {
this.tree = aTree;
this.selectorInfo = aSelectorInfo;
function SelectorView(tree, selectorInfo) {
this.tree = tree;
this.selectorInfo = selectorInfo;
this._cacheStatusNames();
this.openStyleEditor = this.openStyleEditor.bind(this);
@ -1216,8 +1230,6 @@ SelectorView.prototype = {
* These statuses are localized inside the styleinspector.properties string
* bundle.
* @see css-logic.js - the CssLogic.STATUS array.
*
* @return {void}
*/
_cacheStatusNames: function() {
if (SelectorView.STATUS_NAMES.length) {
@ -1288,7 +1300,7 @@ SelectorView.prototype = {
*/
updateSourceLink: function() {
return this.updateSource().then((oldSource) => {
if (oldSource != this.source && this.tree.element) {
if (oldSource !== this.source && this.tree.element) {
let selector = '[sourcelocation="' + oldSource + '"]';
let link = this.tree.element.querySelector(selector);
if (link) {
@ -1314,13 +1326,13 @@ SelectorView.prototype = {
let showOrig = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
if (showOrig && rule.type != ELEMENT_STYLE) {
if (showOrig && rule.type !== ELEMENT_STYLE) {
let deferred = promise.defer();
// set as this first so we show something while we're fetching
this.source = CssLogic.shortSource(this.sheet) + ":" + rule.line;
rule.getOriginalLocation().then(({href, line, column}) => {
rule.getOriginalLocation().then(({href, line}) => {
let oldSource = this.source;
this.source = CssLogic.shortSource({href: href}) + ":" + line;
deferred.resolve(oldSource);
@ -1337,9 +1349,9 @@ SelectorView.prototype = {
/**
* Open the style editor if the RETURN key was pressed.
*/
maybeOpenStyleEditor: function(aEvent) {
maybeOpenStyleEditor: function(event) {
let keyEvent = Ci.nsIDOMKeyEvent;
if (aEvent.keyCode == keyEvent.DOM_VK_RETURN) {
if (event.keyCode === keyEvent.DOM_VK_RETURN) {
this.openStyleEditor();
}
},
@ -1351,10 +1363,8 @@ SelectorView.prototype = {
*
* We can only view stylesheets contained in document.styleSheets inside the
* style editor.
*
* @param aEvent The click event
*/
openStyleEditor: function(aEvent) {
openStyleEditor: function() {
let inspector = this.tree.inspector;
let rule = this.selectorInfo.rule;
@ -1374,6 +1384,7 @@ SelectorView.prototype = {
if (Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
location = rule.getOriginalLocation();
}
location.then(({source, href, line, column}) => {
let target = inspector.target;
if (ToolDefinitions.styleEditor.isTargetSupported(target)) {
@ -1389,27 +1400,27 @@ SelectorView.prototype = {
/**
* Create a child element with a set of attributes.
*
* @param {Element} aParent
* @param {Element} parent
* The parent node.
* @param {string} aTag
* @param {String} tag
* The tag name.
* @param {object} aAttributes
* @param {Object} attributes
* A set of attributes to set on the node.
*/
function createChild(aParent, aTag, aAttributes={}) {
let elt = aParent.ownerDocument.createElementNS(HTML_NS, aTag);
for (let attr in aAttributes) {
if (aAttributes.hasOwnProperty(attr)) {
function createChild(parent, tag, attributes={}) {
let elt = parent.ownerDocument.createElementNS(HTML_NS, tag);
for (let attr in attributes) {
if (attributes.hasOwnProperty(attr)) {
if (attr === "textContent") {
elt.textContent = aAttributes[attr];
elt.textContent = attributes[attr];
} else if (attr === "child") {
elt.appendChild(aAttributes[attr]);
elt.appendChild(attributes[attr]);
} else {
elt.setAttribute(attr, aAttributes[attr]);
elt.setAttribute(attr, attributes[attr]);
}
}
}
aParent.appendChild(elt);
parent.appendChild(elt);
return elt;
}

2
browser/devtools/styleinspector/computedview.xhtml
View File

@ -37,7 +37,7 @@
window.setPanel = function(panel, iframe) {
let {require} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
let inspector = require("devtools/styleinspector/style-inspector");
this.computedview = new inspector.ComputedViewTool(panel, window, iframe);
this.computedview = new inspector.ComputedViewTool(panel, window);
}
window.onunload = function() {
if (this.computedview) {

15
browser/devtools/styleinspector/css-parsing-utils.js
View File

@ -17,11 +17,11 @@ const SELECTOR_PSEUDO_CLASS = exports.SELECTOR_PSEUDO_CLASS = 3;
* For example, parseDeclarations("width: 1px; height: 1px") would return
* [{name:"width", value: "1px"}, {name: "height", "value": "1px"}]
*
* The input string is assumed to only contain declarations so { and } characters
* will be treated as part of either the property or value, depending where it's
* found.
* The input string is assumed to only contain declarations so { and }
* characters will be treated as part of either the property or value,
* depending where it's found.
*
* @param {string} inputString
* @param {String} inputString
* An input string of CSS
* @return {Array} an array of objects with the following signature:
* [{"name": string, "value": string, "priority": string}, ...]
@ -106,7 +106,7 @@ function parseDeclarations(inputString) {
* (2) SELECTOR_ELEMENT
* (3) SELECTOR_PSEUDO_CLASS
*
* @param {string} value
* @param {String} value
* The CSS selector text.
* @return {Array} an array of objects with the following signature:
* [{ "value": string, "type": integer }, ...]
@ -201,8 +201,9 @@ function parsePseudoClassesAndAttributes(value) {
* Expects a single CSS value to be passed as the input and parses the value
* and priority.
*
* @param {string} value The value from the text editor.
* @return {object} an object with 'value' and 'priority' properties.
* @param {String} value
* The value from the text editor.
* @return {Object} an object with 'value' and 'priority' properties.
*/
function parseSingleValue(value) {
let declaration = parseDeclarations("a: " + value + ";")[0];

8
browser/devtools/styleinspector/cssruleview.xhtml
View File

@ -8,25 +8,21 @@
%inspectorDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
class="theme-sidebar">
<head>
<title>&ruleViewTitle;</title>
<link rel="stylesheet" href="chrome://global/skin/global.css" type="text/css"/>
<link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
<link rel="stylesheet" href="chrome://browser/content/devtools/ruleview.css" type="text/css"/>
<link rel="stylesheet" href="chrome://browser/skin/devtools/ruleview.css" type="text/css"/>
<script type="application/javascript;version=1.8" src="theme-switching.js"/>
<script type="application/javascript;version=1.8">
window.setPanel = function(panel, iframe) {
let {require} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
let inspector = require("devtools/styleinspector/style-inspector");
this.ruleview = new inspector.RuleViewTool(panel, window, iframe);
this.ruleview = new inspector.RuleViewTool(panel, window);
}
window.onunload = function() {
if (this.ruleview) {
@ -36,7 +32,6 @@
</script>
</head>
<body>
<div id="root" class="devtools-monospace">
<div id="ruleview-toolbar" class="devtools-toolbar">
<div class="devtools-searchbox">
@ -57,6 +52,5 @@
<div id="ruleview-container" class="ruleview devtools-monospace">
</div>
</body>
</html>

589
browser/devtools/styleinspector/rule-view.js
View File

File diff suppressed because it is too large Load Diff

56
browser/devtools/styleinspector/style-inspector-menu.js
View File

@ -11,21 +11,27 @@
const {Cc, Ci, Cu} = require("chrome");
const {PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
loader.lazyRequireGetter(this, "overlays", "devtools/styleinspector/style-inspector-overlays");
loader.lazyRequireGetter(this, "overlays",
"devtools/styleinspector/style-inspector-overlays");
loader.lazyImporter(this, "Services", "resource://gre/modules/Services.jsm");
loader.lazyServiceGetter(this, "clipboardHelper", "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
loader.lazyServiceGetter(this, "clipboardHelper",
"@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
loader.lazyGetter(this, "_strings", () => {
return Services.strings
.createBundle("chrome://global/locale/devtools/styleinspector.properties");
});
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
const PREF_ENABLE_MDN_DOCS_TOOLTIP = "devtools.inspector.mdnDocsTooltip.enabled";
const PREF_ENABLE_MDN_DOCS_TOOLTIP =
"devtools.inspector.mdnDocsTooltip.enabled";
/**
* Style inspector context menu
* @param {RuleView|ComputedView} view RuleView or ComputedView instance controlling this menu
* @param {Object} options menu configuration
*
* @param {RuleView|ComputedView} view
* RuleView or ComputedView instance controlling this menu
* @param {Object} options
* Option menu configuration
*/
function StyleInspectorMenu(view, options) {
this.view = view;
@ -189,7 +195,8 @@ StyleInspectorMenu.prototype = {
item.setAttribute("label", _strings.GetStringFromName(attributes.label));
if (attributes.accesskey) {
item.setAttribute("accesskey", _strings.GetStringFromName(attributes.accesskey));
item.setAttribute("accesskey",
_strings.GetStringFromName(attributes.accesskey));
}
item.addEventListener("command", attributes.command);
@ -217,11 +224,14 @@ StyleInspectorMenu.prototype = {
let showOrig = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
this.menuitemSources.setAttribute("checked", showOrig);
let enableMdnDocsTooltip = Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
this.menuitemShowMdnDocs.hidden = !(enableMdnDocsTooltip && this._isPropertyName());
let enableMdnDocsTooltip =
Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
this.menuitemShowMdnDocs.hidden = !(enableMdnDocsTooltip &&
this._isPropertyName());
this.menuitemAddRule.hidden = !this.isRuleView;
this.menuitemAddRule.disabled = !(this.isRuleView && !this.inspector.selection.isAnonymousNode());
this.menuitemAddRule.disabled = !this.isRuleView ||
this.inspector.selection.isAnonymousNode();
},
/**
@ -326,6 +336,7 @@ StyleInspectorMenu.prototype = {
/**
* Check if the current node (clicked node) is an image URL
*
* @return {Boolean} true if the node is an image url
*/
_isImageUrl: function() {
@ -338,7 +349,9 @@ StyleInspectorMenu.prototype = {
/**
* Get the DOM Node container for the current popupNode.
* If popupNode is a textNode, return the parent node, otherwise return popupNode itself.
* If popupNode is a textNode, return the parent node, otherwise return
* popupNode itself.
*
* @return {DOMNode}
*/
_getClickedNode: function() {
@ -364,7 +377,7 @@ StyleInspectorMenu.prototype = {
/**
* Copy the most recently selected color value to clipboard.
*/
_onCopy: function(event) {
_onCopy: function() {
this.view.copySelection(this.styleDocument.popupNode);
},
@ -387,7 +400,8 @@ StyleInspectorMenu.prototype = {
},
/**
* Retrieve the image data for the selected image url and copy it to the clipboard
* Retrieve the image data for the selected image url and copy it to the
* clipboard
*/
_onCopyImageDataUrl: Task.async(function*() {
if (!this._clickedNodeInfo) {
@ -401,7 +415,8 @@ StyleInspectorMenu.prototype = {
let data = yield inspectorFront.getImageDataFromURL(imageUrl);
message = yield data.data.string();
} catch (e) {
message = _strings.GetStringFromName("styleinspector.copyImageDataUrlError");
message =
_strings.GetStringFromName("styleinspector.copyImageDataUrlError");
}
clipboardHelper.copyString(message);
@ -473,7 +488,8 @@ StyleInspectorMenu.prototype = {
* Copy the rule of the current clicked node.
*/
_onCopyRule: function() {
let ruleEditor = this.styleDocument.popupNode.parentNode.offsetParent._ruleEditor;
let ruleEditor =
this.styleDocument.popupNode.parentNode.offsetParent._ruleEditor;
let rule = ruleEditor.rule;
clipboardHelper.copyString(rule.stringifyRule());
},
@ -517,11 +533,15 @@ StyleInspectorMenu.prototype = {
this._removeContextMenuItem("menuitemAddRule", this._onAddNewRule);
this._removeContextMenuItem("menuitemCopy", this._onCopy);
this._removeContextMenuItem("menuitemCopyColor", this._onCopyColor);
this._removeContextMenuItem("menuitemCopyImageDataUrl", this._onCopyImageDataUrl);
this._removeContextMenuItem("menuitemCopyImageDataUrl",
this._onCopyImageDataUrl);
this._removeContextMenuItem("menuitemCopyLocation", this._onCopyLocation);
this._removeContextMenuItem("menuitemCopyPropertyDeclaration", this._onCopyPropertyDeclaration);
this._removeContextMenuItem("menuitemCopyPropertyName", this._onCopyPropertyName);
this._removeContextMenuItem("menuitemCopyPropertyValue", this._onCopyPropertyValue);
this._removeContextMenuItem("menuitemCopyPropertyDeclaration",
this._onCopyPropertyDeclaration);
this._removeContextMenuItem("menuitemCopyPropertyName",
this._onCopyPropertyName);
this._removeContextMenuItem("menuitemCopyPropertyValue",
this._onCopyPropertyValue);
this._removeContextMenuItem("menuitemCopyRule", this._onCopyRule);
this._removeContextMenuItem("menuitemCopySelector", this._onCopySelector);
this._removeContextMenuItem("menuitemCopyUrl", this._onCopyUrl);

45
browser/devtools/styleinspector/style-inspector-overlays.js
View File

@ -20,9 +20,8 @@ const {
CssDocsTooltip,
SwatchFilterTooltip
} = require("devtools/shared/widgets/Tooltip");
const {CssLogic} = require("devtools/styleinspector/css-logic");
const EventEmitter = require("devtools/toolkit/event-emitter");
const {Promise:promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
Cu.import("resource://gre/modules/Task.jsm");
Cu.import("resource://gre/modules/Services.jsm");
@ -41,8 +40,9 @@ const VIEW_NODE_LOCATION_TYPE = exports.VIEW_NODE_LOCATION_TYPE = 5;
/**
* Manages all highlighters in the style-inspector.
* @param {CssRuleView|CssComputedView} view Either the rule-view or computed-view
* panel
*
* @param {CssRuleView|CssComputedView} view
* Either the rule-view or computed-view panel
*/
function HighlightersOverlay(view) {
this.view = view;
@ -60,7 +60,8 @@ function HighlightersOverlay(view) {
// Only initialize the overlay if at least one of the highlighter types is
// supported
this.supportsHighlighters = this.highlighterUtils.supportsCustomHighlighters();
this.supportsHighlighters =
this.highlighterUtils.supportsCustomHighlighters();
EventEmitter.decorate(this);
}
@ -138,13 +139,14 @@ HighlightersOverlay.prototype = {
}
},
_onMouseLeave: function(event) {
_onMouseLeave: function() {
this._lastHovered = null;
this._hideCurrent();
},
/**
* Is the current hovered node a css transform property value in the rule-view
*
* @param {Object} nodeInfo
* @return {Boolean}
*/
@ -160,6 +162,7 @@ HighlightersOverlay.prototype = {
/**
* Is the current hovered node a css transform property value in the
* computed-view
*
* @param {Object} nodeInfo
* @return {Boolean}
*/
@ -231,8 +234,9 @@ HighlightersOverlay.prototype = {
/**
* Manages all tooltips in the style-inspector.
* @param {CssRuleView|CssComputedView} view Either the rule-view or computed-view
* panel
*
* @param {CssRuleView|CssComputedView} view
* Either the rule-view or computed-view panel
*/
function TooltipsOverlay(view) {
this.view = view;
@ -263,21 +267,23 @@ TooltipsOverlay.prototype = {
return;
}
let panelDoc = this.view.inspector.panelDoc;
// Image, fonts, ... preview tooltip
this.previewTooltip = new Tooltip(this.view.inspector.panelDoc);
this.previewTooltip = new Tooltip(panelDoc);
this.previewTooltip.startTogglingOnHover(this.view.element,
this._onPreviewTooltipTargetHover.bind(this));
// MDN CSS help tooltip
this.cssDocs = new CssDocsTooltip(this.view.inspector.panelDoc);
this.cssDocs = new CssDocsTooltip(panelDoc);
if (this.isRuleView) {
// Color picker tooltip
this.colorPicker = new SwatchColorPickerTooltip(this.view.inspector.panelDoc);
this.colorPicker = new SwatchColorPickerTooltip(panelDoc);
// Cubic bezier tooltip
this.cubicBezier = new SwatchCubicBezierTooltip(this.view.inspector.panelDoc);
this.cubicBezier = new SwatchCubicBezierTooltip(panelDoc);
// Filter editor tooltip
this.filterEditor = new SwatchFilterTooltip(this.view.inspector.panelDoc);
this.filterEditor = new SwatchFilterTooltip(panelDoc);
}
this._isStarted = true;
@ -317,15 +323,17 @@ TooltipsOverlay.prototype = {
/**
* Given a hovered node info, find out which type of tooltip should be shown,
* if any
*
* @param {Object} nodeInfo
* @return {String} The tooltip type to be shown, or null
*/
_getTooltipType: function({type, value:prop}) {
_getTooltipType: function({type, value: prop}) {
let tooltipType = null;
let inspector = this.view.inspector;
// Image preview tooltip
if (type === VIEW_NODE_IMAGE_URL_TYPE && inspector.hasUrlToImageDataResolver) {
if (type === VIEW_NODE_IMAGE_URL_TYPE &&
inspector.hasUrlToImageDataResolver) {
tooltipType = TOOLTIP_IMAGE_TYPE;
}
@ -341,10 +349,11 @@ TooltipsOverlay.prototype = {
},
/**
* Executed by the tooltip when the pointer hovers over an element of the view.
* Used to decide whether the tooltip should be shown or not and to actually
* put content in it.
* Executed by the tooltip when the pointer hovers over an element of the
* view. Used to decide whether the tooltip should be shown or not and to
* actually put content in it.
* Checks if the hovered target is a css value we support tooltips for.
*
* @param {DOMNode} target The currently hovered node
*/
_onPreviewTooltipTargetHover: function(target) {

41
browser/devtools/styleinspector/style-inspector.js
View File

@ -4,22 +4,29 @@
* 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/. */
/* globals RuleView, ComputedView, gDevTools */
"use strict";
const {Cc, Cu, Ci} = require("chrome");
const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
const {Tools} = require("main");
Cu.import("resource://gre/modules/Services.jsm");
const {PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
loader.lazyGetter(this, "gDevTools", () => Cu.import("resource:///modules/devtools/gDevTools.jsm", {}).gDevTools);
loader.lazyGetter(this, "RuleView", () => require("devtools/styleinspector/rule-view"));
loader.lazyGetter(this, "ComputedView", () => require("devtools/styleinspector/computed-view"));
loader.lazyGetter(this, "gDevTools", () =>
Cu.import("resource:///modules/devtools/gDevTools.jsm", {}).gDevTools);
loader.lazyGetter(this, "RuleView",
() => require("devtools/styleinspector/rule-view"));
loader.lazyGetter(this, "ComputedView",
() => require("devtools/styleinspector/computed-view"));
loader.lazyGetter(this, "_strings", () => Services.strings
.createBundle("chrome://global/locale/devtools/styleinspector.properties"));
// This module doesn't currently export any symbols directly, it only
// registers inspector tools.
function RuleViewTool(inspector, window, iframe) {
function RuleViewTool(inspector, window) {
this.inspector = inspector;
this.document = window.document;
@ -47,7 +54,6 @@ function RuleViewTool(inspector, window, iframe) {
this.onSelected();
}
RuleViewTool.prototype = {
isSidebarActive: function() {
if (!this.view) {
@ -59,12 +65,14 @@ RuleViewTool.prototype = {
onSelected: function(event) {
// Ignore the event if the view has been destroyed, or if it's inactive.
// But only if the current selection isn't null. If it's been set to null,
// let the update go through as this is needed to empty the view on navigation.
// let the update go through as this is needed to empty the view on
// navigation.
if (!this.view) {
return;
}
let isInactive = !this.isSidebarActive() && this.inspector.selection.nodeFront;
let isInactive = !this.isSidebarActive() &&
this.inspector.selection.nodeFront;
if (isInactive) {
return;
}
@ -79,7 +87,8 @@ RuleViewTool.prototype = {
if (!event || event == "new-node-front") {
let done = this.inspector.updating("rule-view");
this.view.selectElement(this.inspector.selection.nodeFront).then(done, done);
this.view.selectElement(this.inspector.selection.nodeFront)
.then(done, done);
}
},
@ -109,7 +118,6 @@ RuleViewTool.prototype = {
// Chrome stylesheets are not listed in the style editor, so show
// these sheets in the view source window instead.
if (!sheet || sheet.isSystem) {
let contentDoc = this.inspector.selection.document;
let href = rule.nodeHref || rule.href;
let toolbox = gDevTools.getToolbox(this.inspector.target);
toolbox.viewSource(href, rule.line);
@ -129,7 +137,7 @@ RuleViewTool.prototype = {
});
}
return;
})
});
},
onPropertyChanged: function() {
@ -157,11 +165,12 @@ RuleViewTool.prototype = {
}
};
function ComputedViewTool(inspector, window, iframe) {
function ComputedViewTool(inspector, window) {
this.inspector = inspector;
this.document = window.document;
this.view = new ComputedView.CssComputedView(this.inspector, this.document, this.inspector.pageStyle);
this.view = new ComputedView.CssComputedView(this.inspector, this.document,
this.inspector.pageStyle);
this.onSelected = this.onSelected.bind(this);
this.refresh = this.refresh.bind(this);
@ -181,7 +190,7 @@ function ComputedViewTool(inspector, window, iframe) {
ComputedViewTool.prototype = {
isSidebarActive: function() {
if (!this.view) {
return;
return false;
}
return this.inspector.sidebar.getCurrentTabID() == "computedview";
},
@ -189,12 +198,14 @@ ComputedViewTool.prototype = {
onSelected: function(event) {
// Ignore the event if the view has been destroyed, or if it's inactive.
// But only if the current selection isn't null. If it's been set to null,
// let the update go through as this is needed to empty the view on navigation.
// let the update go through as this is needed to empty the view on
// navigation.
if (!this.view) {
return;
}
let isInactive = !this.isSidebarActive() && this.inspector.selection.nodeFront;
let isInactive = !this.isSidebarActive() &&
this.inspector.selection.nodeFront;
if (isInactive) {
return;
}

8
browser/devtools/styleinspector/test/browser.ini
View File

@ -74,8 +74,8 @@ support-files =
[browser_ruleview_completion-existing-property_02.js]
[browser_ruleview_completion-new-property_01.js]
[browser_ruleview_completion-new-property_02.js]
[browser_ruleview_computed_01.js]
[browser_ruleview_computed_02.js]
[browser_ruleview_computed-lists_01.js]
[browser_ruleview_computed-lists_02.js]
[browser_ruleview_completion-popup-hidden-after-navigation.js]
[browser_ruleview_content_01.js]
[browser_ruleview_content_02.js]
@ -117,7 +117,9 @@ skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work wit
[browser_ruleview_filtereditor-commit-on-ENTER.js]
[browser_ruleview_filtereditor-revert-on-ESC.js]
skip-if = (os == "win" && debug) || e10s # bug 963492: win. bug 1040653: e10s.
[browser_ruleview_inherit.js]
[browser_ruleview_inherited-properties_01.js]
[browser_ruleview_inherited-properties_02.js]
[browser_ruleview_inherited-properties_03.js]
[browser_ruleview_keybindings.js]
[browser_ruleview_keyframes-rule_01.js]
[browser_ruleview_keyframes-rule_02.js]

24
browser/devtools/styleinspector/test/browser_computedview_browser-styles.js
View File

@ -6,20 +6,18 @@
// Tests that the checkbox to include browser styles works properly.
const TEST_URI = `
<style type="text/css">
.matches {
color: #F00;
}
</style>
<span id="matches" class="matches">Some styled text</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,default styles test");
info("Creating the test document");
content.document.body.innerHTML = '<style type="text/css"> ' +
'.matches {color: #F00;}</style>' +
'<span id="matches" class="matches">Some styled text</span>' +
'</div>';
content.document.title = "Style Inspector Default Styles Test";
info("Opening the computed view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("#matches", inspector);
info("Checking the default styles");

39
browser/devtools/styleinspector/test/browser_computedview_cycle_color.js
View File

@ -6,22 +6,18 @@
// Computed view color cycling test.
const PAGE_CONTENT = [
"<style type=\"text/css\">",
".matches {color: #F00;}</style>",
"<span id=\"matches\" class=\"matches\">Some styled text</span>",
"</div>"
].join("\n");
const TEST_URI = `
<style type="text/css">
.matches {
color: #F00;
}
</style>
<span id="matches" class="matches">Some styled text</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," +
"Computed view color cycling test.");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the computed view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("#matches", inspector);
info("Checking the property itself");
@ -42,27 +38,32 @@ function checkColorCycling(container, inspector) {
is(valueNode.textContent, "#F00", "Color displayed as a hex value.");
// HSL
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "hsl(0, 100%, 50%)",
"Color displayed as an HSL value.");
// RGB
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "rgb(255, 0, 0)",
"Color displayed as an RGB value.");
// Color name
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "red",
"Color displayed as a color name.");
// "Authored" (currently the computed value)
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "rgb(255, 0, 0)",
"Color displayed as an RGB value.");
// Back to hex
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "#F00",
"Color displayed as hex again.");
}

50
browser/devtools/styleinspector/test/browser_computedview_getNodeInfo.js
View File

@ -4,15 +4,15 @@
"use strict";
// Test various output of the computed-view's getNodeInfo method.
// Tests various output of the computed-view's getNodeInfo method.
// This method is used by the style-inspector-overlay on mouseover to decide
// which tooltip or highlighter to show when hovering over a value/name/selector
// if any.
// which tooltip or highlighter to show when hovering over a
// value/name/selector if any.
// For instance, browser_ruleview_selector-highlighter_01.js and
// browser_ruleview_selector-highlighter_02.js test that the selector
// highlighter appear when hovering over a selector in the rule-view.
// Since the code to make this work for the computed-view is 90% the same, there
// is no need for testing it again here.
// Since the code to make this work for the computed-view is 90% the same,
// there is no need for testing it again here.
// This test however serves as a unit test for getNodeInfo.
const {
@ -22,23 +22,23 @@ const {
VIEW_NODE_IMAGE_URL_TYPE
} = require("devtools/styleinspector/style-inspector-overlays");
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' background: red;',
' color: white;',
' }',
' div {',
' background: green;',
' }',
' div div {',
' background-color: yellow;',
' background-image: url(chrome://global/skin/icons/warning-64.png);',
' color: red;',
' }',
'</style>',
'<div><div id="testElement">Test element</div></div>'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
background: red;
color: white;
}
div {
background: green;
}
div div {
background-color: yellow;
background-image: url(chrome://global/skin/icons/warning-64.png);
color: red;
}
</style>
<div><div id="testElement">Test element</div></div>
`;
// Each item in this array must have the following properties:
// - desc {String} will be logged for information
@ -102,7 +102,8 @@ const TEST_DATA = [
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
is(nodeInfo.value.property, "background-image");
is(nodeInfo.value.value, "url(\"chrome://global/skin/icons/warning-64.png\")");
is(nodeInfo.value.value,
"url(\"chrome://global/skin/icons/warning-64.png\")");
is(nodeInfo.value.url, "chrome://global/skin/icons/warning-64.png");
}
},
@ -164,8 +165,7 @@ const TEST_DATA = [
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + PAGE_CONTENT);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("#testElement", inspector);

35
browser/devtools/styleinspector/test/browser_computedview_keybindings_01.js
View File

@ -4,20 +4,20 @@
"use strict";
// Test computed view key bindings
// Tests computed view key bindings.
const TEST_URI = `
<style type="text/css">
.matches {
color: #F00;
}
</style>
<span class="matches">Some styled text</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,default styles test");
info("Adding content to the test page");
content.document.body.innerHTML = '<style type="text/css"> ' +
'.matches {color: #F00;}</style>' +
'<span class="matches">Some styled text</span>' +
'</div>';
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode(".matches", inspector);
let propView = getFirstVisiblePropertyView(view);
@ -29,8 +29,10 @@ add_task(function*() {
EventUtils.synthesizeMouseAtCenter(matchedExpander, {}, view.styleWindow);
yield onMatchedExpanderFocus;
yield checkToggleKeyBinding(view.styleWindow, "VK_SPACE", rulesTable, inspector);
yield checkToggleKeyBinding(view.styleWindow, "VK_RETURN", rulesTable, inspector);
yield checkToggleKeyBinding(view.styleWindow, "VK_SPACE", rulesTable,
inspector);
yield checkToggleKeyBinding(view.styleWindow, "VK_RETURN", rulesTable,
inspector);
yield checkHelpLinkKeybinding(view);
});
@ -48,7 +50,8 @@ function getFirstVisiblePropertyView(view) {
}
function* checkToggleKeyBinding(win, key, rulesTable, inspector) {
info("Pressing " + key + " key a couple of times to check that the property gets expanded/collapsed");
info("Pressing " + key + " key a couple of times to check that the " +
"property gets expanded/collapsed");
let onExpand = inspector.once("computed-view-property-expanded");
let onCollapse = inspector.once("computed-view-property-collapsed");
@ -69,7 +72,7 @@ function checkHelpLinkKeybinding(view) {
let def = promise.defer();
let propView = getFirstVisiblePropertyView(view);
propView.mdnLinkClick = function(aEvent) {
propView.mdnLinkClick = function() {
ok(true, "Pressing F1 opened the MDN link");
def.resolve();
};

54
browser/devtools/styleinspector/test/browser_computedview_keybindings_02.js
View File

@ -4,33 +4,37 @@
"use strict";
// Tests the computed-view keyboard navigation
// Tests the computed-view keyboard navigation.
const TEST_URI = `
<style type="text/css">
span {
font-variant: small-caps;
color: #000000;
}
.nomatches {
color: #ff0000;
}
</style>
<div id="first" style="margin: 10em;
font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
<h1>Some header text</h1>
<p id="salutation" style="font-size: 12pt">hi.</p>
<p id="body" style="font-size: 12pt">I am a test-case. This text exists
solely to provide some things to <span style="color: yellow">
highlight</span> and <span style="font-weight: bold">count</span>
style list-items in the box at right. If you are reading this,
you should go do something else instead. Maybe read a book. Or better
yet, write some test-cases for another bit of code.
<span style="font-style: italic">some text</span></p>
<p id="closing">more text</p>
<p>even more text</p>
</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,computed view keyboard nav test");
content.document.body.innerHTML = '<style type="text/css"> ' +
'span { font-variant: small-caps; color: #000000; } ' +
'.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ' +
'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">\n' +
'<h1>Some header text</h1>\n' +
'<p id="salutation" style="font-size: 12pt">hi.</p>\n' +
'<p id="body" style="font-size: 12pt">I am a test-case. This text exists ' +
'solely to provide some things to <span style="color: yellow">' +
'highlight</span> and <span style="font-weight: bold">count</span> ' +
'style list-items in the box at right. If you are reading this, ' +
'you should go do something else instead. Maybe read a book. Or better ' +
'yet, write some test-cases for another bit of code. ' +
'<span style="font-style: italic">some text</span></p>\n' +
'<p id="closing">more text</p>\n' +
'<p>even more text</p>' +
'</div>';
content.document.title = "Computed view keyboard navigation test";
info("Opening the computed-view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("span", inspector);
info("Selecting the first computed style in the list");

40
browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js
View File

@ -4,29 +4,20 @@
"use strict";
// Test that the computed view properties can be expanded and collapsed with
// either the twisty or by dbl-clicking on the container
// Tests that the computed view properties can be expanded and collapsed with
// either the twisty or by dbl-clicking on the container.
const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent([
'<html>' +
'<head>' +
' <title>Computed view toggling test</title>',
' <style type="text/css"> ',
' html { color: #000000; font-size: 15pt; } ',
' h1 { color: red; } ',
' </style>',
'</head>',
'<body>',
' <h1>Some header text</h1>',
'</body>',
'</html>'
].join("\n"));
const TEST_URI = `
<style type="text/css"> ,
html { color: #000000; font-size: 15pt; }
h1 { color: red; }
</style>
<h1>Some header text</h1>
`;
add_task(function*() {
yield addTab(TEST_URL);
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("h1", inspector);
yield testExpandOnTwistyClick(view, inspector);
@ -50,7 +41,8 @@ function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
// Expanded means the matchedselectors div is not empty
let div = styleDocument.querySelector(".property-content .matchedselectors");
ok(div.childNodes.length > 0, "Matched selectors are expanded on twisty click");
ok(div.childNodes.length > 0,
"Matched selectors are expanded on twisty click");
}
function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
@ -68,7 +60,8 @@ function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
// Collapsed means the matchedselectors div is empty
let div = styleDocument.querySelector(".property-content .matchedselectors");
ok(div.childNodes.length === 0, "Matched selectors are collapsed on twisty click");
ok(div.childNodes.length === 0,
"Matched selectors are collapsed on twisty click");
}
function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
@ -104,5 +97,6 @@ function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
// Collapsed means the matchedselectors div is empty
let div = styleDocument.querySelector(".property-content .matchedselectors");
ok(div.childNodes.length === 0, "Matched selectors are collapsed on dblclick");
ok(div.childNodes.length === 0,
"Matched selectors are collapsed on dblclick");
}

13
browser/devtools/styleinspector/test/browser_computedview_matched-selectors_01.js
View File

@ -4,14 +4,14 @@
"use strict";
// Checking selector counts, matched rules and titles in the computed-view
// Checking selector counts, matched rules and titles in the computed-view.
const {PropertyView} = require("devtools/styleinspector/computed-view");
const TEST_URI = TEST_URL_ROOT + "doc_matched_selectors.html";
add_task(function*() {
yield addTab(TEST_URI);
let {toolbox, inspector, view} = yield openComputedView();
let {inspector, view} = yield openComputedView();
yield selectNode("#test", inspector);
yield testMatchedSelectors(view, inspector);
@ -21,7 +21,8 @@ function* testMatchedSelectors(view, inspector) {
info("checking selector counts, matched rules and titles");
let nodeFront = yield getNodeFront("#test", inspector);
is(nodeFront, view.viewedElement, "style inspector node matches the selected node");
is(nodeFront, view.viewedElement,
"style inspector node matches the selected node");
let propertyView = new PropertyView(view, "color");
propertyView.buildMain();
@ -31,6 +32,8 @@ function* testMatchedSelectors(view, inspector) {
yield propertyView.refreshMatchedSelectors();
let numMatchedSelectors = propertyView.matchedSelectors.length;
is(numMatchedSelectors, 6, "CssLogic returns the correct number of matched selectors for div");
is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors returns true");
is(numMatchedSelectors, 6,
"CssLogic returns the correct number of matched selectors for div");
is(propertyView.hasMatchedSelectors, true,
"hasMatchedSelectors returns true");
}

11
browser/devtools/styleinspector/test/browser_computedview_matched-selectors_02.js
View File

@ -4,15 +4,11 @@
"use strict";
// Tests for matched selector texts in the computed view
// Tests for matched selector texts in the computed view.
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
info("Opening the computed view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
let {inspector, view} = yield openComputedView();
yield selectNode("div", inspector);
info("Checking the color property view");
@ -24,7 +20,8 @@ add_task(function*() {
propertyView.matchedExpanded = true;
yield propertyView.refreshMatchedSelectors();
let span = propertyView.matchedSelectorsContainer.querySelector("span.rule-text");
let span = propertyView.matchedSelectorsContainer
.querySelector("span.rule-text");
ok(span, "Found the first table row");
let selector = propertyView.matchedSelectorViews[0];

6
browser/devtools/styleinspector/test/browser_computedview_media-queries.js
View File

@ -14,12 +14,8 @@ let {CssLogic} = require("devtools/styleinspector/css-logic");
add_task(function*() {
yield addTab(TEST_URI);
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test element");
let {inspector, view} = yield openComputedView();
yield selectNode("div", inspector);
info("Checking property view");
yield checkPropertyView(view);
});

25
browser/devtools/styleinspector/test/browser_computedview_no-results-placeholder.js
View File

@ -6,19 +6,18 @@
// Tests that the no results placeholder works properly.
const TEST_URI = `
<style type="text/css">
.matches {
color: #F00;
}
</style>
<span id="matches" class="matches">Some styled text</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,no results placeholder test");
info("Creating the test document");
content.document.body.innerHTML = '<style type="text/css"> ' +
'.matches {color: #F00;}</style>' +
'<span id="matches" class="matches">Some styled text</span>';
content.document.title = "Tests that the no results placeholder works properly";
info("Opening the computed view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("#matches", inspector);
yield enterInvalidFilter(inspector, view);
@ -36,7 +35,7 @@ function* enterInvalidFilter(inspector, computedView) {
let onRefreshed = inspector.once("computed-view-refreshed");
searchbar.focus();
synthesizeKeys(searchTerm, computedView.styleWindow)
synthesizeKeys(searchTerm, computedView.styleWindow);
yield onRefreshed;
}

11
browser/devtools/styleinspector/test/browser_computedview_original-source-link.js
View File

@ -4,8 +4,8 @@
"use strict";
// Test that the computed view shows the original source link when source maps
// are enabled
// Tests that the computed view shows the original source link when source maps
// are enabled.
const TESTCASE_URI = TEST_URL_ROOT_SSL + "doc_sourcemaps.html";
const PREF = "devtools.styleeditor.source-maps-enabled";
@ -18,8 +18,6 @@ add_task(function*() {
yield addTab(TESTCASE_URI);
let {toolbox, inspector, view} = yield openComputedView();
info("Select the test node");
yield selectNode("div", inspector);
info("Expanding the first property");
@ -64,11 +62,12 @@ function* testClickingLink(toolbox, view) {
let editor = yield onEditor;
let {line, col} = editor.sourceEditor.getCursor();
let {line} = editor.sourceEditor.getCursor();
is(line, 3, "cursor is at correct line number in original source");
}
function verifyLinkText(view, text) {
let link = getComputedViewLinkByIndex(view, 0);
is(link.textContent, text, "Linked text changed to display the correct location");
is(link.textContent, text,
"Linked text changed to display the correct location");
}

10
browser/devtools/styleinspector/test/browser_computedview_pseudo-element_01.js
View File

@ -4,14 +4,13 @@
"use strict";
// Test that pseudoelements are displayed correctly in the rule view
// Tests that pseudoelements are displayed correctly in the rule view.
const TEST_URI = TEST_URL_ROOT + "doc_pseudoelement.html";
add_task(function*() {
yield addTab(TEST_URI);
let {toolbox, inspector, view} = yield openComputedView();
let {inspector, view} = yield openComputedView();
yield testTopLeft(inspector, view);
});
@ -22,7 +21,7 @@ function* testTopLeft(inspector, view) {
is(float, "left", "The computed view shows the correct float");
let children = yield inspector.markup.walker.children(node);
is (children.nodes.length, 3, "Element has correct number of children");
is(children.nodes.length, 3, "Element has correct number of children");
let beforeElement = children.nodes[0];
yield selectNode(beforeElement, inspector);
@ -31,11 +30,10 @@ function* testTopLeft(inspector, view) {
let left = getComputedViewPropertyValue(view, "left");
is(left, "0px", "The computed view shows the correct left");
let afterElement = children.nodes[children.nodes.length-1];
let afterElement = children.nodes[children.nodes.length - 1];
yield selectNode(afterElement, inspector);
top = getComputedViewPropertyValue(view, "top");
is(top, "50%", "The computed view shows the correct top");
left = getComputedViewPropertyValue(view, "left");
is(left, "50%", "The computed view shows the correct left");
}

13
browser/devtools/styleinspector/test/browser_computedview_refresh-on-style-change_01.js
View File

@ -4,17 +4,14 @@
"use strict";
// Test that the computed view refreshes when the current node has its style
// changed
// Tests that the computed view refreshes when the current node has its style
// changed.
const TESTCASE_URI = 'data:text/html;charset=utf-8,' +
'<div id="testdiv" style="font-size:10px;">Test div!</div>';
const TEST_URI = "<div id='testdiv' style='font-size:10px;'>Test div!</div>";
add_task(function*() {
yield addTab(TESTCASE_URI);
info("Opening the computed view and selecting the test node");
let {toolbox, inspector, view} = yield openComputedView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("#testdiv", inspector);
let fontSize = getComputedViewPropertyValue(view, "font-size");

30
browser/devtools/styleinspector/test/browser_computedview_search-filter.js
View File

@ -6,31 +6,25 @@
// Tests that the search filter works properly.
const TEST_URI = `
<style type="text/css">
.matches {
color: #F00;
}
</style>
<span id="matches" class="matches">Some styled text</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,default styles test");
info("Creating the test document");
content.document.body.innerHTML = '<style type="text/css"> ' +
'.matches {color: #F00;}</style>' +
'<span id="matches" class="matches">Some styled text</span>' +
'</div>';
content.document.title = "Style Inspector Search Filter Test";
info("Opening the computed-view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("#matches", inspector);
yield testToggleDefaultStyles(inspector, view);
yield testAddTextInFilter(inspector, view);
});
function* testToggleDefaultStyles(inspector, computedView) {
info("checking \"Browser styles\" checkbox");
let doc = computedView.styleDocument;
let checkbox = computedView.includeBrowserStylesCheckbox;
let onRefreshed = inspector.once("computed-view-refreshed");
checkbox.click();
@ -39,8 +33,6 @@ function* testToggleDefaultStyles(inspector, computedView) {
function* testAddTextInFilter(inspector, computedView) {
info("setting filter text to \"color\"");
let doc = computedView.styleDocument;
let searchField = computedView.searchField;
let onRefreshed = inspector.once("computed-view-refreshed");
searchField.focus();

20
browser/devtools/styleinspector/test/browser_computedview_search-filter_clear.js
View File

@ -6,18 +6,18 @@
// Tests that the search filter clear button works properly.
let TEST_URI = [
'<style type="text/css">',
' .matches {',
' color: #F00;',
' }',
'</style>',
'<span id="matches" class="matches">Some styled text</span>'
].join("\n");
const TEST_URI = `
<style type="text/css">
.matches {
color: #F00;
}
</style>
<span id="matches" class="matches">Some styled text</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openComputedView();
let {inspector, view} = yield openComputedView();
yield selectNode("#matches", inspector);
yield testAddTextInFilter(inspector, view);
yield testClearSearchFilter(inspector, view);
@ -27,7 +27,6 @@ function* testAddTextInFilter(inspector, computedView) {
info("Setting filter text to \"background-color\"");
let win = computedView.styleWindow;
let doc = computedView.styleDocument;
let propertyViews = computedView.propertyViews;
let searchField = computedView.searchField;
let checkbox = computedView.includeBrowserStylesCheckbox;
@ -53,7 +52,6 @@ function* testClearSearchFilter(inspector, computedView) {
info("Clearing the search filter");
let win = computedView.styleWindow;
let doc = computedView.styleDocument;
let propertyViews = computedView.propertyViews;
let searchField = computedView.searchField;
let searchClearButton = computedView.searchClearButton;

10
browser/devtools/styleinspector/test/browser_computedview_search-filter_context-menu.js
View File

@ -4,17 +4,15 @@
"use strict";
// Test computed view search filter context menu works properly.
// Tests computed view search filter context menu works properly.
const TEST_INPUT = "h1";
const TEST_URI = "<h1>test filter context menu</h1>";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,<h1>test filter context menu</h1>");
info("Opening the computed-view");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield selectNode("h1", inspector);
let win = view.styleWindow;

18
browser/devtools/styleinspector/test/browser_computedview_search-filter_escape-keypress.js
View File

@ -6,18 +6,18 @@
// Tests that search filter escape keypress will clear the search field.
let TEST_URI = [
'<style type="text/css">',
' .matches {',
' color: #F00;',
' }',
'</style>',
'<span id="matches" class="matches">Some styled text</span>'
].join("\n");
const TEST_URI = `
<style type="text/css">
.matches {
color: #F00;
}
</style>
<span id="matches" class="matches">Some styled text</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openComputedView();
let {inspector, view} = yield openComputedView();
yield selectNode("#matches", inspector);
yield testAddTextInFilter(inspector, view);
yield testEscapeKeypress(inspector, view);

62
browser/devtools/styleinspector/test/browser_computedview_select-and-copy-styles.js
View File

@ -4,40 +4,42 @@
"use strict";
// Tests that properties can be selected and copied from the computed view
// Tests that properties can be selected and copied from the computed view.
XPCOMUtils.defineLazyGetter(this, "osString", function() {
return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
});
const TEST_URI = `
<style type="text/css">
span {
font-variant-caps: small-caps;
color: #000000;
}
.nomatches {
color: #ff0000;
}
</style>
<div id="first" style="margin: 10em;
font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
<h1>Some header text</h1>
<p id="salutation" style="font-size: 12pt">hi.</p>
<p id="body" style="font-size: 12pt">I am a test-case. This text exists
solely to provide some things to <span style="color: yellow">
highlight</span> and <span style="font-weight: bold">count</span>
style list-items in the box at right. If you are reading this,
you should go do something else instead. Maybe read a book. Or better
yet, write some test-cases for another bit of code.
<span style="font-style: italic">some text</span></p>
<p id="closing">more text</p>
<p>even more text</p>
</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,computed view copy test");
info("Creating the test document");
content.document.body.innerHTML = '<style type="text/css"> ' +
'span { font-variant-caps: small-caps; color: #000000; } ' +
'.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ' +
'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">\n' +
'<h1>Some header text</h1>\n' +
'<p id="salutation" style="font-size: 12pt">hi.</p>\n' +
'<p id="body" style="font-size: 12pt">I am a test-case. This text exists ' +
'solely to provide some things to <span style="color: yellow">' +
'highlight</span> and <span style="font-weight: bold">count</span> ' +
'style list-items in the box at right. If you are reading this, ' +
'you should go do something else instead. Maybe read a book. Or better ' +
'yet, write some test-cases for another bit of code. ' +
'<span style="font-style: italic">some text</span></p>\n' +
'<p id="closing">more text</p>\n' +
'<p>even more text</p>' +
'</div>';
content.document.title = "Computed view context menu test";
info("Opening the computed view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openComputedView();
yield selectNode("span", inspector);
yield checkCopySelection(view);
yield checkSelectAll(view);
});
@ -54,7 +56,8 @@ function checkCopySelection(view) {
range.setEnd(props[3], 3);
contentDocument.defaultView.getSelection().addRange(range);
info("Checking that cssHtmlTree.siBoundCopy() returns the correct clipboard value");
info("Checking that cssHtmlTree.siBoundCopy() returns the correct " +
"clipboard value");
let expectedPattern = "font-family: helvetica,sans-serif;[\\r\\n]+" +
"font-size: 16px;[\\r\\n]+" +
@ -75,7 +78,8 @@ function checkSelectAll(view) {
let contentDoc = view.styleDocument;
let prop = contentDoc.querySelector(".property-view");
info("Checking that _onSelectAll() then copy returns the correct clipboard value");
info("Checking that _onSelectAll() then copy returns the correct " +
"clipboard value");
view._contextmenu._onSelectAll();
let expectedPattern = "color: #FF0;[\\r\\n]+" +
"font-family: helvetica,sans-serif;[\\r\\n]+" +

25
browser/devtools/styleinspector/test/browser_computedview_style-editor-link.js
View File

@ -11,14 +11,14 @@
//
thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Unknown sheet source");
// Test the links from the computed view to the style editor
// Tests the links from the computed view to the style editor.
const STYLESHEET_URL = "data:text/css,"+encodeURIComponent(
const STYLESHEET_URL = "data:text/css," + encodeURIComponent(
[".highlight {",
"color: blue",
"}"].join("\n"));
const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
const DOCUMENT_URL = "data:text/html;charset=utf-8," + encodeURIComponent(
['<html>' +
'<head>' +
'<title>Computed view style editor link test</title>',
@ -31,7 +31,7 @@ const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
'<style>',
'div { color: #f06; }',
'</style>',
'<link rel="stylesheet" type="text/css" href="'+STYLESHEET_URL+'">',
'<link rel="stylesheet" type="text/css" href="' + STYLESHEET_URL + '">',
'</head>',
'<body>',
'<h1>Some header text</h1>',
@ -52,20 +52,16 @@ const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
add_task(function*() {
yield addTab(DOCUMENT_URL);
info("Opening the computed-view");
let {toolbox, inspector, view} = yield openComputedView();
info("Selecting the test node");
yield selectNode("span", inspector);
yield testInlineStyle(view, inspector);
yield testInlineStyle(view);
yield testFirstInlineStyleSheet(view, toolbox);
yield testSecondInlineStyleSheet(view, toolbox);
yield testExternalStyleSheet(view, toolbox);
});
function* testInlineStyle(view, inspector) {
function* testInlineStyle(view) {
info("Testing inline style");
yield expandComputedViewPropertyByIndex(view, 0);
@ -111,7 +107,8 @@ function* testSecondInlineStyleSheet(view, toolbox) {
clickLinkByIndex(view, 4);
let editor = yield onSelected;
is(toolbox.currentToolId, "styleeditor", "The style editor is selected again");
is(toolbox.currentToolId, "styleeditor",
"The style editor is selected again");
validateStyleEditorSheet(editor, 1);
}
@ -129,14 +126,16 @@ function* testExternalStyleSheet(view, toolbox) {
clickLinkByIndex(view, 1);
let editor = yield onSelected;
is(toolbox.currentToolId, "styleeditor", "The style editor is selected again");
is(toolbox.currentToolId, "styleeditor",
"The style editor is selected again");
validateStyleEditorSheet(editor, 2);
}
function validateStyleEditorSheet(editor, expectedSheetIndex) {
info("Validating style editor stylesheet");
let sheet = content.document.styleSheets[expectedSheetIndex];
is(editor.styleSheet.href, sheet.href, "loaded stylesheet matches document stylesheet");
is(editor.styleSheet.href, sheet.href,
"loaded stylesheet matches document stylesheet");
}
function clickLinkByIndex(view, index) {

7
browser/devtools/styleinspector/test/browser_ruleview_add-property-and-reselect.js
View File

@ -5,16 +5,13 @@
"use strict";
// Tests that adding properties to rules work and reselecting the element still
// show them
// show them.
const TEST_URI = TEST_URL_ROOT + "doc_content_stylesheet.html";
add_task(function*() {
yield addTab(TEST_URI);
let target = getNode("#target");
let {toolbox, inspector, view} = yield openRuleView();
let {inspector, view} = yield openRuleView();
yield selectNode("#target", inspector);
info("Setting a font-weight property on all rules");

24
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js
View File

@ -4,19 +4,19 @@
"use strict";
// Tests adding a new property and escapes the new empty property name editor
// Tests adding a new property and escapes the new empty property name editor.
let TEST_URI = [
"<style type='text/css'>",
" #testid {",
" background-color: blue;",
" }",
" .testclass {",
" background-color: green;",
" }",
"</style>",
"<div id='testid' class='testclass'>Styled Node</div>"
].join("\n");
const TEST_URI = `
<style type="text/css">
#testid {
background-color: blue;
}
.testclass {
background-color: green;
}
</style>
<div id='testid' class='testclass'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

18
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js
View File

@ -4,16 +4,16 @@
"use strict";
// Tests adding a new property and escapes the new empty property value editor
// Tests adding a new property and escapes the new empty property value editor.
let TEST_URI = [
"<style type='text/css'>",
" #testid {",
" background-color: blue;",
" }",
"</style>",
"<div id='testid'>Styled Node</div>"
].join("\n");
const TEST_URI = `
<style type='text/css'>
#testid {
background-color: blue;
}
</style>
<div id='testid'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

25
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_03.js
View File

@ -4,19 +4,20 @@
"use strict";
// Tests adding a new property and escapes the property name editor with a value
// Tests adding a new property and escapes the property name editor with a
// value.
let TEST_URI = [
"<style type='text/css'>",
" #testid {",
" background-color: blue;",
" }",
" .testclass {",
" background-color: green;",
" }",
"</style>",
"<div id='testid' class='testclass'>Styled Node</div>"
].join("\n");
const TEST_URI = `
<style type='text/css'>
#testid {
background-color: blue;
}
.testclass {
background-color: green;
}
</style>
<div id='testid' class='testclass'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

21
browser/devtools/styleinspector/test/browser_ruleview_add-property-svg.js
View File

@ -4,20 +4,15 @@
"use strict";
// Tests editing SVG styles using the rules view
// Tests editing SVG styles using the rules view.
let TEST_URL = "chrome://global/skin/icons/warning.svg";
let TEST_SELECTOR = "path";
add_task(function*() {
yield addTab(TEST_URL);
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
let {inspector, view} = yield openRuleView();
yield selectNode(TEST_SELECTOR, inspector);
yield testCreateNew(view);
});
@ -45,10 +40,13 @@ function* testCreateNew(ruleView) {
editor = inplaceEditor(ruleView.styleDocument.activeElement);
is(elementRuleEditor.rule.textProps.length, 1, "Should have created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
is(elementRuleEditor.rule.textProps.length, 1,
"Should have created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1,
"Should have created a property editor.");
let textProp = elementRuleEditor.rule.textProps[0];
is(editor, inplaceEditor(textProp.editor.valueSpan), "Should be editing the value span now.");
is(editor, inplaceEditor(textProp.editor.valueSpan),
"Should be editing the value span now.");
editor.input.value = "red";
let onBlur = once(editor.input, "blur");
@ -58,5 +56,6 @@ function* testCreateNew(ruleView) {
is(textProp.value, "red", "Text prop should have been changed.");
is((yield getComputedStyleProperty(TEST_SELECTOR, null, "fill")), "rgb(255, 0, 0)", "The fill was changed to red");
is((yield getComputedStyleProperty(TEST_SELECTOR, null, "fill")),
"rgb(255, 0, 0)", "The fill was changed to red");
}

47
browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js
View File

@ -8,31 +8,22 @@
// FIXME: To be split in several test files, and some of the inplace-editor
// focus/blur/commit/revert stuff should be factored out in head.js
let TEST_URL = 'url("' + TEST_URL_ROOT + 'doc_test_image.png")';
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' background-color: blue;',
' }',
' .testclass {',
' background-color: green;',
' }',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>'
].join("\n");
const TEST_URI = `
<style type='text/css'>
#testid {
background-color: blue;
}
.testclass {
background-color: green;
}
</style>
<div id='testid' class='testclass'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,test rule view user changes");
info("Creating the test document");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testCreateNew(view);
});
@ -44,7 +35,8 @@ function* testCreateNew(view) {
info("Focusing a new property name in the rule-view");
let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused");
is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
"The new property editor got focused");
let input = editor.input;
info("Entering background-color in the property name editor");
@ -61,9 +53,12 @@ function* testCreateNew(view) {
editor = inplaceEditor(view.styleDocument.activeElement);
let textProp = elementRuleEditor.rule.textProps[0];
is(elementRuleEditor.rule.textProps.length, 1, "Created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Created a property editor.");
is(editor, inplaceEditor(textProp.editor.valueSpan), "Editing the value span now.");
is(elementRuleEditor.rule.textProps.length, 1,
"Created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1,
"Created a property editor.");
is(editor, inplaceEditor(textProp.editor.valueSpan),
"Editing the value span now.");
info("Entering a value and bluring the field to expect a rule change");
editor.input.value = "#XYZ";

44
browser/devtools/styleinspector/test/browser_ruleview_add-property_02.js
View File

@ -4,25 +4,25 @@
"use strict";
// Test all sorts of additions and updates of properties in the rule-view
// Tests all sorts of additions and updates of properties in the rule-view.
// FIXME: TO BE SPLIT IN *MANY* SMALLER TESTS
const TEST_URI = `
<style type="text/css">
#testid {
background-color: blue;
}
.testclass, .unmatched {
background-color: green;
};
</style>
<div id='testid' class='testclass'>Styled Node</div>
<div id='testid2'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test document");
let style = "" +
"#testid {" +
" background-color: blue;" +
"}" +
".testclass, .unmatched {" +
" background-color: green;" +
"}";
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
"<div id='testid2'>Styled Node</div>";
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield testCreateNew(inspector, view);
});
@ -39,7 +39,8 @@ function* testCreateNew(inspector, ruleView) {
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected.");
// Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
// Try clicking on the editor's input again, shouldn't cause trouble
// (see bug 761665).
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
input.select();
@ -54,10 +55,13 @@ function* testCreateNew(inspector, ruleView) {
editor = inplaceEditor(ruleView.styleDocument.activeElement);
is(elementRuleEditor.rule.textProps.length, 1, "Should have created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
is(elementRuleEditor.rule.textProps.length, 1,
"Should have created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1,
"Should have created a property editor.");
let textProp = elementRuleEditor.rule.textProps[0];
is(editor, inplaceEditor(textProp.editor.valueSpan), "Should be editing the value span now.");
is(editor, inplaceEditor(textProp.editor.valueSpan),
"Should be editing the value span now.");
let onMutated = inspector.once("markupmutation");
editor.input.value = "purple";

48
browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js
View File

@ -5,22 +5,22 @@
"use strict";
// Tests the behaviour of adding a new rule to the rule view and the
// various inplace-editor behaviours in the new rule editor
// various inplace-editor behaviours in the new rule editor.
let PAGE_CONTENT = [
'<style type="text/css">',
' .testclass {',
' text-align: center;',
' }',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>',
'<span class="testclass2">This is a span</span>',
'<span class="class1 class2">Multiple classes</span>',
'<span class="class3 class4">Multiple classes</span>',
'<p>Empty<p>',
'<h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1>',
'<h2 id="asd@@@a!!2a">Invalid characters in id</h2>'
].join("\n");
const TEST_URI = `
<style type="text/css">
.testclass {
text-align: center;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<span class="testclass2">This is a span</span>
<span class="class1 class2">Multiple classes</span>
<span class="class3 class4">Multiple classes</span>
<p>Empty<p>
<h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1>
<h2 id="asd@@@a!!2a">Invalid characters in id</h2>
`;
const TEST_DATA = [
{ node: "#testid", expected: "#testid" },
@ -33,12 +33,9 @@ const TEST_DATA = [
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Iterating over the test data");
for (let data of TEST_DATA) {
yield runTestData(inspector, view, data, "context-menu");
yield runTestData(inspector, view, data, "button");
@ -47,15 +44,12 @@ add_task(function*() {
function* runTestData(inspector, view, data, method) {
let {node, expected} = data;
info("Selecting the test element");
yield selectNode(node, inspector);
yield addNewRule(inspector, view, method);
yield testNewRule(view, expected, 1);
info("Resetting page content");
content.document.body.innerHTML = PAGE_CONTENT;
content.document.body.innerHTML = TEST_URI;
}
function* addNewRule(inspector, view, method) {
@ -73,11 +67,11 @@ function* addNewRule(inspector, view, method) {
info("Adding the new rule");
view._contextmenu.menuitemAddRule.click();
view._contextmenu._menupopup.hidePopup();
}
else {
} else {
info("Adding the new rule using the button");
view.addRuleButton.click();
}
info("Waiting for rule view to change");
yield view.once("ruleview-changed");
}
@ -94,7 +88,7 @@ function* testNewRule(view, expected, index) {
is(idRuleEditor.selectorText.textContent, expected,
"Selector text value is as expected: " + expected);
info("Adding new properties to new rule: " + expected)
info("Adding new properties to new rule: " + expected);
let onRuleViewChanged = view.once("ruleview-changed");
idRuleEditor.addProperty("font-weight", "bold", "");
yield onRuleViewChanged;

32
browser/devtools/styleinspector/test/browser_ruleview_add-rule_02.js
View File

@ -5,33 +5,25 @@
"use strict";
// Tests the behaviour of adding a new rule to the rule view and editing
// its selector
// its selector.
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' text-align: center;',
' }',
'</style>',
'<div id="testid">Styled Node</div>',
'<span>This is a span</span>'
].join("\n");
const TEST_URI = `
<style type="text/css">
#testid {
text-align: center;
}
</style>
<div id="testid">Styled Node</div>
<span>This is a span</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
info("Waiting for rule view to update");
let onRuleViewChanged = once(view, "ruleview-changed");
info("Adding the new rule");
view.addRuleButton.click();
yield onRuleViewChanged;
yield testEditSelector(view, "span");

34
browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js
View File

@ -5,33 +5,25 @@
"use strict";
// Tests the behaviour of adding a new rule to the rule view, adding a new
// property and editing the selector
// property and editing the selector.
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' text-align: center;',
' }',
'</style>',
'<div id="testid">Styled Node</div>',
'<span>This is a span</span>'
].join("\n");
const TEST_URI = `
<style type="text/css">
#testid {
text-align: center;
}
</style>
<div id="testid">Styled Node</div>
<span>This is a span</span>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
info("Waiting for rule view to change");
let onRuleViewChanged = once(view, "ruleview-changed");
info("Adding the new rule");
view.addRuleButton.click();
yield onRuleViewChanged;
info("Adding new properties to the new rule");
@ -59,7 +51,7 @@ function* testNewRule(view, expected, index) {
is(idRuleEditor.selectorText.textContent, expected,
"Selector text value is as expected: " + expected);
info("Adding new properties to new rule: " + expected)
info("Adding new properties to new rule: " + expected);
idRuleEditor.addProperty("font-weight", "bold", "");
let textProps = idRuleEditor.rule.textProps;
let lastRule = textProps[textProps.length - 1];

15
browser/devtools/styleinspector/test/browser_ruleview_add-rule_04.js
View File

@ -5,24 +5,21 @@
"use strict";
// Tests if the `Add rule` button disables itself properly for non-element nodes
// and anonymous element
// and anonymous element.
let PAGE_CONTENT = `
const TEST_URI = `
<style type="text/css">
#pseudo::before {
content: "before";
}
</style>
<div id="pseudo"></div>
<div id="testid">Test Node</div>`;
<div id="testid">Test Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Running test");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield testDisabledButton(inspector, view);
});

16
browser/devtools/styleinspector/test/browser_ruleview_add-rule_pseudo_class.js
View File

@ -4,9 +4,9 @@
"use strict";
// Tests adding a rule with pseudo class locks on
// Tests adding a rule with pseudo class locks on.
let PAGE_CONTENT = "<p id='element'>Test element</p>";
const TEST_URI = "<p id='element'>Test element</p>";
const EXPECTED_SELECTOR = "#element";
const TEST_DATA = [
@ -20,15 +20,10 @@ const TEST_DATA = [
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#element", inspector);
info("Iterating over the test data");
for (let data of TEST_DATA) {
yield runTestData(inspector, view, data);
}
@ -68,7 +63,8 @@ function* setPseudoLocks(inspector, view, pseudoClasses) {
if (pseudoClasses.length == 0) {
return;
}
for (var pseudoClass of pseudoClasses) {
for (let pseudoClass of pseudoClasses) {
switch (pseudoClass) {
case ":hover":
view.hoverCheckbox.click();

30
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js
View File

@ -4,24 +4,22 @@
"use strict";
// Test that after a color change, the image preview tooltip in the same
// Tests that after a color change, the image preview tooltip in the same
// property is displayed and positioned correctly.
// See bug 979292
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' background: url("chrome://global/skin/icons/warning-64.png"), linear-gradient(white, #F06 400px);',
' }',
'</style>',
'Testing the color picker tooltip!'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
background: url("chrome://global/skin/icons/warning-64.png"), linear-gradient(white, #F06 400px);
}
</style>
Testing the color picker tooltip!
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
let value = getRuleViewProperty(view, "body", "background").valueSpan;
let swatch = value.querySelectorAll(".ruleview-colorswatch")[1];
let url = value.querySelector(".theme-link");
@ -30,7 +28,8 @@ add_task(function*() {
function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
info("First, verify that the image preview tooltip works");
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip,
url);
ok(anchor, "The image preview tooltip is shown on the url span");
is(anchor, url, "The anchor returned by the showOnHover callback is correct");
@ -53,7 +52,8 @@ function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
info("Verify again that the image preview tooltip works");
// After a color change, the property is re-populated, we need to get the new
// dom node
url = getRuleViewProperty(ruleView, "body", "background").valueSpan.querySelector(".theme-link");
url = getRuleViewProperty(ruleView, "body", "background").valueSpan
.querySelector(".theme-link");
anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
ok(anchor, "The image preview tooltip is shown on the url span");
is(anchor, url, "The anchor returned by the showOnHover callback is correct");

32
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js
View File

@ -4,25 +4,29 @@
"use strict";
// Test that after a color change, opening another tooltip, like the image
// preview doesn't revert the color change in the ruleView.
// Tests that after a color change, opening another tooltip, like the image
// preview doesn't revert the color change in the rule view.
// This used to happen when the activeSwatch wasn't reset when the colorpicker
// would hide.
// See bug 979292
const TEST_URI = `
<style type="text/css">
body {
background: red url("chrome://global/skin/icons/warning-64.png")
no-repeat center center;
}
</style>
Testing the color picker tooltip!
`;
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' background: red url("chrome://global/skin/icons/warning-64.png") no-repeat center center;',
' }',
'</style>',
'Testing the color picker tooltip!'
].join("\n");
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
yield testColorChangeIsntRevertedWhenOtherTooltipIsShown(view);
});
@ -50,12 +54,14 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
let value = getRuleViewProperty(ruleView, "body", "background").valueSpan;
let url = value.querySelector(".theme-link");
onShown = ruleView.tooltips.previewTooltip.once("shown");
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip,
url);
ruleView.tooltips.previewTooltip.show(anchor);
yield onShown;
info("Image tooltip is shown, verify that the swatch is still correct");
swatch = value.querySelector(".ruleview-colorswatch");
is(swatch.style.backgroundColor, "rgb(0, 0, 0)", "The swatch's color is correct");
is(swatch.style.backgroundColor, "rgb(0, 0, 0)",
"The swatch's color is correct");
is(swatch.nextSibling.textContent, "#000", "The color name is correct");
}

29
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-appears-on-swatch-click.js
View File

@ -4,24 +4,23 @@
"use strict";
// Test that color pickers appear when clicking on color swatches
// Tests that color pickers appear when clicking on color swatches.
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' color: red;',
' background-color: #ededed;',
' background-image: url(chrome://global/skin/icons/warning-64.png);',
' border: 2em solid rgba(120, 120, 120, .5);',
' }',
'</style>',
'Testing the color picker tooltip!'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
color: red;
background-color: #ededed;
background-image: url(chrome://global/skin/icons/warning-64.png);
border: 2em solid rgba(120, 120, 120, .5);
}
</style>
Testing the color picker tooltip!
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
let cSwatch = getRuleViewProperty(view, "body", "color").valueSpan
.querySelector(".ruleview-colorswatch");

28
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js
View File

@ -4,23 +4,23 @@
"use strict";
// Test that a color change in the color picker is committed when ENTER is pressed
// Tests that a color change in the color picker is committed when ENTER is
// pressed.
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' border: 2em solid rgba(120, 120, 120, .5);',
' }',
'</style>',
'Testing the color picker tooltip!'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
border: 2em solid rgba(120, 120, 120, .5);
}
</style>
Testing the color picker tooltip!
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
let swatch = getRuleViewProperty(view, "body" , "border").valueSpan
let swatch = getRuleViewProperty(view, "body", "border").valueSpan
.querySelector(".ruleview-colorswatch");
yield testPressingEnterCommitsChanges(swatch, view);
});
@ -42,7 +42,7 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
"The color swatch's background was updated");
is(getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
"2em solid rgba(0, 255, 0, 0.5)",
"The text of the border css property was updated");;
"The text of the border css property was updated");
let spectrum = yield cPicker.spectrum;
let onHidden = cPicker.tooltip.once("hidden");

34
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js
View File

@ -4,26 +4,21 @@
"use strict";
// Test that changing a color in a gradient css declaration using the tooltip
// color picker works
// Tests that changing a color in a gradient css declaration using the tooltip
// color picker works.
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);',
' }',
'</style>',
'Updating a gradient declaration with the color picker tooltip'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);
}
</style>
Updating a gradient declaration with the color picker tooltip
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
info("Creating the test document");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the rule-view")
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
info("Testing that the colors in gradient properties are parsed correctly");
testColorParsing(view);
@ -45,7 +40,7 @@ function testColorParsing(view) {
is(colorEls.length, 3, "There are 3 color values");
let colors = ["#F06", "#333", "#000"];
for (let i = 0; i < colors.length; i ++) {
for (let i = 0; i < colors.length; i++) {
is(colorEls[i].textContent, colors[i], "The right color value was found");
}
}
@ -73,7 +68,8 @@ function* testPickingNewColor(view) {
"The color swatch's background was updated");
is(colorEl.textContent, "#010101", "The color text was updated");
is(content.getComputedStyle(content.document.body).backgroundImage,
"linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)",
"linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
"rgb(0, 0, 0) 100%)",
"The gradient has been updated correctly");
cPicker.hide();

32
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-hides-on-tooltip.js
View File

@ -4,24 +4,23 @@
"use strict";
// Test that the color picker tooltip hides when an image tooltip appears
// Tests that the color picker tooltip hides when an image tooltip appears.
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' color: red;',
' background-color: #ededed;',
' background-image: url(chrome://global/skin/icons/warning-64.png);',
' border: 2em solid rgba(120, 120, 120, .5);',
' }',
'</style>',
'Testing the color picker tooltip!'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
color: red;
background-color: #ededed;
background-image: url(chrome://global/skin/icons/warning-64.png);
border: 2em solid rgba(120, 120, 120, .5);
}
</style>
Testing the color picker tooltip!
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
let swatch = getRuleViewProperty(view, "body", "color").valueSpan
.querySelector(".ruleview-colorswatch");
@ -30,7 +29,8 @@ add_task(function*() {
});
function* testColorPickerHidesWhenImageTooltipAppears(view, swatch) {
let bgImageSpan = getRuleViewProperty(view, "body", "background-image").valueSpan;
let bgImageSpan = getRuleViewProperty(view, "body", "background-image")
.valueSpan;
let uriSpan = bgImageSpan.querySelector(".theme-link");
let tooltip = view.tooltips.colorPicker.tooltip;

32
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js
View File

@ -4,30 +4,30 @@
"use strict";
// Test that the color in the colorpicker tooltip can be changed several times
// Tests that the color in the colorpicker tooltip can be changed several times.
// without causing error in various cases:
// - simple single-color property (color)
// - color and image property (background-image)
// - overridden property
// See bug 979292 and bug 980225
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' color: green;',
' background: red url("chrome://global/skin/icons/warning-64.png") no-repeat center center;',
' }',
' p {',
' color: blue;',
' }',
'</style>',
'<p>Testing the color picker tooltip!</p>'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
color: green;
background: red url("chrome://global/skin/icons/warning-64.png")
no-repeat center center;
}
p {
color: blue;
}
</style>
<p>Testing the color picker tooltip!</p>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield testSimpleMultipleColorChanges(inspector, view);
yield testComplexMultipleColorChanges(inspector, view);

9
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-release-outside-frame.js
View File

@ -4,15 +4,14 @@
"use strict";
// Test that color pickers stops following the pointer if the pointer is
// Tests that color pickers stops following the pointer if the pointer is
// released outside the tooltip frame (bug 1160720).
const PAGE_CONTENT = "data:text/html;charset=utf-8," +
'<body style="color: red">Test page for bug 1160720';
const TEST_URI = "<body style='color: red'>Test page for bug 1160720";
add_task(function*() {
yield addTab(PAGE_CONTENT);
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
let cSwatch = getRuleViewProperty(view, "element", "color").valueSpan
.querySelector(".ruleview-colorswatch");

17
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js
View File

@ -4,15 +4,16 @@
"use strict";
// Test that a color change in the color picker is reverted when ESC is pressed
// Tests that a color change in the color picker is reverted when ESC is
// pressed.
let TEST_URI = [
"<style type='text/css'>",
" body {",
" background-color: #EDEDED;",
" }",
"</style>",
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
background-color: #EDEDED;
}
</style>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

39
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-swatch-displayed.js
View File

@ -4,25 +4,25 @@
"use strict";
// Test that color swatches are displayed next to colors in the rule-view
// Tests that color swatches are displayed next to colors in the rule-view.
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' color: red;',
' background-color: #ededed;',
' background-image: url(chrome://global/skin/icons/warning-64.png);',
' border: 2em solid rgba(120, 120, 120, .5);',
' }',
' * {',
' color: blue;',
' box-shadow: inset 0 0 2px 20px red, inset 0 0 2px 40px blue;',
' }',
'</style>',
'Testing the color picker tooltip!'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
color: red;
background-color: #ededed;
background-image: url(chrome://global/skin/icons/warning-64.png);
border: 2em solid rgba(120, 120, 120, .5);
}
* {
color: blue;
box-shadow: inset 0 0 2px 20px red, inset 0 0 2px 40px blue;
}
</style>
Testing the color picker tooltip!
`;
// Tests that properties in the rule-view contain color swatches
// Tests that properties in the rule-view contain color swatches.
// Each entry in the test array should contain:
// {
// selector: the rule-view selector to look for the property in
@ -38,9 +38,8 @@ const TESTS = [
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
for (let {selector, propertyName, nb} of TESTS) {
info("Looking for color swatches in property " + propertyName +

22
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
View File

@ -4,8 +4,8 @@
"use strict";
// Test that CSS property names are autocompleted and cycled correctly when
// editing an existing property in the rule view
// Tests that CSS property names are autocompleted and cycled correctly when
// editing an existing property in the rule view.
const MAX_ENTRIES = 10;
@ -18,8 +18,8 @@ const MAX_ENTRIES = 10;
// ]
let testData = [
["VK_RIGHT", "font", -1, 0],
["-","font-family", 0, MAX_ENTRIES],
["f","font-family", 0, 2],
["-", "font-family", 0, MAX_ENTRIES],
["f", "font-family", 0, 2],
["VK_BACK_SPACE", "font-f", -1, 0],
["VK_BACK_SPACE", "font-", -1, 0],
["VK_BACK_SPACE", "font", -1, 0],
@ -54,11 +54,10 @@ let testData = [
["VK_ESCAPE", null, -1, 0],
];
let TEST_URL = "data:text/html;charset=utf-8,<h1 style='font: 24px serif'>Filename" +
": browser_bug893965_css_property_completion_existing_property.js</h1>";
const TEST_URI = "<h1 style='font: 24px serif'>Header</h1>";
add_task(function*() {
yield addTab(TEST_URL);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openRuleView();
info("Test autocompletion after 1st page load");
@ -74,7 +73,8 @@ function* runAutocompletionTest(toolbox, inspector, view) {
yield selectNode("h1", inspector);
info("Focusing the css property editable field");
let propertyName = view.styleDocument.querySelectorAll(".ruleview-propertyname")[0];
let propertyName = view.styleDocument
.querySelectorAll(".ruleview-propertyname")[0];
let editor = yield focusEditableField(view, propertyName);
info("Starting to test for css property completion");
@ -90,7 +90,8 @@ function* testCompletion([key, completion, index, total], editor, view) {
let onSuggest;
if (/(left|right|back_space|escape|home|end|page_up|page_down)/ig.test(key)) {
info("Adding event listener for left|right|back_space|escape|home|end|page_up|page_down keys");
info("Adding event listener for " +
"left|right|back_space|escape|home|end|page_up|page_down keys");
onSuggest = once(editor.input, "keypress");
} else {
info("Waiting for after-suggest event on the editor");
@ -110,7 +111,8 @@ function* testCompletion([key, completion, index, total], editor, view) {
if (total == 0) {
ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
} else {
ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
ok(editor.popup._panel.state == "open" ||
editor.popup._panel.state == "showing", "Popup is open");
is(editor.popup.getItems().length, total, "Number of suggestions match");
is(editor.popup.selectedIndex, index, "Correct item is selected");
}

15
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
View File

@ -4,8 +4,8 @@
"use strict";
// Test that CSS property names and values are autocompleted and cycled correctly
// when editing existing properties in the rule view
// Tests that CSS property names and values are autocompleted and cycled
// correctly when editing existing properties in the rule view.
// format :
// [
@ -36,11 +36,10 @@ let testData = [
["VK_RETURN", {}, null, -1, 0]
];
let TEST_URL = "data:text/html;charset=utf-8,<h1 style='color: red'>Filename: " +
"browser_bug894376_css_value_completion_existing_property_value_pair.js</h1>";
const TEST_URI = "<h1 style='color: red'>Header</h1>";
add_task(function*() {
yield addTab(TEST_URL);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openRuleView();
info("Test autocompletion after 1st page load");
@ -68,7 +67,8 @@ function* runAutocompletionTest(toolbox, inspector, view) {
}
}
function* testCompletion([key, modifiers, completion, index, total], editor, view) {
function* testCompletion([key, modifiers, completion, index, total], editor,
view) {
info("Pressing key " + key);
info("Expecting " + completion + ", " + index + ", " + total);
@ -103,7 +103,8 @@ function* testCompletion([key, modifiers, completion, index, total], editor, vie
if (total == 0) {
ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
} else {
ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
ok(editor.popup._panel.state == "open" ||
editor.popup._panel.state == "showing", "Popup is open");
is(editor.popup.getItems().length, total, "Number of suggestions match");
is(editor.popup.selectedIndex, index, "Correct item is selected");
}

12
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
View File

@ -4,8 +4,8 @@
"use strict";
// Test that CSS property names are autocompleted and cycled correctly when
// creating a new property in the ruleview
// Tests that CSS property names are autocompleted and cycled correctly when
// creating a new property in the rule view.
const MAX_ENTRIES = 10;
@ -37,11 +37,10 @@ let testData = [
["VK_ESCAPE", null, -1, 0],
];
let TEST_URL = "data:text/html;charset=utf-8,<h1 style='border: 1px solid red'>Filename:" +
"browser_bug893965_css_property_completion_new_property.js</h1>";
const TEST_URI = "<h1 style='border: 1px solid red'>Header</h1>";
add_task(function*() {
yield addTab(TEST_URL);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openRuleView();
info("Test autocompletion after 1st page load");
@ -93,7 +92,8 @@ function* testCompletion([key, completion, index, total], editor, view) {
if (total == 0) {
ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
} else {
ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
ok(editor.popup._panel.state == "open" ||
editor.popup._panel.state == "showing", "Popup is open");
is(editor.popup.getItems().length, total, "Number of suggestions match");
is(editor.popup.selectedIndex, index, "Correct item is selected");
}

24
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
View File

@ -4,8 +4,8 @@
"use strict";
// Test that CSS property names and values are autocompleted and cycled correctly
// when editing new properties in the rule view
// Tests that CSS property names and values are autocompleted and cycled
// correctly when editing new properties in the rule view.
// format :
// [
@ -39,11 +39,17 @@ let testData = [
["VK_ESCAPE", {}, null, -1, 0]
];
let TEST_URL = "data:text/html;charset=utf-8,<style>h1{border: 1px solid red}</style>" +
"<h1>Test element</h1>";
const TEST_URI = `
<style type="text/css">
h1 {
border: 1px solid red;
}
</style>
<h1>Test element</h1>
`;
add_task(function*() {
yield addTab(TEST_URL);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openRuleView();
info("Test autocompletion after 1st page load");
@ -63,7 +69,7 @@ function* runAutocompletionTest(toolbox, inspector, view) {
let editor = yield focusEditableField(view, brace);
info("Starting to test for css property completion");
for (let i = 0; i < testData.length; i ++) {
for (let i = 0; i < testData.length; i++) {
// Re-define the editor at each iteration, because the focus may have moved
// from property to value and back
editor = inplaceEditor(view.styleDocument.activeElement);
@ -71,7 +77,8 @@ function* runAutocompletionTest(toolbox, inspector, view) {
}
}
function* testCompletion([key, modifiers, completion, index, total], editor, view) {
function* testCompletion([key, modifiers, completion, index, total], editor,
view) {
info("Pressing key " + key);
info("Expecting " + completion + ", " + index + ", " + total);
@ -106,7 +113,8 @@ function* testCompletion([key, modifiers, completion, index, total], editor, vie
if (total == 0) {
ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
} else {
ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
ok(editor.popup._panel.state == "open" ||
editor.popup._panel.state == "showing", "Popup is open");
is(editor.popup.getItems().length, total, "Number of suggestions match");
is(editor.popup.selectedIndex, index, "Correct item is selected");
}

9
browser/devtools/styleinspector/test/browser_ruleview_completion-popup-hidden-after-navigation.js
View File

@ -4,12 +4,12 @@
"use strict";
// Test that the ruleview autocomplete popup is hidden after page navigation
// Tests that the ruleview autocomplete popup is hidden after page navigation.
let TEST_URL = "data:text/html;charset=utf-8,<h1 style='font: 24px serif'></h1>";
const TEST_URI = "<h1 style='font: 24px serif'></h1>";
add_task(function*() {
yield addTab(TEST_URL);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
info("Test autocompletion popup is hidden after page navigation");
@ -18,7 +18,8 @@ add_task(function*() {
yield selectNode("h1", inspector);
info("Focusing the css property editable field");
let propertyName = view.styleDocument.querySelectorAll(".ruleview-propertyname")[0];
let propertyName = view.styleDocument
.querySelectorAll(".ruleview-propertyname")[0];
let editor = yield focusEditableField(view, propertyName);
info("Pressing key VK_DOWN");

0
browser/devtools/styleinspector/test/browser_ruleview_computed_01.js → browser/devtools/styleinspector/test/browser_ruleview_computed-lists_01.js
View File

0
browser/devtools/styleinspector/test/browser_ruleview_computed_02.js → browser/devtools/styleinspector/test/browser_ruleview_computed-lists_02.js
View File

35
browser/devtools/styleinspector/test/browser_ruleview_context-menu-show-mdn-docs-01.js
View File

@ -23,31 +23,29 @@ const {setBaseCssDocsUrl} = require("devtools/shared/widgets/MdnDocsWidget");
* code by having a tag called "padding" and a property
* value called "margin".
*/
const TEST_DOC =`
<html>
<head>
<style>
padding {font-family: margin;}
</style>
</head>
const TEST_URI = `
<html>
<head>
<style>
padding {font-family: margin;}
</style>
</head>
<body>
<padding>MDN tooltip testing</padding>
</body>
</html>`;
<body>
<padding>MDN tooltip testing</padding>
</body>
</html>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_DOC));
yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("padding", inspector);
yield testMdnContextMenuItemVisibility(view);
});
/**
* Test that the MDN context menu item is shown when it should be,
* Tests that the MDN context menu item is shown when it should be,
* and hidden when it should be.
* - iterate through every node in the rule view
* - set that node as popupNode (the node that the context menu
@ -68,9 +66,10 @@ function* testMdnContextMenuItemVisibility(view) {
view._contextmenu._updateMenuItems();
let isVisible = !view._contextmenu.menuitemShowMdnDocs.hidden;
let shouldBeVisible = isPropertyNameNode(node);
let message = shouldBeVisible? "shown": "hidden";
let message = shouldBeVisible ? "shown" : "hidden";
is(isVisible, shouldBeVisible,
"The MDN context menu item is " + message + " ; content : " + node.textContent + " ; type : " + node.nodeType);
"The MDN context menu item is " + message + " ; content : " +
node.textContent + " ; type : " + node.nodeType);
}
}

18
browser/devtools/styleinspector/test/browser_ruleview_context-menu-show-mdn-docs-02.js
View File

@ -22,21 +22,19 @@ const {setBaseCssDocsUrl} = require("devtools/shared/widgets/MdnDocsWidget");
const PROPERTYNAME = "color";
const TEST_DOC = `
<html>
<body>
<div style="color: red">
Test "Show MDN Docs" context menu option
</div>
</body>
</html>`;
<html>
<body>
<div style="color: red">
Test "Show MDN Docs" context menu option
</div>
</body>
</html>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_DOC));
let {inspector, view} = yield openRuleView();
yield selectNode("div", inspector);
yield testShowAndHideMdnTooltip(view);
});

20
browser/devtools/styleinspector/test/browser_ruleview_context-menu-show-mdn-docs-03.js
View File

@ -15,17 +15,19 @@
"use strict";
const { PrefObserver } = require("devtools/styleeditor/utils");
const PREF_ENABLE_MDN_DOCS_TOOLTIP = "devtools.inspector.mdnDocsTooltip.enabled";
const PREF_ENABLE_MDN_DOCS_TOOLTIP =
"devtools.inspector.mdnDocsTooltip.enabled";
const PROPERTY_NAME_CLASS = "ruleview-propertyname";
const TEST_DOC = `
<html>
<body>
<div style="color: red">
Test the pref to enable/disable the "Show MDN Docs" context menu option
</div>
</body>
</html>`;
<html>
<body>
<div style="color: red">
Test the pref to enable/disable the "Show MDN Docs" context menu option
</div>
</body>
</html>
`;
add_task(function* () {
info("Ensure the pref is true to begin with");
@ -95,7 +97,7 @@ function* setBooleanPref(pref, state) {
* menu item to be visible or not.
*/
function* testMdnContextMenuItemVisibility(view, shouldBeVisible) {
let message = shouldBeVisible? "shown": "hidden";
let message = shouldBeVisible ? "shown" : "hidden";
info("Test that MDN context menu item is " + message);
info("Set a CSS property name as popupNode");

4
browser/devtools/styleinspector/test/browser_ruleview_copy_styles.js
View File

@ -6,14 +6,14 @@
/**
* Tests the behaviour of the copy styles context menu items in the rule
* view
* view.
*/
XPCOMUtils.defineLazyGetter(this, "osString", function() {
return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
});
let TEST_URI = TEST_URL_ROOT + "doc_copystyles.html";
const TEST_URI = TEST_URL_ROOT + "doc_copystyles.html";
add_task(function*() {
yield addTab(TEST_URI);

34
browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-appears-on-swatch-click.js
View File

@ -4,26 +4,26 @@
"use strict";
// Test that cubic-bezier pickers appear when clicking on cubic-bezier swatches
// Tests that cubic-bezier pickers appear when clicking on cubic-bezier
// swatches.
const PAGE_CONTENT = [
'<style type="text/css">',
' div {',
' animation: move 3s linear;',
' transition: top 4s cubic-bezier(.1, 1.45, 1, -1.2);',
' }',
' .test {',
' animation-timing-function: ease-in-out;',
' transition-timing-function: ease-out;',
' }',
'</style>',
'<div class="test">Testing the cubic-bezier tooltip!</div>'
].join("\n");
const TEST_URI = `
<style type="text/css">
div {
animation: move 3s linear;
transition: top 4s cubic-bezier(.1, 1.45, 1, -1.2);
}
.test {
animation-timing-function: ease-in-out;
transition-timing-function: ease-out;
}
</style>
<div class="test">Testing the cubic-bezier tooltip!</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view cubic-bezier tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("div", inspector);
let swatches = [];

28
browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-commit-on-ENTER.js
View File

@ -4,24 +4,23 @@
"use strict";
// Test that a curve change in the cubic-bezier tooltip is committed when ENTER
// is pressed
// Tests that a curve change in the cubic-bezier tooltip is committed when ENTER
// is pressed.
const PAGE_CONTENT = [
'<style type="text/css">',
' body {',
' transition: top 2s linear;',
' }',
'</style>'
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
transition: top 2s linear;
}
</style>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,rule view cubic-bezier tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
info("Getting the bezier swatch element");
let swatch = getRuleViewProperty(view, "body" , "transition").valueSpan
let swatch = getRuleViewProperty(view, "body", "transition").valueSpan
.querySelector(".ruleview-bezierswatch");
yield testPressingEnterCommitsChanges(swatch, view);
@ -41,7 +40,8 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
let expected = "cubic-bezier(0.1, 2, 0.9, -1)";
yield waitForSuccess(() => {
return content.getComputedStyle(content.document.body).transitionTimingFunction === expected;
return content.getComputedStyle(content.document.body)
.transitionTimingFunction === expected;
}, "Waiting for the change to be previewed on the element");
ok(getRuleViewProperty(ruleView, "body", "transition").valueSpan.textContent

18
browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-revert-on-ESC.js
View File

@ -4,16 +4,16 @@
"use strict";
// Test that changes made to the cubic-bezier timing-function in the
// cubic-bezier tooltip are reverted when ESC is pressed
// Tests that changes made to the cubic-bezier timing-function in the
// cubic-bezier tooltip are reverted when ESC is pressed.
let TEST_URI = [
"<style type='text/css'>",
" body {",
" animation-timing-function: linear;",
" }",
"</style>",
].join("\n");
const TEST_URI = `
<style type='text/css'>
body {
animation-timing-function: linear;
}
</style>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

2
browser/devtools/styleinspector/test/browser_ruleview_custom.js
View File

@ -6,7 +6,7 @@
const TEST_URI = TEST_URL_ROOT + "doc_custom.html";
// Test the display of custom declarations in the rule-view
// Tests the display of custom declarations in the rule-view.
add_task(function*() {
yield addTab(TEST_URI);

38
browser/devtools/styleinspector/test/browser_ruleview_cycle-color.js
View File

@ -6,21 +6,18 @@
// Test cycling color types in the rule view.
const PAGE_CONTENT = [
"<style type=\"text/css\">",
" body {",
" color: #F00;",
" }",
"</style>",
"Test cycling color types in the rule view!"
].join("\n");
const TEST_URI = `
<style type="text/css">
body {
color: #F00;
}
</style>
Test cycling color types in the rule view!
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,Test cycling color types in the " +
"rule view.");
content.document.body.innerHTML = PAGE_CONTENT;
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let container = getRuleViewProperty(view, "body", "color").valueSpan;
checkColorCycling(container, inspector);
});
@ -34,27 +31,32 @@ function checkColorCycling(container, inspector) {
is(valueNode.textContent, "#F00", "Color displayed as a hex value.");
// HSL
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "hsl(0, 100%, 50%)",
"Color displayed as an HSL value.");
// RGB
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "rgb(255, 0, 0)",
"Color displayed as an RGB value.");
// Color name
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "red",
"Color displayed as a color name.");
// "Authored" (currently the computed value)
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "rgb(255, 0, 0)",
"Color displayed as an RGB value.");
// Back to hex
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
EventUtils.synthesizeMouseAtCenter(swatch,
{type: "mousedown", shiftKey: true}, win);
is(valueNode.textContent, "#F00",
"Color displayed as hex again.");
}

16
browser/devtools/styleinspector/test/browser_ruleview_edit-property-cancel.js
View File

@ -7,14 +7,14 @@
// Tests editing a property name or value and escaping will revert the
// changes and restore the original value.
let TEST_URI = [
"<style type='text/css'>",
"#testid {",
" background-color: #00F;",
"}",
"</style>",
"<div id='testid'>Styled Node</div>",
].join("\n");
const TEST_URI = `
<style type='text/css'>
#testid {
background-color: #00F;
}
</style>
<div id='testid'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

71
browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
View File

@ -7,7 +7,14 @@
// Test original value is correctly displayed when ESCaping out of the
// inplace editor in the style inspector.
const originalValue = "#00F";
const TEST_URI = `
<style type='text/css'>
#testid {
color: #00F;
}
</style>
<div id='testid'>Styled Node</div>
`;
// Test data format
// {
@ -17,44 +24,41 @@ const originalValue = "#00F";
// expected: what value is expected as a result
// }
const testData = [
{value: "red", commitKey: "VK_ESCAPE", modifiers: {}, expected: originalValue},
{value: "red", commitKey: "VK_RETURN", modifiers: {}, expected: "red"},
{value: "invalid", commitKey: "VK_RETURN", modifiers: {}, expected: "invalid"},
{value: "blue", commitKey: "VK_TAB", modifiers: {shiftKey: true}, expected: "blue"}
{
value: "red",
commitKey: "VK_ESCAPE",
modifiers: {},
expected: "#00F"
},
{
value: "red",
commitKey: "VK_RETURN",
modifiers: {},
expected: "red"
},
{
value: "invalid",
commitKey: "VK_RETURN",
modifiers: {},
expected: "invalid"
},
{
value: "blue",
commitKey: "VK_TAB", modifiers: {shiftKey: true},
expected: "blue"
}
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,test escaping property change reverts back to original value");
info("Creating the test document");
createDocument();
info("Opening the rule view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test node");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
info("Iterating over the test data");
for (let data of testData) {
yield runTestData(view, data);
}
});
function createDocument() {
let style = '' +
'#testid {' +
' color: ' + originalValue + ';' +
'}';
let node = content.document.createElement('style');
node.setAttribute("type", "text/css");
node.textContent = style;
content.document.getElementsByTagName("head")[0].appendChild(node);
content.document.body.innerHTML = '<div id="testid">Styled Node</div>';
}
function* runTestData(view, {value, commitKey, modifiers, expected}) {
let idRuleEditor = getRuleViewRuleEditor(view, 1);
let propEditor = idRuleEditor.rule.textProps[0].editor;
@ -62,7 +66,8 @@ function* runTestData(view, {value, commitKey, modifiers, expected}) {
info("Focusing the inplace editor field");
let editor = yield focusEditableField(view, propEditor.valueSpan);
is(inplaceEditor(propEditor.valueSpan), editor, "Focused editor should be the value span.");
is(inplaceEditor(propEditor.valueSpan), editor,
"Focused editor should be the value span.");
info("Entering test data " + value);
let onRuleViewChanged = view.once("ruleview-changed");
@ -79,8 +84,10 @@ function* runTestData(view, {value, commitKey, modifiers, expected}) {
yield onRuleViewChanged;
if (commitKey === "VK_ESCAPE") {
is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected);
is(propEditor.valueSpan.textContent, expected,
"Value is as expected: " + expected);
} else {
is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected);
is(propEditor.valueSpan.textContent, expected,
"Value is as expected: " + expected);
}
}

42
browser/devtools/styleinspector/test/browser_ruleview_edit-property-computed.js
View File

@ -6,16 +6,17 @@
// Test that the computed values of a style (the shorthand expansion) are
// properly updated after the style is changed.
add_task(function*() {
let TEST_URI = [
'<style type="text/css">',
' #testid {',
' padding: 10px;',
' }',
'</style>',
'<div id="testid">Styled Node</div>'
].join('\n');
const TEST_URI = `
<style type="text/css">
#testid {
padding: 10px;
}
</style>
<div id="testid">Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
@ -30,14 +31,17 @@ function* editAndCheck(view) {
info("Focusing the inplace editor field");
let editor = yield focusEditableField(view, propEditor.valueSpan);
is(inplaceEditor(propEditor.valueSpan), editor, "Focused editor should be the value span.");
is(inplaceEditor(propEditor.valueSpan), editor,
"Focused editor should be the value span.");
let onPropertyChange = waitForComputedStyleProperty("#testid", null, "padding-top", newPaddingValue);
let onPropertyChange = waitForComputedStyleProperty("#testid", null,
"padding-top", newPaddingValue);
info("Entering a new value");
EventUtils.sendString(newPaddingValue, view.styleWindow);
info("Waiting for the throttled previewValue to apply the changes to document");
info("Waiting for the throttled previewValue to apply the " +
"changes to document");
yield onPropertyChange;
let onBlur = once(editor.input, "blur");
@ -61,15 +65,19 @@ function* editAndCheck(view) {
is(computed.length, propNames.length, "There should be 4 computed values");
propNames.forEach((propName, i) => {
is(computed[i].name, propName, "Computed property #" + i + " has name " + propName);
is(computed[i].value, newPaddingValue, "Computed value of " + propName + " is as expected");
is(computed[i].name, propName,
"Computed property #" + i + " has name " + propName);
is(computed[i].value, newPaddingValue,
"Computed value of " + propName + " is as expected");
});
propEditor.expander.click();
let computedDom = propEditor.computed;
is(computedDom.children.length, propNames.length, "There should be 4 nodes in the DOM");
is(computedDom.children.length, propNames.length,
"There should be 4 nodes in the DOM");
propNames.forEach((propName, i) => {
is(computedDom.getElementsByClassName("ruleview-propertyvalue")[i].textContent,
newPaddingValue, "Computed value of " + propName + " in DOM is as expected");
is(computedDom.getElementsByClassName("ruleview-propertyvalue")[i]
.textContent, newPaddingValue,
"Computed value of " + propName + " in DOM is as expected");
});
}

60
browser/devtools/styleinspector/test/browser_ruleview_edit-property-order.js
View File

@ -4,18 +4,16 @@
"use strict";
// Checking properties orders and overrides in the rule-view
// Checking properties orders and overrides in the rule-view.
const TEST_URI = "<div id='testid'>Styled Node</div>";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_manipulation.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test document and getting the test node");
content.document.body.innerHTML = '<div id="testid">Styled Node</div>';
let element = getNode("#testid");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
let element = getNode("#testid");
let elementStyle = view._elementStyle;
let elementRule = elementStyle.rules[0];
@ -23,46 +21,62 @@ add_task(function*() {
let firstProp = elementRule.createProperty("background-color", "green", "");
let secondProp = elementRule.createProperty("background-color", "blue", "");
is(elementRule.textProps[0], firstProp, "Rules should be in addition order.");
is(elementRule.textProps[1], secondProp, "Rules should be in addition order.");
is(elementRule.textProps[1], secondProp,
"Rules should be in addition order.");
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "blue", "Second property should have been used.");
is(element.style.getPropertyValue("background-color"), "blue",
"Second property should have been used.");
info("Removing the second property and checking the applied style again");
secondProp.remove();
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "green", "After deleting second property, first should be used.");
is(element.style.getPropertyValue("background-color"), "green",
"After deleting second property, first should be used.");
info("Creating a new second property and checking that the insertion order is still the same");
info("Creating a new second property and checking that the insertion order " +
"is still the same");
secondProp = elementRule.createProperty("background-color", "blue", "");
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "blue", "New property should be used.");
is(elementRule.textProps[0], firstProp, "Rules shouldn't have switched places.");
is(elementRule.textProps[1], secondProp, "Rules shouldn't have switched places.");
is(element.style.getPropertyValue("background-color"), "blue",
"New property should be used.");
is(elementRule.textProps[0], firstProp,
"Rules shouldn't have switched places.");
is(elementRule.textProps[1], secondProp,
"Rules shouldn't have switched places.");
info("Disabling the second property and checking the applied style");
secondProp.setEnabled(false);
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "green", "After disabling second property, first value should be used");
is(element.style.getPropertyValue("background-color"), "green",
"After disabling second property, first value should be used");
info("Disabling the first property too and checking the applied style");
firstProp.setEnabled(false);
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "", "After disabling both properties, value should be empty.");
is(element.style.getPropertyValue("background-color"), "",
"After disabling both properties, value should be empty.");
info("Re-enabling the second propertyt and checking the applied style");
secondProp.setEnabled(true);
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "blue", "Value should be set correctly after re-enabling");
is(element.style.getPropertyValue("background-color"), "blue",
"Value should be set correctly after re-enabling");
info("Re-enabling the first property and checking the insertion order is still respected");
info("Re-enabling the first property and checking the insertion order " +
"is still respected");
firstProp.setEnabled(true);
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "blue", "Re-enabling an earlier property shouldn't make it override a later property.");
is(elementRule.textProps[0], firstProp, "Rules shouldn't have switched places.");
is(elementRule.textProps[1], secondProp, "Rules shouldn't have switched places.");
is(element.style.getPropertyValue("background-color"), "blue",
"Re-enabling an earlier property shouldn't make it override " +
"a later property.");
is(elementRule.textProps[0], firstProp,
"Rules shouldn't have switched places.");
is(elementRule.textProps[1], secondProp,
"Rules shouldn't have switched places.");
info("Modifying the first property and checking the applied style");
firstProp.setValue("purple", "");
yield elementRule._applyingModifications;
is(element.style.getPropertyValue("background-color"), "blue", "Modifying an earlier property shouldn't override a later property.");
is(element.style.getPropertyValue("background-color"), "blue",
"Modifying an earlier property shouldn't override a later property.");
});

18
browser/devtools/styleinspector/test/browser_ruleview_edit-property-remove_01.js
View File

@ -8,15 +8,15 @@
// return key, and checks if the focus is moved to the appropriate editable
// field.
let TEST_URI = [
"<style type='text/css'>",
"#testid {",
" background-color: #00F;",
" color: #00F;",
"}",
"</style>",
"<div id='testid'>Styled Node</div>",
].join("\n");
const TEST_URI = `
<style type='text/css'>
#testid {
background-color: #00F;
color: #00F;
}
</style>
<div id='testid'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

18
browser/devtools/styleinspector/test/browser_ruleview_edit-property-remove_02.js
View File

@ -8,15 +8,15 @@
// return key, and checks if the focus is moved to the appropriate editable
// field.
let TEST_URI = [
"<style type='text/css'>",
"#testid {",
" background-color: #00F;",
" color: #00F;",
"}",
"</style>",
"<div id='testid'>Styled Node</div>",
].join("\n");
const TEST_URI = `
<style type='text/css'>
#testid {
background-color: #00F;
color: #00F;
}
</style>
<div id='testid'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

19
browser/devtools/styleinspector/test/browser_ruleview_edit-property-remove_03.js
View File

@ -7,15 +7,16 @@
// Tests removing a property by clearing the property name and pressing shift
// and tab keys, and checks if the focus is moved to the appropriate editable
// field.
let TEST_URI = [
"<style type='text/css'>",
"#testid {",
" background-color: #00F;",
" color: #00F;",
"}",
"</style>",
"<div id='testid'>Styled Node</div>",
].join("\n");
const TEST_URI = `
<style type='text/css'>
#testid {
background-color: #00F;
color: #00F;
}
</style>
<div id='testid'>Styled Node</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

47
browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js
View File

@ -9,20 +9,21 @@
// FIXME: some of the inplace-editor focus/blur/commit/revert stuff
// should be factored out in head.js
const TEST_URI = `
<style type="text/css">
#testid {
color: red;
background-color: blue;
}
.testclass, .unmatched {
background-color: green;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<div id="testid2">Styled Node</div>
`;
let BACKGROUND_IMAGE_URL = 'url("' + TEST_URL_ROOT + 'doc_test_image.png")';
let TEST_URI = [
'<style type="text/css">',
'#testid {',
' color: red;',
' background-color: blue;',
'}',
'.testclass, .unmatched {',
' background-color: green;',
'}',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>',
'<div id="testid2">Styled Node</div>'
].join("\n");
let TEST_DATA = [
{ name: "border-color", value: "red", isValid: true },
@ -31,12 +32,8 @@ let TEST_DATA = [
];
add_task(function*() {
let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
let ruleEditor = getRuleViewRuleEditor(view, 1);
@ -52,12 +49,15 @@ function* testEditProperty(ruleEditor, name, value, isValid) {
let propEditor = ruleEditor.rule.textProps[0].editor;
info("Focusing an existing property name in the rule-view");
let editor = yield focusEditableField(ruleEditor.ruleView, propEditor.nameSpan, 32, 1);
let editor = yield focusEditableField(ruleEditor.ruleView,
propEditor.nameSpan, 32, 1);
is(inplaceEditor(propEditor.nameSpan), editor, "The property name editor got focused");
is(inplaceEditor(propEditor.nameSpan), editor,
"The property name editor got focused");
let input = editor.input;
info("Entering a new property name, including : to commit and focus the value");
info("Entering a new property name, including : to commit and " +
"focus the value");
let onValueFocus = once(ruleEditor.element, "focus", true);
let onModifications = ruleEditor.rule._applyingModifications;
EventUtils.sendString(name + ":", doc.defaultView);
@ -76,7 +76,8 @@ function* testEditProperty(ruleEditor, name, value, isValid) {
yield onBlur;
yield onModifications;
is(propEditor.isValid(), isValid, value + " is " + isValid ? "valid" : "invalid");
is(propEditor.isValid(), isValid,
value + " is " + isValid ? "valid" : "invalid");
info("Checking that the style property was changed on the content page");
let propValue = yield executeInContent("Test:GetRulePropertyValue", {

55
browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js
View File

@ -6,25 +6,24 @@
// Test several types of rule-view property edition
let TEST_URI = [
'<style type="text/css">',
'#testid {',
' background-color: blue;',
'}',
'.testclass, .unmatched {',
' background-color: green;',
'}',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>',
'<div id="testid2">Styled Node</div>'
].join("\n");
const TEST_URI = `
<style type="text/css">
#testid {
background-color: blue;
}
.testclass, .unmatched {
background-color: green;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<div id="testid2">Styled Node</div>
`;
add_task(function*() {
let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openRuleView();
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testEditProperty(inspector, view);
yield testDisableProperty(inspector, view);
yield testPropertyStillMarkedDirty(inspector, view);
@ -36,15 +35,19 @@ function* testEditProperty(inspector, ruleView) {
let editor = yield focusEditableField(ruleView, propEditor.nameSpan);
let input = editor.input;
is(inplaceEditor(propEditor.nameSpan), editor, "Next focused editor should be the name editor.");
is(inplaceEditor(propEditor.nameSpan), editor,
"Next focused editor should be the name editor.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected.");
// Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
// Try clicking on the editor's input again, shouldn't cause trouble
// (see bug 761665).
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
input.select();
info("Entering property name \"border-color\" followed by a colon to focus the value");
info("Entering property name \"border-color\" followed by a colon to " +
"focus the value");
let onFocus = once(idRuleEditor.element, "focus", true);
EventUtils.sendString("border-color:", ruleView.styleWindow);
yield onFocus;
@ -53,12 +56,15 @@ function* testEditProperty(inspector, ruleView) {
info("Verifying that the focused field is the valueSpan");
editor = inplaceEditor(ruleView.styleDocument.activeElement);
input = editor.input;
is(inplaceEditor(propEditor.valueSpan), editor, "Focus should have moved to the value.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
is(inplaceEditor(propEditor.valueSpan), editor,
"Focus should have moved to the value.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected.");
info("Entering a value following by a semi-colon to commit it");
let onBlur = once(editor.input, "blur");
// Use sendChar() to pass each character as a string so that we can test propEditor.warning.hidden after each character.
// Use sendChar() to pass each character as a string so that we can test
// propEditor.warning.hidden after each character.
for (let ch of "red;") {
EventUtils.sendChar(ch, ruleView.styleWindow);
is(propEditor.warning.hidden, true,
@ -74,7 +80,8 @@ function* testEditProperty(inspector, ruleView) {
});
is(newValue, "red", "border-color should have been set.");
info("Entering property name \"color\" followed by a colon to focus the value");
info("Entering property name \"color\" followed by a colon to " +
"focus the value");
onFocus = once(idRuleEditor.element, "focus", true);
EventUtils.sendString("color:", ruleView.styleWindow);
yield onFocus;

49
browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js
View File

@ -7,45 +7,42 @@
// Tests that emptying out an existing value removes the property and
// doesn't cause any other issues. See also Bug 1150780.
let TEST_URI = [
'<style type="text/css">',
'#testid {',
' color: red;',
' background-color: blue;',
' font-size: 12px;',
'}',
'.testclass, .unmatched {',
' background-color: green;',
'}',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>',
'<div id="testid2">Styled Node</div>'
].join("\n");
const TEST_URI = `
<style type="text/css">
#testid {
color: red;
background-color: blue;
font-size: 12px;
}
.testclass, .unmatched {
background-color: green;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<div id="testid2">Styled Node</div>
`;
add_task(function*() {
let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
let ruleEditor = getRuleViewRuleEditor(view, 1);
let doc = ruleEditor.doc;
let propEditor = ruleEditor.rule.textProps[1].editor;
let editor = yield focusEditableField(view, propEditor.valueSpan);
yield focusEditableField(view, propEditor.valueSpan);
info("Deleting all the text out of a value field");
yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_DELETE", "VK_RETURN"]);
yield sendCharsAndWaitForFocus(view, ruleEditor.element,
["VK_DELETE", "VK_RETURN"]);
info("Pressing enter a couple times to cycle through editors");
yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
isnot (ruleEditor.rule.textProps[1].editor.nameSpan.style.display, "none", "The name span is visible");
is (ruleEditor.rule.textProps.length, 2, "Correct number of props");
isnot(ruleEditor.rule.textProps[1].editor.nameSpan.style.display, "none",
"The name span is visible");
is(ruleEditor.rule.textProps.length, 2, "Correct number of props");
});
function* sendCharsAndWaitForFocus(view, element, chars) {

Some files were not shown because too many files have changed in this diff Show More