Bug 1245996 - inspector: fix xul scrollbars stealing focus;r=pbro draft
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 05 Feb 2016 10:33:17 +0100
changeset 331851 2197cc139fa96907b72601d7083b2b9b71d53a5b
parent 331845 b68b4f667bfc4187eedfd5c3bb215747600f5cd0
child 514475 f87ab2e23e17d32def6a36c53c3db2105486c8b0
push id11088
push userjdescottes@mozilla.com
push dateThu, 18 Feb 2016 11:09:37 +0000
reviewerspbro
bugs1245996
milestone47.0a1
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
devtools/client/inspector/inspector.css
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js
--- 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.");
+}