Fixed visuals and working drag-drop again.
Fx115 made previously used toolbarbuttons act very strange wih drag-drop:
instead of dragging the actual button, the #text node would receive
dragstart event and a single letter would end up being dragged.
During troubleshooting, elements created via document.createXULElement
had this issues while being dragged (or acted oddly in other ways, e.g.
refusing to be dragged at all).
This includes a minor rewrite to use div-s instead of XUL components.
A number of style changes to fix layout for fx115.
- Make panes occupy all width/height based on layout.
- Display the tag splitter on windows and mac.
- Fix to odd fx115 behavior that gives an un-collapsed pane the
initial width of min-width * 2.
- Ensure that whenever there is a width attribute on contextPane, it will
be present in the style as well.
- Set width = 0 on zotero pane when it is not selected because it kept
preventing the contextPane from properly expanding.
- Context pane has its height changed on splitter drag.
- Set height of the context pane in stacked mode to 0 to avoid
having a blank gap after collapse.
- Remove negative margin before the toolbar if the collection tree
is collapsed on mac.
- Tweaks splitter styles to have mouse target of more than 1px.
Added positive z-index to make sure splitters are not covered by panes.
Splitter styles are somewhat unified for all platforms.
- Fix lookup panel sizing
- Quicksearch margin edits to not squize the input field.
- Collection and quick search fields layout fixed
- Use flex properties to fix layout
- fix outline display for editable-text
- fix the contextpane width going out of bounds
- stacked itemPane is visible after layout change
- In stacked view, prevent itemPane from being dragged so high that
it covers itemTree and overlaps with toolbar
When contextmenu closes, it clears visibility style from all components.
It is added temporarily so that the options buttons do not
disappear if the mouse leaves the row. The visibility setting for
the grippy for items with only one author should be in
a separate class so that grippy is not displayed by accident.
Fixes: zotero#3732
- Tab from the tags list or shift-tab from the tags filter field
focuses the first non-disabled tag. If there are none, the tags are
skipped and the focus moves directly to the input field or the tags list.
- Arrow Right/Left move focus between tags skipping over disabled tags
- Space/Enter clicks on the selected tag
- Space/Enter click on the search button when focused
Firefox restyled Linux menupopups at some point to no longer conform to
the DE defined styles for GTK widgets. This removes that custom firefox
styling and uses DE defined values instead. This is especially apparent
on Linux Unity where menupopups are dark in both light and dark themes
by default for apps.
Reasoning:
- Different Linux DEs specify different titlebar button (min, max,
close) locations which we did not and could not support before.
- Previous approach copied from Firefox depended on custom offsets
specified in CSS instead of allowing the browser engine to place
elements
Changes:
- Titlebar and menubar no longer collapsed into each other with a
negative margin, instead just a single flexbox (on macOS the titlebar
is still collapsed into the tab bar)
- Support for -moz-gtk-csd-reversed-placement to correctly place the
titlebar buttons on Linux
- Removed/changed some code copied from Firefox that does not apply or
uses the wrong selectors
- Fixed the display of Linux Unity DE buttons with icons appearing outside
of button borders
- Removed the Z in the titlebar on Linux since only a few DEs use that.
- Aligned the tabbar on Linux and Windows to the left margin of the
window.
- handle space and enter in zotero pane to always click on toolbarbutton.
It ensures consistent behavior across all components to avoid Enter
triggering click on some buttons but not others.
- address the issue of focus not being able to leave the reader once it
gets there. On Escape, when reader is opened, instead of re-focusing the reader,
focus the selected tab. From there, Enter will focus the reader, and tabbing
allows you to reach the itemPane.
- Tab/Shift-tab moves focus between Sync button and itemPane when
reader is opened
- min/max-lines attribute on editable-text determines how tall the field
can/has to be
- if max-lines is not specified (or is below 1), the textarea will expand
as much as needed without overflow
- removed hardcoded height and variables from css, substituted them with
usage of these attributes for consistency
- No fields have any max-lines at this point, so all fields will expand as
needed
- Added tooltip to display the entire title of the tab on hover
- Ellipsize the text of the tab title to display as much of the last
word as possible
Fixes: #3609
- right/left arrows on section header expand/collapse the sections
- space/enter on section header toggle section collapsed/expanded
- tab from the header goes through the header's buttons and then
tabs into the section if that's opened
- arrow up/down on the header jumps to the previous/next header
- space/enter on clickable elements simulate a click
- if there is a pinned section, tab from the title will focus its header
When a menupopup is opened, the active element does not change, so
their focus-ring will be hidden until the menupopup closes for it to be
less distracting.
When a panel popup is opened, the focus will be moved inside
of the panel, so we keep track of whichever element was previously
focused, and re-focus it when the panel goes away.
Minor reorganization of focus-ring mixin to use variables instead
of parameters to make hiding of focus-ring easier.
- Remove margins and add a border to the pseudo-element.
It improves how the text of the pseudo-component matches the text from
textarea and should prevent the scrollbar from appearing due to mismatch.
- Swap explicit width setting for editable-text in itemBox for
min-width: 0. It still allows the editable-text to be shrunk when the
itemBox is narrow but does not cause mismatches between pseudo elements
and the textarea.
We don't have to deal with background images attached to various parts of the
button like we did on macOS before, so we can just flip the icon and be done
with it.
