Merge remote-tracking branch 'origin/develop' into navigation-update

* origin/develop: (49 commits)
  Fix react & extra buttons not styled on tab-focus
  Fix popover not popping up
  Fix styling on Safari
  Use :focus-visible instead of :focus for focus markers
  Optimize Reply badge position
  Add badges to status interacting buttons
  Update dependency nightwatch to v2
  Update dependency eslint-plugin-n to v15.2.5
  Update dependency mocha to v10
  Update dependency karma-coverage to v2
  Update dependency sass to v1.54.5
  Update dependency karma-firefox-launcher to v2
  Update dependency vue-template-compiler to v2.7.9
  Pin dependencies
  Refresh yarn.lock
  Allow column width configuration: allow stretching navbar with columns
  Remove legacy code for chunksSortMode
  Add FIXME comment about html-webpack-plugin-after-emit
  Use exact webpack version in package.json
  Reintroduce css minimizer
  ...

1 files changed, 36 insertions, 4 deletions

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 2c893bf3..011dff9b 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -6,6 +6,8 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    @show="onShow"
+    @close="onClose"
   >
     <template #content="{close}">
       <div class="dropdown-menu">
@@ -122,10 +124,24 @@
     </template>
     <template #trigger>
       <span class="button-unstyled popover-trigger">
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="ellipsis-h"
-        />
+        <FALayers class="fa-old-padding-layer">
+          <FAIcon
+            class="fa-scale-110 "
+            icon="ellipsis-h"
+          />
+          <FAIcon
+            v-show="!expanded"
+            class="focus-marker"
+            transform="shrink-6 up-8 right-16"
+            icon="plus"
+          />
+          <FAIcon
+            v-show="expanded"
+            class="focus-marker"
+            transform="shrink-6 up-8 right-16"
+            icon="times"
+          />
+        </FALayers>
       </span>
     </template>
   </Popover>
@@ -135,6 +151,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ExtraButtons {
   /* override of popover internal stuff */
@@ -151,6 +168,21 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+
+  }
+
+  .popover-trigger-button {
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+    }
   }
 }
 </style>