Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix chat navigation buttons when scrolling to top #19097

Merged
merged 3 commits into from
Mar 18, 2024

Conversation

clauxx
Copy link
Member

@clauxx clauxx commented Mar 4, 2024

fixes #19095

Summary

The navigation buttons (back/more) in the chat have the :photo background while the navbar is transparent (i.e scrolled to the top) and :blur when opaque (i.e. while scrolling through messages)

Platforms

  • Android
  • iOS

Areas that maybe impacted

Functional
  • 1-1 chats
  • public chats
  • group chats

Steps to test

  • Open Status
  • Login
  • Open chat
  • Scroll to top
  • Navigation buttons should change background from :blur to :photo as header becomes transparent

Before and after screenshots comparison

screen-20240304-190222.mp4

status: ready

@status-im-auto
Copy link
Member

status-im-auto commented Mar 4, 2024

Jenkins Builds

Click to see older builds (16)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ e7d9345 #1 2024-03-04 17:16:10 ~6 min tests 📄log
✔️ e7d9345 #1 2024-03-04 17:16:16 ~7 min android 🤖apk 📲
✔️ e7d9345 #1 2024-03-04 17:17:14 ~8 min android-e2e 🤖apk 📲
✔️ e7d9345 #1 2024-03-04 17:19:55 ~10 min ios 📱ipa 📲
✔️ 49ef522 #3 2024-03-05 10:01:49 ~7 min android-e2e 🤖apk 📲
✔️ 49ef522 #3 2024-03-05 10:02:36 ~8 min ios 📱ipa 📲
✔️ 49ef522 #3 2024-03-05 10:02:46 ~8 min android 🤖apk 📲
✔️ 49ef522 #3 2024-03-05 10:02:57 ~8 min tests 📄log
✔️ 788cd77 #4 2024-03-11 12:27:22 ~5 min tests 📄log
✔️ 788cd77 #4 2024-03-11 12:28:58 ~7 min android 🤖apk 📲
✔️ 788cd77 #4 2024-03-11 12:29:14 ~7 min android-e2e 🤖apk 📲
✔️ 788cd77 #4 2024-03-11 12:29:23 ~7 min ios 📱ipa 📲
✔️ 5fbb2eb #6 2024-03-13 13:11:40 ~6 min tests 📄log
✔️ 5fbb2eb #6 2024-03-13 13:13:05 ~7 min android-e2e 🤖apk 📲
✔️ 5fbb2eb #6 2024-03-13 13:13:34 ~8 min ios 📱ipa 📲
✔️ 5fbb2eb #6 2024-03-13 13:13:53 ~8 min android 🤖apk 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 332c9c5 #7 2024-03-18 09:39:40 ~6 min android 🤖apk 📲
✔️ 332c9c5 #7 2024-03-18 09:39:56 ~6 min android-e2e 🤖apk 📲
✔️ 332c9c5 #7 2024-03-18 09:40:21 ~6 min tests 📄log
✔️ 332c9c5 #7 2024-03-18 09:41:45 ~8 min ios 📱ipa 📲
✔️ cf2dbdb #8 2024-03-18 09:56:29 ~6 min tests 📄log
✔️ cf2dbdb #8 2024-03-18 09:57:56 ~7 min android 🤖apk 📲
✔️ cf2dbdb #8 2024-03-18 09:58:33 ~8 min android-e2e 🤖apk 📲
✔️ cf2dbdb #8 2024-03-18 09:59:56 ~9 min ios 📱ipa 📲

Copy link
Member

@Parveshdhull Parveshdhull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, thank you for fixing this.

@clauxx clauxx force-pushed the cl-19095-chat-nav-buttons branch from 4838dff to 49ef522 Compare March 5, 2024 09:54
@pavloburykh pavloburykh force-pushed the cl-19095-chat-nav-buttons branch from 49ef522 to 788cd77 Compare March 11, 2024 12:21
@mariia-skrypnyk
Copy link

mariia-skrypnyk commented Mar 11, 2024

Hi @clauxx ! Thanks for your fix!
Main scenario works great.

I have found such behaviour and wonder if it is related or/and could be mentioned here in this PR.

ISSUE 1: navigation button change it's blur background when reopening chat and scroll

