msglist: Use distinct background colors for DM messages.

This commit modifies DmMessage and its DateSeparator to use a different background color from StreamMessage.

Fixes zulip#681.

Author: E-m-i-n-e-n-c-e

lib/widgets/message_list.dart

@@ -30,6 +30,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   static final light = MessageListTheme._(
     dateSeparator: Colors.black,
     dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
+    dmMessageBgDefault: const HSLColor.fromAHSL(1, 45, 0.20, 0.96).toColor(),
     dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
     messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
     recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
@@ -55,6 +56,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   static final dark = MessageListTheme._(
     dateSeparator: Colors.white,
     dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
+    dmMessageBgDefault: const HSLColor.fromAHSL(1, 46, 0.07, 0.16).toColor(),
     dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
     messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.85).toColor(),
     recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
@@ -79,6 +81,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   MessageListTheme._({
     required this.dateSeparator,
     required this.dateSeparatorText,
+    required this.dmMessageBgDefault,
     required this.dmRecipientHeaderBg,
     required this.messageTimestamp,
     required this.recipientHeaderText,
@@ -103,6 +106,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
 
   final Color dateSeparator;
   final Color dateSeparatorText;
+  final Color dmMessageBgDefault;
   final Color dmRecipientHeaderBg;
   final Color messageTimestamp;
   final Color recipientHeaderText;
@@ -118,6 +122,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   MessageListTheme copyWith({
     Color? dateSeparator,
     Color? dateSeparatorText,
+    Color? dmMessageBgDefault,
     Color? dmRecipientHeaderBg,
     Color? messageTimestamp,
     Color? recipientHeaderText,
@@ -132,6 +137,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     return MessageListTheme._(
       dateSeparator: dateSeparator ?? this.dateSeparator,
       dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
+      dmMessageBgDefault: dmMessageBgDefault ?? this.dmMessageBgDefault,
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
       messageTimestamp: messageTimestamp ?? this.messageTimestamp,
       recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
@@ -153,6 +159,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     return MessageListTheme._(
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
       dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
+      dmMessageBgDefault: Color.lerp(dmMessageBgDefault, other.dmMessageBgDefault, t)!,
       dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
       messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
       recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
@@ -924,8 +931,12 @@ class DateSeparator extends StatelessWidget {
 
     final line = BorderSide(width: 0, color: messageListTheme.dateSeparator);
 
-    // TODO(#681) use different color for DM messages
-    return ColoredBox(color: messageListTheme.streamMessageBgDefault,
+    final backgroundColor = switch (message) {
+      StreamMessage() => messageListTheme.streamMessageBgDefault,
+      DmMessage() => messageListTheme.dmMessageBgDefault,
+    };
+
+    return ColoredBox(color: backgroundColor,
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 2),
         child: Row(children: [
@@ -966,13 +977,19 @@ class MessageItem extends StatelessWidget {
   Widget build(BuildContext context) {
     final message = item.message;
     final messageListTheme = MessageListTheme.of(context);
+
+    final backgroundColor = switch (message) {
+      StreamMessage() => messageListTheme.streamMessageBgDefault,
+      DmMessage() => messageListTheme.dmMessageBgDefault,
+    };
+
     return StickyHeaderItem(
       allowOverflow: !item.isLastInBlock,
       header: header,
       child: _UnreadMarker(
         isRead: message.flags.contains(MessageFlag.read),
         child: ColoredBox(
-          color: messageListTheme.streamMessageBgDefault,
+          color: backgroundColor,
           child: Column(children: [
             MessageWithPossibleSender(item: item),
             if (trailingWhitespace != null && item.isLastInBlock) SizedBox(height: trailingWhitespace!),

pubspec.lock

@@ -1044,10 +1044,10 @@ packages:
     dependency: transitive
     description:
       name: stream_channel
-      sha256: "4ac0537115a24d772c408a2520ecd0abb99bca2ea9c4e634ccbdbfae64fe17ec"
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   stream_transform:
     dependency: transitive
     description:

tools/customer-testing/setup.sh

@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+# Setup script for running Zulip's tests as part of the Flutter
+# "customer testing" suite:
+#   https://github.com/flutter/tests
+
+set -euo pipefail
+
+# Flutter's "customer testing" suite runs in two environments:
+#  * GitHub Actions for changes to the flutter/tests tree itself
+#    (which is just a registry of downstream test suites to run);
+#  * LUCI, at ci.chromium.org, for changes in Flutter.
+#
+# For background, see:
+#   https://github.com/flutter/flutter/issues/162041#issuecomment-2611129958
+
+if ! sudo -v; then
+    # In the LUCI environment sudo isn't available,
+    # but also the setup below isn't needed.  Skip it.
+    exit 0
+fi
+
+# Otherwise, assume we're in the GitHub Actions environment.
+
+
+# Install libsqlite3-dev.
+#
+# A few Zulip tests use SQLite, and so need libsqlite3.so.
+# (The actual databases involved are tiny and in-memory.)
+#
+# Both older and newer GitHub Actions images have the SQLite shared
+# library, from the libsqlite3-0 package.  But newer images
+# (ubuntu-24.04, which the ubuntu-latest alias switched to around
+# 2025-01) no longer have a symlink "libsqlite3.so" pointing to it,
+# which is part of the libsqlite3-dev package.  Install that.
+sudo apt install -y libsqlite3-dev