Add a remove-display modal to confirm the removal

Author: asasui-2

base/cvd/cuttlefish/host/frontend/webrtc/html_client/client.html

@@ -293,6 +293,15 @@ <h2>Add display</h2>
           <button id='display-add-confirm' title='Add a new display' class='modal-button'>Add</button>
         </div>
       </div>
+      <div id='display-remove-modal' class='modal' data-removal_display_id='0'>
+        <div id='display-remove-modal-header' class='modal-header'>
+          <h2 id='display-remove-text'></h2>
+        </div>
+        <div class='display-remove-buttons'>
+          <button id='display-remove-modal-confirm' title='Confirm' class='modal-button'>confirm</button>
+          <button id='display-remove-modal-cancel' title='Cancel' class='modal-button '>cancel</button>
+        </div>
+      </div>
       <script src="js/adb.js"></script>
       <script src="js/location.js"></script>
       <script src="js/keyboard.js"></script>
@@ -307,7 +316,7 @@ <h2>Add display</h2>
         <div class="device-display">
           <div class="device-display-info">
             <div class="device-display-info-text"></div>
-            <button class="material-icons device-display-remove-button" title="Remove display">delete</button>
+            <button class="material-icons device-display-remove-modal-button" title="Remove display">delete</button>
           </div>
           <div class="device-video-container">
             <video autoplay muted playsinline src="/" class="device-display-video"></video>
@@ -316,4 +325,3 @@ <h2>Add display</h2>
       </template>
     </body>
 </html>
-

base/cvd/cuttlefish/host/frontend/webrtc/html_client/js/app.js