Steps:

  1. Login to app
  2. Add 2 or more contacts
  3. Create Group Chat
  4. Send messages and images to create scrollable content
  5. Reopen group chat and scroll

Actual result: navigation button change it's blur background when reopening chat and scroll. It firstly has much transparent background as it changes after.

video_2024-03-11_15-20-42.mp4
video_2024-03-11_15-35-16.mp4

@clauxx
Copy link
Member Author

clauxx commented Mar 11, 2024

@mariia-skrypnyk i'm not sure if understand the issue from the videos

@mariia-skrypnyk
Copy link

mariia-skrypnyk commented Mar 11, 2024

@mariia-skrypnyk i'm not sure if understand the issue from the videos

Yes @clauxx , sorry. It it's not so obvious as I thought.
Let me show you on a screenshots:

it is the same chat and the same navigation icon on the background (x) but after starting to scroll and after you move to the start of conversation at the top of the chat

start
Screenshot 2024-03-11 at 15 58 57
after
Screenshot 2024-03-11 at 15 58 35

@mariia-skrypnyk
Copy link

@mariia-skrypnyk i'm not sure if understand the issue from the videos

Yes @clauxx , sorry. It it's not so obvious as I thought. Let me show you on a screenshots:

it is the same chat and the same navigation icon on the background (x) but after starting to scroll and after you move to the start of conversation at the top of the chat

start Screenshot 2024-03-11 at 15 58 57 after Screenshot 2024-03-11 at 15 58 35

@clauxx were my details useful?

@clauxx
Copy link
Member Author

clauxx commented Mar 12, 2024

@clauxx were my details useful?

@mariia-skrypnyk sorry yes, got caught up with a different issue. It's much clearer from the screenshots 👍

@clauxx clauxx force-pushed the cl-19095-chat-nav-buttons branch from 90b7321 to 5fbb2eb Compare March 13, 2024 13:04
@clauxx
Copy link
Member Author

clauxx commented Mar 13, 2024

@mariia-skrypnyk have a look again please

@mariia-skrypnyk
Copy link

Thanks @clauxx !
Navigation button is fixed now. Great job!

I observe such issue appeared in new build (Android).
I've checked previous one and nightly and it's ok there.
Let me show you.

ISSUE 2: Group details block reloads when user scrolls from the bottom to the top

Steps:

  1. Login to app
  2. Add 2 or more contacts
  3. Create Group Chat
  4. Send messages and images to create scrollable content
  5. Reopen group chat and scroll from the bottom to the top. Look at group details block during scrolling:
Screenshot 2024-03-13 at 15 19 59
video_2024-03-13_15-19-31.mp4

Actual result: Group details block reloads and user see it's blinking
Expected result: Group details block isn't reloading while scrolling

@clauxx
Copy link
Member Author

clauxx commented Mar 13, 2024

@mariia-skrypnyk this isn't caused by this PR

@mariia-skrypnyk
Copy link

mariia-skrypnyk commented Mar 13, 2024

@clauxx thanks for investigating it, will move PR to the design review by @Francesca-G after e2e test.

@status-im-auto
Copy link
Member

92% of end-end tests have passed

Total executed tests: 48
Failed tests: 3
Expected to fail tests: 1
Passed tests: 44
IDs of failed tests: 703495,702807,702730 
IDs of expected to fail tests: 703503 

Failed tests (3)

