fix(client/cordova/apple/macos): fix popover click and location issues

src/cordova/apple/xcode/macos/Outline/Classes/AppDelegate.m

@@ -85,16 +85,10 @@ - (void)applicationDidFinishLaunching:(NSNotification*)aNotification {
   self.statusItem.button.action = @selector(togglePopover);
   [self setAppIcon:@"StatusBarButtonImage"];
   self.popover = [[NSPopover alloc] init];
+  self.popover.behavior = NSPopoverBehaviorTransient;
   self.popover.contentViewController = [[NSViewController alloc] initWithNibName:@"MainViewController"
                                                                           bundle:[NSBundle mainBundle]];
   self.popover.contentViewController.view = self.window.contentView;
-  // Monitor clicks outside the popover in order to close it.
-  NSEventMask eventMask = NSEventMaskLeftMouseDown|NSEventMaskRightMouseDown;
-  self.eventMonitor = [[EventMonitor alloc] initWithMask:eventMask handler:^(NSEvent* event) {
-    if (self.popover.isShown) {
-      [self closePopover];
-    }
-  }];
 
   if ([self wasStartedByLauncherApp]) {
     [OutlineVpn.shared startLastSuccessfulTunnel:^(enum ErrorCode errorCode) {
@@ -103,7 +97,16 @@ - (void)applicationDidFinishLaunching:(NSNotification*)aNotification {
       }
     }];
   } else {
-    [self showPopover];
+    // The rendering of the popover is relative to the app's status item in the status bar.
+    // Even though we've already created the status bar above, the popover is being created
+    // before the status item has been rendered in the UI. This causes the initial popover
+    // load to be "floating" and ends up aligned at the bottom of the screen. For this initial
+    // load we add a small artificial delay to prevent that from happening.
+    double delayInSeconds = 0.5;
+    dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, delayInSeconds * NSEC_PER_SEC);
+    dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
+      [self showPopover];
+    });
   }
   [self setAppLauncherEnabled:true];  // Enable app launcher to start on boot.
 }

src/www/views/servers_view/server_list/index.ts

@@ -11,64 +11,53 @@
   limitations under the License.
 */
 
-import {computed, customElement, property} from '@polymer/decorators';
-import {html, PolymerElement} from '@polymer/polymer';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 import '../server_list_item/server_card';
 import {ServerListItem} from '../server_list_item';
 import {Localizer} from 'src/infrastructure/i18n';
 
 @customElement('server-list')
-export class ServerList extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          margin: 0 auto;
-          width: 100%;
-          height: 100%;
-          padding: 8px;
-          box-sizing: border-box;
-        }
-
-        server-row-card {
-          margin: 0 auto 8px auto;
-          height: 130px;
-        }
-
-        server-hero-card {
-          height: 400px;
-        }
-      </style>
-
-      <!-- TODO(daniellacosse): use slots instead after we move this to lit -->
-      <template is="dom-repeat" items="[[servers]]">
-        <template is="dom-if" if="[[hasSingleServer]]">
-          <server-hero-card localize="[[localize]]" server="[[item]]"></server-hero-card>
-        </template>
-        <template is="dom-if" if="[[!hasSingleServer]]">
-          <server-row-card localize="[[localize]]" server="[[item]]"></server-row-card>
-        </template>
-      </template>
-    `;
-  }
-
-  // Need to declare localize function passed in from parent, or else
-  // localize() calls within the template won't be updated.
-
-  // @polymer/decorators doesn't support Function constructors...
-  @property({type: Object}) localize: Localizer;
+export class ServerList extends LitElement {
+  static styles = [
+    css`
+      :host {
+        box-sizing: border-box;
+        display: block;
+        height: 100%;
+        margin: 0 auto;
+        padding: 8px;
+        width: 100%;
+      }
+
+      server-row-card {
+        margin: 0 auto 8px auto;
+        height: 130px;
+      }
+
+      server-hero-card {
+        height: 400px;
+      }
+    `,
+  ];
+
+  @property({type: Function}) localize: Localizer = msg => msg;
   @property({type: Array}) servers: ServerListItem[] = [];
 
-  @computed('servers')
-  get hasSingleServer() {
-    return this.servers.length === 1;
+  render() {
+    if (this.hasSingleServer) {
+      return html` <server-hero-card .localize=${this.localize} .server="${this.servers[0]}"></server-hero-card> `;
+    } else {
+      return html`
+        ${this.servers.map(
+          server => html`<server-row-card .localize=${this.localize} .server="${server}"></server-row-card>`
+        )}
+      `;
+    }
   }
 
-  getErrorMessage(errorMessageId: string) {
-    if (typeof errorMessageId === 'string') {
-      return this.localize(errorMessageId);
-    }
+  private get hasSingleServer() {
+    return this.servers.length === 1;
   }
 }