Fixes https://github.com/vector-im/riot-web/issues/6435
This is done through an on-the-fly inverter for the settings. All the settings changed are boolean values, so this should be more than safe to just let happen throughout the SettingsStore. Typically a change like this would be done in the individual handlers (similar to how setting names are remapped to different properties or even different storage locations on the fly), however doing that for this many settings would be a huge nightmare and involve changing *all* the layers. By putting a global "invert this" flag on the setting, we can get away with doing the inversion as the last possible step during a read (or write).
To speed up calculations of the default values, we cache all the inverted values into a lookup table similar to how we represent the defaults already. Without this, the DefaultHandler would need to iterate the setting list and invert the values, slowing things down over time. We invert the value up front so we can keep the generic inversion logic without checking the level ahead of time. It is fully intended that a default value represents the new setting name, not the legacy name.
This commit also includes a debugger for settings because it was hard to visualize what the SettingsStore was doing during development. Some added information is included as it may be helpful for when someone has a problem with their settings and we need to debug it. Typically the debugger would be run in conjunction with `mxSendRageshake`: `mxSettingsStore.debugSetting('showJoinLeaves') && mxSendRageshake('Debugging showJoinLeaves setting')`.
This allows Webpack to insert the proper image URL after builds steps like
adding a hash and so on. The path you supply to `require` is relative to the JS
source file, just like any other would be.
Prior to #1912, height fix up of image events without an `info` in their
content would fail, setting `style.height = null + "px"`.
Now that all thumbnail sizing is done through one path, we can fix the
same problem for all cases (images, stickers, e2e/non-e2e) by handling
images without `info` correctly.
At the bare minimum, we use a null-guard that will make sure an image
without an `info` does not appear in the timeline (as a spinner or
otherwise until loaded). When loaded, we size it like any other image
by using the natural dimensions of the loaded image in place of `info`.
Note that we do not apply the same logic to images that *do* specify an
`info` with `w` and `h` keys. If the aspect ratio of the image does not
match that of the event, we use the one in `info` even when the image
has loaded.