Click to expand
  • Rerun failed tests

  • Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_mute_chat, id: 703495

    # STEP: Change device time so chat will be unmuted by timer
    Device 2: Long press on `ChatElement`

    critical/chats/test_group_chat.py:459: in test_group_chat_mute_chat
        chat.long_press_element()
    ../views/base_element.py:323: in long_press_element
        action.long_press(element).release().perform()
    /home/jenkins/.local/lib/python3.10/site-packages/appium/webdriver/common/touch_action.py:174: in perform
        self._driver.execute(Command.TOUCH_ACTION, params)
    /home/jenkins/.local/lib/python3.10/site-packages/selenium/webdriver/remote/webdriver.py:345: in execute
        self.error_handler.check_response(response)
    /home/jenkins/.local/lib/python3.10/site-packages/appium/webdriver/errorhandler.py:122: in check_response
        raise exception_class(msg=message, stacktrace=format_stacktrace(stacktrace))
     The element 'By.xpath: //*[@content-desc='author-primary-name'][starts-with(@text,'zjdoxyw')]/..' is not linked to the same object in DOM anymore; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#stale-element-reference-exception
    E   Stacktrace:
    E   io.appium.uiautomator2.common.exceptions.StaleElementReferenceException: The element 'By.xpath: //*[@content-desc='author-primary-name'][starts-with(@text,'zjdoxyw')]/..' is not linked to the same object in DOM anymore
    E   	at io.appium.uiautomator2.model.ElementsCache.restore(ElementsCache.java:122)
    E   	at io.appium.uiautomator2.model.ElementsCache.get(ElementsCache.java:153)
    E   	at io.appium.uiautomator2.handler.Location.safeHandle(Location.java:23)
    E   	at io.appium.uiautomator2.handler.request.SafeRequestHandler.handle(SafeRequestHandler.java:59)
    E   	at io.appium.uiautomator2.server.AppiumServlet.handleRequest(AppiumServlet.java:277)
    E   	at io.appium.uiautomator2.server.AppiumServlet.handleHttpRequest(AppiumServlet.java:271)
    E   	at io.appium.uiautomator2.http.ServerHandler.channelRead(ServerHandler.java:68)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
    E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
    E   	at io.netty.handler.codec.MessageToMessageDecoder.channelRead(MessageToMessageDecoder.java:102)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
    E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
    E   	at io.netty.channel.CombinedChannelDuplexHandler$DelegatingChannelHandlerContext.fireChannelRead(CombinedChannelDuplexHandler.java:435)
    E   	at io.netty.handler.codec.ByteToMessageDecoder.fireChannelRead(ByteToMessageDecoder.java:293)
    E   	at io.netty.handler.codec.ByteToMessageDecoder.channelRead(ByteToMessageDecoder.java:267)
    E   	at io.netty.channel.CombinedChannelDuplexHandler.channelRead(CombinedChannelDuplexHandler.java:250)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
    E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
    E   	at io.netty.handler.timeout.IdleStateHandler.channelRead(IdleStateHandler.java:266)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
    E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
    E   	at io.netty.channel.DefaultChannelPipeline$HeadContext.channelRead(DefaultChannelPipeline.java:1294)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
    E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
    E   	at io.netty.channel.DefaultChannelPipeline.fireChannelRead(DefaultChannelPipeline.java:911)
    E   	at io.netty.channel.nio.AbstractNioByteChannel$NioByteUnsafe.read(AbstractNioByteChannel.java:131)
    E   	at io.netty.channel.nio.NioEventLoop.processSelectedKey(NioEventLoop.java:611)
    E   	at io.netty.channel.nio.NioEventLoop.processSelectedKeysOptimized(NioEventLoop.java:552)
    E   	at io.netty.channel.nio.NioEventLoop.processSelectedKeys(NioEventLoop.java:466)
    E   	at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:438)
    E   	at io.netty.util.concurrent.SingleThreadEventExecutor$2.run(SingleThreadEventExecutor.java:140)
    E   	at io.netty.util.concurrent.DefaultThreadFactory$DefaultRunnableDecorator.run(DefaultThreadFactory.java:144)
    E   	at java.lang.Thread.run(Thread.java:1012)
    



    Device sessions

    2. test_group_chat_join_send_text_messages_push, id: 702807

    Device 2: Find Text by xpath: //*[starts-with(@text,'Hey, admin!')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@content-desc='message-status']/android.widget.TextView
    Device 2: Text is Sent

    critical/chats/test_group_chat.py:95: in test_group_chat_join_send_text_messages_push
        self.chats[1].chat_element_by_text(message_to_admin).wait_for_status_to_be('Delivered', timeout=120)
    ../views/chat_view.py:243: in wait_for_status_to_be
        raise TimeoutException("Message status was not changed to %s, it's %s" % (expected_status, current_status))
     Message status was not changed to Delivered, it's Sent
    



    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_message_reaction, id: 702730

    Device 1: Find EmojisNumber by xpath: //*[starts-with(@text,'Message sender')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//*[@content-desc='emoji-reaction-2']/android.widget.TextView[2]
    Device 1: Find EmojisNumber by xpath: //*[starts-with(@text,'Message sender')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//*[@content-desc='emoji-reaction-2']/android.widget.TextView[2]

    critical/chats/test_1_1_public_chats.py:73: in test_1_1_chat_message_reaction
        message_sender.emojis_below_message(emoji="thumbs-up").wait_for_element_text(1, 90)
    ../views/base_element.py:190: in wait_for_element_text
        self.driver.fail(message if message else "`%s` is not equal to expected `%s` in %s sec" % (
    base_test_case.py:179: in fail
        pytest.fail('Device %s: %s' % (self.number, text))
     Device 1: `2` is not equal to expected `1` in 90 sec
    



    Device sessions

    Expected to fail tests (1)

    Click to expand

    Class TestCommunityOneDeviceMerged:

    1. test_community_discovery, id: 703503

    Test is not run, e2e blocker  
    

    [[reason: [NOTRUN] Curated communities not loading, https://github.com//issues/17852]]

    Passed tests (44)

    Click to expand

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_add_contact_field_validation, id: 702777
    Device sessions

    2. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
    Device sessions

    3. test_activity_center_contact_request_decline, id: 702850
    Device sessions

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_pin_messages, id: 702732
    Device sessions

    2. test_group_chat_send_image_save_and_share, id: 703297
    Device sessions

    3. test_group_chat_reactions, id: 703202
    Device sessions

    4. test_group_chat_offline_pn, id: 702808
    Device sessions

    Class TestActivityMultipleDevicePR:

    1. test_navigation_jump_to, id: 702936
    Device sessions

    2. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
    Device sessions

    2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
    Device sessions

    3. test_1_1_chat_push_emoji, id: 702813
    Device sessions

    4. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    5. test_1_1_chat_edit_message, id: 702855
    Device sessions

    6. test_1_1_chat_send_image_save_and_share, id: 703391
    Device sessions

    7. test_1_1_chat_pin_messages, id: 702731
    Device sessions

    Class TestCommunityMultipleDeviceMergedTwo:

    1. test_community_markdown_support, id: 702809
    Device sessions

    2. test_community_hashtag_links_to_community_channels, id: 702948
    Device sessions

    3. test_community_mentions_push_notification, id: 702786
    Device sessions

    4. test_community_leave, id: 702845
    Device sessions

    5. test_community_join_when_node_owner_offline, id: 703629
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

    1. test_1_1_chat_delete_via_long_press_relogin, id: 702784
    Device sessions

    2. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    3. test_1_1_chat_mute_chat, id: 703496
    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_several_images_send_reply, id: 703194
    Device sessions

    2. test_community_one_image_send_reply, id: 702859
    Device sessions

    3. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    4. test_community_mark_all_messages_as_read, id: 703086
    Device sessions

    5. test_community_contact_block_unblock_offline, id: 702894
    Device sessions

    6. test_community_edit_delete_message_when_offline, id: 704615
    Device sessions

    7. test_community_message_delete, id: 702839
    Device sessions

    8. test_community_message_send_check_timestamps_sender_username, id: 702838
    Device sessions

    9. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    10. test_community_message_edit, id: 702843
    Device sessions

    11. test_community_unread_messages_badge, id: 702841
    Device sessions

    Class TestDeepLinksOneDevice:

    1. test_links_open_universal_links_from_chat, id: 704613
    Device sessions

    2. test_links_deep_links, id: 702775
    Device sessions

    Class TestActivityMultipleDevicePRTwo:

    1. test_activity_center_mentions, id: 702957
    Device sessions

    2. test_activity_center_admin_notification_accept_swipe, id: 702958
    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
    Device sessions

    2. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    3. test_community_undo_delete_message, id: 702869
    Device sessions

    4. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    5. test_community_mute_community_and_channel, id: 703382
    Device sessions

    Copy link

    @Francesca-G Francesca-G left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Looks good to me ✨

    @clauxx clauxx force-pushed the cl-19095-chat-nav-buttons branch from 332c9c5 to cf2dbdb Compare March 18, 2024 09:50
    @clauxx clauxx merged commit 02c7460 into develop Mar 18, 2024
    6 checks passed
    @clauxx clauxx deleted the cl-19095-chat-nav-buttons branch March 18, 2024 10:05
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    Archived in project
    Archived in project
    Development

    Successfully merging this pull request may close these issues.

    Fix the background of navbar buttons in chat header
    6 participants