Fix do not mark as read, and make it more visible

src/__tests__/lib/exampleData.js

@@ -752,6 +752,7 @@ export const backgroundData: BackgroundData = deepFreeze({
   allImageEmojiById: action.realm_init.data.realm_emoji,
   auth: selfAuth,
   debug: baseReduxState.session.debug,
+  doNotMarkMessagesAsRead: baseReduxState.settings.doNotMarkMessagesAsRead,
   flags: baseReduxState.flags,
   mute: [],
   mutedUsers: Immutable.Map(),

src/boot/store.js

@@ -302,6 +302,9 @@ const migrations: {| [string]: (GlobalState) => GlobalState |} = {
     outbox: state.outbox.filter(o => o.sender_id !== undefined),
   }),
 
+  // Add `doNotMarkMessagesAsRead` in `SettingsState`.
+  // (Handled automatically by merging with the new initial state.)
+
   // TIP: When adding a migration, consider just using `dropCache`.
 };
 

src/reduxTypes.js

@@ -295,6 +295,7 @@ export type SettingsState = {|
   experimentalFeaturesEnabled: boolean,
   streamNotification: boolean,
   browser: BrowserPreference,
+  doNotMarkMessagesAsRead: boolean,
 |};
 
 export type StreamsState = Stream[];

src/session/__tests__/sessionReducer-test.js

@@ -110,7 +110,7 @@ describe('sessionReducer', () => {
     const action = deepFreeze({ type: DEBUG_FLAG_TOGGLE, key: 'someKey', value: true });
     expect(sessionReducer(baseState, action)).toEqual({
       ...baseState,
-      debug: { doNotMarkMessagesAsRead: false, someKey: true },
+      debug: { someKey: true },
     });
   });
 

src/session/sessionReducer.js

@@ -85,9 +85,7 @@ const initialState: SessionState = {
   orientation: 'PORTRAIT',
   outboxSending: false,
   pushToken: null,
-  debug: {
-    doNotMarkMessagesAsRead: false,
-  },
+  debug: Object.freeze({}),
   hasDismissedServerCompatNotice: false,
 };
 

src/settings/DebugScreen.js

@@ -1,37 +1,21 @@
 /* @flow strict-local */
 
-import React, { useCallback } from 'react';
+import React from 'react';
+import { View } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import { useSelector, useDispatch } from '../react-redux';
-import { getSession } from '../selectors';
-import { SwitchRow, Screen } from '../common';
-import { debugFlagToggle } from '../actions';
+import { Screen } from '../common';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'debug'>,
   route: RouteProp<'debug', void>,
 |}>;
 
 export default function DebugScreen(props: Props) {
-  const dispatch = useDispatch();
-  const debug = useSelector(state => getSession(state).debug);
-
-  const handleSettingToggle = useCallback(
-    (key: string) => {
-      dispatch(debugFlagToggle(key, !debug[key]));
-    },
-    [debug, dispatch],
-  );
-
   return (
     <Screen title="Debug">
-      <SwitchRow
-        label="Do not mark messages read on scroll"
-        value={debug.doNotMarkMessagesAsRead}
-        onValueChange={() => handleSettingToggle('doNotMarkMessagesAsRead')}
-      />
+      <View />
     </Screen>
   );
 }

src/settings/SettingsScreen.js

