ui: Misc amends for Safari and Firefox (#7907)

1. Ensure dropdown menus function correctly in Safari
2. Ensure default grey color for buttons is not used
3. Ensure IntersectionObservers are cleaned up properly in Safari

ui-v2/app/components/toggle-button/index.js

@@ -43,6 +43,11 @@ export default Component.extend({
   },
   actions: {
     click: function(e) {
+      // only preventDefault if the target isn't an external link
+      // TODO: this should be changed for an explicit close
+      if ((e.target.rel || '').indexOf('noopener') === -1) {
+        e.preventDefault();
+      }
       this.input.checked = !this.input.checked;
       // manually dispatched mouse events have a detail = 0
       // real mouse events have the number of click counts

ui-v2/app/mixins/with-filtering.js

@@ -6,6 +6,8 @@ const toKeyValue = function(el) {
   let value = '';
   switch (el.type) {
     case 'radio':
+      value = el.value === 'on' ? '' : el.value;
+      break;
     case 'search':
     case 'text':
       value = el.value;

ui-v2/app/services/dom.js

@@ -31,6 +31,11 @@ export default Service.extend({
     inViewportCallbacks = new WeakMap();
     $_ = getComponentFactory(getOwner(this));
   },
+  willDestroy: function() {
+    this._super(...arguments);
+    inViewportCallbacks = null;
+    $_ = null;
+  },
   document: function() {
     return this.doc;
   },
@@ -93,7 +98,7 @@ export default Service.extend({
   },
   isInViewport: function($el, cb, threshold = 0) {
     inViewportCallbacks.set($el, cb);
-    const observer = new IntersectionObserver(
+    let observer = new IntersectionObserver(
       (entries, observer) => {
         entries.map(item => {
           const cb = inViewportCallbacks.get(item.target);
@@ -109,6 +114,13 @@ export default Service.extend({
     );
     observer.observe($el); // eslint-disable-line ember/no-observers
     // observer.unobserve($el);
-    return () => observer.disconnect(); // eslint-disable-line ember/no-observers
+    return () => {
+      observer.unobserve($el); // eslint-disable-line ember/no-observers
+      if (inViewportCallbacks) {
+        inViewportCallbacks.delete($el);
+      }
+      observer.disconnect(); // eslint-disable-line ember/no-observers
+      observer = null;
+    };
   },
 });

ui-v2/app/styles/base/components/buttons/skin.scss

@@ -94,6 +94,7 @@
 
 %internal-button {
   color: $gray-900;
+  background-color: $white;
 }
 %internal-button-dangerous {
   @extend %frame-red-300;

ui-v2/app/styles/base/components/popover-menu/skin.scss

@@ -1,3 +1,9 @@
+%popover-menu + label > *::after {
+  @extend %with-chevron-down-icon, %as-pseudo;
+  width: 16px;
+  height: 16px;
+  margin-left: 16px;
+}
 %more-popover-menu + label > *::after {
   @extend %with-more-horizontal-icon, %as-pseudo;
   opacity: 0.7;
@@ -6,12 +12,7 @@
 }
 %more-popover-menu + label > * {
   font-size: 0;
-}
+  background-color: $transparent;
-%popover-menu + label > *::after {
-  @extend %with-chevron-down-icon, %as-pseudo;
-  width: 16px;
-  height: 16px;
-  margin-left: 16px;
 }
 %popover-menu + label > * {
   @extend %split-button, %sort-button;