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

Bug 1189472 - [Rule View] Pseudo-class panel and checkboxes should only be tab focusable when the panel is opened r=bgrins

Browse Source
This commit is contained in:
Gabriel Luong 2015-07-30 19:02:22 -07:00
parent 74291701cd
commit 227596ffe1
3 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,10 +48,10 @@
<button id="ruleview-add-rule-button" title="&addRuleButtonTooltip;" class="devtools-button"></button>
<button id="pseudo-class-panel-toggle" title="&togglePseudoClassPanel;" class="devtools-button"></button>
</div>
<div id="pseudo-class-panel" class="devtools-toolbar" hidden="true">
<label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" />:hover</label>
<label><input id="pseudo-active-toggle" type="checkbox" value=":active" />:active</label>
<label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" />:focus</label>
<div id="pseudo-class-panel" class="devtools-toolbar" hidden="true" tabindex="-1">
<label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
<label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label>
<label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label>
</div>
</div>

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

@ -2298,9 +2298,16 @@ CssRuleView.prototype = {
_onTogglePseudoClassPanel: function() {
if (this.pseudoClassPanel.hidden) {
this.pseudoClassToggle.setAttribute("checked", "true");
this.hoverCheckbox.setAttribute("tabindex", "0");
this.activeCheckbox.setAttribute("tabindex", "0");
this.focusCheckbox.setAttribute("tabindex", "0");
} else {
this.pseudoClassToggle.removeAttribute("checked");
this.hoverCheckbox.setAttribute("tabindex", "-1");
this.activeCheckbox.setAttribute("tabindex", "-1");
this.focusCheckbox.setAttribute("tabindex", "-1");
}
this.pseudoClassPanel.hidden = !this.pseudoClassPanel.hidden;
},

81
browser/devtools/styleinspector/test/browser_ruleview_pseudo_lock_options.js
View File

@ -29,40 +29,38 @@ add_task(function*() {
let {inspector, view} = yield openRuleView();
yield selectNode("div", inspector);
yield assertPseudoPanelClosed(view);
info("Toggle the pseudo class panel open");
ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Hidden");
view.pseudoClassToggle.click();
ok(!view.pseudoClassPanel.hidden, "Pseudo Class Panel Opened");
ok(!view.hoverCheckbox.disabled, ":hover checkbox is not disabled");
ok(!view.activeCheckbox.disabled, ":active checkbox is not disabled");
ok(!view.focusCheckbox.disabled, ":focus checkbox is not disabled");
yield assertPseudoPanelOpened(view);
info("Toggle each pseudo lock and check that the pseudo lock is added");
yield togglePseudoClass(inspector, view, view.hoverCheckbox);
yield togglePseudoClass(inspector, view.hoverCheckbox);
yield assertPseudoAdded(inspector, view, ":hover", 3, 1);
yield togglePseudoClass(inspector, view, view.hoverCheckbox);
yield togglePseudoClass(inspector, view.hoverCheckbox);
yield assertPseudoRemoved(inspector, view, 2);
yield togglePseudoClass(inspector, view, view.activeCheckbox);
yield togglePseudoClass(inspector, view.activeCheckbox);
yield assertPseudoAdded(inspector, view, ":active", 3, 1);
yield togglePseudoClass(inspector, view, view.activeCheckbox);
yield togglePseudoClass(inspector, view.activeCheckbox);
yield assertPseudoRemoved(inspector, view, 2);
yield togglePseudoClass(inspector, view, view.focusCheckbox);
yield togglePseudoClass(inspector, view.focusCheckbox);
yield assertPseudoAdded(inspector, view, ":focus", 3, 1);
yield togglePseudoClass(inspector, view, view.focusCheckbox);
yield togglePseudoClass(inspector, view.focusCheckbox);
yield assertPseudoRemoved(inspector, view, 2);
info("Toggle all pseudo lock and check that the pseudo lock is added");
yield togglePseudoClass(inspector, view, view.hoverCheckbox);
yield togglePseudoClass(inspector, view, view.activeCheckbox);
yield togglePseudoClass(inspector, view, view.focusCheckbox);
yield togglePseudoClass(inspector, view.hoverCheckbox);
yield togglePseudoClass(inspector, view.activeCheckbox);
yield togglePseudoClass(inspector, view.focusCheckbox);
yield assertPseudoAdded(inspector, view, ":focus", 5, 1);
yield assertPseudoAdded(inspector, view, ":active", 5, 2);
yield assertPseudoAdded(inspector, view, ":hover", 5, 3);
yield togglePseudoClass(inspector, view, view.hoverCheckbox);
yield togglePseudoClass(inspector, view, view.activeCheckbox);
yield togglePseudoClass(inspector, view, view.focusCheckbox);
yield togglePseudoClass(inspector, view.hoverCheckbox);
yield togglePseudoClass(inspector, view.activeCheckbox);
yield togglePseudoClass(inspector, view.focusCheckbox);
yield assertPseudoRemoved(inspector, view, 2);
info("Select a null element");
@ -76,29 +74,62 @@ add_task(function*() {
info("Toggle the pseudo class panel close");
view.pseudoClassToggle.click();
ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Closed");
yield assertPseudoPanelClosed(view);
});
function* togglePseudoClass(inspector, ruleView, pseudoClassOption) {
function* togglePseudoClass(inspector, pseudoClassOption) {
info("Toggle the pseudoclass, wait for it to be applied");
let onRefresh = inspector.once("rule-view-refreshed");
pseudoClassOption.click();
yield onRefresh;
}
function* assertPseudoAdded(inspector, ruleView, pseudoClass, numRules,
function* assertPseudoAdded(inspector, view, pseudoClass, numRules,
childIndex) {
info("Check that the ruleview contains the pseudo-class rule");
is(ruleView.element.children.length, numRules,
is(view.element.children.length, numRules,
"Should have " + numRules + " rules.");
is(getRuleViewRuleEditor(ruleView, childIndex).rule.selectorText,
is(getRuleViewRuleEditor(view, childIndex).rule.selectorText,
"div" + pseudoClass, "rule view is showing " + pseudoClass + " rule");
}
function* assertPseudoRemoved(inspector, ruleView, numRules) {
function* assertPseudoRemoved(inspector, view, numRules) {
info("Check that the ruleview no longer contains the pseudo-class rule");
is(ruleView.element.children.length, numRules,
is(view.element.children.length, numRules,
"Should have " + numRules + " rules.");
is(getRuleViewRuleEditor(ruleView, 1).rule.selectorText, "div",
is(getRuleViewRuleEditor(view, 1).rule.selectorText, "div",
"Second rule is div");
}
function* assertPseudoPanelOpened(view) {
info("Check the opened state of the pseudo class panel");
ok(!view.pseudoClassPanel.hidden, "Pseudo Class Panel Opened");
ok(!view.hoverCheckbox.disabled, ":hover checkbox is not disabled");
ok(!view.activeCheckbox.disabled, ":active checkbox is not disabled");
ok(!view.focusCheckbox.disabled, ":focus checkbox is not disabled");
is(view.pseudoClassPanel.getAttribute("tabindex"), "-1",
"Pseudo Class Panel has a tabindex of -1");
is(view.hoverCheckbox.getAttribute("tabindex"), "0",
":hover checkbox has a tabindex of 0");
is(view.activeCheckbox.getAttribute("tabindex"), "0",
":active checkbox has a tabindex of 0");
is(view.focusCheckbox.getAttribute("tabindex"), "0",
":focus checkbox has a tabindex of 0");
}
function* assertPseudoPanelClosed(view) {
info("Check the closed state of the pseudo clas panel");
ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Hidden");
is(view.pseudoClassPanel.getAttribute("tabindex"), "-1",
"Pseudo Class Panel has a tabindex of -1");
is(view.hoverCheckbox.getAttribute("tabindex"), "-1",
":hover checkbox has a tabindex of -1");
is(view.activeCheckbox.getAttribute("tabindex"), "-1",
":active checkbox has a tabindex of -1");
is(view.focusCheckbox.getAttribute("tabindex"), "-1",
":focus checkbox has a tabindex of -1");
}