Trying to make the .highlights layer double as the .underlayer was
causing GPU artifacts on the wrap guide when the last highlight was
removed. This puts it in its own layer to avoid that.
Previously, when the last highlight div was removed from the lines
layer, chunks of the lines would sometimes disappear. Since we've
discovered that giving the lines an opaque background doesn't help with
subpixel anti-aliasing anyway, I've found that rendering highlights on
their own layer behind the lines and making the lines layer transparent
avoids the arficacts.
Previously, we stopped propagation on mousedown events to prevent
certain cases where focus was being lost after double clicking to select
a word.
Unfortunately, this also broke the ability to focus the editor by
clicking it. When investigating this, I noticed that whenever we lost
focus, the target of the mousedown event was always the cursor. So I
tried setting `pointer-events: none` on cursors and can no longer
reproduce the double-click issue.
/cc @probablycorey
Things depend on the react editor wrapper having the .editor class,
but inside the editor, we can control the style. I changed the
component's div to be .editor-contents for now. We can eliminate this
extra style when we eliminate the wrapper.
It is difficult to scroll through stack traces when there are huge
failure messages. This limits the length to 10 lines, if you hover
over the message it will expand.
Somewhat related to #1173
Horizontal / vertical scrollbars render a 'corner' on the lower right
when they would otherwise overlap. I previously relied on drawing both
dummy scrollbars at their full width/height so the corner got rendered,
but that interfered with the display of the horizontal scrollbar in
certain circumstances because it was too wide to scroll. This commit
provides that behavior with an absolutely positioned div with the same
dimensions as the intersection of scrollbars when both are visible.
This entailed quite a few changes to dial in scrollbars. The scrollbars
are now adjusted in size to account for the width of the opposite
scrollbar. If the width or height are not explicitly constrained and we
are scrollable in the opposite direction that is constrained, we account
for the width of the opposite scrollbar in assigning a natural height
or width based on the content.
We set overflow to hidden in the opposite scroll direction only if we
can't actually scroll in that direction, causing the white square where
neither scrollbar overlaps to appear at the lower right corner.
The space-pen view is now a simple wrapper around the entire React
component to integrate it cleanly into our existing system. React
components can't adopt existing DOM nodes, otherwise I would just have
the react component take over the entire view instead of wrapping.
