Bug 1245996 - inspector: fix xul scrollbars stealing focus;r=pbro
Apply -moz-user-focus: normal; only on direct descendants of inspector
tabpanels and not on tabpanels themselves. Avoids XUL scrollbars
from stealing the focus when clicked.
Test added, run only on windows and linux
MozReview-Commit-ID: KnZpJDxfzj2
--- a/devtools/client/inspector/inspector.css
+++ b/devtools/client/inspector/inspector.css
@@ -22,14 +22,14 @@
max-width: 130px;
margin-left: 15px;
}
#searchbox-panel-listbox > richlistitem > .autocomplete-value {
max-width: 150px;
}
-.inspector-tabpanel {
+.inspector-tabpanel > * {
/*
* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css
*/
-moz-user-focus: normal;
}
\ No newline at end of file
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -92,16 +92,18 @@ skip-if = e10s # Bug 1039528: "inspect e
[browser_rules_edit-property_03.js]
[browser_rules_edit-property_04.js]
[browser_rules_edit-property_05.js]
[browser_rules_edit-property_06.js]
[browser_rules_edit-property_07.js]
[browser_rules_edit-property_08.js]
[browser_rules_edit-property_09.js]
[browser_rules_edit-selector-click.js]
+[browser_rules_edit-selector-click-on-scrollbar.js]
+skip-if = os == "mac" # Bug 1245996 : click on scrollbar not working on OSX
[browser_rules_edit-selector-commit.js]
[browser_rules_edit-selector_01.js]
[browser_rules_edit-selector_02.js]
[browser_rules_edit-selector_03.js]
[browser_rules_edit-selector_04.js]
[browser_rules_edit-selector_05.js]
[browser_rules_edit-selector_06.js]
[browser_rules_edit-selector_07.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js
@@ -0,0 +1,88 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing ruleview inplace-editor is not blurred when clicking on the ruleview
+// container scrollbar.
+
+const TEST_URI = `
+ <style type="text/css">
+ div.testclass {
+ color: black;
+ }
+ .a {
+ color: #aaa;
+ }
+ .b {
+ color: #bbb;
+ }
+ .c {
+ color: #ccc;
+ }
+ .d {
+ color: #ddd;
+ }
+ .e {
+ color: #eee;
+ }
+ .f {
+ color: #fff;
+ }
+ </style>
+ <div class="testclass a b c d e f">Styled Node</div>
+`;
+
+add_task(function*() {
+ info("Toolbox height should be small enough to force scrollbars to appear");
+ yield new Promise(done => {
+ let options = {"set": [
+ ["devtools.toolbox.footer.height", 200],
+ ]};
+ SpecialPowers.pushPrefEnv(options, done);
+ });
+
+ yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+ let {inspector, view} = yield openRuleView();
+ yield selectNode(".testclass", inspector);
+
+ info("Check we have an overflow on the ruleview container.");
+ let container = view.element;
+ let hasScrollbar = container.offsetHeight < container.scrollHeight;
+ ok(hasScrollbar, "The rule view container should have a vertical scrollbar.");
+
+ info("Focusing an existing selector name in the rule-view.");
+ let ruleEditor = getRuleViewRuleEditor(view, 1);
+ let editor = yield focusEditableField(view, ruleEditor.selectorText);
+ is(inplaceEditor(ruleEditor.selectorText), editor,
+ "The selector editor is focused.");
+
+ info("Click on the scrollbar element.");
+ yield clickOnRuleviewScrollbar(view);
+
+ is(editor.input, view.styleDocument.activeElement,
+ "The editor input should still be focused.");
+
+ info("Check a new value can still be committed in the editable field");
+ let newValue = ".testclass.a.b.c.d.e.f";
+ let onRuleViewChanged = once(view, "ruleview-changed");
+
+ info("Enter new value and commit.");
+ editor.input.value = newValue;
+ EventUtils.synthesizeKey("VK_RETURN", {});
+ yield onRuleViewChanged;
+ ok(getRuleViewRule(view, newValue), "Rule with '" + newValue + " 'exists.");
+});
+
+function* clickOnRuleviewScrollbar(view) {
+ let container = view.element;
+ let onScroll = once(container, "scroll");
+ let rect = container.getBoundingClientRect();
+ // click 5 pixels before the bottom-right corner should hit the scrollbar
+ EventUtils.synthesizeMouse(container, rect.width - 5, rect.height - 5,
+ {}, view.styleWindow);
+ yield onScroll;
+
+ ok(true, "The rule view container scrolled after clicking on the scrollbar.");
+}