Add support to close a popup

Using the esc key works. But there's no button to close.
Making it impossible to close on mobile and not good user experence.

Change-Id: I54195f7388e347d4b199445d9758c03d0ec75ec1

web/fetcher.ts

diff --git a/web/fetcher.ts b/web/fetcher.ts
index 11eee6a..3a33656 100644
--- a/web/fetcher.ts
+++ b/web/fetcher.ts
@@ -17,6 +17,7 @@
 import './gr-checkers-list';
 import {computeDuration} from './util';
 import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
+import {PopupPluginApi} from '@gerritcodereview/typescript-api/popup';
 import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
 import {
   Category,
@@ -46,6 +47,9 @@
 
   private patchsetNumber?: number;
 
+  // This is used to trigger .close() in an event.
+  private popup?: PopupPluginApi;
+
   constructor(private readonly plugin: PluginApi) {
     this.restApi = plugin.restApi();
   }
@@ -62,7 +66,16 @@
           name: 'Configure Checkers',
           primary: true,
           callback: () => {
-            this.plugin.popup('gr-checkers-list');
+            this.plugin.popup('gr-checkers-list').then(popup => {
+              this.popup = popup;
+
+              const handler = () => {
+                this.popup?.close();
+                document.removeEventListener('close-popup', handler);
+              };
+
+              document.addEventListener('close-popup', handler);
+            });
             return undefined;
           },
         },

web/gr-checkers-list.ts

diff --git a/web/gr-checkers-list.ts b/web/gr-checkers-list.ts
index 9b752cc..6f025ee 100644
--- a/web/gr-checkers-list.ts
+++ b/web/gr-checkers-list.ts
@@ -215,6 +215,13 @@
         >
           Create New
         </gr-button>
+        <gr-button
+          primary
+          link
+          @click=${this.handlePopupClose}
+        >
+          Close
+        </gr-button>
       </div>
     `;
   }
@@ -305,4 +312,11 @@
     if (e.detail?.reload) this.loadCheckers();
     this.createOverlay?.close();
   }
+
+  private handlePopupClose() {
+    this.dispatchEvent(
+      new CustomEvent('close-popup', {bubbles: true, composed: true})
+    );
+  }
+
 }