msglist: Implement new edited/moved label design.

This replaces the gutter edit state marker design. Since it leads to
message displacement, a previous test case is no longer applicable.

We also inline part of what was previously in edit_state_marker.dart,
because the new design simplifies the implementation.

The design variables are taken from the Figma design:

  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3038-56393&t=WMT80mwuFaruNbVf-1

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -533,5 +533,13 @@
   "manyPeopleTyping": "Several people are typing…",
   "@manyPeopleTyping": {
     "description": "Text to display when there are multiple users typing."
+  },
+  "messageIsEditedLabel": "EDITED",
+  "@messageIsEditedLabel": {
+    "description": "Label for an edited message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  },
+  "messageIsMovedLabel": "MOVED",
+  "@messageIsMovedLabel": {
+    "description": "Label for a moved message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
   }
 }

lib/widgets/edit_state_marker.dart

@@ -22,7 +22,6 @@ import 'page.dart';
 import 'profile.dart';
 import 'sticky_header.dart';
 import 'store.dart';
-import 'edit_state_marker.dart';
 import 'text.dart';
 import 'theme.dart';
 
@@ -33,7 +32,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Colors.black,
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
-      editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
+      editStateLabel: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
       messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
@@ -60,8 +59,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Colors.white,
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
-      // TODO(design-dark) need proper dark-theme color (this is ad hoc)
-      editedMovedMarkerCollapsed: const Color.fromARGB(128, 214, 202, 194),
+      editStateLabel: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
       messageTimestamp: const HSLColor.fromAHSL(0.6, 0, 0, 1).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
@@ -86,7 +84,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     required this.dateSeparator,
     required this.dateSeparatorText,
     required this.dmRecipientHeaderBg,
-    required this.editedMovedMarkerCollapsed,
+    required this.editStateLabel,
     required this.messageTimestamp,
     required this.recipientHeaderText,
     required this.senderBotIcon,
@@ -111,7 +109,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   final Color dateSeparator;
   final Color dateSeparatorText;
   final Color dmRecipientHeaderBg;
-  final Color editedMovedMarkerCollapsed;
+  final Color editStateLabel;
   final Color messageTimestamp;
   final Color recipientHeaderText;
   final Color senderBotIcon;
@@ -127,7 +125,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     Color? dateSeparator,
     Color? dateSeparatorText,
     Color? dmRecipientHeaderBg,
-    Color? editedMovedMarkerCollapsed,
+    Color? editStateLabel,
     Color? messageTimestamp,
     Color? recipientHeaderText,
     Color? senderBotIcon,
@@ -142,7 +140,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: dateSeparator ?? this.dateSeparator,
       dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
-      editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
+      editStateLabel: editStateLabel ?? this.editStateLabel,
       messageTimestamp: messageTimestamp ?? this.messageTimestamp,
       recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
       senderBotIcon: senderBotIcon ?? this.senderBotIcon,
@@ -164,7 +162,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
       dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
       dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
-      editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, t)!,
+      editStateLabel: Color.lerp(editStateLabel, other.editStateLabel, t)!,
       messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
       recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
       senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
@@ -1256,6 +1254,16 @@ class MessageWithPossibleSender extends StatelessWidget {
         ]);
     }
 
+    final localizations = ZulipLocalizations.of(context);
+    String? editStateText;
+    switch (message.editState) {
+      case MessageEditState.edited:
+        editStateText = localizations.messageIsEditedLabel;
+      case MessageEditState.moved:
+        editStateText = localizations.messageIsMovedLabel;
+      case MessageEditState.none:
+    }
+
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onLongPress: () => showMessageActionSheet(context: context, message: message),
@@ -1265,15 +1273,25 @@ class MessageWithPossibleSender extends StatelessWidget {
           if (senderRow != null)
             Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
               child: senderRow),
