Chromium Code Reviews| Index: ppapi/examples/mouse_lock/mouse_lock.html |
| diff --git a/ppapi/examples/mouse_lock/mouse_lock.html b/ppapi/examples/mouse_lock/mouse_lock.html |
| index 3f8841fa6f25e7c7d200f4ca90bbcce462f878be..a5bfb4849eb776ca60b3889e72e02c78eddce024 100755 |
| --- a/ppapi/examples/mouse_lock/mouse_lock.html |
| +++ b/ppapi/examples/mouse_lock/mouse_lock.html |
| @@ -7,19 +7,67 @@ |
| --> |
| <head> |
| <title>Mouse Lock Example</title> |
| + <style type="text/css"> |
| + :-webkit-full-screen { |
| + width: 100%; |
| + height: 100%; |
| + } |
| + </style> |
| + <script> |
| + var fullscreen = false; |
| + function ToggleFullscreen() { |
| + if (fullscreen) { |
| + document.webkitCancelFullScreen(); |
| + } else { |
| + document.getElementById('container').webkitRequestFullScreen( |
| + Element.ALLOW_KEYBOARD_INPUT); |
| + } |
| + fullscreen = !fullscreen; |
| + } |
| + </script> |
| </head> |
| - |
| <body title="This tooltip should not be shown if the mouse is locked."> |
| -<ul> |
| - <li>Lock mouse: left click in either of the two boxes; or right click in |
| - either of the boxes to ensure that it is focused and then press Enter key. |
| - </li> |
| - <li>Unlock mouse: lose focus, press Esc key, or right click.</li> |
| -</ul> |
| -<object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| - width="300" height="300" border="2px"></object> |
| -<div></div> |
| -<object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| - width="300" height="300" border="2px"></object> |
| +<div id="container"> |
| + <ul> |
| + <li>There are two different kinds of fullscreen mode - "tab fullscreen" and |
| + "browser fullscreen". |
| + <ul> |
| + <li>"tab fullscreen" refers to when a tab enters fullscreen mode via the |
| + JS or Pepper fullscreen API;</li> |
| + <li>"browser fullscreen" refers to the user putting the browser itself |
| + into fullscreen mode from the UI (e.g., pressing F11).</li> |
| + </ul> |
| + <span style="font-weight:bold"> |
| + NOTE: Mouse lock is only allowed in "tab fullscreen" mode. |
| + </span> |
| + </li> |
| + <li>Lock mouse: |
| + <ul> |
| + <li>left click in either of the two boxes; or</li> |
| + <li>right click in either of the boxes to ensure that it is focused and |
| + then press Enter key. (You could verify that the tooltip window is |
| + dismissed properly by this second approach.)</li> |
| + </ul> |
| + </li> |
| + <li>Unlock mouse: |
| + <ul> |
| + <li>lose focus; or</li> |
| + <li>press Esc key; or</li> |
| + <li>right click; or</li> |
|
scheib
2011/09/28 22:48:32
Consider for this change, or a future one: I sugge
yzshen1
2011/09/29 20:41:04
I would like to have a way to exit by mouse click,
|
| + <li>exit from the "tab fullscreen" mode.</li> |
| + </ul> |
| + </li> |
| + </ul> |
| + <object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| + width="300" height="300" border="2px"></object> |
| + <div></div> |
| + <object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| + width="300" height="300" border="2px"></object> |
| + <div> |
| + <button id="toggle_fullscreen" onclick="ToggleFullscreen();"> |
| + Toggle Tab Fullscreen |
| + </button> |
| + </div> |
| +</div> |
| </body> |
| </html> |