@@ -39,6 +39,7 @@ type Props = $ReadOnly<{|
 export default function SettingsScreen(props: Props) {
   const theme = useSelector(state => getSettings(state).theme);
   const browser = useSelector(state => getSettings(state).browser);
+  const doNotMarkMessagesAsRead = useSelector(state => getSettings(state).doNotMarkMessagesAsRead);
   const dispatch = useDispatch();
 
   const handleThemeChange = useCallback(() => {
@@ -55,6 +56,13 @@ export default function SettingsScreen(props: Props) {
           dispatch(settingsChange({ browser: value ? 'embedded' : 'external' }));
         }}
       />
+      <SwitchRow
+        label="Do not mark messages read on scroll"
+        value={doNotMarkMessagesAsRead}
+        onValueChange={value => {
+          dispatch(settingsChange({ doNotMarkMessagesAsRead: value }));
+        }}
+      />
       <NestedNavRow
         Icon={IconNotifications}
         label="Notifications"

src/settings/settingsReducer.js

@@ -15,6 +15,7 @@ const initialState: SettingsState = {
   experimentalFeaturesEnabled: false,
   streamNotification: false,
   browser: 'default',
+  doNotMarkMessagesAsRead: false,
 };
 
 export default (state: SettingsState = initialState, action: Action): SettingsState => {

src/types.js

@@ -142,9 +142,8 @@ export type EditMessage = {|
   topic: string,
 |};
 
-export type Debug = {|
-  doNotMarkMessagesAsRead: boolean,
-|};
+/** Add debug setting here. */
+export type Debug = {||};
 
 export type TopicExtended = {|
   ...$Exact<Topic>,

src/webview/MessageList.js

@@ -80,6 +80,7 @@ export type BackgroundData = $ReadOnly<{|
   allImageEmojiById: $ReadOnly<{| [id: string]: ImageEmojiType |}>,
   auth: Auth,
   debug: Debug,
+  doNotMarkMessagesAsRead: boolean,
   flags: FlagsState,
   mute: MuteState,
   mutedUsers: MutedUsersState,
@@ -214,11 +215,12 @@ class MessageListInner extends Component<Props> {
       htmlPieceDescriptors: htmlPieceDescriptorsForShownMessages,
       _,
     });
-    const { auth, theme } = backgroundData;
+    const { auth, theme, doNotMarkMessagesAsRead } = backgroundData;
     const html: string = getHtml(contentHtml, theme, {
       scrollMessageId: initialScrollMessageId,
       auth,
       showMessagePlaceholders,
+      doNotMarkMessagesAsRead,
     });
 
     /**
@@ -309,6 +311,7 @@ const MessageList: ComponentType<OuterProps> = connect<SelectorProps, _, _>(
       allImageEmojiById: getAllImageEmojiById(state),
       auth: getAuth(state),
       debug: getDebug(state),
+      doNotMarkMessagesAsRead: getSettings(state).doNotMarkMessagesAsRead,
       flags: getFlags(state),
       mute: getMute(state),
       mutedUsers: getMutedUsers(state),

src/webview/handleOutboundEvents.js

@@ -180,8 +180,8 @@ const fetchMore = (props: Props, event: WebViewOutboundEventScroll) => {
 };
 
 const markRead = (props: Props, event: WebViewOutboundEventScroll) => {
-  const { debug, flags, auth } = props.backgroundData;
-  if (debug.doNotMarkMessagesAsRead) {
+  const { doNotMarkMessagesAsRead, flags, auth } = props.backgroundData;
+  if (doNotMarkMessagesAsRead) {
     return;
   }
   const unreadMessageIds = filterUnreadMessagesInRange(

src/webview/html/html.js

@@ -9,6 +9,7 @@ type InitOptionsType = {|
   scrollMessageId: number | null,
   auth: Auth,
   showMessagePlaceholders: boolean,
+  doNotMarkMessagesAsRead: boolean,
 |};
 
 /**
@@ -40,7 +41,7 @@ type InitOptionsType = {|
 const webkitBugWorkaround: string = '<script> </script>';
 
 export default (content: string, theme: ThemeName, initOptions: InitOptionsType) => template`
-$!${script(initOptions.scrollMessageId, initOptions.auth)}
+$!${script(initOptions.scrollMessageId, initOptions.auth, initOptions.doNotMarkMessagesAsRead)}
 $!${css(theme)}
 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

src/webview/js/generatedEs3.js

@@ -646,7 +646,10 @@ var compiledWebviewJs = (function (exports) {
       startMessageId: rangeHull.first,
       endMessageId: rangeHull.last
     });
-    setMessagesReadAttributes(rangeHull);
+
+    if (!doNotMarkMessagesAsRead) {
+      setMessagesReadAttributes(rangeHull);
+    }
 
     if (messageRange.first < messageRange.last) {
       prevMessageRange = messageRange;

src/webview/js/js.js

@@ -49,6 +49,13 @@ import { toggleSpoiler } from './spoilers';
  */
 declare var platformOS: string;
 
+/**
+ * used to control behavior based on debug settings.
+ * defined in `handleInitialLoad`.
+ * declared globally so as to use across functions.
+ */
+declare var doNotMarkMessagesAsRead: boolean;
+
 /* eslint-disable no-extend-native */
 
 /* Polyfill Array.from. Native in Chrome 45 and at least Safari 13.
@@ -507,7 +514,9 @@ const sendScrollMessage = () => {
     startMessageId: rangeHull.first,
     endMessageId: rangeHull.last,
   });
-  setMessagesReadAttributes(rangeHull);
+  if (!doNotMarkMessagesAsRead) {
+    setMessagesReadAttributes(rangeHull);
+  }
   // If there are no visible + read messages (for instance, the entire screen
   // is taken up by a single large message), then we don't want to update
   // prevMessageRange.  This way, if the user scrolled past some messages to

src/webview/js/script.js

@@ -7,14 +7,19 @@ import matchesPolyfill from './matchesPolyfill';
 import compiledWebviewJs from './generatedEs3';
 import config from '../../config';
 
-export default (scrollMessageId: number | null, auth: Auth): string => `
+export default (
+  scrollMessageId: number | null,
+  auth: Auth,
+  doNotMarkMessagesAsRead: boolean,
+): string => `
 <script>
 window.__forceSmoothScrollPolyfill__ = true;
 ${smoothScroll}
 ${matchesPolyfill}
 window.enableWebViewErrorDisplay = ${config.enableWebViewErrorDisplay.toString()};
 document.addEventListener('DOMContentLoaded', function() {
   var platformOS = ${JSON.stringify(Platform.OS)};
+  var doNotMarkMessagesAsRead = ${JSON.stringify(doNotMarkMessagesAsRead)};
   ${compiledWebviewJs}
   compiledWebviewJs.handleInitialLoad(
     ${JSON.stringify(scrollMessageId)},