Introduce new UI and behavior for playing audio attachments in
conversations. Previously, playback stopped unexpectedly during window
resizes and scrolling through the messages due to the row height
recomputation in `react-virtualized`.
With this commit we introduce `<GlobalAudioContext/>` instance that
wraps whole conversation and provides an `<audio/>` element that
doesn't get re-rendered (or destroyed) whenever `react-virtualized`
recomputes messages. The audio players (with a freshly designed UI) now
share this global `<audio/>` instance and manage access to it using
`audioPlayer.owner` state from the redux.
New UI computes on the fly, caches, and displays waveforms for each
audio attachment. Storybook had to be slightly modified to accomodate
testing of Android bubbles by introducing the new knob for
`authorColor`.
This CSS rule was causing conversation header text to be truncated even
when there was enough whitespace to display the entire text at certain
zoom levels and platforms.
Removing the property did not introduce any UI regressions from this
author's testing.
Fixes: #3168
* If focus was set to document.body during archive, focus left pane
* Shortcut Guide: Add space between text and shortcut highlight
* Ensure that draft attachment can be closed with click on X button
* Move to keyDown event for user idle checking
* Additional resiliency around avatars; check for them on on-disk
* Increase timeouts to preserve websocket connection
* On startup, be resilient to malformed JSON in log files
* Don't crash if shell.openExternal returns an error
* Whenever we request a contact/group sync, also request block list
* Avatar popup: Ensure styling is mouse- and keyboard-appropriate
* MainHeader: Create popperRoot on demand, not on mount
* CompositionInput: Disable default Ctrl-/ shortcut
* Update libphonenumber
* Composition area scrollbar border now matches background color
* Search box: Don't move text when selected
* Left Pane: A little more space for descenders in message preview
* Draft quote: Increase contrast for the top-right X button
* Fix timer icons
* Use signal blue for search box focus outline
* Reduce debounce for draft saves
* Be less aggressive in our scrolling corrections
* Lightbox: Ensure that a tall image is still fully visible
* Fix spell checking after Electron API breaking changes
* Fix link preview image generation
* Message highlight: Move to border in signal blue
* Add new requiredProtocolVersion field to DataMessage
* Message.requiredProtocolVersion, warning if version mot supported
* Update strings; limit width; new left pane preview text
Remove Android length warning
Handle incoming long message attachments
Show long download pending status in message bubble
Fix the width of the smallest spinner
Remove Android length warning from HTML templates
* Prevent FOUC on startup, use Signal Blue instead
Instead of flashing a white background on startup, the app will show a blue background while everything is loading.
* Make sure tests are rendered on white background
* Use `icon_250.png` as the loading image
* Remove hardcoded 'Loading...' text from template
* Make sidebar non-selectable
* Prevent selection of avatar and context menu text in conversation view
* Make loading view and conversation placeholder view non-selectable
* Make settings view contents non-selectable
Also:
- visually distinguish any reference we couldn't verify on receipt
- show toast on quote click if we can't scroll to message
- toast visuals redesigned to match rest of app
Quite a few other fixes, including:
- Sending to contact with no avatar yet (not synced from mobile)
- Left pane doesn't update quickly or at all on new message
- Left pane doesn't show sent or error status
Also:
- Contributing.md: Ensure set of linux dev dependencies is complete
* Conversation List Item: timestamp bold only when convo has unread
* Preserve the positioning of overlays on re-entry into convo
* ConversationListItem: Handle missing and broken thumbnails
* Shorten timestamp in left pane for better Android consistency
* Update convo last updated if last was expire timer change
But not if it was from a sync instead of from you or from a contact.
* Make links in quotes the same color as the text
* MediaGridItem: Update placeholder icon colors for dark theme
* Ensure turning off timer shows 'Timer set to off' in left pane
* ConversationListItem: Show unread count in blue circle
* Add one pixel margin to blue indicator for text alignment
* Ensure replies to voice message can bet sent successfully
Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
to show in conversation
- New MessageDetail react component
- New ConversationHeader react component
UI now in separate renderer:
- the permissions popup
- settings dialog
- debug log dialog
- about window
Couple bug fixes:
- About Window: Fix 'escape' to close window
- Remove outdated dist/copy tasks from Gruntfile
Eslintified settings_view.js
Three locations were changed:
1. a group update, which lists a set of contacts
2. the contact name in the left pane
3. the conversation title
Three new components were added to window.Signal.Components to support
these scenarios, respectively:
1. Emojify
2. ContactName
3. ConversationTitle
Note that there are a number of other places in the app that should be
emojified, but never have been before. Essentially any place that a
contact name might be shown. A non-exhaustive list:
- Show group members
- Show safety number
- Verified change notification
- Disappearing timer change notification
- Contact verification notification
- Quote contact name
* Only show 'send message' on contact detail when user has account
* Make contact detail headers visible in dark mode
* Fix vertical scrolling for very large contact in detail pane
* Fix a couple comment typos
- messages.getQuoteObjectUrl: early return
- backup.js: explaining variables for long if statement
- types/messages.js: Log if thumbnail has neither data nor path
- sendmessage.js:
- remove extraneous logging
- fix indentation
- upload attachments and thumbnails in parallel
- preload: don't load fs for tests, just fse
- _conversation.scss: split two selectors into two lines, 0px -> 0
- backup_test.js: use fse.existsSync and comment twoSlashes regex
- network_tests_view_test.js: Comment duplicate assignment to window.getSocketStatus
Android: The gray border around the quote didn't interact well with the
image, which needed to overlap the border. For now we'll just remove the
border.
Also made the thumbnail image 2px bigger because I noticed that in some
cases there was a partial-pixel space below the image (where the rest of
the quote was making the container bigger).
iOS: The gray border around outgoing quotes was fading into the
background gray color, making the quote look a tiny bit more narrow than
the main message. Removed the border.
Note that substantial changes will be required for the updated Android
mockups, putting the quotation into the text box next to the attachment
preview.
- Remove extra padding at top of Android bubbles, via sibling selector
- Don't include .attachments, .quote-wrapper, .content in bubble unless
we actually need them. This allows for sibling selectors.
- This is a different technique for adding the ReactWrapperView for
quotes - it is now appended to the DOM instead of attaching to
something already in the DOM. This allows us to use .remove(), so it's
a bit cleaner.
- Users of ReactWrapperView can now specify tagName and className
But only if it doesn't have an error.
Also: reformatted message template in legacy_templates.js to match what
is in background.html for easier diffing.
It would have rounded corners inside of the bubble, which is not what
we want. This makes the bubble itself have the rounded corners, and then
it cuts off anything that would extend past its edges.
Turns out that the welcome screen had a min-height which caused weird
things when you take the window down to minimum height. It looked
particularly bad with the new full-screen delete data confirmation
screen.
- A new design for the import flow. It features:
- Icons at the top of every screen
- Gray background, blue buttons, thinner text
- Simpler copy
- A new design for the install flow. It features:
- Immediate entry into the QR code screen
- Animated dots to show that we're loading the QR code from the server
- Fewer screens: 1) QR 2) device name 3) sync-in-progress
- When not set up, the app opens directly into the install screen, which has been streamlined. The `--import` command-line argument will cause the app to open directly into the import flow.
- Support for two different flavors of builds - the normal build will open into the standard registration flow, and the import flavor will be exactly the same except during setup it will open directly into the import flow.
- A new design for the (dev-only) standalone registration view
- When these install sequences are active, the OS File menu has entries to allow you to switch the method of setup you'd like to use. These go away as soon as the first step is taken in any of these flows.
- The device name (chosen on initial setup) is now shown in the settings panel
- At the end of a light import, we hand off to the normal device link screen, starting at the QR code. On a full import, we remove the sensitive encryption information in the export to prevent conflicts on multiple imports.
- `Whisper.Backup.exportToDirectory()` takes an options object so you can tell it to do a light export.
- `Whisper.Backup.importFromDirectory()` takes an options object so you can force it to load only the light components found on disk. It also returns an object so you can tell whether a given import was a full import or light import.
- On start of import, we build a list of all the ids present in the messages, conversations, and groups stores in IndexedDB. This can take some time if a lot of data is in the database already, but it makes the subsequent deduplicated import very fast.
- Disappearing messages are now excluded when exporting
- Remove some TODOs in the tests
* Revamp issue and pull request templates, other docs tweaks
`yarn test` now runs all of our tests.
* Remove generated files from the repository
* Update to new Signal support URL
* Prevent the 'Test failed 2 == 1' from test-release in CI
* Another attempt to fix grunt test-release on Appveyor
* grunt test-release: Fail build if test fails
* Lint fix, and move jshint earlier in CI process
* Emoji: Ensure that all clicks work by using emoji data directly
* Eliminate a number of unused emoji images from final build
* Re-add the generic sheets directory, which we partially filter
* Add support for Emoji 5
Update to latest emoji-datasource and emoji-js and switch to an up-to-date fork
of emoji-panel.
// FREEBIE
* Dark theme support for emoji-panel
Fixes#1763
// FREEBIE
* Add emoji button and popup panel
This integrates a simple third party emoji panel with a few css overrides to
correct some relative paths and colors.
The trickiest thing about this is ensuring we don't break the layout, which is
acheived through precise control over the panel's height, and prodigious calls
to updateMessageFieldSize.
// FREEBIE
* Don't close emoji panel on click, do close on send
To better facilitate multiple emoji entry.
// FREEBIE
* Make panel emojis bigger and higher resolution
// FREEBIE
* Move paperclip button to the right of the microphone
This makes our bottom-bar button arrangement more comfortable and consistent
with Android.
// FREEBIE
* Move emoji picker padding to inner container
* Insert emojis at cursor position
Don't just append to the end like a n00b! Also handle selected text correctly.
https://stackoverflow.com/questions/11076975
// FREEBIE
* A few visual tweaks to reduce visual complexity of emoji panel
- No gray buffer on the right side of the emoji panel
- No gray buffer between message compose text box and emoji window
- The scroll bar for the emojis is the same as our normal scrollbars
* Refactor delivery receipt event handler
* Rename the delivery receipt event
For less ambiguity with read receipts.
* Rename synced read event
For less ambiguity with read receipts from other Signal users.
* Add support for incoming receipt messages
Handle ReceiptMessages, which may include encrypted delivery receipts or read
receipts from recipients of our sent messages.
// FREEBIE
* Rename ReadReceipts to ReadSyncs
* Render read messages with blue double checks
* Send read receipts to senders of incoming messages
// FREEBIE
* Move ReadSyncs to their own file
// FREEBIE
* Fixup old comments on read receipts (now read syncs)
And some variable renaming for extra clarity.
// FREEBIE
* Add global setting for read receipts
Don't send read receipt messages unless the setting is enabled.
Don't process read receipts if the setting is disabled.
// FREEBIE
* Sync read receipt setting from mobile
Toggling this setting on your mobile device should sync it to Desktop. When
linking, use the setting in the provisioning message.
// FREEBIE
* Send receipt messages silently
Avoid generating phantom messages on ios
// FREEBIE
* Save recipients on the outgoing message models
For accurate tracking and display of sent/delivered/read state, even if group
membership changes later.
// FREEBIE
* Fix conversation type in profile key update handling
// FREEBIE
* Set recipients on synced sent messages
* Render saved recipients in message detail if available
For older messages, where we did not save the intended set of recipients at the
time of sending, fall back to the current group membership.
// FREEBIE
* Record who has been successfully sent to
// FREEBIE
* Record who a message has been delivered to
* Invert the not-clickable class
* Fix readReceipt setting sync when linking
* Render per recipient sent/delivered/read status
In the message detail view for outgoing messages, render each recipient's
individual sent/delivered/read status with respect to this message, as long as
there are no errors associated with the recipient (ie, safety number changes,
user not registered, etc...) since the error icon is displayed in that case.
*Messages sent before this change may not have per-recipient status lists
and will simply show no status icon.
// FREEBIE
* Add configuration sync request
Send these requests in a one-off fashion when:
1. We have just setup from a chrome app import
2. We have just upgraded to read-receipt support
// FREEBIE
* Expose sendRequestConfigurationSyncMessage
// FREEBIE
* Fix handling of incoming delivery receipts - union with array
FREEBIE
* Upgrade emoji deps and move to node_modules
Add support for Emoji 3.0 and switch from bower to yarn for managing emoji
dependencies.
// FREEBIE
* Delete old emoji deps
// FREEBIE
* Don't copy emoji on windows
It is no longer necessary since the symlinked image dir is gone.
// FREEBIE
* Update emoji test
// FREEBIE
* Fix emoji tests; remove all overrides of emoji-js functions
FREEBIE
* Add AES-GCM encryption for profiles
With tests.
* Add profileKey to DataMessage protobuf
// FREEBIE
* Decrypt and save profile names
// FREEBIE
* Save incoming profile keys
* Move pad/unpad to crypto module
// FREEBIE
* Support fetching avatars from the cdn
// FREEBIE
* Translate failed authentication errors
When AES-GCM authentication fails, webcrypto returns a very generic error. The
same error is thrown for invalid length inputs, but our earlier checks in
decryptProfile should rule out those failure modes and leave us safe to assume
that we either had bad ciphertext or the wrong key.
// FREEBIE
* Handle profile avatars (wip) and log decrypt errors
// FREEBIE
* Display profile avatars
Synced contact avatars will still override profile avatars.
* Display profile names in convo list
Only if we don't have a synced contact name.
// FREEBIE
* Make cdn url an environment config
Use different ones for staging and production
// FREEBIE
* Display profile name in conversation header
* Display profile name in group messages
* Update conversation header if profile avatar changes
// FREEBIE
* Style profile names small with ~
* Save profileKeys from contact sync messages
// FREEBIE
* Save profile keys from provisioning messages
For standalone accounts, generate a random profile key.
// FREEBIE
* Special case for one-time sync of our profile key
Android will use a contact sync message to sync a profile key from Android
clients who have just upgraded and generated their profile key. Normally we
should receive this data in a provisioning message.
// FREEBIE
* Infer profile sharing from synced data messages
* Populate profile keys on outgoing messages
Requires that `profileSharing` be set on the conversation.
// FREEBIE
* Support for the profile key update flag
When receiving a message with this flag, don't init a message record, just
process the profile key and move on.
// FREEBIE
* Display profile names in group member list
* Refresh contact's profile on profile key changes
// FREEBIE
* Catch errors on profile save
// FREEBIE
* Save our own synced contact info
Don't return early if we get a contact sync for our own number
// FREEBIE
These modules together allow us to import css files from third party
components without maintaining symlinks that essentially rename them as
sass partials, which doesn't work on windows.
// FREEBIE
Max-width on a message bubble should be about 30em for the good readability.
However, when the window isn't wide enough, bubbles must be further limited.
The transition should happen around the point that these two rules intersect,
but it was kicking in a little late, which caused the bubbles to jump from wider
to shorter as you widened the window past a certain point. This change adjusts
the threshold for smoother and more consistent bubble resizing.
The variable name $big-avatar-min-width is an artifact of a past design and was
previously used in multiple places, but it no longer makes sense in this context
so it has been discarded.
// FREEBIE
* Add support for backup and restore
This first pass works for all stores except messages, pending some scaling
improvements.
// FREEBIE
* Import of messages and attachments
Properly sanitize filenames. Logging information that will help with
debugging but won't threaten privacy (no contact or group names),
where the on-disk directories have this information to make things
human-readable
FREEBIE
* First fully operational single-action export and import!
FREEBIE
* Add migration export flow
A banner alert leads to a blocking ui for the migration. We close the socket and
wait for incoming messages to drain before starting the export.
FREEBIE
* A number of updates for the export flow
1. We don't immediately pop the directory selection dialog box, instead
showing an explicit 'choose directory' button after explaining what is
about to happen
2. We show a 'submit debug log' button on most steps of the process
3. We handle export errors and encourage the user to double-check their
filesystem then submit their log
4. We are resilient to restarts during the process
5. We handle the user cancelling out of the directory selection dialog
differently from other errors.
6. The export process is now serialized: non-messages, then messages.
7. After successful export, show where the data is on disk
FREEBUE
* Put migration behind a flag
FREEBIE
* Shut down websocket before proceeding with export
FREEBIE
* Add MigrationView to test/index.html to fix test
FREEBIE
* Remove 'Submit Debug Log' button when the export process is complete
FREEBIE
* Create a 'Signal Export' directory below user-chosen dir
This cleans things up a bit so we don't litter the user's target
directory with lots of stuff.
FREEBIE
* Clarify MessageReceiver.drain() method comments
FREEBIE
* A couple updates for clarity - event names, else handling
Also the removal of wait(), which wasn't used anywhere.
FREEBIE
* A number of wording updates for the export flow
FREEBIE
* Export complete: put dir on its own line, make text selectable
FREEBIE
New experience in the Message Detail view when outgoing identity key
errors happen, matching the Android View.
'View' button is only shown on outgoing key errors right now.
When a contact with an outgoing identity key error is clicked, they are
taken to a view like the popup that comes up on Android: an explanation
of what happened and three options: 'Show Safety Number', 'Send Anyway',
and 'Cancel'
Contacts are now sorted alphabetically, with the set of contacts with
errors coming before the rest.
FREEBIE
The :before technique for adding the icon was removed, because it
resulted in some rendering issues when the layout pressure in the
message bubble got too high - you would see a partial icon. This
solution shrinks the icon a bit when the filename wants to expand to
take its space.
The iOS bubble width also needed special care to ensure it didn't expand
to accommodate the very wide filenames. Beyond that, overflow: hidden
needed to be applied at several levels to make everything behave as
expected.
FREEBIE
The shield matches the Android app's key change notification, and the
clock icon was easy to do and makes it easier to visually distinguish
those items in the conversation history.
FREEBIE
We also show more errors than we used to in the MessageDetail screen
to help make it clear what is happening, and why the user would need to
re-send.
FREEBIE
A good bit of CSS was required to keep the text color changing along
with the text it is nestled within.
Also: took this opportunity to increase the contrast of the number and
verified section right under the contact name in the group members view.
FREEBIE
Not yet using the new APIs, but ready to. Still to do:
- Send sync messages on trust decisions
- Respond to received trust decision sync messages
- Show trust decisions in the conversation history
- In that rare situation where a sent message ends up with a key error
make it easy to retry the send.
FREEBIE
Also:
- All the necessary wire-up to update things in real time. If you have
a safety number page up via a group member view as well as via a 1:1
conversation with that contact, they'll both be updated as the
underlying model changes. Similarly, the overall group will update
in real-time as members change.
- A bit of special-casing for yourself in a group conversation - you're
shown as 'me' and are not clickable, where normally that would take you
to the Safety Number screen for that contact. You are also not included
in the trust calculations for a given group.
FREEBIE
Sadly, that spacing now needs to be bigger because scrollIntoView
doesn't honor margins which overlap each other to eliminate this kind of
'too much spacing' kind of problem.
FREEBIE
Note that we're removing position: relative for the contact class, and
there might be some unexpected layout impacts. Thus far I haven't seen
any.
FREEBIE
- Last seen indicator now spans the full conversation, with subtle
shadow highlights above and below
- Scrollbars now overlap the content of the conversation, allowing last
seen indicator to touch the right edge of the window.
- The iOS and Android conversation background is now #eee instead of
white, which meant that the outgoing messages (Android) and incoming
messages (iOS) had to be updated for contrast. They now have white
backgrounds.
- Similarly, the scroll down button needed more contrast, and its
background is now white in light themes.
FREEBIE
* Show a pointer cursor on safety number change notification
* Add 'click to verify' to the text shown there
* Add ':' to the text shown on the safety number screen
* Limit the width of the safety number box, to force 3x4 layout
* Center the safety number box
FREEBIE
This is to ensure that when there are a lot of unread messages, the user
is given the chance to see all of them by being scrolled to the oldest
new message.
When a new message comes in, the indicator will be incremented.
When the user sends a message or switches away from the conversation,
the last seen indicator will be removed.
FREEBIE
Add names and sizes for all attachments except images, and (as with
arbitrary attachments), clicking on the text will open a save dialog.
In the absence of a filename, choose something that makes sense.
Display different icons for different media types, including distinct icons
for voice notes and audio files.
In iOS theme, audio, video, voice, and files are all encapsulated in bubbles.
Closes#804Closes#842Closes#836
// FREEBIE
Make arbitrary files look nicer and display the filename.
If an audio or video element fails to load for any reason, timeout after
a few seconds and render it as an arbitrary file. Also short circuit to
this treatment for common audio and video file types that we know are
going to fail, e.g., proprietary formats from apple.
// FREEBIE
When we can't connect due to being unlinked, network status indicator
will show an appropriate informational message and a button to open the
installer window to relink.
// FREEBIE
This makes the "x" in the search bar always visible when there is
text in the search box, even if the mouse is not hovering, hopefully
making for a clearer UI around search and resolving issue #741
The implementation adds the "x.svg" as a background image to the search
box when it is classed with .active, in addition to the
-webkit-search-cancel-button, which is still there for the actual
functionality but only appears on mouse hover (one tiny snag is that
coloring appears slightly different on hover, at least on my screen -
don't know if this is a problem).
I accounted for both ltr and rtl text-direction by using
getComputedStyle(...).direction to detect from the input's dir="auto"
- if there's a more elegant way to do this, please suggest. An ideal
solution would use the :dir pseudo-class but it's not implemented
in Chrome yet - https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
For now, I added the direction-checking to inbox_view.js. I see that
input.search is also used in new_group_update_view.js and
recipient_input_view.js but neither of these views seem to be in use (?)
and they don't set the .active class anyway, so I ignored them.
Update: Amended version a few hours later - fixed and manually tested
color and spacing for iOS and Android Dark themes. Also made some new
SASS variables to make things DRYer and fixed my tab size.
Handles the edge case where images in the Install steps can obscure the text below them at certain window dimensions.
In most cases, it's not possible to replicate this behavior due to minimum dimension settings in `chromium.js`. However, some window managers (such as i3) can ignore those settings, producing this bug.
This fix introduces a flexible, responsive layout to the Install steps, with the goal of keeping the action buttons in a consistent position while adapting the rest of the content to the remaining available space. The result is a clean, usable screen at any window size.
In the rare instance that a window's dimensions are less than that of the minimums set in `chromium.js`, scrollbars will appear to keep the smallest acceptable layout intact.
Potential side effects:
- Each `.step` element contains an`.inner` flexbox wrapper, which arranges its children in a column. The layout works best when each `flex-item` is an element that wraps the content inside of it. I think I accounted for all the possibilities on the Install screen, but any future `.step` items might want to keep that pattern in mind.
Resolves#1059
FREEBIE
Adding the class `.text-security` to the body element will (should) turn
all names, phone numbers, and message bodies into unreadable squares.
Nice to have when you want to screenshot without leaking too much info.
Note that emojis and images are not obscured.
This isn't fully baked or exposed as a feature. You have manually
inspect and tweak the DOM to enable it, but I leave it here for the
benefit of devs and other "frequent flyers" of our issue tracker.
// FREEBIE
* Fixes hourglasses
* Fix delivered status icon
* Other changes aiming for more consistency of visual structure
between light and dark themes.
* Restores left pane header focus/transition effect.
