Refactor top control selectors to prepare shared styling evolution (#24405)

Author: tzi

plugins/BotTracking/tests/UI/expected-screenshots/BotTracking_bot_overview.png

@@ -16,7 +16,7 @@
             var headerComponentParent = $(COMPONENT_SELECTOR).parent();
 
             // when 'check for updates...' link is clicked, force a check & display the result
-            headerComponentParent.one('click', '#updateCheckLinkContainer', function (e) {
+            headerComponentParent.one('click', '#header_message a.title:not([href])', function (e) {
                 var headerComponent = $(this)
                   .closest(COMPONENT_SELECTOR);
                 var headerMessage = headerComponent.find('#header_message');

plugins/CoreHome/javascripts/corehome.js

@@ -556,20 +556,6 @@ nav {
   }
 }
 
-#root, #standalone, .ui-dialog, .ngdialog {
-  .borderedControl {
-    background-color: @theme-color-background-base;
-    border: 0;
-    transition: box-shadow 150ms linear;
-    box-shadow: @default-box-shade;
-    border-radius: 2px;
-    &.expanded,
-    &:hover, &:focus {
-      background-color: @theme-color-background-contrast;
-    }
-  }
-}
-
 .widgetize {
   width: auto;
 }

plugins/CoreHome/stylesheets/layout.less

@@ -1,22 +1,39 @@
-.piwikSelector {
-  display: inline-block;
-  line-height: 0;
+@_selector-button_color-background: @theme-color-background-base;
+@_selector-button_color-background-hover: @theme-color-background-contrast;
+@_selector-button_border: 0;
+@_selector-button_border-radius: 2px;
+@_selector-button_box-shadow: @default-box-shade;
+
+@_selector-dropdown_color-background: @theme-color-background-contrast;
+@_selector-dropdown_border: 1px solid @theme-color-background-base;
+@_selector-dropdown_border-radius: 2px;
+@_selector-dropdown_box-shadow: 4px 7px 25px rgba(0,0,0,0.3);
+@_selector-dropdown_margin-top: 2px;
+
+
+.piwikSelector:not(.quick-access) {
+  display: flex;
+  border: @_selector-button_border;
+  border-radius: @_selector-button_border-radius;
+  box-shadow: @_selector-button_box-shadow;
 
   span.title,
   a.title,
   button.title {
-    .font-default(11px, 12px);
-    display: inline-block;
+    display: flex;
     width: 100%;
     padding: 10px 15px 11px 13px;
-    background-color: transparent;
+    background-color: @_selector-button_color-background;
     border: none;
+    border-radius: @_selector-button_border-radius;
 
+    .font-default(11px, 12px);
     white-space: nowrap;
     cursor: pointer;
     text-transform: uppercase;
     text-decoration: none;
     color: @theme-color-text;
+    font-variant: tabular-nums;
 
     &.activityIndicator {
       background: url(plugins/Morpheus/images/loading-blue.gif) no-repeat 9px 9px;
@@ -28,10 +45,8 @@
 
     .icon {
       // remove relative: [class^="icon-"], [class*=" icon-"]{line-height:1em}
-      .font-default(11px, 12px);
-      padding-left: 6px;
-      display: inline-block;
-      vertical-align: top;
+      font-size: inherit;
+      line-height: inherit;
 
       &.iconHidden {
         visibility: hidden;
@@ -40,17 +55,50 @@
 
     .icon:not(.icon-fixed) {
       float: right;
-      &:after {
-        clear:left;
+
+      &::after {
+        clear: left;
         content: ' ';
       }
     }
+  }
 
-    &:hover, &:focus {
+  &.expanded,
+  &.editing,
+  &:hover,
+  &:focus {
+    span.title,
+    a.title,
+    button.title {
       text-decoration: none;
+      background: @_selector-button_color-background-hover;
     }
   }
 
+  /* Period selector specific: left & right arrows */
+
+  .move-period {
+    background-color: @_selector-button_color-background;
+  }
+
+  .move-period-prev {
+    border-radius: @_selector-button_border-radius 0 0 @_selector-button_border-radius;
+  }
+
+  .move-period-next {
+    border-radius: 0 @_selector-button_border-radius @_selector-button_border-radius 0;
+  }
+
+  &.periodSelector-withPrevNext .title {
+    border-radius: 0;
+  }
+
+  .selectorLegacyCompatibility();
+}
+
+/* Dropdown */
+
+.piwikSelector {
   .dropdown {
     .font-default(11px, 15px);
     display: none;
@@ -59,16 +107,129 @@
 
   &.expanded {
     .dropdown {
-      display: block;
-      margin-top: 2px;
-      margin-left: -1px;
+      display: block; /* to revert display: none */
+
       position: absolute;
       z-index: 999;
-      border: 1px solid @theme-color-background-base;
-      border-radius: 2px;
-      box-shadow: 4px 7px 25px rgba(0,0,0,0.3);
+      top: 100%;
+      margin-top: @_selector-dropdown_margin-top;
+      left: -1px;
+      right: -1px;
+
+      border: @_selector-dropdown_border;
+      border-radius: @_selector-dropdown_border-radius;
+      box-shadow: @_selector-dropdown_box-shadow;
       padding: 16px;
+    }
+  }
+
+  &.expanded .dropdown,
+  &:hover .dropdown,
+  &.active .dropdown {
+    background-color: @_selector-dropdown_color-background;
+  }
+}
+
+/*
+ * ============================================================================
+ * TEMPORARY LEGACY OVERRIDES
+ * ============================================================================
+ *
+ * The rules from here and to the end of the files will be removed.
+ * They were previously defined either in component-specific files
+ * such as PeriodSelector.less, SiteSelector.less, segmentation.less,
+ * dashboard.less, _periodSelect.less and _headerMessage.less, or were part of
+ * the historical rendering behavior of selector.less itself.
+ *
+ * They exist only to reduce UI/screenshot side effects during the refactor.
+ * They should be removed later, once the shared selector system has been
+ * redesigned component-by-component with explicit visual contracts.
+ * ============================================================================
+ */
+
+/* A mixin to by-pass Stylelint errors */
+.selectorLegacyCompatibility() {
+  // Legacy inline-block layout kept only to preserve historical spacing and screenshots.
+  // The shared selector layout should eventually rely on flexbox only.
+  display: inline-block;
+  line-height: 0;
+  background-color: @theme-color-background-base;
+
+  &.expanded,
+  &.editing,
+  &:hover,
+  &:focus {
+    background-color: @theme-color-background-contrast;
+
+    span.title,
+    a.title,
+    button.title {
+      background: transparent;
+    }
+  }
+
+  span.title,
+  a.title,
+  button.title {
+    // Legacy buttons were visually transparent and depended on the shell background.
+    // The new design should keep the button styling self-contained.
+    display: inline-block;
+    background-color: transparent;
+    border-radius: 0;
+    font-variant: initial;
+
+    .icon {
+      // Legacy icon alignment depends on inline-block metrics and manual spacing.
+      // This should disappear once all selectors use the flex layout consistently.
+      display: inline-block;
+      vertical-align: top;
+      padding-left: 6px;
+    }
+  }
+
+  &.periodSelector-withPrevNext button.title {
+    width: auto;
+  }
+
+  .move-period {
+    background-color: transparent;
+  }
+
+  .move-period-prev,
+  .move-period-next {
+    border-radius: 0;
+  }
+
+  &.expanded {
+    .dropdown {
+      // Legacy dropdown positioning relies on margin offsets instead of the newer anchored layout.
+      // This should be removed once all selectors share the same positioning model.
+      top: auto;
+      left: auto;
+      right: auto;
+      margin-left: -1px;
       background-color: @theme-color-background-contrast;
     }
   }
 }
+
+.sites_autocomplete {
+  height: 36px;
+}
+
+.periodSelector {
+  display: inline-block;
+}
+
+// Keep same flow when a siteSelector is used inside a page
+.siteSelector a.title {
+  overflow: hidden;
+}
+
+// Uppercase is kept only for legacy selector rendering.
+// We do not want to force uppercase in the shared selector design long-term.
+.siteSelector .custom_select_ul_list li a,
+.siteSelector .custom_select_all a,
+.siteSelector .custom_select_main_link > span {
+  text-transform: uppercase;
+}

plugins/CoreHome/stylesheets/selector.less

@@ -1,6 +1,6 @@
 {% set updateCheck %}
+    <span class="icon icon-fixed icon-reload"></span>
     <span id="updateCheckLinkContainer">
-        <span class="icon icon-fixed icon-reload"></span>
         {{ (lastUpdateCheckFailed|default(false) ? 'General_ErrorTryAgain' : 'CoreHome_CheckForUpdates')|translate }}
     </span>
 {% endset %}

plugins/CoreHome/templates/_headerMessage.twig

@@ -16,6 +16,7 @@ describe('VersionInfoHeaderMessage', function() {
   const selectorMessageTitle = '#header_message .title';
   const selectorMessageDropdown = '#header_message .dropdown';
   const selectorUpdateLink = '#updateCheckLinkContainer';
+  const selectorUpdateButtonIcon = '#header_message .title .icon-reload';
 
   const urlAdminHome = '?idSite=1&period=year&date=2012-08-09&module=CoreAdminHome&action=home';
   const urlHome = '?idSite=1&period=year&date=2012-08-09&module=CoreHome&action=index';
@@ -116,6 +117,30 @@ describe('VersionInfoHeaderMessage', function() {
         expect(await getMessageTitleText()).to.match(/latest version of Matomo/);
       });
 
+      it('should check for a new version when clicking the full title anchor', async function() {
+        await page.goto(urlAdminHome);
+        await page.waitForNetworkIdle();
+
+        expect(await getUpdateLinkText()).to.match(/Check for updates/);
+
+        await page.click(selectorMessageTitle);
+        await page.waitForNetworkIdle();
+
+        expect(await getMessageTitleText()).to.match(/latest version of Matomo/);
+      });
+
+      it('should check for a new version when clicking the icon inside the title anchor', async function() {
+        await page.goto(urlAdminHome);
+        await page.waitForNetworkIdle();
+
+        expect(await getUpdateLinkText()).to.match(/Check for updates/);
+
+        await page.click(selectorUpdateButtonIcon);
+        await page.waitForNetworkIdle();
+
+        expect(await getMessageTitleText()).to.match(/latest version of Matomo/);
+      });
+
       it('should check for a new version on request', async function() {
         await page.goto(urlAdminHome);
         await page.waitForNetworkIdle();

plugins/CoreHome/tests/UI/VersionInfoHeaderMessage_spec.js

@@ -4,7 +4,6 @@
 @color-period-selector-calendar-hover-background:   @theme-color-background-lowContrast;
 
 .periodSelector {
-  display: inline-block;
 
   .preset-option-text {
     padding-left: 30px !important;
@@ -409,7 +408,6 @@
   }
 
   .move-period {
-    background-color: transparent;
     border: none;
     width: 20px;
     height: 33px; // req'd for tap target

plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.less

@@ -49,7 +49,6 @@
   }
 }
 
-.siteSelector a.title,
 .siteSelector .custom_select_ul_list li a,
 .siteSelector .custom_select_all a,
 .siteSelector .custom_select_main_link > span {
@@ -59,13 +58,10 @@
   text-overflow: ellipsis;
   padding: 0;
   color: @theme-color-text;
-  text-transform: uppercase;
   width: 100%;
 }
 
 .siteSelector.piwikSelector a.title {
-  padding: 10px 15px 11px 13px;
-
   > span {
     max-width: 161px;
     overflow: hidden;
@@ -173,10 +169,4 @@
       display: none !important;
     }
   }
-
-  &.borderedControl {
-    &:hover {
-      background-color: @theme-color-background-base!important;
-    }
-  }
 }

plugins/CoreHome/vue/src/SiteSelector/SiteSelector.less

@@ -201,7 +201,6 @@ body#standalone {
 
 .dashboardSettings.expanded .dropdown {
   min-width: 800px;
-  background-color: @theme-color-background-contrast;
   display: grid;
   grid-template-columns: auto 1fr;
 }