zulip / zulip-mobile / 6490

47%

push

travis-ci

webview: Make error banner and headers play nice, using the CSSOM.

Fancy name, but the CSS Object Model is just an API for manipulating
CSS rules, which we use here in quite boring ways.  It's said to be
supported in all major browsers:
  https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
so hopefully it should work as well on an iPhone as it did in my
Android emulator.

The purpose of this change is to make the just-introduced "plain"
JS error banner interact cleanly with the content of the message list
itself, most notably with the recipient bars, class `header-wrapper`,
which we have float at the top of the view.  Before this change, when
the error banner was in view it would display right over the topmost
recipient bar.  The red "detailed" banner has the same behavior, and
it's always looked pretty broken. When the error message itself causes
errors of layout, the sense of brokenness it creates is compounded.

This solution is a bit awkward in the code, so it doesn't feel ready
yet to roll out at every opportunity; but in my testing, it works
beautifully!  We do two separate things to handle two different cases:

 * To make the recipient bars float (or rather be "sticky", in CSS
   terms) at the right spot, just below the banner rather than at the
   same place (and underneath it in z-axis), we adjust their `top`
   threshold, using the actual height of the banner.

 * That's great except when scrolling all the way to the top: the
   recipient bars are perfect, but the underlying content won't leave
   the top of the viewport where it's covered by the banner.  In
   particular, there's a date marker there, and it never comes into
   view.  To fix that, we make a copy of the banner, with everything
   the same, so it should have the same height -- and we leave this
   one in its home location, with no `position` attribute, and just
   make it invisible.

990 of 2048 branches covered (48.34%)

Branch coverage included in aggregate %.

1904 of 3692 relevant lines covered (51.57%)

32.25 hits per line