Add forget() to "Get Devices" sample (GoogleChrome#770)

web-bluetooth/get-devices-async-await.html

@@ -11,11 +11,21 @@
 
 <p>This sample illustrates the use of the Web Bluetooth API to get a list of
 Bluetooth devices that the website has been granted permission to use by the
-user. You may want to check out the <a href="get-devices.html">Get Devices</a>
-sample.</p>
+user. It is also possible to revoke access to them. You may want to check out
+the <a href="get-devices.html">Get Devices</a> sample.</p>
 
-<button id="getBluetoothDevices">Get Bluetooth Devices</button>
-<button id="requestBluetoothDevice">Request Bluetooth Device</button>
+<p>Note: This feature is still under development. You must be using Chrome with
+the <code>chrome://flags/#enable-web-bluetooth-new-permissions-backend</code>
+flag enabled.</p>
+
+<p>
+  <button id="requestBluetoothDevice">Request Bluetooth Device</button>
+</p>
+
+<p>
+  <select id="devicesSelect"></select>
+  <button id="forgetBluetoothDevice">Forget Bluetooth Device</button>
+</p>
 
 {% include output_helper.html %}
 
@@ -28,8 +38,8 @@
     document.querySelector('#requestBluetoothDevice').addEventListener('click', function() {
         onRequestBluetoothDeviceButtonClick();
     });
-    document.querySelector('#getBluetoothDevices').addEventListener('click', function() {
-        onGetBluetoothDevicesButtonClick();
+    document.querySelector('#forgetBluetoothDevice').addEventListener('click', function() {
+        onForgetBluetoothDeviceButtonClick();
     });
   }
 </script>

web-bluetooth/get-devices-async-await.js

@@ -1,11 +1,16 @@
-async function onGetBluetoothDevicesButtonClick() {
+async function populateBluetoothDevices() {
+  const devicesSelect = document.querySelector('#devicesSelect');
   try {
     log('Getting existing permitted Bluetooth devices...');
     const devices = await navigator.bluetooth.getDevices();
 
     log('> Got ' + devices.length + ' Bluetooth devices.');
+    devicesSelect.textContent = '';
     for (const device of devices) {
-      log('  > ' + device.name + ' (' + device.id + ')');
+      const option = document.createElement('option');
+      option.value = device.id;
+      option.textContent = device.name;
+      devicesSelect.appendChild(option);
     }
   }
   catch(error) {
@@ -22,8 +27,33 @@ async function onRequestBluetoothDeviceButtonClick() {
     });
 
     log('> Requested ' + device.name + ' (' + device.id + ')');
+    populateBluetoothDevices();
   }
   catch(error) {
     log('Argh! ' + error);
   }
 }
+
+async function onForgetBluetoothDeviceButtonClick() {
+  try {
+    const devices = await navigator.bluetooth.getDevices();
+
+    const deviceIdToForget = document.querySelector('#devicesSelect').value;
+    const device = devices.find((device) => device.id == deviceIdToForget);
+    if (!device) {
+      throw new Error('No Bluetooth device to forget');
+    }
+    log('Forgetting ' + device.name + 'Bluetooth device...');
+    await device.forget();
+
+    log('  > Bluetooth device has been forgotten.');
+    populateBluetoothDevices();
+  }
+  catch(error) {
+    log('Argh! ' + error);
+  }
+}
+
+window.onload = () => {
+  populateBluetoothDevices();
+};

web-bluetooth/get-devices.html

@@ -11,11 +11,22 @@
 
 <p>This sample illustrates the use of the Web Bluetooth API to get a list of
 Bluetooth devices that the website has been granted permission to use by the
-user. You may want to check out the <a href="get-devices-async-await.html">Get
-Devices (Async Await)</a> sample.</p>
+user. It is also possible to revoke access to them. You may want to check out
+the <a href="get-devices-async-await.html">Get Devices (Async Await)</a>
+sample.</p>
 
-<button id="getBluetoothDevices">Get Bluetooth Devices</button>
-<button id="requestBluetoothDevice">Request Bluetooth Device</button>
+<p>Note: This feature is still under development. You must be using Chrome with
+the <code>chrome://flags/#enable-web-bluetooth-new-permissions-backend</code>
+flag enabled.</p>
+
+<p>
+  <button id="requestBluetoothDevice">Request Bluetooth Device</button>
+</p>
+
+<p>
+  <select id="devicesSelect"></select>
+  <button id="forgetBluetoothDevice">Forget Bluetooth Device</button>
+</p>
 
 {% include output_helper.html %}
 
@@ -25,11 +36,11 @@
 
 <script>
   if (isWebBluetoothEnabled()) {
-    document.querySelector('#getBluetoothDevices').addEventListener('click', function() {
-        onGetBluetoothDevicesButtonClick();
-    });
     document.querySelector('#requestBluetoothDevice').addEventListener('click', function() {
         onRequestBluetoothDeviceButtonClick();
     });
+    document.querySelector('#forgetBluetoothDevice').addEventListener('click', function() {
+        onForgetBluetoothDeviceButtonClick();
+    });
   }
 </script>

web-bluetooth/get-devices.js

@@ -1,10 +1,15 @@
-function onGetBluetoothDevicesButtonClick() {
+function populateBluetoothDevices() {
+  const devicesSelect = document.querySelector('#devicesSelect');
   log('Getting existing permitted Bluetooth devices...');
   navigator.bluetooth.getDevices()
   .then(devices => {
     log('> Got ' + devices.length + ' Bluetooth devices.');
+    devicesSelect.textContent = '';
     for (const device of devices) {
-      log('  > ' + device.name + ' (' + device.id + ')');
+      const option = document.createElement('option');
+      option.value = device.id;
+      option.textContent = device.name;
+      devicesSelect.appendChild(option);
     }
   })
   .catch(error => {
@@ -20,8 +25,33 @@ function onRequestBluetoothDeviceButtonClick() {
   })
   .then(device => {
     log('> Requested ' + device.name + ' (' + device.id + ')');
+    populateBluetoothDevices();
   })
   .catch(error => {
     log('Argh! ' + error);
   });
 }
+
+function onForgetBluetoothDeviceButtonClick() {
+  navigator.bluetooth.getDevices()
+  .then(devices => {
+    const deviceIdToForget = document.querySelector('#devicesSelect').value;
+    const device = devices.find((device) => device.id == deviceIdToForget);
+    if (!device) {
+      throw new Error('No Bluetooth device to forget');
+    }
+    log('Forgetting ' + device.name + 'Bluetooth device...');
+    return device.forget();
+  })
+  .then(() => {
+    log('  > Bluetooth device has been forgotten.');
+    populateBluetoothDevices();
+  })
+  .catch(error => {
+    log('Argh! ' + error);
+  });
+}
+
+window.onload = () => {
+  populateBluetoothDevices();
+};

web-bluetooth/index.html

@@ -21,7 +21,7 @@ <h3>Beginner</h3>
 <p><a href="get-characteristics.html">Get Characteristics (Promises)</a> - / <a href="get-characteristics-async-await.html">Get Characteristics (Async Await)</a> - get all characteristics of an advertised service from a BLE Device.</p>
 <p><a href="get-descriptors.html">Get Descriptors (Promises)</a> - / <a href="get-descriptors-async-await.html">Get Descriptors (Async Await)</a> - get all characteristic's descriptors of an advertised service from a BLE Device.</p>
 <p><a href="availability.html">Availability (Promises)</a> / <a href="availability-async-await.html">Availability (Async Await)</a> - determine whether Bluetooth is available.</p>
-<p><a href="get-devices.html">Get Devices (Promises)</a> / <a href="get-devices-async-await.html">Get Devices (Async Await)</a> - get permitted Bluetooth devices.</p>
+<p><a href="get-devices.html">Get Devices (Promises)</a> / <a href="get-devices-async-await.html">Get Devices (Async Await)</a> - get permitted Bluetooth devices and revoke access.</p>
 <p><a href="watch-advertisements.html">Watch Advertisements (Promises)</a> / <a href="watch-advertisements-async-await.html">Watch Advertisements (Async Await)</a> - watch advertisements from a BLE device.</p>
 <p><a href="manufacturer-data-filter.html">Manufacturer Data Filter (Promises)</a> / <a href="manufacturer-data-filter-async-await.html">Manufacturer Data Filter (Async Await)</a> - retrieve basic device information from a BLE Device that matches manufacturer data.</p>