Remove "add new segment" selector in segment editor (#17998)

* simple approach, hide segment by css. complete solution needs to alter the entire js.

* UI tests: Fixed UI test failure caused by remove segment selcetor in segment widgets

* update html inline style to less, remove UI test for segemtn selector

* update mobile view and remove the js test related

* remove segment selector related test

* trigger js build

* fix IE 11  css

fix IE 11

* add migration 4.5.0-b2 mysql row format dynamic

 mysql row format dynamic updates

* revert wrong branch change

revert wrong branch change

* update grid to inline-block

update grid to inline-block

* update some css

update some css

* update new screenshot

update new screenshot

* update one more image

update one more image

* uploaded the wrong ui

uploaded the wrong ui

* remove image fix css

remove image fix css

* update screen shot because of the layout change

update screen shot because of the layout change

* add no wrap to the display

add no wrap to the display

* fix the UI on different device

fix the UI on different device

* update images

update images

* update segment selector test

update segment selector test

* update image

update image

* update segment test

update segment test

* update js test

update js test

* update segment screen and test

update segment screen and test

* update test

update test

* updates expected screenshots

* cleanup css

Co-authored-by: Peter Zhang <matomo@Peters-MacBook-Pro.local>
Co-authored-by: sgiehl <stefan@matomo.org>

27 files changed, 109 insertions, 99 deletions

diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_default.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_default.png
index d04e6e7362..e0c6b2291b 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_default.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_default.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0dc061653083632c413a46a669eaf8d5a30b743f60a6ed3ff6b2cd334e06df85
-size 62462
+oid sha256:d087fd1a239721e784e3470b76a30a8d298bdb836f7055ffe7b89aaa039f9ed2
+size 62442
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled.png
index 1bccf2b8ba..f934dbea6c 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:29f7a8a10f4ae63d3cddf9c80644378e7625d1d17b30986503444c6a2111db89
-size 567547
+oid sha256:dec0e46ff2fd227cc5047222f23e38e7331d3ea443a014e30803690e358913d4
+size 567782
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled_verified_no_data_deleted.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled_verified_no_data_deleted.png
index f5d266a55a..3d05e2e7fc 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled_verified_no_data_deleted.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_cancelled_verified_no_data_deleted.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c96c2d345f869408f4e5e346577b7d9245cbe961c651810cee2811606b92103e
-size 561835
+oid sha256:269b29db1cd3028c2e9099d35ba5719ce3413da213f30e02b6d88ebed9f21cd3
+size 561892
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_confirmed.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_confirmed.png
index f8b86a7ce9..7823c65a8e 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_confirmed.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_delete_visit_confirmed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f91d4fea1087cfcf6ab7683fe71831cbd869db1aff9fdc16e9655e29a2da2c71
-size 129007
+oid sha256:b85ed1a07140fb9fbc6212d2f88c5d620e57cc55d27c1cc953246100661a043f
+size 129069
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_enrich_segment_by_ip.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_enrich_segment_by_ip.png
index 911bd61f01..3b270e15e1 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_enrich_segment_by_ip.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_enrich_segment_by_ip.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6b3f74a93a0d0ce9a458f08b79106edec939a20403a9730ced8a8f2c7677e2fe
-size 567895
+oid sha256:f8c858664a3e7ab9ed4cb8931c53f2d4a0857d98bc94c11d4a283391fefb477d
+size 568190
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_no_visits_found.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_no_visits_found.png
index 8898412f55..b141df9073 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_no_visits_found.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_no_visits_found.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2d5c09c53ebcd95563f4675f34f6b723004f41ba9fbc642f79b90f94f212edf8
-size 68186
+oid sha256:3851f478d64cdc544f50c6129cdb292b5cd4587ae6af6d5b83c143d23d2708ab
+size 68321
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_uncheck_one_visit.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_uncheck_one_visit.png
index 1bccf2b8ba..f934dbea6c 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_uncheck_one_visit.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_uncheck_one_visit.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:29f7a8a10f4ae63d3cddf9c80644378e7625d1d17b30986503444c6a2111db89
-size 567547
+oid sha256:dec0e46ff2fd227cc5047222f23e38e7331d3ea443a014e30803690e358913d4
+size 567782
diff --git a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_found.png b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_found.png
index 218292e2fd..3732c11cc7 100644
--- a/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_found.png
+++ b/plugins/PrivacyManager/tests/UI/expected-screenshots/PrivacyManager_gdpr_tools_visits_found.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:81fde2b193c87cbd81b092e8d8509ad12aa7cef5efe6c131c6d6ed48f9e3c730
-size 562200
+oid sha256:156416af8febd6d4218a41fb29c86c9c32b287977896dbff56ecdcede547a91e
+size 562240
diff --git a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
index 782db0a88e..778021f446 100644
--- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
+++ b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.less
@@ -1,5 +1,9 @@
 .segment-generator {
-  width: 900px;
+  width: 930px;
+
+  @media screen and (max-width: 940px) {
+    width: 100%;
+  }
 
   .segment-row-inputs {
     .form-group {
@@ -106,10 +110,15 @@
     border-radius: 3px;
     display: inline-block;
     position: relative;
-    width: 887px;
+    width: 100%;
     padding: 12px 1%;
     background: #efefeb;
     padding: 0 5px 0 5px;
+
+    @media screen and (max-width: 749px) {
+      width: 100%;
+    }
+
   }
 
   .segment-row .segment-close {
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index a3d4c042cb..620965d6c1 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -288,20 +288,6 @@ Segmentation = (function($) {
 
         var getFormHtml = function() {
             var html = self.editorTemplate.find("> .segment-element").clone();
-            // set left margin to center form
-            var segmentsDropdown = $(html).find(".available_segments_select");
-            var segment, newOption;
-            newOption = '<option data-idsegment="" data-definition="" title="'
-                + self.translations['SegmentEditor_AddNewSegment']
-                + '">' + self.translations['SegmentEditor_AddNewSegment']
-                + '</option>';
-            segmentsDropdown.append(newOption);
-            for(var i = 0; i < self.availableSegments.length; i++)
-            {
-                segment = self.availableSegments[i];
-                newOption = '<option data-idsegment="'+segment.idsegment+'" data-definition="'+(segment.definition).replace(/"/g, '&quot;')+'" title="'+getSegmentTooltipEnrichedWithUsername(segment)+'">'+getSegmentName(segment)+'</option>';
-                segmentsDropdown.append(newOption);
-            }
             $(html).find(".segment-content > h3").after('<div piwik-segment-generator add-initial-condition="true"></div>').show();
             return html;
         };
@@ -320,7 +306,7 @@ Segmentation = (function($) {
                 .html( getSegmentName(segment) )
                 .prop('title', getSegmentTooltipEnrichedWithUsername(segment));
 
-            $(self.form).find('.available_segments_select > option[data-idsegment="'+segment.idsegment+'"]').prop("selected",true);
+            $(self.form).find('.available_segments_select').val(segment.idsegment);
 
             $(self.form).find('.available_segments a.dropList')
                 .html( getSegmentName(segment) )
@@ -525,14 +511,10 @@ Segmentation = (function($) {
                 e.preventDefault();
             });
 
-            self.target.on('change', '.available_segments_select', function (e) {
-                var option = $(e.currentTarget).find('option:selected');
-                openEditFormGivenSegment(option);
-            });
 
             self.target.on('click', ".delete", function() {
                 var segmentName = $(self.form).find(".segment-content > h3 > span").text();
-                var segmentId = $(self.form).find(".available_segments_select option:selected").attr("data-idsegment");
+                var segmentId = $(self.form).find(".available_segments_select").val();
                 var params = {
                     "idsegment" : segmentId
                 };
@@ -647,7 +629,6 @@ Segmentation = (function($) {
             makeDropList(".enable_all_users" , ".enable_all_users_select");
             makeDropList(".visible_to_website" , ".visible_to_website_select");
             makeDropList(".auto_archive" , ".auto_archive_select");
-            makeDropList(".available_segments" , ".available_segments_select");
             $(self.form).find(".saveAndApply").bind("click", function (e) {
                 e.preventDefault();
                 parseFormAndSave();
@@ -681,7 +662,7 @@ Segmentation = (function($) {
         var parseFormAndSave = function(){
             var segmentName = $(self.form).find(".segment-content > h3 >span").text();
             var segmentStr = getSegmentGeneratorController().getSegmentString();
-            var segmentId = $(self.form).find('.available_segments_select > option:selected').attr("data-idsegment");
+            var segmentId = $(self.form).find(".available_segments_select").val() || "";
             var user = $(self.form).find(".enable_all_users_select option:selected").val();
             var autoArchive = $(self.form).find(".auto_archive_select option:selected").val() || 0;
             var params = {
diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
index ee48164d84..63892cfd65 100644
--- a/plugins/SegmentEditor/stylesheets/segmentation.less
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -19,6 +19,11 @@
 
 .segment-row-inputs {
     margin-bottom: 5px;
+
+    @media screen and (max-width: 749px) {
+        width: 100%;
+        display: block;
+    }
 }
 
 .hovered {
@@ -45,7 +50,7 @@
 }
 
 .metricValueBlock {
-    width: 500px;
+    width: 60%;
 }
 
 div.scrollable {
@@ -123,12 +128,34 @@ div.scrollable {
 .segment-element .segment-top {
     font-size: 11px;
     color: #505050;
-    text-align: right;
+    text-align: left;
     padding: 3px 7px 0 0;
 
     > * {
         vertical-align: top;
     }
+
+}
+
+.segment-element .segment-top .segment-hidden {
+    display: none;
+}
+
+.segment-element .segment-top .segment-top-item {
+    display: inline;
+    white-space: nowrap;
+
+    @media screen and (max-width: 749px) {
+        display: block;
+    }
+}
+
+.grid-1, .grid-2 {
+    width: 26%;
+}
+
+.grid-3 {
+    width: 46%;
 }
 
 .segment-element .segment-top a {
@@ -202,7 +229,6 @@ div.scrollable {
 }
 
 
-
 .segmentationContainer .submenu ul li {
     padding: 2px 0 1px 0;
     margin: 3px 0 0 0;
@@ -255,7 +281,7 @@ div.scrollable {
             margin-right: 24px;
         }
     }
-    
+
     li.segmentSelected, li.comparedSegment {
         span.compareSegment {
             pointer-events: none;
@@ -273,6 +299,7 @@ html.comparisonsDisabled .segmentationContainer ul.submenu {
 .segmentEditorPanel.expanded .segmentationContainer {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+
     .dropdown-body {
         width: 240px;
     }
@@ -412,7 +439,12 @@ a.metric_category {
 
 .segment-element {
     z-index: 999;
-    width: 908px;
+    width: 940px;
+
+    @media screen and (max-width: 940px) {
+        width: 95vw;
+        padding: 1em;
+    }
 }
 
 .segmentationSelectorContainer {
@@ -434,7 +466,7 @@ a.metric_category {
 }
 
 .ui-autocomplete.ui-menu.ui-widget {
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     padding: 6px !important;
 }
 
@@ -443,6 +475,10 @@ a.metric_category {
     .segmentEditorPanel.expanded .segmentationContainer {
         width: auto;
     }
+
+    .grid-1, .grid-2, .grid-3 {
+        width: 100%;
+    }
 }
 
 .segment-definition-change-confirm .description {
@@ -516,7 +552,7 @@ a.metric_category {
 
 .segment-element .segment-nav a.dropdown,
 .segment-element .segment-top a.dropdown {
-    padding: 0 17px 0 0;
+    padding: 0;
     background: none !important;
 }
 
@@ -558,7 +594,6 @@ a.metric_category {
 }
 
 .auto_archive {
-    max-width: 190px;
     a.dropList {
         display: inline-block;
         width: calc(100% - 15px);
diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig
index aa159ca94d..11e7ce8e04 100644
--- a/plugins/SegmentEditor/templates/_segmentSelector.twig
+++ b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -36,25 +36,25 @@
 
         <div class="segment-content">
             <div class="segment-top" {% if not isSuperUser %}style="display:none"{% endif %}>
-
-                <span class="icon-segment"></span><span class="available_segments"><strong>
-                <select class="available_segments_select browser-default"></select>
-            </strong></span>
-
+               <input type="hidden" class="available_segments_select"/>
+               <div class="segment-top-item grid-1">
                 {{ 'SegmentEditor_ThisSegmentIsVisibleTo'|translate }} <div class="enable_all_users"><strong>
                         <select class="enable_all_users_select">
                             <option {% if not isSuperUser %}selected="1"{% endif %} value="0">{{ 'SegmentEditor_VisibleToMe'|translate }}</option>
                             <option {% if isSuperUser %}selected="1"{% endif %} value="1">{{ 'SegmentEditor_VisibleToAllUsers'|translate }}</option>
                         </select>
                     </strong></div>
-
+                </div>
+                <div class="segment-top-item grid-2">
                 {{ 'SegmentEditor_SegmentIsDisplayedForWebsite'|translate }}<div class="visible_to_website"><strong>
                         <select class="visible_to_website_select">
                             <option selected="" value="{{ idSite }}">{{ 'SegmentEditor_SegmentDisplayedThisWebsiteOnly'|translate }}</option>
                             {% if isAddingSegmentsForAllWebsitesEnabled %}<option value="0">{{ 'SegmentEditor_SegmentDisplayedAllWebsites'|translate }}</option>{% endif %}
                         </select>
                     </strong></div>
+                </div>
                 {% if isCreateRealtimeSegmentsEnabled %}
+                   <div class="segment-top-item grid-3">
                     {{ 'General_And'|translate }}
                     <div class="auto_archive"><strong>
                             <select class="auto_archive_select">
@@ -65,6 +65,7 @@
                             </select>
                         </strong>
                     </div>
+                   </div>
                 {% endif %}
 
             </div>
diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
index ad988111e2..5e9032d7d0 100644
--- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
+++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
@@ -1,6 +1,6 @@
 /*!
  * Matomo - free/libre analytics platform
- * 
+ *
  * SegmentEditor screenshot tests.
  *
  * @link https://matomo.org
@@ -9,7 +9,7 @@
 
 describe("SegmentSelectorEditorTest", function () {
     var selectorsToCapture = ".segmentEditorPanel,.segmentEditorPanel .dropdown-body,.segment-element";
-    
+
     this.timeout(0);
 
     var generalParams = 'idSite=1&period=year&date=2012-08-09';
@@ -57,19 +57,6 @@ describe("SegmentSelectorEditorTest", function () {
         expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('3_segment_editor_edit_name');
     });
 
-    it("should show the segment editor's available segments dropdown", async function() {
-        var elem = await page.$('.available_segments a.dropList');
-        await elem.hover();
-        await page.click('.available_segments a.dropList');
-        expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('6_segment_editor_droplist');
-    });
-
-    it("should change segment when another available segment clicked in segment editor's available segments dropdown", async function() {
-        await (await page.jQuery('.ui-menu-item div:contains(Add new segment)')).click();
-        await page.waitForNetworkIdle();
-        expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('6_segment_editor_different');
-    });
-
     it("should close the segment editor when the close link is clicked", async function() {
         await page.evaluate(function () {
             $('.segmentEditorPanel .segment-footer .close').click();
@@ -99,6 +86,7 @@ describe("SegmentSelectorEditorTest", function () {
     });
 
     it("should add an OR condition when clicking on add OR", async function() {
+        await page.$eval('.segmentEditorPanel .segmentRow0 .ui-autocomplete-input', e => e.blur());
         await page.click('.segmentEditorPanel .segment-add-or');
         await page.waitForFunction(() => !! $('.segmentRow0 .segment-rows>div:eq(1)').length);
         await page.waitForNetworkIdle();
@@ -158,6 +146,8 @@ describe("SegmentSelectorEditorTest", function () {
 
     it("should correctly should show a confirmation when changing segment definition", async function() {
         await page.click('.segmentEditorPanel .editSegmentName');
+
+        await page.$eval('.segmentEditorPanel .segmentRow0 .ui-autocomplete-input', e => e.blur());
         await page.evaluate(function () {
             $('input.edit_segment_name').val('').change();
         });
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png
index dc0affb84e..4630e469b7 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2d86d3812dccc6082d3927a4050da8177367477589fd554c9b3dd964132ae8ab
-size 37687
+oid sha256:e72fae40a0c44ec32cf6b05e5c4ce5b93f1543c18b80c71571c64d5f85744ca7
+size 35175
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png
index 01b61abcbb..47f543fd9f 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca0435eaa39c7f1bfd35c95a3a8b96009f48d73c4a7da84908fd81cee6969dc8
-size 38242
+oid sha256:a3812471fc9b5e4f07280e8e4f79879bd994c5551e5fec9faaf6b37640082ffd
+size 35717
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_different.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_different.png
deleted file mode 100644
index 7743cc40ea..0000000000
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_different.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1c9d5c9c276b84c748bc10981750fb56765b80d87826bb450454082fe2c2747f
-size 32661
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_droplist.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_droplist.png
deleted file mode 100644
index 0350cb4d5d..0000000000
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_droplist.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5a03084a18379d2da0956a298db9db1e86576cd9e1dc0249e5791e3b885eb69a
-size 43522
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png
index 7743cc40ea..f0e121c5a8 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c9d5c9c276b84c748bc10981750fb56765b80d87826bb450454082fe2c2747f
-size 32661
+oid sha256:947ace71f336490f42b5a02b0c75b3e2640dd04ce6d32e3804bc9624c09c626d
+size 31637
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png
index 8e08dc97eb..31d898093c 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c664031b2aad2bd73b42ed00fc9d3be17af3bc4e45e09293e74e0d50aa778fcd
-size 46590
+oid sha256:711be5b80eec70d3a4feab174c7d3d7cdb0e229bd73c2fa4e6154fe76cee91ec
+size 46109
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png
index 1beb529da9..f6c1394717 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b0358f3c95322545675d41de22ddab9aaa17444a74159e7a4901f2a4ebc42edf
-size 36928
+oid sha256:d2820216977a737bc67d1d44faf103f9d63b640d991a62e562988ec2d9fd58e2
+size 36194
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png
index b342abc4bd..eac36cdc07 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:41f219682f3144bb5699363a8d2c552e6af5e5babdba1fc74d3d0c13923a5f62
-size 32106
+oid sha256:76752106a18b1be7ea6d5a96ee1c5506af9f255b94441c5b24bb094349e683de
+size 31049
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png
index dc81b09ad7..330f3e7437 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c7ab6bf39d96dce3f86ae4594a258567a26bc96a3bee8b42a031949b7f180acc
-size 46402
+oid sha256:c9f1a841123a3281357ae4f481df580bcbc368cc9f8281ffe6c7aed7746a3743
+size 45783
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png
index 3e59b45457..0ad8146a11 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:04a33532477986127bc74f79efc8137e19117c51bcc184a69c8b7e0305e5f732
-size 36663
+oid sha256:70d9647ebbdb0157c645c15d655b53fa5a0b447de76adf8144c6002d7cd33d66
+size 35828
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png
index 6a35cf8d5e..a0a23c54a1 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2433b1efd095d1e0d84e21474f3cfdbce3e8842b3255cb7e69f44ba4f5619ce4
-size 29354
+oid sha256:3b294dab4b6bc3518291c385c834b61151cdc62affd1eb5a356db2d18a60ed90
+size 28894
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png
index a640ecb5ca..e8a3180048 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db02585d0d19dd562c894d502b1234509d8b631ddadbe9e78e3f44a41add3cf4
-size 48319
+oid sha256:eff8a925c8f9c1b072c294125eede776df828a7c33ee10307c68282249f3f330
+size 48182
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png
index c0c5564850..eaa19a1b7a 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f4f2b8e0ab34ae892c2c84772d103eafed5c55f50f44e47631d9599c69f4eee8
-size 59411
+oid sha256:e45b89ce929777b85711946e420be9abf9fd0d56ba20c64fbfc81e9f75d75582
+size 57402
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png
index c25f0cbfa0..313b2d6383 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:557b99f235608aae163ec16d0ec35aaa43d973626039d056139f503bd44e9192
-size 49518
+oid sha256:37addc9332cacff2437a75dbee040de53ddaf4cd1d304f1055672f25e96904aa
+size 48952