Fix and improve tooltip logic
- fx115: move main html-tooltip outside of the deck, otherwise it only
shows up in the library tab.
- Zotero_Tooltip is not required in the tabs bar and the button of the
tag selector. Setting the tooltip attribute on the closest XUL parent
and adding title attribute makes the tooltip properly appear.
- Remove manual handling of the hover effect from tabs manu. The
hover effect doesn't stick around after drag-drop with fx115 anymore,
so it's not required. And then the usual title attribute works for the
tooltip.
- Set title instead of tooltiptext attribute in tagSelectorList
so that the tooltip appears
After zotero@8e2790e,
the pointer effects don't fire on the actual cells of the table
(only on the parent row), so the tooltips do not appear for the cells.
This is a (hopefully) temporary solution to handle mousemove events over the row
of the table, find the right cell that the mouse is over, and
use Zotero_Tooltip to manually display the tooltip.
Tweaked Zotero_Tooltip to create the fake tooltip and place it into
the DOM. Zotero_Tooltip is also imported by virtualized-table as a module
because one shouldn't have to load it in .xhtml file for every new window
where the virtualized-table is used.
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
- 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
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.
- 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
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.
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.
* Attachment icon being cut off due to box-sizing issue
* Twisty icon incorrect using color
* Dragged image being slightly wider than the item in the tree
- library tab appears in the tabs menu without the close button
and no drag functionality
- minor refactoring to simplify how the tabs icons are fetched for
items with item.getItemTypeIconName()
- added focus-ring to tabs and filter field via @focus-ring mixin
so that the focus outline looks the same for the input field and buttons
- removed default margin from the <description> component of the tab
titles that moved titles up by a bit
Now it's no worse than it was pre-redesign. But there's still
room for improvement, either by preventing the window from shrinking to the
point that the sidebars overflow or by making the sidebars horizontally
scrollable at very small window sizes.
- Table structure rewrite to use grid layout instead
of the <table> component so that screen readers can see the content
- Added icons to mirror right-click actions
- Moved creator actions to the options menu
- Drag-drop to reorder creators
- Using editable-text instead of clicky component
- Consolidated autocomplete logic in one function
- Added @focus-ring to all components of the itemBox
- Fields are focusable and navigatable via keyboard in non-edit modes
- General refactoring to consolidate stylesheets across platforms
and remove code that's not more used (mainly related to handling old
clicky text component).
- Retractions panel background set for --material-background instead
of light pink in dark mode.
- Speed up transition to 0.2s
- Focus once the transition is fully done
- The actual input field is hidden and the button is displayed 50 milliseconds
after the field starts shrinking to not have the magnifying glass
appear to the right of the input field right before the input is
hidden.
- Matching substrings from tab's title are bolded.
- Drag-and-drop functionality to reorder tabs.
- ArrowUp/ArrowDown navigate the tab's titles. Tab/Shift-Tab move
across both titles and close buttons. Enter from filter field focuses
the first tab's title. Home/PageUp focuses the filter field. End/PageDown
focuses the last tab's title. ArrowUp/ArrowDown from the filter focus
the last/first tab's title respectively. ArrowUp from the first tab or
ArrowDown from the last tab focus the filter.
* After 02b864d icon next to the filter icon in the tab selector has
gone missing. This is because the chevron-6 has been moved to a new
location
* Tweaked CSS for this and other universal icons to use new location
* Removed duplicate icons in the old location
