title: How to control the size and position of the window used by navigator.bluetooth.requestDevice?
body: <p>Ref this issue: <a href="https://stackoverflow.com/questions/45459275/how-to-make-the-web-bluetooth-pair-button-work-when-run-as-chrome-app">How to make the Web Bluetooth Pair button work when run as chrome app</a> </p>
  
  <p>In my tests, the window which pops up when navigator.bluetooth.requestDevice is called is quite large, covers the html window from which it was invoked completely and the bottom of the window, containing the Pair and Cancel buttons are off the bottom of the screen and so not visible.</p>
  
  <p>Is it possible to control and position of the requestDevice window?</p>
  
  <p><a href="https://i.stack.imgur.com/6dok8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7rfd3.png" alt="Window containing basic html"></a></p>
  
  <p><a href="https://i.stack.imgur.com/6dok8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6dok8.png" alt="requestDevice window covering original and extending off screen"></a></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
     &lt;script type="text/javascript" src="bluetoothle.js"&gt;&lt;/script&gt; 
     &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello Bluetooth&lt;/h1&gt;
      &lt;h2&gt;Device Discovery&lt;/h2&gt;
      &lt;button id="btn_discover"&gt;Discover Devices&lt;/button&gt;
      &lt;div id="devices"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  navigator.bluetooth.requestDevice(options)
    .then(device =&gt; {
      console.log('&gt; Name:             ' + device.name);
      console.log('&gt; Id:               ' + device.id);
      console.log('&gt; Connected:        ' + device.gatt.connected);
      bluetoothle.selected_device = device;
      console.log(bluetoothle.selected_device);
    })
    .catch(error =&gt; {
      console.log('ERROR: '+ error);
    });
  </code></pre>