* tag selector focus edits
- no tabstop on the tag selector scrollable area
- change tag selector's role from default "grid" to "group".
"grid" is not quite correct semantically and leads to
voiceover suggesting irrelevant commands.
- move all keyboard handling logic to tagSelectorList.jsx.
Tabbing through tag selector is now handled in ZoteroPane,
so the only logic left there is arrow navigation
between tags, and there's no reason to not have it
together with the tags list.
- a workaround to deal with focused tags when windowing
kicks in. When a tag is focused, record its index.
Each time tags are re-rendered, if the saved index is not
among rendered tags, refocus it, otherwise, move focus
to the tags list.
Screen readers announce the index of the selected item
from the list of citations in the panel. This removes
the separators from the count, since they are not focusable
and should be skipped.
- edits to zoteroPaneTest.js focus tests to expect the updated focus
sequence: selected tab -> tabs menu -> sync button -> collectionTree
toolbar -> collectionTree -> tags selector -> itemTree toolbar
- updated tags selector keydown handling to explicitly handle all
tab/shift-tab events using moveFocus. It is more readable and explicit
focus handling for all components is required for programmic tab/shiftTab
events dispatched in tests to actually move focus
Fixes: #3975
From the sync button, tabbing will move focus in the following mannger:
collections toolbar -> collections -> tags selector -> itemTree toolbar
-> itemTree.
On last tab in the itemPane/contextPane, focus will wrap around
to the selected tab to complete the loop. It ensures
that the focus order is consistent regardless of the
directions.
Also, minor tweaks to focusWrapAround in Zotero_Tabs
to properly move focus to the last focusable entry in
the contextPane.
- set each tag's role as "checkbox"
- set "aria-checked" status depending on if the tag
is selected
- added aria-label to tag selector so it does not
default to "grid"
Added aria labels and button roles for buttons in the
item/Collection pane. This includes buttons in the header
as well as rows from notes, related, collections, and
attachments section that act as buttons. Also added
missing aria-labelledby for mini-itembox rows below
attachment preview to have filename, dateModified
and etc. properly labelled.
This also covers most of vpat 16.
This does not affect how tags/header/itemBox entries are announced.
There is a separate issue with NVDA and JAWS sometimes struggling
with announcing text inside of `editable-text` component,
so this will be handled separately.
- added role="link" to "zotero-text-link" custom component,
using that instead of directly setting the class
wherever possible
- in all other cases, added role="link" directly to links
- added tooltiptext and "noClick" option to zotero-text-link
so that this component could be used in attachmentBox.js
- use "keyboard-clickable" class in zotero-text-link
instead of a separate listener to handle keypresses for brevity
* feed settings: part of the grid, not needed
* progress queue: migrated to flex
* tab-bar-container: already fixed in scss
* zotero-lookup-multiline-progress: migrated to flex
* zotero-lookup-textbox: removed, does nothing
* #zotero-prefpane-advanced #data-dir-path: migrated to flex
* #zotero-prefpane-sync: migrated to flex on #storage-url, removed from #storage-password to fix layout
* .search-condition: migrated to flex
* updates.css: migrated to flex
This reverts commit ecea550a37.
It seems to be causing various UI issues, including the items list
sliding under the item pane when the collections pane is expanded
(though I can no longer reproduce that).
Using timeout in credentialsChange caused button to become momentarily disabled
making it flicker. I've verified that the delay is no longer needed and that the
button becomes disabled when using backspace to clear the login/password input field.
- css tweaks for proper sizing and minor cleanup
of unused classes and properties
- added flip="none" for the panels to not bounce
around window's edges
- removed dialog's marginBottom on macOS - it doesn't
seem needed anymore
- close and reopen panel when window's height changes
on all platforms. It used to only happen on windows
but now the panel remains at it's original location on
macOS as well, so we'll always reopen the panel so
that is is positioned close to the dialog
- try to postion the panel in the middle on windows
- fix progress meter not appearing
* improved qf window drag
- not using old windowDraggingUtils since it causes
issues on windows with the mouse outrunning the window.
- instead, set -moz-window-drag: drag on dialog when
the mouse is over the red border
- added chromeutils param to the window. These are required
for dragging to work on windows and their values are
important because wrong values will cause the window to
shrink and basically disappear. 0,0,15,0 seems to work
most reliably though the reason why other values (e.g.
0,2,2,2 as on the ZoteroPane window) break window is not
clear
- added margins around the dialog on windows. moz-window-drag
doesn't seem to properly work for mouse clicks very close
to the window's edge
- with fx115, the <panel> does not follow the window
when it is dragged, so we have to hide the panel during dragging.
Unfortunately, mouseup/down events don't fire on the dialog when
moz-window-drag: drag is set on windows. Without these events,
as a workaround, we check window's position periodically and
hide/display the reference panel based on that.
- removed initial window.resizeTo() right when the content is
loaded. It's not needed and sometimes causes rendering
issues when the dialog appears shrunk.
* fx115 linux css edits
- try to make the dialog look like dialogs on other platforms.
Red background, no chrome etc. The actual window's background can't seem
to be transparant, so no round borders
- minor edits to sizing on linux
- Use min-width: 100vw on the <dialog> element to prevent
window.sizeToContent() from expanding the dialog unnecessarily on
style selection
- Set the window min-width since fx115 width attribute on the window is
ignored
- Set ids to persist position and dimensions
It was technically still there, just offscreen. The wrapper element
was display: block, and some block layout quirk caused the button to
grow to fill the wrapper, which then put it offscreen when rotated.
This removes the wrapper and replaces it with a margin. Also fixes an
incorrect margin in RTL locales.
- Output pane no longer gets huge after load
- URL box grows
- Metadata grid fills available space (but still needs work re overflow)
- row-resize cursor on Tests splitter
With fx115, changes from 49fe2b98d9
made the autocomplete popup appear blank when the reader tab is opened.
Not re-creating the PopupAutoComplete in tagsBox makes the items from
autocomplete popup visible again. But it makes the autocomplete appear
below the "Add tags" popup for annotations (what 49fe2b98d9
originally fixed), and it also creates a duplicate <popupset>
with a new autocomplete panel at the bottom of the DOM every time autocomplete runs.
The duplicate <panel>s do not have an id.
Manually adding a <popupset> with a <panel> whose id="PopupAutoComplete"
does not create any duplicates and properly positions the popup.
Fixes: #3881
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.
Also:
- Tweak text to be less alarming (fixes#3074)
- Don't show "No updates found" if update was already downloaded
(fixes#3148)
Download progress still isn't shown (#3130) but I'll fix that later
- do not resize based on scrollable content - it shrinks the panel
- add padding into the stylesheet
- remove onShowing, since it doesn't seem needed anymore
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
It only had `locale.dir`, which it looks like we can handle in different
ways now:
- CSS rules with `:-moz-locale-dir(ltr)`
- `let isLTR = document.documentElement.matches(":-moz-locale-dir(ltr)");`
XPCOM objects have to be statically registered now, so instead of
creating our own command-line handler, just stuff our code into the
Firefox one.
A few parameters require the Zotero object, which isn't available in the
Firefox CLH, so I've left those in zotero-service.js for now until we
decide how to deal with those.
Not awaiting exec() has the side effect that we no longer get errors
if the executable is missing / isn't actually executable. Extract those
checks to prevent problems of the sort fixed in 63f54d3 in the future.
Making this configurable - it's worth testing translators to make sure
that they *aren't* dependent on some specific cookie configuration,
apart from obvious cases like login-gated sites.
Citation dialog: keep reference panel open without selection
- Reference panel remains opened while the focus is on an input
- The first item from the reference panel is no longer selected by default
to avoid unwanted items being added as a bubble
- The first item from the reference panel is selected only when the
dialog has no bubbles or when a search for a non-empty input has ran
- Shift-Enter from input or reference panel will accept the dialog's
state instead of creating a bubble
- Ensure that the reference panel reloads when a bubble is deleted
- Added button to accept the citation dialog
Some other changes:
- Z-icon and spinner/accept icon occupy the same amount
of space
- Ensure that window's width is 800px
- Set the editor's width dynamically when DOM is loaded
- Remove not used css classes and css adding margins to
z-icon.
- Do not accept/bubbleize while loading
- use dialog as the anchor, not the document element
- after the window is resized, the panel will remain
where it was, so if it's far away from the dialog,
if gets closed and re-opened to reposition it.
On windows, if the cross icon from the collection filter
search-textbox is clicked, the 'blur' event fires before
the input is cleared, and the filter is never hidden.
To make sure that the search field ends up going away,
hide it if the field is empty and not focused in input
handler.
Fixes: #3840
2 listeners handle shortcuts and hotkeys: bubbling ZoteroPane.handleKeyDown
and capturing Zoteropane.captureKeyDown.
We generally want shortcuts to be handled by the non-capturing listener
to avoid a conflict with lower level component that may want to handle the event
(e.g. we want to handle Escape keypress only if nothing else took care of it).
Tab navigation is an exception, since we want it to happen all the time.
For example, Ctrl+PageUp can be handled by itemTree but we want to override
it to make sure that it selects the tab regardless of other listeners.
This fixes regression after 5f0e3d5
where the tab selection logic was never reached because the event was handled
by itemTree.
- Bring back un-highlighting of collections on keydown if any other
control key besides Ctrl/Options is pressed (with better comments).
It fixes regression after 527fa5b12f
where if one presses, for example, Ctrl-Shift-A to copy an item,
collection highlighting would scroll the collection tree for no reason.
- To decrease the chance of collection highlighting being activated when
it is not intended, only highlight collections when the itemTree is focused
- handle additional focusElementID options value in Zotero_Tabs.select to
focus a node with the specified ID, instead of what was recorded
as last focused element
- use that parameter in ZoteroPane.selectItems to make sure that
itemTree is focused after the tab is switched to zotero-pane
- removed redundant calls to Zotero_Tabs.select('zotero-pane') after
Zotero_Pane.selectItems
Use <checkbox> instead of <html:input type="checkbox"> for the
suppress author checkbox. <html:input> on mousedown on the actual box
looses focus, so the popover is immediately closed by focusout listener.
Fixes: #3830
We can await /usr/bin/open on macOS because it returns as soon as the
application has begun launching, but we can't await when we exec a
program directly on other platforms.
Fixes#3799
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
