Display a pause screen in a paused browser.

Closes #294.

[email protected]

Review URL: https://codereview.chromium.org//1264043002 .

Author: nex3

lib/src/runner.dart

@@ -238,10 +238,10 @@ class Runner {
               "${suite.platform} and set breakpoints. Once you're finished, "
               "return to this terminal and press Enter."));
 
-      // TODO(nweiz): Display something in the paused browsers indicating that
-      // they're paused.
-
-      await stdinLines.next;
+      await race([
+        suite.environment.displayPause(),
+        cancelableNext(stdinLines)
+      ]);
     } finally {
       _reporter.resume();
     }

lib/src/runner/browser/browser_manager.dart

@@ -12,6 +12,7 @@ import 'package:pool/pool.dart';
 
 import '../../backend/metadata.dart';
 import '../../backend/test_platform.dart';
+import '../../util/cancelable_future.dart';
 import '../../util/multi_channel.dart';
 import '../../util/remote_exception.dart';
 import '../../util/stack_trace_mapper.dart';
@@ -52,6 +53,12 @@ class BrowserManager {
   /// Whether the channel to the browser has closed.
   bool _closed = false;
 
+  /// The completer for [_BrowserEnvironment.displayPause].
+  ///
+  /// This will be `null` as long as the browser isn't displaying a pause
+  /// screen.
+  CancelableCompleter _pauseCompleter;
+
   /// The environment to attach to each suite.
   _BrowserEnvironment _environment;
 
@@ -62,7 +69,7 @@ class BrowserManager {
           webSocket.map(JSON.decode),
           mapSink(webSocket, JSON.encode)) {
     _environment = new _BrowserEnvironment(this);
-    _channel.stream.listen(null, onDone: () => _closed = true);
+    _channel.stream.listen(_onMessage, onDone: _onDone);
   }
 
   /// Tells the browser the load a test suite from the URL [url].
@@ -153,6 +160,35 @@ class BrowserManager {
     }), platform: browser, metadata: metadata, path: path,
         onClose: () => closeIframe());
   }
+
+  /// An implementation of [Environment.displayPause].
+  CancelableFuture _displayPause() {
+    if (_pauseCompleter != null) return _pauseCompleter.future;
+
+    _pauseCompleter = new CancelableCompleter(() {
+      _channel.sink.add({"command": "resume"});
+      _pauseCompleter = null;
+    });
+
+    _channel.sink.add({"command": "displayPause"});
+    return _pauseCompleter.future.whenComplete(() {
+      _pauseCompleter = null;
+    });
+  }
+
+  /// The callback for handling messages received from the host page.
+  void _onMessage(Map message) {
+    assert(message["command"] == "resume");
+    if (_pauseCompleter == null) return;
+    _pauseCompleter.complete();
+  }
+
+  /// The callback called when the WebSocket is closed.
+  void _onDone() {
+    _closed = true;
+    if (_pauseCompleter != null) _pauseCompleter.complete();
+    _pauseCompleter = null;
+  }
 }
 
 /// An implementation of [Environment] for the browser.
@@ -162,4 +198,6 @@ class _BrowserEnvironment implements Environment {
   final BrowserManager _manager;
 
   _BrowserEnvironment(this._manager);
+
+  CancelableFuture displayPause() => _manager._displayPause();
 }

lib/src/runner/browser/static/host.css

@@ -8,6 +8,35 @@ iframe {
   visibility: hidden;
 }
 
+#play {
+  display: none;
+  cursor: pointer;
+}
+
+#dark {
+  display: none;
+}
+
+.paused #play {
+  display: block;
+}
+
+.paused #dark {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.paused #right-flank, .paused #right-ear, .paused #right-paw,
+.paused #left-flank,  .paused #left-ear,  .paused #left-paw {
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+
 /* Compiled output from
  * http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */
 

lib/src/runner/browser/static/host.dart

@@ -81,11 +81,21 @@ void main() {
         var suiteChannel = serverChannel.virtualChannel(message['channel']);
         var iframeChannel = _connectToIframe(message['url'], message['id']);
         suiteChannel.pipe(iframeChannel);
+      } else if (message['command'] == 'displayPause') {
+        document.body.classes.add('paused');
+      } else if (message['command'] == 'resume') {
+        document.body.classes.remove('paused');
       } else {
         assert(message['command'] == 'closeSuite');
         _iframes[message['id']].remove();
       }
     });
+
+    var play = document.querySelector("#play");
+    play.onClick.listen((_) {
+      document.body.classes.remove('paused');
+      serverChannel.sink.add({"command": "resume"});
+    });
   }, onError: (error, stackTrace) {
     print("$error\n${new Trace.from(stackTrace).terse}");
   });
@@ -100,8 +110,9 @@ MultiChannel _connectToServer() {
   var webSocket = new WebSocket(currentUrl.queryParameters['managerUrl']);
 
   var inputController = new StreamController(sync: true);
-  webSocket.onMessage.listen(
-      (message) => inputController.add(JSON.decode(message.data)));
+  webSocket.onMessage.listen((message) {
+    inputController.add(JSON.decode(message.data));
+  });
 
   var outputController = new StreamController(sync: true);
   outputController.stream.listen(