| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <!-- | 3 <!-- |
| 4 Copyright (c) 2011 The Chromium Authors. All rights reserved. | 4 Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| 5 Use of this source code is governed by a BSD-style license that can be | 5 Use of this source code is governed by a BSD-style license that can be |
| 6 found in the LICENSE file. | 6 found in the LICENSE file. |
| 7 --> | 7 --> |
| 8 <head> | 8 <head> |
| 9 <title>Mouse Lock Example</title> | 9 <title>Mouse Lock Example</title> |
| 10 <style type="text/css"> |
| 11 :-webkit-full-screen { |
| 12 width: 100%; |
| 13 height: 100%; |
| 14 } |
| 15 </style> |
| 16 <script> |
| 17 var fullscreen = false; |
| 18 function ToggleFullscreen() { |
| 19 if (fullscreen) { |
| 20 document.webkitCancelFullScreen(); |
| 21 } else { |
| 22 document.getElementById('container').webkitRequestFullScreen( |
| 23 Element.ALLOW_KEYBOARD_INPUT); |
| 24 } |
| 25 fullscreen = !fullscreen; |
| 26 } |
| 27 </script> |
| 10 </head> | 28 </head> |
| 11 | |
| 12 <body title="This tooltip should not be shown if the mouse is locked."> | 29 <body title="This tooltip should not be shown if the mouse is locked."> |
| 13 <ul> | 30 <div id="container"> |
| 14 <li>Lock mouse: left click in either of the two boxes; or right click in | 31 <ul> |
| 15 either of the boxes to ensure that it is focused and then press Enter key. | 32 <li>There are two different kinds of fullscreen mode - "tab fullscreen" and |
| 16 </li> | 33 "browser fullscreen". |
| 17 <li>Unlock mouse: lose focus, press Esc key, or right click.</li> | 34 <ul> |
| 18 </ul> | 35 <li>"tab fullscreen" refers to when a tab enters fullscreen mode via the |
| 19 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | 36 JS or Pepper fullscreen API;</li> |
| 20 width="300" height="300" border="2px"></object> | 37 <li>"browser fullscreen" refers to the user putting the browser itself |
| 21 <div></div> | 38 into fullscreen mode from the UI (e.g., pressing F11).</li> |
| 22 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | 39 </ul> |
| 23 width="300" height="300" border="2px"></object> | 40 <span style="font-weight:bold"> |
| 41 NOTE: Mouse lock is only allowed in "tab fullscreen" mode. |
| 42 </span> |
| 43 </li> |
| 44 <li>Lock mouse: |
| 45 <ul> |
| 46 <li>left click in either of the two boxes; or</li> |
| 47 <li>right click in either of the boxes to ensure that it is focused and |
| 48 then press Enter key. (You could verify that the tooltip window is |
| 49 dismissed properly by this second approach.)</li> |
| 50 </ul> |
| 51 </li> |
| 52 <li>Unlock mouse: |
| 53 <ul> |
| 54 <li>lose focus; or</li> |
| 55 <li>press Esc key; or</li> |
| 56 <li>middle click; or</li> |
| 57 <li>exit from the "tab fullscreen" mode.</li> |
| 58 </ul> |
| 59 </li> |
| 60 </ul> |
| 61 <object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| 62 width="300" height="300" border="2px"></object> |
| 63 <div></div> |
| 64 <object id="plugin" type="application/x-ppapi-example-mouse-lock" |
| 65 width="300" height="300" border="2px"></object> |
| 66 <div> |
| 67 <button id="toggle_fullscreen" onclick="ToggleFullscreen();"> |
| 68 Toggle Tab Fullscreen |
| 69 </button> |
| 70 </div> |
| 71 </div> |
| 24 </body> | 72 </body> |
| 25 </html> | 73 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 8072011:
Only allow to lock the mouse when the tab is in fullscreen mode. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src