unstyle places popups from nara only if native

This replaces the previous implementation completely. However there is no way to access it under 7/8 currently since it seems to always be native based there.

Author: K4sum1

browser/themes/shared/customizableui/panelUI-shared.css

@@ -242,6 +242,97 @@ panelview {
   margin: var(--arrowpanel-menuitem-margin);
 }
 
+/* Tweaks for menupopups hanging off toolbar buttons to make them feel like panels */
+
+@media (-moz-windows-non-native-menus) {
+  .toolbar-menupopup {
+    &,
+    menupopup {
+      appearance: none;
+      border: none;
+      font: menu;
+      background-color: transparent;
+      --panel-background: var(--arrowpanel-background);
+      --panel-color: var(--arrowpanel-color);
+      --panel-border-color: var(--arrowpanel-border-color);
+      --panel-border-radius: var(--arrowpanel-border-radius);
+      --panel-padding: var(--panel-subview-body-padding);
+    }
+  
+    menupopup {
+      /* Align non top-level menupopup's first menuitem with the menuitem that opened it.
+       * The 1px is for the menupopup's border. */
+      margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px));
+    }
+  
+    :is(menu, menuitem) {
+      &[disabled] {
+        color: var(--panel-disabled-color);
+      }
+  
+      &:not([disabled])[_moz-menuactive] {
+        color: inherit;
+        background-color: var(--panel-item-hover-bgcolor);
+  
+        &:active {
+          color: inherit;
+          background-color: var(--panel-item-active-bgcolor);
+        }
+      }
+  
+      &::before,
+      &::after {
+        content: none; /* Reset's macOS' checkmark spacing */
+      }
+    }
+  
+    .menu-text,
+    .menu-iconic-text,
+    .menu-iconic-icon,
+    .menu-iconic-left,
+    .menu-iconic-accel,
+    .menu-accel-container,
+    .menu-accel,
+    .menu-right {
+      /* Reset every spacing and appearance set by the platforms' menu.css
+       * and set the ones we need in the following rules. */
+      margin: 0;
+      padding: 0;
+      appearance: none;
+    }
+  
+    :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left {
+      margin-inline-end: 8px;
+    }
+  
+    .menu-accel,
+    .menu-iconic-accel {
+      margin-inline-start: 16px;
+    }
+  
+    menu > .menu-right {
+      list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+      -moz-context-properties: fill, fill-opacity;
+      fill: currentColor;
+      fill-opacity: 0.6;
+      width: unset;
+      height: unset;
+  
+      &:-moz-locale-dir(rtl) {
+        list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+      }
+    }
+  
+    menuseparator {
+      padding: var(--panel-separator-margin);
+    }
+  }
+
+  :is(.toolbar-menupopup, .toolbar-menupopup menupopup)[emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel {
+    margin: 0;
+  }
+}
+
 #BMB_bookmarksPopup {
   max-width: 30em;
 }
@@ -914,6 +1005,18 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
   display: none;
 }
 
+@media (-moz-windows-non-native-menus) {
+  .toolbar-menupopup :is(menu, menuitem) {
+    appearance: none;
+    margin: var(--arrowpanel-menuitem-margin);
+    min-height: 24px;
+    padding: var(--arrowpanel-menuitem-padding);
+    border-radius: var(--arrowpanel-menuitem-border-radius);
+    background-color: transparent;
+    flex-shrink: 0;
+  }
+}
+
 .subview-subheader,
 panelview .toolbarbutton-1,
 .subviewbutton,