Not having a focus outline is very bad for accessibilty.
Browsers have it by default but we completely disabled it for links in
the sidebar in 9955580251.
Showing the outline when selecting a page in the sidebar can be
distracting, so we hide the outline for the highlighted sidebar link.
Since every focusable element however should have a focus outline, we
make the highlighted link unfocusable by setting tabindex=-1 (which also
makes sense since the link to the current page doesn't do anything
anyway).
Part of #15948.
This is used rarely enough that it’s easier to document how to use it
as a non-global than to document the horrifying things that might go
wrong as a global.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
We will store list of stream ids to sort streams instead of names.
We have added a compare_function for sorting the list of stream_ids
by comparing stream names.
This change helps us to remove a couple of get_sub calls and using
stream ids instead of name also helps in avoiding bugs caused due
to live update on renaming of stream.
We add a function subscribed_stream_ids which returns an array
of stream ids of all subscribed streams.
This is a prep commit for changing the logic for sorting streams
to store stream ids instead of names.
We should not allow every function who wants to narrow to All
messages to come up with their own method to do so. This
commit makes existing such functions use hashchange library to
do so.
Remove click event on All message button, it already contains
an <a> tag which navigates correctly.
We always use hashchange.go_to_location method now to open the
info_overlay, this makes sure that the url hash are reliable and
hotkeys don't get confused if an overlay is open or not.
We don't want to change hash to "" (this also doesn't navigates
us to 'All messages' view, hence the bug was not noticed.) on
exit of info_overlay.
Three reasons:
1. The sliding was disorienting.
2. The collapsing disallowed searching for other pages with Ctrl+F.
3. The collapsing mechanism wasn't accessible (not usable with the
keyboard / no ARIA tags).
Tweaked by tabbott to center the left sidebar on the selected page.
Part of #15948.
This is a preparatory commit that exports user_sidebar_popped function
so that it can be used in hotkey.js for keyboard navigation support in
popover in right sidebar.
This commit is a preparotory commit to add support of keyboard
navigation by enabling movement using arrow keys and clicking of items
using enter key. So popover_items_handle_keyboard function so that it
can be resused other places.
This commit is preparatory commit to adding support for keyboard
navigation by focusing om first menu item of all of our popovers. So
exporting focus_first_popover_item so that it can be reused in other
places.
There were two problems preventing the autofocus:
* The focus was triggered at the wrong time.
* transition: all; affected the visibility, making browsers
abort the focus since the input was still hidden.
Commit a9ca5f603b (#15863) incorrectly
converted these too; indexing a jQuery object gives you a DOM element.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Note that require("moment") and require("moment-timezone") resolve to
the same thing, but the latter adds timezone support as a side effect.
So I went with the latter in every file where .tz is used.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit adds a handlebar template for the View source/Edit message
button in message controls in the message view.
This change also fixes the broken html titles that were added in
commit fdbab54614, and adds proper
internationalization for the title text.
This is done to decouple our message view related update events
from MessageListData as there are plans to create multiple
MessageListData objects. Instead we update the `stored_messages`
which tracks the complete data for all messages.
This is a pretty straightforward conversion.
The bulk of the diff is just changing emoji.js
to ES6 syntax.
There is one little todo that can be deferred
to the next commit--we are now set up to have
markdown.js require emoji.js directly, since
it is no longer on `window`.
The main thing here is that we check that the
actual data got put into our data structures.
(In general we want to move away from stubbing
data modules; any place where we stub data modules
is a relic of earlier days, where we were just
trying to set the bar for 100% line coverage,
even though some of the original coverage was
quite shallow.)
I also use real stubs instead of noops for
the calls out to UI-oriented modules.
In passing I tweak some comments in the actual
dispatch code.
This makes it so that the authoritative holder
of all emoji data is emoji.js, and all our
UI components that need emoji data consistently
pull data from emoji.js as needed.
Or to put it another way, we no longer need the
dispatch module to know that emoji_picker is
coupled to emoji precisely by the active_realm_emojis
data; it can now make fewer assumptions.
Commit a9ca5f603b (#15863) incorrectly
converted this; window is quite obviously a DOM element, not a jQuery
element.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This is an easy prep step to help out phase
out page_params.realm_emoji.
All callers pass in what's effectively
page_params.realm_emoji. (The dispatch
code does it indirectly.)
Including anon=1 in API requests will retrieve all contributors
of the repo. If there is no asscoiated GitHub account present for
the commits then the email and name of the author mentioned in
commit messages is returned.
The status_element parameter is optional, and the other caller in
stream_popover.js does not provide it. This fixes a regression in
commit e6a66063a9 (#15868).
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This is a prep commit which passes the `update_func` and `source`
data through an object. This will be helpful as there are plans
to pass furthur information to the function (i.e. whether we should
allow creating pills from streams and/or user-groups).
jQuery’s $(callback) already checks document.readyState to decide
whether to run the callback immediately (that’s like, jQuery’s entire
value proposition). We probably don’t need ready callbacks at all
anymore thanks to <script defer>, but that’s a larger change.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
$.fn.typeahead, on the other hand, returns the jQuery object back (not
the Typeahead object, which also happens to have a select method), so
this should be converted.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Commit a9ca5f603b (#15863) incorrectly
converted these. e.target is a DOM element, not a jQuery element;
likewise for the elem parameter of activate_element.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Listen to change events from the checkbox and pay attention to its
actual value, rather than simulating it by toggling booleans on click
events.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Zulip converts :) to the 1F642 Unicode emoji and promotes the same emoji
in the popular section of the emoji picker.
Previously Zulip has labeled 1F642 as "slight smile". While that name
conforms to the Unicode standard (which describes the code point as
SLIGHTLY SMILING FACE), it didn't match our use case of the emoji.
If a user types :) or selects the first smile in the emoji picker they
probably mean to express a regular "smile" and not a "slight smile",
which raises the question why they are only smiling slightly.
This commit relabels 1F642 as 😄 and our previous 😄 263A as
:smiling_face:. Note that 263A looks different in our three supported
emoji sets, so it is not suited to be our "default smile".
This change does not require a migration since our emoji system stores
both unicode points and names and handles name changes transparently.
Previously, image upload widget delete text CSS class name was
`settings-page-upload-text`.
We can change the CSS class name to `image-upload-text`
so that the name can be more generic.
Previously, image upload widget delete text CSS class name was
`settings-page-delete-text`.
We can change the CSS class name to `image-delete-text`
so that the name can be more generic.
Previously, image upload widget delete button CSS class name was
`settings-page-delete-button`.
We can change the CSS class name to `image-delete-button`
so that the name can be more generic.
Previously, image upload widget CSS class name was
`avatar-icon-logo-settings` it is not relevant to the widget so
we can change the CSS class name to `image_upload_widget`
so that the name can be more generic.
These checkboxes will now be more consistent
in design as we have in other part of the UI.
e.preventDefault() is added inside the
stream_is_muted_clicked function will disable
the default checkbox and make sure click event
come from only <span> part of the checkbox.
Previously the private_message_recipient input remained focused after
closing the composebox with Escape. On Firefox this resulted in it
gobbling up all further keyboard shortcuts until you clicked
somewhere. On Chromium this bug didn't occur because it automatically
blurs hidden inputs.
Introduced in 3a1bf04a56.
Fixes#15849.
On calling `loading.make_indicator` for the second
time or more no spinner is being displayed.
This bug can be viewed on visiting a `near: 1` narrow
and the spinner for the newer messages is displayed
only once (i.e. the first time it is rendered), while
the logo is displayed every time.
This happens because `loading.destroy_indicator` sets
the css of that container to display: "none". This can
be removed as we are emptying the container just above.
Introduced in 953d475274.
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
We hide the spoiler content in browser/desktop notifications.
Note: its not worth adding zjquery tests for this bit of code because
the tests do not operate on the actual data and are likely to get stale
if we change the syntax for spoilers.
This handler adds a neat little effect whereby hovering over the
clickable region to open the navbar triggers the search_icon hover
effect and is a neat little visual cue about what happens onClick.
The previous implementation was slightly messy because it fetched the
color and applied it via ".css(". This commit cleans it up by creating
and using the class "search_icon_hover_highlight" instead. We also
make the selectors more specific, ensuring they target children of
"#tab_bar", this was so because it was reasonable to expect someone to
define eg `search_closed` elsewhere and we wanted to prevent bugs when
that happened.
The page_params.timezone feature is perhaps a misfeature, but
importantly it's not what is used to display the time in the message
feed (it's mainly used to show others your timezone).
Given that reality, we shouldn't use it for a feature whose whole
purpose is to display the time using the same timezone we use in the
message feed.
Fixes#15790.
Delete stored topic data in `recent_senders` and `recent_topics`
about the message's topics and re-render them. The process is similar
to topic editing. See `recent_senders.process_topic_edit` for
logical details.
We have changed our all instances of list_render to use
simplebar and thus, we will now use simplebar container
to track scroll event for all the lists created by
list_render.
This fixes the bug of new subscribers not rendering on
scrolling at the end of subscriber list in stream settings
and similar bug in some other lists also.
This commit also removes scroll_util.get_list_scrolling_container
function as this is no longer used.
Fixes#15637.
We do not need to use list_render for displaying list of streams specific
notification settings, as this is not scrollable and we do not provide
option to sort or filter this list as well.
After this change, all our list_render instances will be using simplebar
and we can change the code accordingly to fix the behaviour of scrolling.
jQuery's fadeOut() sets display: none using inline CSS.
This was overriden by .alert-notification since it used !important
to override the display: block set in loading.js. Removing the latter
allows us to remove the !important, and doesn't seem to break anything.
Fixes#15759.
This reverts commit 63643c9d9d.
As the commit mentions, it makes a UI change for legacy search which
has largely been considered a regression. We've been running with
this reverted in zulip.com essentially since it was first merged.
Apparently, our scrollbar logic crashed with an invalid URL fragment
(hash), which resulted in initialization not completing and thus the
logic failing.
In my view the root issue here is that we're not doing a good job of
catching JavaScript exceptions in portico pages.
Fixes#15706.
In 42f20e81be I fixed an edge case but
also accidentally made clicking on reactions open the compose box.
This commit adds back the e.stopPropagation(); and explicitly hides the
emoji picker popover, to address the inconsistency fixed in the previous
commit.
Throughout the codebase we use <i> tag for icons.
This commit will add <i> tag inside the starred message
div and fa classes are now used with this <i> tag.
The starred message div is now consistent with other
message_controls divs.
Tweaked by tabbott to use the name star_container for better
readability.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base.
It would have been nicer if we could simply purge tab_bar from the
codebase and rename "#tab_list" so that we have an anchor and wrapper
structure in the html, but dropping the float: left on tab_bar causes
some confusing problems such as causing the horizontal border to
disappear and the search_box to shift out of its intended position and
so its simpler to get rid of tab_list from our code base first.
This commit:
- Removes the #tab_list wrapper div from tab_bar.hbs.
- Removes any #tab_list selectors from night_mode.scss so that they
simply target based on "#tab_bar" instead of "#tab_bar #tab_list".
- Removes tab_list selectors from zulip.scss, so that #tab_list
attributes now apply to the #tab_bar, in the process we drop the
duplicated width property and reorder the attributes.
- Replaces all mention of #tab_list with #tab_bar in JS files.
Previously, the navbar sub count would not live update as users
subscribed or unsubscribed, this commit adds the relevant calls in
stream events.
It would have been better to just have a single call within
server_events_dispatch but it seems difficult due to the way of
mark_subscribed and mark_unsubscribed are structured.
stream_events.mark_unsubscribed conditionally calls
subs.update_settings_for_unsubscribed which calls
subs.rerender_subscriptions_settings and as such handles the update
for the subscriptions modal on its own. Hence, we simply rely on the
stream_data.update_calculated_fields to ensure the subscriber counts
are updated and make a call to
tab_bar.maybe_rerender_title_area_for_stream(sub).
stream_events.mark_subscribed is similar.
Previously, we had the lines from this block being duplicated in all
the stream update paths, which is a little brittle.
Hence, in this commit, we extract it out with a comment explaining
what it does and call it in all the duplicated spots.
We use narrow_state.stream_sub instead of narrow_state.stream to directly
get the sub object instead of stream name, while subscribing to a stream
from the stream narrow.
This commit changes stream_data.is_user_subscribed to use stream id
instead of stream name.
We are using stream ids so that we can avoid bugs related to live
update after stream rename.
We have logic in place to update the ui for re-sending messages
on recieving the acknowledgement from the server on that API call.
However, if the acknowledgement is recieved through the get events
request before the `on_success` of `resend_message`, the message
gets re-rendered allowing the failed message actions to be clickable.
Now, we update the ".message_failed" ui for both cases. This helps
in preventing the "Trying to get local_id from row that has reified
message id" exception.
Fixes#15351.
fadeTo is not a good method to hide elements since it sets
opacity to 0 in which the element still can consume space and
be clickable. We set it's display to None using fadeOut method.
Also, allow this method to be called via ui_report.error.
The stream notification settings checkboxes were not checked
even when the notifications were turned on for the stream.
This was happening because we were passing stream name to
receives_notifications instead of stream id.
This commit fixes the bug by passing stream id to
receives_notifications. This change should have been done
in f3604fb while refactoring receives_notifications to use
stream id instead of name.
As a consequence of commit 1113589b9d the backspace key and some other
keys did not respond if the search yielded no results.
This change fixes that bug.
This is useful for the emoji-picker where holding down shift lets you
select multiple emojis. Otherwise when selecting multiple emojis with
the keyboard shortcuts you would need to release shift everytime you
wanted to navigate with the arrow keys.
Previously clicking on an existing message reaction (outside of the
emoji picker) while having the emoji picker open, removed the reaction
without updating the highlighting of the reacted emoji in the emoji
picker.
The emoji picker already is already closed when clicking outside.
The message reaction click handler however previously stopped the event
propagation, leaving the picker open, allowing the inconsistency.
There is a bug when clicking on the stream row in stream settings page
subscribes/unsubscribes the user from stream. The ideal behaviour
should be that user should be subscribed/unsubscribed only
when user clicks on tick icon. The buggy behaviour is visible only after
clicking the tick icon once.
This is because clicking on tick is adding sub_unsub_button class to the
stream row, while it should be added only to the ".check" element to
re-enable the button to handle requests.
This commit fixes the bug by adding the "sub_unsub_button" class to
".check" element only and not to the stream row and same change
is done for removing the "sub_unsub_button" class also.
Subscribe/Unsubscribe button in the right section of stream settings
page is not working because the target element in click handler was
changed to 'check.sub_unsub_button' in c234b4f2 and the button in
the right section with class 'sub_unsub_button' also uses the same
click handler.
This commit reverts c234b4f2 and the bug of subscribing/unsubscribing
the user by clicking on stream row in the stream settings page, which
c234b4f2 intended to fix will be fixed in next commit.
As we add more features where rendered_markdown.update_elements does
something useful, it'll become important to run this code everywhere
we render markdown in the DOM.
One can see in this case that we had actually copied one hunk of
rendered_markdown.update_elements years ago, before we extracted it as
an independent function; we get to delete that copy.
Fixes#15500.
We do not show the warning while sending messages to announce
stream if there is a wildcard mention in the message (i.e.
when wildcard_mention != null)
There are two cases where we should ideally show the warning
but we don't-
- When there is no wildcard mention in the message and
wildcard_mention is set to undefined (initial value of
wildcard_mention).
This is because "wildcard_mention != null" returns true for
this case and thus the warning is not shown, assuming the
message to have wildcard mention.
- When previous message had a wildcard mention and now a message
is being sent with no wildcard mention.
This is because the condition "wildcard_mention != null" is
checked with the previous value of wildcard_mention and not
with the value according to current message content, and thus
the warning is not shown, assuming the message to have wildcard
mention.
This commit changes the code to set wildcard_mention from the
latest message content before performing other validations and
thus solves the problems described above.
This particular commit has been a long time coming. For reference,
!avatar(email) was an undocumented syntax that simply rendered an
inline 50px avatar for a user in a message, essentially allowing
you to create a user pill like:
`!avatar(alice@example.com) Alice: hey!`
---
Reimplementation
If we decide to reimplement this or a similar feature in the future,
we could use something like `<avatar:userid>` syntax which is more
in line with creating links in markdown. Even then, it would not be
a good idea to add this instead of supporting inline images directly.
Since any usecases of such a syntax are in automation, we do not need
to make it userfriendly and something like the following is a better
implementation that doesn't need a custom syntax:
` Alice: hey!`
---
History
We initially added this syntax back in 2012 and it was 'deprecated'
from the get go. Here's what the original commit had to say about
the new syntax:
> We'll use this internally for the commit bot. We might eventually
> disable it for external users.
We eventually did start using this for our github integrations in 2013
but since then, those integrations have been neglected in favor of
our GitHub webhooks which do not use this syntax.
When we copied `!gravatar` to add the `!avatar` syntax, we also noted
that we want to deprecate the `!gravatar` syntax entirely - in 2013!
Since then, we haven't advertised either of these syntaxes anywhere
in our docs, and the only two places where this syntax remains is
our game bots that could easily do without these, and the git commit
integration that we have deprecated anyway.
We do not have any evidence of someone asking about this syntax on
chat.zulip.org when developing an integration and rightfully so- only
the people who work on Zulip (and specifically, markdown) are likely
to stumble upon it and try it out.
This is also the only peice of code due to which we had to look up
emails -> userid mapping in our backend markdown. By removing this,
we entirely remove the backend markdown's dependency on user emails
to render messages.
---
Relevant commits:
- Oct 2012, Initial commit c31462c278
- Nov 2013, Update commit bot 968c393826
- Nov 2013, Add avatar syntax 761c0a0266
- Sep 2017, Avoid email use c3032a7fe8
- Apr 2019, Remove from webhook 674fcfcce1
Previously, the function update_table_stream_color did not update the
color of the date_row when it appeared within a topic. This was
incorrect because it meant that a small piece of the border to the
left of the message box would be left to the previous color when the
stream color was updated. This commit resolves the issue by adding an
update.
Fixes#15197.
To make the typeahead code more readable, we extract this function to
timerender. We also improve the logic to be more readable, and add tests
to confirm its validity.
We have moved our invalid timestamp logic to use timestamp-error class,
however, if there are any valid outputs by the backend markdown that
the frontend considers invalid, we want to debug them. This commit
adds tooling to ensure we log those error messages.
We had been using !time() syntax for timestamps so far. Since its
an unreleased feature, we can make changes without affecting many
people.
Fixes#15442.
This commit fixes a bug where clicking on a stream row on the left
in the subscriptions table called the ".stream-row" as well as the
".sub_unsub_button" click events in `stream_edit.js`.
This caused the stream subscription to toggle everytime the row was
clicked. Also, this bug is only observed if the ".sub_unsub_button"
had been clicked first.
The previous element passed was a simplebar container which calculated
the incorrect height, thus `scroll_util.scroll_element_into_container`
had no effect.
There is a bug and race issue that occurs when a message is selected
while we are in the process of reifying a locally echoed message,
raising the "Selected message id not in MessageList" error.
The code flow to get the exception is as follows:
* A user sends a message to the current narrow we are in.
* Before the new message event is received, we sent a message to
the same message list which renders it with a locally echoed id.
* One of the ways of getting the exception is to already have the
locally sent message selected, before receiving an acknowledgment
from the server.
* Thus the Message List Data's `selected_id` now points to the new
message id. The exception is raised on entering the `was_selected`
if block inside `message_list_view` which tries to re-select the
message.
Updating the `_rerender_message` code for this special case won't fix
the entire bug because, as mentioned above there are other ways of
getting the exception:
Ideally, after all our synchronous work (`echo.process_from_server`)
has completed we would expect the re-order and re-render work of the
`change_message_id` would occur first, due to the timer of the
setTimeout being set to 0.
However as evident from the race condition existing, this isn't always
the case. `change_message_id` function is responsible for 3 things:
updation, re-ordering and re-rendering.
The first one which is responsible for updating the message list's
local cache, occurs synchronously while for the latter two, they both
occur asynchronously.
Before the setTimeout which is responsible for the latter two actions,
is encountered the user might select the message by clicking or more
commonly by scrolling, which causes this message selection event to be
ahead of the setTimeout in the callback queue.
During this time frame, our race condition takes place.
And even though the message id is updated it's Message List is not
in the correct sort order, which leads to `closest_id` !== `id` in
`MessageList_select_id` being true and raising the exception.
Now, we only asynchronously call the re_render function, to guarantee
the data is always correct and UI updates should be done at the end.
Extended by tabbott to comment the setTimeout call.
Fixes#15346.
We change validate_stream_message to check the existence of stream from
the stream name in compose box early and we then pass stream_id or the
obtained sub objects accordingly to other validate functions.
Passing stream_id or sub objects to these functions, enables us to use
stream_id instead of stream name in stream_data.get_subscriber_count.
stream_data.get_stream_post_policy is also removed as we only used it in
validate_stream_message_policy, but we do not need it now as we can get
stream_post_policy directly from sub object obtained by early check of
valid stream name.
This commits add data-stream-id attribute to the compose_invite_users
template. This helps in avoiding the error that occured if user
clicked the link after renaming of stream.
As a result of above changes, the checks for empty and invalid stream
name in compose box are done in warn_if_mentioning_unsubscribed_user
function instead of needs_subscribe_warning function.
If a channel has a thousand subscribers this commit results in the count
being displayed with a thousands separator, e.g. with English locale you
get 1,000 instead of 1000.
Since we migrated to `image_upload_widget.hbs`
for upload widget's so we have to access those widget's elements
according to the `image_upload_widget.hbs` new CSS class names.
We need to access delete button element with
`#user-avatar-upload-widget .settings-page-delete-button`
not with old CSS id `#user_avatar_delete_button`.
While highlights was the only case where this came up in the normal
message feed, we might in the future have other elements inside a
link, and we don't want those to ever eat the click.
I don't think there's a real performance concern here; fundamentally,
this is the handler for the user clicking, it can traverse a few DOM
elements.
Gittenburg
Anders Kaseorg
sahil839
Aman Agrawal
Mohit Gupta
Vinit Singh
Ryan Rehman
Steve Howell
Vishnu KS
jagansivam28
Tim Abbott
SiddharthVarshney
Rohitt Vashishtha
YashRE42
Sebastian Morr
Sanskar Bajpai