deps: Add immutable-devtools and document its simple setup.

In a recent commit, we converted `state.narrows` from a plain
object-as-map into an `Immutable.Map`. This will make it convenient
to inspect its data in Chrome.

docs/howto/debugging.md

@@ -14,6 +14,7 @@ A variety of tools are available to help us do that.
   * ... [with React DevTools](#react-devtools)
   * ... [with Reactotron](#reactotron)
   * ... [with redux-logger](#redux-logger)
+  * ... [with immutable-devtools](#immutable-devtools)
 * [Debugging the message list](#webview) in its WebView
   * ... on iOS, [with Safari developer tools](#webview-safari)
   * ... on Android, [with the Chrome Developer Tools](#webview-chrome)
@@ -158,6 +159,32 @@ call to `createLogger` in `src/boot/middleware.js`.
   doc](https://github.com/evgenyrodionov/redux-logger#options).
 
 
+<div id="immutable-devtools" />
+
+## immutable-devtools: inspect Immutable.js objects in Chrome
+
+Some of the data in the Redux state is stored in Immutable.js data
+structures. It's normally awkward to inspect these data structures; an
+`Immutable.Map` object, for example, is full of properties like
+`size`, `__altered`, `__hash`, and `__ownerID`, which you have to dig
+around to get at a clear representation of the items contained.
+
+[`immutable-devtools`](https://github.com/andrewdavey/immutable-devtools)
+fixes this problem in Google Chrome v47+ by installing a "custom
+formatter".
+
+(Alternatively, we might have recommended a [Chrome
+extension](https://github.com/mattzeunert/immutable-object-formatter-extension),
+which `immutable-devtools` mentions in its setup doc. But using the
+NPM package provides the formatter for `zulip-mobile` just as
+effectively without making widespread changes in behavior when you
+browse the Web.)
+
+To enable it, open Chrome Dev Tools and press F1 to open the settings.
+In the "Console" section, tick "Enable custom formatters". If it isn't
+working, please consult the project's issue tracker before opening an
+issue in `zulip-mobile`.
+
 <div id="webview" />
 
 # Tools: Debugging the message list (in WebView)

flow-typed/npm/immutable-devtools_vx.x.x.js

@@ -0,0 +1,35 @@
+// flow-typed signature: 14523166b9c09a9ed88bca4845a653b1
+// flow-typed version: <<STUB>>/immutable-devtools_v0.1.5/flow_v0.113.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'immutable-devtools'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'immutable-devtools' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'immutable-devtools/dist' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'immutable-devtools/dist/index' {
+  declare module.exports: $Exports<'immutable-devtools/dist'>;
+}
+declare module 'immutable-devtools/dist/index.js' {
+  declare module.exports: $Exports<'immutable-devtools/dist'>;
+}

package.json

@@ -119,6 +119,7 @@
     "flow-bin": "^0.113.0",
     "flow-coverage-report": "^0.6.0",
     "flow-typed": "^2.4.0",
+    "immutable-devtools": "^0.1.5",
     "jest": "^26.4.1",
     "jest-cli": "^26.4.1",
     "jest-environment-jsdom": "^26.3.0",

src/boot/store.js

@@ -17,6 +17,18 @@ import rootReducer from './reducers';
 import ZulipAsyncStorage from './ZulipAsyncStorage';
 import createMigration from '../redux-persist-migrate/index';
 
+if (process.env.NODE_ENV === 'development') {
+  // Chrome dev tools for Immutable.
+  //
+  // To enable, press F1 from the Chrome dev tools to open the
+  // settings. In the "Console" section, check "Enable custom
+  // formatters".
+  //
+  // eslint-disable-next-line import/no-extraneous-dependencies, global-require
+  const installDevTools = require('immutable-devtools');
+  installDevTools(Immutable);
+}
+
 // AsyncStorage.clear(); // use to reset storage during development
 
 /**

yarn.lock

@@ -6026,6 +6026,11 @@ image-size@^0.6.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
+immutable-devtools@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/immutable-devtools/-/immutable-devtools-0.1.5.tgz#32a653c8ba8258bfed37680a860a3b5fa2675693"
+  integrity sha512-bgQP4q+RiD1Oolw8c0sfNrCpShQIEdqJIGmPPrcG6efyJrX00hNzzM1noe3FsQdDwj2eQqL8JEtukCrwFQbt/w==
+
 immutable@^4.0.0-rc.12:
   version "4.0.0-rc.12"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"