Allow to star and unstar stored segment #23771

tzi · 2025-11-12T01:55:06Z

Description

New “Star” Feature: each segment can be "starred" by clicking on a star icon.
Starred segments are highlighted at the top of the list.

What happen when a segment star is clicked :

Move the segment immediately at the top of the list
The Star icon is filled in
A API called is made to store this change

Screenshots

before / after

before	after

tooltips

tooltip unstarred	tooltip starred

Animation

star	unstar	error

Checklist

[NA] I have understood, reviewed, and tested all AI outputs before use
[NA] All AI instructions respect security, IP, and privacy rules

Review

tzi · 2025-11-17T17:42:07Z

...ntEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png

ℹ️ The new tests changed the visible focused element on this screenshot.

tzi · 2025-11-17T17:42:47Z

...SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_1_selector_starred.png

ℹ️ The starred segment comes at the top of the list

tzi · 2025-11-17T23:07:20Z

plugins/SegmentEditor/javascripts/Segmentation.js

+            self.target.find('[title]').each(function () {
+              addTooltip(this, this.getAttribute('title'));
+            });


ℹ️ Fix tooltip for all actions in the SegmentList

tzi · 2025-11-17T23:08:23Z

plugins/SegmentEditor/stylesheets/segmentation.less

+    display: flex;
+    flex-direction: column;


ℹ️ Use flexbox to be able to reorder starred segment easily.

tzi · 2025-11-17T23:08:44Z

plugins/SegmentEditor/stylesheets/segmentation.less

+.segmentationContainer .submenu ul li[data-idsegment=""] {
+    order: 0;
+}


ℹ️ First line is always "All visitors"

plugins/SegmentEditor/javascripts/Segmentation.js

plugins/SegmentEditor/API.php

michalkleiner

Some inline comments.

With the addition of who marked the segment as favourite, I wonder whether there was a discussion that each use might want to save different segments as favourite, no having it global.

plugins/SegmentEditor/tests/Integration/SegmentEditorTest.php

plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js

plugins/SegmentEditor/API.php

core/Updates/5.6.0-b3.php

core/Version.php

lang/en.json

tzi · 2025-11-19T14:57:42Z

@michalkleiner : With the addition of who marked the segment as favourite, I wonder whether there was a discussion that each use might want to save different segments as favourite, no having it global.

Yes, that was discussed and decided by Matt.

chippison

I think I found a small issue with the UI
This seems to happen only in Chrome and can confirm this looks correct in both Safari and Firefox

The SegmentEditor seems to show a vertical scrollbar when I add a new Segment

It also just seems to grow as I add new Segments

Screenshots above are from my tests in Chrome Browser

tzi · 2025-11-24T13:51:31Z

