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
- Backspace from the very beginning of the input will delete the previous
bubble, as opposed to removing the input itself. If it makes it so that
two inputs are next to each other, they are merged.
- When a new input is created via a mouse click, and the current input
is empty, manually delete it right away. Waiting for the blur handler
to remove it makes it so that the bubbles shift back and forth for a moment
when a new input is added and the old input is not removed.
- Minor tweak to make sure that even if there's a 'br' before an input,
clicking before it will not make a new input and just refocus it.
Fixes: zotero#3749
- Run label update logic once instead of repeating on every item
- Show plural attachment type when multiple attachments of same type
are selected (instead of "Attachments")
- Fix incorrect icon and label showing when openReaderInNewWindow = true
- ZoteroPane.handleKeyDown does not capture events. It is not strictly
necessary now but it helps to avoid future issues such as one solved in
b15fb36f1b. One benefit from this now is
if one tabs onto a toolbarbutton that opens a menu in contextPane (e.g.
an options button in itemBox), clicks space to open the menu and then
escape to close it, this will keep focus where it was, while the capturing
listener would immediately shift the focus to the reader.
- Removed shift-tab specific case from the handler. It looks like it
was handling the shift-tab in the following scenarios:
from notes search bar (can just be handled by Tab),
from "Return to notes list button" in note editor toolbar (it's no longer there),
from a child of zotero-view-item e.g. itembox. (does not apply,
since zotero-view-item itself is a focusable scrollable area)
- use reader.focus() instead of reader.focusFirst() in tab handler,
since focusFirst() focuses the <body> of the browser and it's not interactable.
- removed all cursor-related logic. Instead, insert a new input component
each time the user wants to type. The input remain between bubbles
and focusing on one will open the reference panel. Leaving the input hides
the reference panel.
- during drag-drop reordering, lock the editor height so that it doesn't
get out of sync with the window.
- removed the iframe, since it was no longer needed.
- keyboard navigation: Home/End will place an input at the start/end
of the editor and focus it. Tab focuses the last active input if any, or
the input in the end otherwise. Shift-Tab from the editor focuses the
dropdown button if it is active. Tab from the input will focus the first
entry of the reference list. Tab from the reference list will focus the
active input. Shift-ArrowLeft/Right from focused bubble will swap the bubble
with its neighbor. ArrowDown/Up from bubble will open/close the citation dialog.
- when a reference item is selected, previously active input is re-focused.
- aria-properties to have voiceover, JAWS and NVDA read bubbles, inputs and
reference items, as well as announce hints about available keypresses.
- typing from bubble or the reference panel will refocus previously active
input
- different minor updates to make the functionality less janky
- refactoring of refreshing and resizing of the reference panel to
be more straightforward and to only do it when necessary.
E.g. clicking on a bubble and closing the
popover after will not rerun search and just display the old results.
- some throttling logic so that two escape keypresses one after another
when the itemPopover is open do not close the entire dialog
- renamed variables: qfb=dialog, qfe=editor, panel=itemPopover
- use short form of locator string for bubbles
Only stop propagation when the window is inactive, and don't fire the
synthetic event on blur. Does the same thing as efd7ec6 was intended to
do, but in a less heavy-handed way.
Fixes#3734
We weren't stopping 'change' from propagating upwards when the change hadn't
actually been committed yet, and the pane-header and abstract-box CEs
listen to that event instead of 'blur'.
In case something deleted dataset.initialValue after focus and before we
received this keypress.
Addresses #3725. Might still want to rework that listener, but this
change made sense regardless, since the same kind of race condition
could be triggered elsewhere.
- 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
- brought back escape behavior that just focuses the reader whenever
a reader tab is opened, wherever it comes from (unless it's from an
element that is .open - like an item type menu, in which case just
let it get closed)
- removed moving focus from contextPane title to sync button on shift-tab
- using new reader methods onIframeTab, onToolbarShiftTab to move focus
to the contextPane on tab from reader iframe or to the sync button
on shift-tab from the toolbar
So now, the focus path is: tab bar -> tabs menu -> sync button -> reader
toolbar -> reader sidebar -> reader scrollable area -> contextPane title
(if visible) or tab bar
Appending to the menulist sort of worked - the text of the added
menuitem appeared in the menulist label, albeit off to the right -
but the item didn't actually show in the menu and didn't get removed
on subsequent calls.
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.
Since ceb1dd7da3 added a tabindex on
#zotero-view-item, clicking anywhere outside a field in the pane will
blur the active field. That's an improvement, but it conflicted with our
custom label behavior - when an active field's label is clicked, we want
to blur it and keep it blurred, but the default behavior is to re-focus
it on mouseup.
Fix by preventing the default focus behavior on mousedown/click.
Since itemPane.js sets mode before item, the editable-text's value would
get reset before save() ran.
Not touching the header since we're replacing that with an item-box
field (which does not have this bug) soon anyway.
Fixes#3679
- 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
Increated the ztabindex offset for non-creator rows, so that when a new
creator is added but not saved yet, there is no two elements with
the same ztabindex which would break tab-based navigation
Fixes: #3666
- Instead of setting default name as the value of the field when a
creator name is empty, set the default names as a placeholder so that
it shows up only when the field is empty.
- Have the creator options show up before the creator is saved so that
the mode can be switches before saving the creator.
- Re-do of capitalizeCreatorName to not break when one of the names is focused.
Fixes: #3610
- 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
- Don't show the default text editing context menu when right-clicking
an unfocused editable-text
- In item box/header context menus, only show Copy and Paste (plus
field-specific transform options) when unfocused
Fixes#3619
url/doi/options do not occupy space unless the row is focused or hovered.
This does not apply to options icons after multiline fields because
it would shrink textarea on hover and shift text in an awkward way.
Fixes: #3612
- 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
Field inputs are XUL in Z6, HTML in pre-redesign Z7, and XUL again in
post-redesign Z7. We switched to the title attribute for HTML but didn't
switch back to tooltipText when going back to XUL.
- after an item is added via "Add item by identifier" panel, end
focus to that item in itemTree.
- restored default behavior when the focus remains visible around an
element when all menupopups open, except for the item type menu in itemBox.
- opening item type menu will still hide the focus-ring
- 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
- properly re-focus previously focused item type menu in itemBox
- fix strange behavior of re-emerging item type menu popup caused by
itemBox.focusFirstField
- force the focus-ring to be around the itemType menu
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.
Prevent trash/duplicated/unfiled/etc. rows from getting focused on Enter
if it is the currently selected collection row that technically
passes the filter and Enter is pressed.
Make sure that on escape, the focus is moved to collectionTree strictly
once all filtered rows are rendered. Minor refactoring to achieve
it, since setFilter is async.
Before filtering starts, save the selected row, scroll position, and
which rows were collapsed before filering, and restore them once the
filtering is over if a row was focused during filtering.
Ideally we should cache these/not recreate the menuitems every time, or
something like that, so that localization pop-in doesn't happen at all. But a
brief flash of an empty menuitem is better than a brief flash of placeholder
text.
To preserve the proper scroll behavior to top pane/pinned pane on item
change, remember which pane needs to be scrolled to when itemPane is
collapsed, and scroll to it when the itemPane is expanded.
It refreshes customRowHeights which is used by windowed list to
calculate the right offsets.
Without this, customRowHeights remains same as before deletion, so windowed
list picks the offset based on stale data, which makes it use smaller
offset that makes headers overlap with other rows.
- always scroll to selected row on empty filter
- fixed a bug that would interfere with focusing on the selected collection
on Enter if there are capital letters in the filter field
- do not display creator buttons until hovered
- make last name have flex-grow priority over first name
- removed inline margins of rows
- removed extra padding from icons
This makes it more likely that the creator name will be displayed
fully without ellipsis until it is hovered. When the buttons are
displayed on focus or hover, the last name tries to remain
unellipsized as long as the first name is still visible after buttons
appear. If the first name is too short, both names will be ellipsized.
- 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
- make sure the visible zotero-pane tab is selected to focus on
- make sure lastFocusedElement is not set to be another tab or
<window> to not move focus on them when Enter is pressed on zotero-pane
tab
- refocus the lastFocusedElement from zoteroPane after a timeout
to make sure focus does not stay on the actual tab after mouse click
- save lastFocusedElement before closing and reopening and unloaded reader
tab so that if we move from zoteroPane to a reader tab that will be loaded
and then go back, the orignially focused element is refocused
- fixed creator names text selection glitch (hide the comma instead
of not displaying it + removed redundant value update that's no longer
needed)
- set selection direction in editableText on tab to not scroll to the
end of input
- added autocomplete to observedAttributes of editable-text to
properly add autocomplete even if autocomplete params are set after
the element has been rendered (which is needed for creator names). This
fixes wrong Esc behavior that erases autocomplete fields instead of
resetting to previous value.
- fixed creator names autocomplete and type switch regression after
the comma was removed
- tabs menu button is disabled when no reader tabs are opened
- tabs menu popup will be hidden if all tabs are closed
- keypress event handling moved from tabBar.jsx to zoteroPane.js
because all other keyboard navigation events are handled there
and it already has the functionality to skip disabled or hidden components
(e.g. tabs menu button, sync error)
- minor tweaks to tests to wait for collection search bar to hide
to get keyboard navigation tests passing
The previous workaround to ensure the twisty animation plays caused an issue
where, in some cases, tree item entries became unselectable.
Instead of skipping the rendering of the entire row (when it has been marked as
just toggled), we are now forcing the toggle animation to play after the row has
been re-rendered.
Additionally, one case where the just-toggled state wasn't cleared was fixed.
Previously, when you clicked the Add button, typed a tag, and pressed Enter, the
new tag would be added *after* the now-empty editor field, putting the editor at
the top rather than the bottom.
We previously switched to just Add File and New Note buttons, but people
are going to want to create child attachments/notes via the toolbar.
This adds menus for those two buttons with clearer wording.
Also:
- Update the File menu with options that correspond to each of the four
items pane toolbar buttons (including a new menu option for Add by
Identifier)
- Update the order and wording of the Add Attachment submenu in the
items list context menu
- Remove File menu options from the reader view that were added
accidentally during the toolbar redesign
We were originally going to put it in the File menu, and its disabled
state was only being updated when the File menu was opened after
selecting an item instead of the Tools menu. But we shouldn't actually
disable it anyway, only its contents (which we're doing elsewhere), so
just take this out.
- 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.
- Added nowrap attribute to not add the stretching aspect
of the editable-text and to not have any text wrapping. To be used in cases when
the input is a single line and it's width is stretched with flexbox, for
example tags or itemBox value fields.
- Added 'tight' attribute to set lower padding values on editable-text.
To be applied on fields that are not as prominent as abstract or header
as it makes the actual editable-text component smaller.
- Minor style changes to not shift layout on focus on windows (using
transparent border instead of 0 margin).
- No overflow of textarea to avoid longer-than-needed textareas on
windows.
- Keep track if the component was focused on via mouse click or not.
If the focus happened without prior mouse click, select all text.
- Reset cursor and selection on blur.
- Make sure the .input is always re-added if it disappears after drag-drop.
- Added sizeToContent function to set max-width based on the width
of the input.
- Allow the browser to break up words more freely with overflow-wrap: anywhere
to avoid stretching the itemBox with extra long header without spaces.
- Apply 'nowrap' and 'tight' to tags so that a long tag does not stretch
the itemBox or make the editable-text extra tall.
- 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.
New icons and new scaffold.scss go into chrome://zotero/skin. The separate root
for Scaffold is mostly a historical relic, and adding special cases to build
scripts, SCSS mixins, and so on would just make things complicated.
While looking for the first matching row to select, stop looking
and move focus to the tree only after the selection succeeded.
Some matching rows, like groups header, are not selectable. If it's the
first matching row, it will now be skipped.
- Actually show un-deleted rows as context rows within trash
- Add all rows, hide ones that shouldn't be shown
- Check whether attachment is file before calling getAnnotations()
- Fixes errors on update and new link attachments being shown as empty rows
In d4f8c7c an entry has been removed from zotero.properties that is still being
used in items table. If `numNotes` column is visible, items table would not
render.
Instead of re-adding to zotero.properties, I've migrated this string to
zotero.ftl to fix this problem.
* Render a colored dot for colored tags
* Improve spacing and positioning, especially on 2x screens
* Add scss map for tag colors in light/dark scheme
* Add support for compact/comfortable in tag selector
* Restyle filter box, add a placeholder and a new icon
1. Swap focus direction for ArrowUp and ArrowDown events when applicable.
ArrowUp = Shift-Tab, ArrowDown - Tab.
2. Remove ArrowLeft, ArrowRight event listeners from quicksearch menus
to not prevent cursor navigation within the actual text field.
3. Tweaks to fix advanced search mode from quicksearch when " is typed.
.icon-item-type is now global, with extra styling to handle row selection when
it's inside the item tree.
getImageSrc() is still used for progress windows, which is probably OK for now
because those don't stay on screen for very long. I've updated it to return SVGs
based on the current UI color scheme.
Other code uses treeitem-* images directly; getting rid of those references will
cause a lot of conflicts and be a bit more involved than this initial pass, so
I'll put that in a separate PR.
1. Toolbarbuttons changes:
1. “New Library” moved from toolbar to File menu
2. “New note” on click makes a standalone note
3. “New attachment” on click adds stored copy of a file
4. Menuitems from old note or attachment menus moved to the File menu
5. “Advanced search” removed. Sync and Locate buttons moved to the top-right corner (Locate - temporarily)
6. Added “Opened tabs” toolbarbutton
7. Updated tooltips
2. Added a toolbarbutton that reveals collection search field on click. Search field is hidden on blur if empty. Keyboard accessibility via tab/shift-tab.
3. Tab based navigation restructuring. For each component, create a mapping of target ids with desired focus destination for each relevant keyboard event and use that to determine where to move focus next. Fixed bugs with focus wraparound not working when a note or attachment is opened in contextMenu.
4. Make quick-search dropmarker a sibling of the textfield. QuickSearchTextbox does not extend search-textfield anymore. It serves as a container to house dropmarker and textfield as siblings. This is needed to remove focus ring from quick search textbook when focus moves onto the dropmarker.
5. Separate toolbars for item and collection trees. Removed unused code manually setting the width of toolbar section
6. Focusable tabs + keyboard navigation:
1. Shift-tab from opened tabs menu moves focus to the currently opened tab
2. When a tab has focus, use left/right arrows to select tabs, or CMD/Ctrl + arrows to move focus between tabs
3. Enter or Space on a focused tab will select it if needed and move focus to the contentPane of the reader of this tab
4. Shift-tab from tabs wraps focus around to itemTree or itemPane
7. “New collection” creates collection contextually within currently selected library or collection.
8. Items pane minimum width increase to avoid quicksearch from being squashed
9. Do not move focus to title field of itemBox after itemTypeMenu is closed with ESC.
10. Display all itemTypes without "Show more" submenu in "New Item" meunu. Removed "Store Copy of File" and "Link to File" from "New Item" menu.
- new icons
- new twisty (also for items tree)
- new mixin focus-states that can be re-used for less boilerplate
- dark/white compatible with tweaks for when tree is focused (these changes also affect items tree)
- removed macOS specific behaviour (blue-ish background, gradient for selected row)
- border-radius on highlight + spacing tweaks
- tweaked colors and fonts
- Support for "compact"/"comfortable"
This new XPCOM module handles font size and UI density and automatically keeps
registered roots up to date when prefs change. Roots receive a
UIPropertiesChanged event after their properties are updated.
- Sort the Open Documents section by reverse-open order and further by
reverse tab order (if unopened in this session).
- If Library is selected in the Zotero window, automatically show and
filter at the top selected items
- Currently enabled only for ScienceDirect. Can be enabled via a whitelist
- Matches the HiddenBrowser loaded HTML page for a captcha element. If
the captcha element class changes, this will break (but the
alternative is potentially displaying a captcha clearing window when
something else that is not a captcha guard is loaded).
- Captcha clear timeout for 60s.
- Doesn't automatically switch focus back to the browser which intiated
the item save via the Connector.
- Stores the cookies used to clear the captcha for future saves from the
same domain. Discards Connector supplied User Agent, since CF bot
detector checks UA header against actual UA behavior like TLS handshake
and if the UA acts different to what it's supposed to, the bot
challenge is not cleared.
Other changes:
- Adjusted the cookie sandbox to allow multiple cookie sandboxes to be
active (and simplified some legacy code that was meant to cover a bug
in old FX codebase).
- HiddenBrowser API changed to be Object oriented, translator tester
in the translate repo will need to be updated after a merge (have the
change ready).
- Improved Connector Server attachment progress handling
This is needed to let itemBox, tagBox, etc. to handle ESC
events to revent any edits made to textfields. Only applied
if the currently focused element is input or textarea.
Fixes: #3246
1. Trigger ZoteroPane.handleBlur on focusout instead of blur
to remove highlight when itemTree entries loose focus
even if ctrl/alt is still being held.
2. Prevent default event on Alt click on linux to avoid moving
focus to menubar
3. Avoid re-triggering focus multiple times
when ctrl is being held on windows to prevent highlight from becoming
stuck and not going away.
Fixes: zotero#3410
- The underlying changes are in windowed-list, which the item tree and
all virtualized tables are based on, so if there are bugs they might
show up outside of the collection tree.
- The expensive operation is adding/removing rows, since row offsets
have to be recalculated (this includes collapsing/expanding rows).
- The cost on further drawing while scrolling is constant and shouldn't
affect performance much.