-          EditStateMarker(
-            editState: message.editState,
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.baseline,
+            textBaseline: localizedTextBaseline(context),
             children: [
+              const SizedBox(width: 16),
               Expanded(child: Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
                   MessageContent(message: message, content: item.content),
+                  if (editStateText != null)
+                    Text(editStateText, textAlign: TextAlign.end,
+                        style: TextStyle(
+                          color: designVariables.labelEdited,
+                          fontSize: 12,
+                          height: (12 / 12),
+                          letterSpacing: proportionalLetterSpacing(
+                              context, 0.05, baseFontSize: 12))),
                   if ((message.reactions?.total ?? 0) > 0)
-                    ReactionChipsList(messageId: message.id, reactions: message.reactions!)
+                    ReactionChipsList(messageId: message.id, reactions: message.reactions!),
                 ])),
               SizedBox(width: 16,
                 child: message.flags.contains(MessageFlag.starred)

lib/widgets/message_list.dart

@@ -112,6 +112,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: const Color(0x33000000),
       icon: const Color(0xff666699),
       labelCounterUnread: const Color(0xff222222),
+      labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
       labelMenuButton: const Color(0xff222222),
       mainBackground: const Color(0xfff0f0f0),
       title: const Color(0xff1a1a1a),
@@ -140,6 +141,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: Colors.black.withOpacity(0.41),
       icon: const Color(0xff7070c2),
       labelCounterUnread: const Color(0xffffffff).withOpacity(0.7),
+      labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
       labelMenuButton: const Color(0xffffffff).withOpacity(0.85),
       mainBackground: const Color(0xff1d1d1d),
       title: const Color(0xffffffff),
@@ -174,6 +176,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.borderBar,
     required this.icon,
     required this.labelCounterUnread,
+    required this.labelEdited,
     required this.labelMenuButton,
     required this.mainBackground,
     required this.title,
@@ -210,6 +213,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color borderBar;
   final Color icon;
   final Color labelCounterUnread;
+  final Color labelEdited;
   final Color labelMenuButton;
   final Color mainBackground;
   final Color title;
@@ -241,6 +245,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? borderBar,
     Color? icon,
     Color? labelCounterUnread,
+    Color? labelEdited,
     Color? labelMenuButton,
     Color? mainBackground,
     Color? title,
@@ -267,6 +272,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: borderBar ?? this.borderBar,
       icon: icon ?? this.icon,
       labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
+      labelEdited: labelEdited ?? this.labelEdited,
       labelMenuButton: labelMenuButton ?? this.labelMenuButton,
       mainBackground: mainBackground ?? this.mainBackground,
       title: title ?? this.title,
@@ -300,6 +306,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: Color.lerp(borderBar, other.borderBar, t)!,
       icon: Color.lerp(icon, other.icon, t)!,
       labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,
+      labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,
       labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
       title: Color.lerp(title, other.title, t)!,

lib/widgets/theme.dart

@@ -16,7 +16,6 @@ import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/autocomplete.dart';
 import 'package:zulip/widgets/content.dart';
-import 'package:zulip/widgets/emoji_reaction.dart';
 import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/store.dart';
@@ -1038,10 +1037,10 @@ void main() {
     });
   });
 
-  group('EditStateMarker', () {
+  group('edit state label', () {
     void checkMarkersCount({required int edited, required int moved}) {
-      check(find.byIcon(ZulipIcons.edited).evaluate()).length.equals(edited);
-      check(find.byIcon(ZulipIcons.message_moved).evaluate()).length.equals(moved);
+      check(find.text('EDITED').evaluate()).length.equals(edited);
+      check(find.text('MOVED').evaluate()).length.equals(moved);
     }
 
     testWidgets('no edited or moved messages', (tester) async {
@@ -1069,72 +1068,6 @@ void main() {
       await tester.pump();
       checkMarkersCount(edited: 2, moved: 0);
     });
-
-    List<List<(String, Rect)>> captureMessageRects(
-      WidgetTester tester,
-      List<Message> messages,
-      Message targetMessage,
-    ) {
-      assert(messages.contains(targetMessage));
-      final List<List<(String, Rect)>> result = [];
-      for (final message in messages) {
-        final baseFinder = find.byWidgetPredicate(
-          (widget) => widget is MessageWithPossibleSender
-            && widget.item.message.id == message.id);
-
-        Rect getRectMatching(Finder matching) {
-          final finder = find.descendant(
-            of: baseFinder, matching: matching)..tryEvaluate();
-          check(finder.found, because: '${message.content}: $matching')
-            .length.equals(1);
-          return tester.getRect(finder.first);
-        }
-
-        result.add([
-          ('MessageWithPossibleSender', tester.getRect(baseFinder)),
-          ('MessageContent', getRectMatching(find.byType(MessageContent))),
-          ('Paragraph', getRectMatching(find.byType(Paragraph))),
-          if (message.id == targetMessage.id) ...[
-            ('Star', getRectMatching(find.byIcon(ZulipIcons.star_filled))),
-            ('ReactionChipsList', getRectMatching(find.byType(ReactionChipsList))),
-          ],
-        ]);
-      }
-      return result;
-    }
-
-    testWidgets('edit state updates do not affect layout', (tester) async {
-      final messages = [
-        eg.streamMessage(topic: 'orig'),
-        eg.streamMessage(
-          topic: 'orig',
-          reactions: [eg.unicodeEmojiReaction, eg.realmEmojiReaction],
-          flags: [MessageFlag.starred]),
-        eg.streamMessage(topic: 'orig'),
-      ];
-      final StreamMessage messageWithMarker = messages[1];
-      await setupMessageListPage(tester, messages: messages);
-      final rectsBefore = captureMessageRects(tester, messages, messageWithMarker);
-      checkMarkersCount(edited: 0, moved: 0);
-
-      await store.handleEvent(eg.updateMessageEventMoveFrom(
-        origMessages: [store.messages[messageWithMarker.id] as StreamMessage],
-        newTopic: 'new'));
-      await tester.pump();
-      await store.handleEvent(eg.updateMessageEventMoveFrom(
-        origMessages: [store.messages[messageWithMarker.id] as StreamMessage],
-        newTopic: 'orig'));
-      await tester.pump();
-      check(captureMessageRects(tester, messages, messageWithMarker))
-        .deepEquals(rectsBefore);
-      checkMarkersCount(edited: 0, moved: 1);
-
-      await store.handleEvent(eg.updateMessageEditEvent(messageWithMarker));
-      await tester.pump();
-      check(captureMessageRects(tester, messages, messageWithMarker))
-        .deepEquals(rectsBefore);
-      checkMarkersCount(edited: 1, moved: 0);
-    });
   });
 
   group('_UnreadMarker animations', () {