plugins/SegmentEditor/javascripts/Segmentation.js


            $(self.target).find(".segmentList li").each(function () {
-                curTitle = $(this).prop('title');
+                curTitle = $(this).find('.segname').prop('title');


ℹ️ Fix search, since I moved the title from the li to segname (li child) so I can have another title on star icon.

tzi · 2025-11-24T13:53:42Z

plugins/SegmentEditor/javascripts/Segmentation.js

+                clearTimeout(self.filterTimer);
+                self.filterTimer = false;
                if (search.length >= 2) {
-                    clearTimeout(self.filterTimer);
-                    self.filterAllowed = true;
                    self.filterTimer = setTimeout(function () {
                        filterSegmentList(search);
                    }, 500);
-                }
-                else {
-                    self.filterTimer = false;
-                    clearFilterSegmentList();
+                } else {
+                    self.filterTimer = setTimeout(clearFilterSegmentList, 500);


ℹ️ I add a clearTimeout even if there is less than 2 characters to avoid a bug when we are typing too fast.

For example:

explanation video

1. I am selecting every content (Ctrl+A)
2. It does nothing but trigger an update with 500ms delay
3. I’m removing all (Del) before the 500ms of delay
4. All the segments are visible since the search is empty
5. The search result came back once the 500ms delay is ended.

I also added a timer when there is 0 or 1 character since it does a lot of DOM modifications.

tzi · 2025-11-24T14:06:00Z

plugins/SegmentEditor/stylesheets/segmentation.less

    span.compareSegment,
    .starSegment {
        flex: none;
+        display: flex;


ℹ️ Force children to not place them-self inside a baseline.

Otherwise, it will cause vertical scrolling:

tzi · 2025-11-24T14:06:33Z

@chippison The SegmentEditor seems to show a vertical scrollbar when I add a new Segment

✅ Done!

tzi · 2025-11-24T14:38:13Z

plugins/SegmentEditor/javascripts/Segmentation.js

+                const className = 'compareSegment allVisitsCompareSegment ' + (self.segmentAccess === 'write' ? 'allVisitsCompareSegment--write' : '');
+                const title = _pk_translate('SegmentEditor_CompareThisSegment');
+                listHtml += '<span class="' + className + '" title="' + title + '"></span>';


ℹ️ Make sure the compare button is always align

anonymous connected

tzi · 2025-11-24T14:39:04Z

plugins/SegmentEditor/stylesheets/segmentation.less

+.segmentationContainer hr {
+  margin: 10px 0;
+}


ℹ️ Review vertical rythm

before after

chippison · 2025-11-24T22:36:28Z

plugins/SegmentEditor/javascripts/Segmentation.js

+        function updateStarredSegment($segment, segment, isError = false) {
+          updateStarSegmentTooltip($segment, segment);
+          $segment.toggleClass('segmentStarred', segment.starred);
+          $segment.one('animationend', function avoidAnimationRepetition() {


Should this be $segment.on?

This is intended.
$segment.one() is the same than $segment.on() but it only triggered one time.

It is the same than element.addEventListener(callback, { once: true });

chippison · 2025-11-24T22:59:35Z

Functional Testing is done with different users. Can see the correct user shown that 'starred' the segment.
Also tested that anonymous user cannot add/see star for segments

tzi added the Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. label Nov 12, 2025

tzi changed the title ~~Allow to start/unstar stored segment~~ Allow to star and unstar stored segment Nov 14, 2025

tzi force-pushed the ux-326 branch 10 times, most recently from 24a8707 to cb064c5 Compare November 17, 2025 17:41

tzi commented Nov 17, 2025

View reviewed changes

tzi force-pushed the ux-326 branch from 75e8f2c to 92a15a7 Compare November 17, 2025 23:05

tzi commented Nov 17, 2025

View reviewed changes

tzi force-pushed the ux-326 branch 2 times, most recently from d004753 to 5c02c19 Compare November 17, 2025 23:55

tzi marked this pull request as ready for review November 18, 2025 01:03

tzi requested a review from a team November 18, 2025 01:03

michalkleiner requested changes Nov 18, 2025

View reviewed changes

tzi force-pushed the ux-326 branch from be9a5f8 to 891fb4d Compare November 18, 2025 10:41

michalkleiner requested changes Nov 19, 2025

View reviewed changes

chippison reviewed Nov 19, 2025

View reviewed changes

tzi force-pushed the ux-326 branch from f6b7b23 to 27877e8 Compare November 24, 2025 13:50

tzi commented Nov 24, 2025

View reviewed changes

tzi requested review from chippison and michalkleiner November 24, 2025 14:39

tzi force-pushed the ux-326 branch 2 times, most recently from 8065736 to 38cae01 Compare November 24, 2025 20:04

tzi added 5 commits November 24, 2025 21:30

Allow to start/unstar stored segment

e511486

Add and Update tests

940ddad

Add tooltip on stars and fix existing tooltips

20fa57e

Migrate array notation, feedback from @michalkleiner

6f539bc

Handle API error and add micro-animation

15a9099

tzi force-pushed the ux-326 branch 2 times, most recently from 15fa35e to a303458 Compare November 24, 2025 20:46

chippison reviewed Nov 24, 2025

View reviewed changes

tzi force-pushed the ux-326 branch from a303458 to 7134cf8 Compare November 24, 2025 23:10

tzi added 5 commits November 25, 2025 07:54

Update the tooltip to precise who star a segment

b324862

Feedback from @michalkleiner

1e6cc94

Fix segement search

01b406e

Fix segmentation-list scroll

1f644f3

improve anonymous segment list

581d2c2

tzi force-pushed the ux-326 branch from 7134cf8 to 581d2c2 Compare November 25, 2025 06:54

Uh oh!

Allow to star and unstar stored segment #23771

Are you sure you want to change the base?

Allow to star and unstar stored segment #23771

Conversation

tzi commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

before / after

tooltips

Animation

Checklist

Review

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michalkleiner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tzi commented Nov 19, 2025

Uh oh!

chippison left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi commented Nov 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chippison commented Nov 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

tzi commented Nov 12, 2025 •

edited

Loading

tzi Nov 24, 2025 •

edited

Loading