@@ -334,6 +334,9 @@ class DeviceControlApp {
     createSelectListener('display-spec-preset-select', () => this.#updateDisplaySpecFrom());
     createButtonListener('display-add-confirm', null, this.#deviceConnection, evt => this.#onDisplayAdditionConfirm(evt));
 
+    createButtonListener('display-remove-modal-confirm',null,this.#deviceConnection, () => this.#handleDisplayRemovalModalAction('confirm'));
+    createButtonListener('display-remove-modal-cancel',null,this.#deviceConnection, () => this.#handleDisplayRemovalModalAction('cancel'));
+
     if (this.#deviceConnection.description.custom_control_panel_buttons.length >
         0) {
       document.getElementById('control-panel-custom-buttons').style.display =
@@ -677,12 +680,26 @@ class DeviceControlApp {
     this.#deviceConnection.sendControlMessage(JSON.stringify(message));
   }
 
+  #handleDisplayRemovalModalAction(action){
+    const removeModalElement = document.getElementById('display-remove-modal');
+    const removeDisplayId = removeModalElement.dataset.removal_display_id;
+    let removeButtonId = removeDisplayId + '_remove_button';
+    if(action === 'confirm'){
+      this.#removeDisplay(removeDisplayId);
+    } else {
+      // Clear the dataset on cancel.
+      delete removeModalElement.dataset.removal_display_id;
+    }
+    hideModal(removeButtonId,'display-remove-modal');
+  }
+
   #removeDisplay(displayId) {
     const message = {
       command: 'remove-display',
       display_id: displayId
     };
     this.#deviceConnection.sendControlMessage(JSON.stringify(message));
+    console.debug(`display_id being removed in the removeDisplay function=${displayId}`);
   }
 
   #showWebrtcError() {
@@ -940,11 +957,8 @@ class DeviceControlApp {
         deviceDisplayInfo.id = stream_id + '_info';
 
         let deviceDisplayRemoveButton =
-          displayFragment.querySelector('.device-display-remove-button');
-        deviceDisplayRemoveButton.id = stream_id + '_remove_button';
-        deviceDisplayRemoveButton.addEventListener('mousedown', () => {
-          this.#removeDisplay(display_id);
-        });
+          displayFragment.querySelector('.device-display-remove-modal-button');
+        deviceDisplayRemoveButton.id = display_id + '_remove_button';
 
         deviceDisplayVideo = displayFragment.querySelector('video');
         deviceDisplayVideo.id = stream_id;
@@ -963,6 +977,17 @@ class DeviceControlApp {
 
         deviceDisplays.appendChild(displayFragment);
 
+        createModalButton(deviceDisplayRemoveButton.id , 'display-remove-modal', null);
+        let removeModalElement = document.getElementById('display-remove-modal');
+        createButtonListener(deviceDisplayRemoveButton.id, null, this.#deviceConnection, () => {
+          let removeDisplayText = document.getElementById('display-remove-text');
+
+          // Store the display ID of the most recently clicked trash icon.
+          // This prevents the deletion of multiple displays.
+          removeDisplayText.textContent = `Delete the display ${display_id} ?`;
+          removeModalElement.dataset.removal_display_id = display_id;
+        });
+
         // Confusingly, events for adding tracks occur on the peer connection
         // but events for removing tracks occur on the stream.
         stream.addEventListener('removetrack', evt => {
@@ -1350,4 +1375,3 @@ function getStyleAfterRotation(rotationDeg, ar) {
 
   return {transform, maxWidth, maxHeight};
 }
-

base/cvd/cuttlefish/host/frontend/webrtc/html_client/js/controls.js

@@ -260,32 +260,47 @@ function positionModal(button_id, modal_id) {
   modalDiv.style.left = modalButton.offsetWidth + 30;
 }
 
+function showModal(button_id,modal_id) {
+  const modalButton = document.getElementById(button_id);
+  const modalDiv = document.getElementById(modal_id);
+
+  modalButton.classList.add('modal-button-opened')
+  modalDiv.style.display = 'block';
+}
+
+function hideModal(button_id,hide_id){
+  const modalButton = document.getElementById(button_id);
+  const modalDivHide = document.getElementById(hide_id);
+
+  modalButton.classList.remove('modal-button-opened');
+  modalDivHide.style.display = 'none';
+}
+
 function createModalButton(button_id, modal_id, close_id, hide_id) {
   const modalButton = document.getElementById(button_id);
   const modalDiv = document.getElementById(modal_id);
   const modalHeader = modalDiv.querySelector('.modal-header');
   const modalClose = document.getElementById(close_id);
-  const modalDivHide = document.getElementById(hide_id);
 
   positionModal(button_id, modal_id);
 
-  function showHideModal(show) {
-    if (show) {
-      modalButton.classList.add('modal-button-opened')
-      modalDiv.style.display = 'block';
-    } else {
-      modalButton.classList.remove('modal-button-opened')
-      modalDiv.style.display = 'none';
+  // Allow the show modal button to toggle the modal,
+  modalButton.addEventListener('click', evt => {
+    if(modalDiv.style.display != 'block'){
+      showModal(button_id,modal_id);
+    }else{
+      hideModal(button_id,modal_id);
     }
-    if (modalDivHide != null) {
-      modalDivHide.style.display = 'none';
+
+    if (hide_id != null) {
+      hideModal(button_id,hide_id);
     }
-  }
-  // Allow the show modal button to toggle the modal,
-  modalButton.addEventListener(
-      'click', evt => showHideModal(modalDiv.style.display != 'block'));
+  });
+
   // but the close button always closes.
-  modalClose.addEventListener('click', evt => showHideModal(false));
+  if(modalClose){
+    modalClose.addEventListener('click', evt => hideModal(button_id,modal_id));
+  }
 
   // Allow the modal to be dragged by the header.
   let modalOffsets = {

base/cvd/cuttlefish/host/frontend/webrtc/html_client/style.css

@@ -405,8 +405,14 @@ button{
   align-items: center;
 }
 
-.device-display-remove-button {
-  color: var(--main-fg);
+.device-display-remove-modal-button {
+  color: #fafafa;
+}
+
+.display-remove-buttons {
+  display: flex;
+  margin: 5px;
+  justify-content: space-between;
 }
 
 /* The actual <video> element for each display. */