MD Settings: update dialogs to focus without ink when using mouse

ui/webui/resources/js/cr/ui/focus_without_ink.js

Index: ui/webui/resources/js/cr/ui/focus_without_ink.js
diff --git a/ui/webui/resources/js/cr/ui/focus_without_ink.js b/ui/webui/resources/js/cr/ui/focus_without_ink.js
new file mode 100644
index 0000000000000000000000000000000000000000..f3e51462e192044b7374d46a6876cd1f3accc250
--- /dev/null
+++ b/ui/webui/resources/js/cr/ui/focus_without_ink.js
@@ -0,0 +1,43 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('cr.ui', function() {
+  var hideInk = false;
+
+  document.addEventListener('mousedown', function() {

[dpapad, 2017/05/02 00:13:22]

As discussed in person, can we make this file re-entrant, such that duplicate
listeners are not registered if this file is imported more than once?

[Dan Beam, 2017/05/02 02:55:11]

Done.

+    hideInk = true;
+  }, true);
+  document.addEventListener('touchstart', function() {

[dpapad, 2017/05/02 00:13:22]

Maybe we can use 'pointerdown' instead of mousedown+touchstart? We already use
it at
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/settin....

[Dan Beam, 2017/05/02 02:55:11]

Done.

+    hideInk = true;
+  }, true);
+  document.addEventListener('keydown', function() {
+    hideInk = false;
+  }, true);
+
+  /**
+   * Attempts to track whether focus outlines should be shown, and if they
+   * shouldn't, removes the "ink" (ripple) from a control while focusing it.
+   * This is helpful when a user is clicking/touching, because it's not super
+   * helpful to show focus ripples in that case. This is Polymer-specific.
+   * @param {Element} toFocus

[dpapad, 2017/05/02 00:13:22]

I think focus() only exists on HTMLElemnet, but not Element. Also, parameter is
not nullable so let's add a "!".

[Dan Beam, 2017/05/02 02:55:11]

Done. (I originally didn't do this intentionally to not add a bunch of
assert()s)

+   */
+  function focusWithoutInk(toFocus) {
+    assert('noink' in toFocus);
+    assert(document == toFocus.ownerDocument);
+
+    var origNoInk;
+
+    if (hideInk) {
+      origNoInk = toFocus.noink;
+      toFocus.noink = true;
+    }
+
+    toFocus.focus();
+
+    if (hideInk)
+      toFocus.noink = origNoInk;
+  }
+
+  return {focusWithoutInk: focusWithoutInk};
+});