[Media Controls] Allowing tabbing into controls after touch

This CL modifies MediaControlsImpl's OnFocusIn handler to only prevent
showing the controls while the tap timer is running, instead of anytime
we're using touch controls. This fixes an issue where users were unable
to tab into the controls after touching on the video.

Bug: 919784
Change-Id: I7babc2665ecf7ce0bfe32905982caaa5c5843395
Reviewed-on: https://chromium-review.googlesource.com/c/1447029
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Reviewed-by: CJ DiMeglio <lethalantidote@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#627743}(cherry picked from commit 4dd5227997a010d8197c308a5625359f28d2a828)
Reviewed-on: https://chromium-review.googlesource.com/c/1452460
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/branch-heads/3683@{#169}
Cr-Branched-From: e51029943e0a38dd794b73caaf6373d5496ae783-refs/heads/master@{#625896}
diff --git a/third_party/blink/renderer/modules/media_controls/media_controls_impl.cc b/third_party/blink/renderer/modules/media_controls/media_controls_impl.cc
index 2189f8e..1e45d06 100644
--- a/third_party/blink/renderer/modules/media_controls/media_controls_impl.cc
+++ b/third_party/blink/renderer/modules/media_controls/media_controls_impl.cc
@@ -1870,8 +1870,9 @@
 }
 
 void MediaControlsImpl::OnFocusIn() {
-  // Touch focus shouldn't affect controls visibility.
-  if (!MediaElement().ShouldShowControls() || is_touch_interaction_)
+  // If the tap timer is active, then we will toggle the controls when the timer
+  // completes, so we don't want to start showing here.
+  if (!MediaElement().ShouldShowControls() || tap_timer_.IsActive())
     return;
 
   ResetHideMediaControlsTimer();
diff --git a/third_party/blink/web_tests/media/controls/tab-into-controls-after-touch.html b/third_party/blink/web_tests/media/controls/tab-into-controls-after-touch.html
new file mode 100644
index 0000000..c7ad4cf
--- /dev/null
+++ b/third_party/blink/web_tests/media/controls/tab-into-controls-after-touch.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>Test that when a video is touched to play, you can still tab into the controls.</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../media-controls.js"></script>
+<video controls width=500 preload=none src="../content/60_sec_video.webm"></video>
+<script>
+async_test(t => {
+  const video = document.querySelector('video');
+  enableTestMode(video);
+
+  video.addEventListener('loadedmetadata', t.step_func(() => {
+    assert_true(isControlsPanelVisible(video),
+        'controls should be visible before tapping');
+
+    // Touch the play button to start the video and hide the controls.
+    singleTouchOnControl(enabledPlayButton(video));
+  }));
+
+  video.addEventListener('playing', t.step_func(() => {
+    // Once the video is playing, wait for the controls to hide.
+    runAfterHideMediaControlsTimerFired(t.step_func_done(() => {
+      assert_false(isControlsPanelVisible(video),
+          'controls should hide after tapping on the play button');
+
+      // Tab to focus the video.
+      eventSender.keyDown('Tab');
+      assert_true(isControlsPanelVisible(video),
+          'controls should show when tabbed into')
+    }), video);
+  }));
+
+  video.load();
+});
+</script>
+</html>