ONLINE/OFFLINE : Relationship between status - menu button - setting is not consistent

[kkalarickal]

Bug Description

There are three visual elements that are related directly to the ONLINE/OFFLINE status of the Service Worker.

1. The status message at the bottom of the page, to the extreme right side
2. The Offline/Online button on the header menu
3. The "Show offline content only" setting in the Settings page

It is not clear what drives what and how the three are related. Here are the permutations and combinations of what happens to two of the elements when the third is manipulated

• When the Chrome Dev Tools > Application > Service Workers > Offline check box is checked,
  -- the status message at the bottom changes to a red-offline
  -- the header button automatically changes to offline mode
  -- the settings page "Show offline content only" changes to true only WHEN refreshed CONFUSING

• When the Chrome Dev Tools > Application > Service Workers > Offline check box is UNchecked
  -- the status message at the bottom changes to green-online
  -- the header button automatically changes to online mode
  -- the settings page "Show offline content only" changes to false only WHEN refreshed CONFUSING

• When the MENU button is manually changed to OFFLINE (even if the real service worker status is online)
  -- the status message at the bottom remains green-online
  -- the settings page "Show offline content only" changes to true only WHEN refreshed CONFUSING

• When the MENU button is manually changed to ONLINE from OFFLINE
  -- the status message at the bottom remains green-online
  -- the settings page "Show offline content only" changes to false only WHEN refreshed CONFUSING

• When settings page "Show offline content only" is manually changed to true
  -- the status message at the bottom remains green-online
  -- the header button remains in online/offline mode that it was CONFUSING

• When settings page "Show offline content only" is manually changed to false
  -- the status message at the bottom remains green-online
  -- the header button remains in online/offline mode that it was CONFUSING

Expected Behaviour

For the average user, the behavior of the settings page "Show offline content only" can appear inconsistent, since there is another button in th menu that reflects the change in online/offline status. Also, it is not clear why there should be another status message at the bottom of the page.

In the Figma Designs, the menu button was clearly labelled "Offline Mode" and "Online Mode". Perhaps there needs to be clarity around which of these buttons is a selector and which is a status indicator.

Suggestions:

1. Either the menu button should be a setting that can simulate the online/offline behavior of the service worker
2. Or the Settings > "Show offline content only" button should automatically flip along with the menu button without requiring a refresh of the page.

Steps to reproduce

1. Go to KINO Staging Site on Google Chrome
2. follow the instructions listed above.
3. If needed, change to Mobile View within Chrome DevTools.
4. See discrepancies listed.

Screenshots

Screencast of the lack of synchronicity between menu button and Settings : https://share.getcloudapp.com/kpu72QGN

Screenshot showing Figma design and how it indicates a difference in shading between Offline and Online depending on which side the button is flipped: https://share.getcloudapp.com/jkueGqx6

Additional context

• Project version: da8ec7d
• Node version: n.a.
• OS: Win10
• Browser: chrome
• Device: Galaxy S III

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[kkalarickal]

@merapi - you may remember the reference Rob Kochman made about having a setting for turning on/off the OFFLINE/ONLINE toggle button. I just found a reference to this in the designs that might shed some light about how this should work

https://share.getcloudapp.com/xQun2jEl

If you notice this is a requirement for a setting to "Activate or deactivate to show the offline/online toggle in the navigation menu."

I understand this to mean that there should be a setting that will show that OFFLINE/ONLINE button on the top header menu.

Separate from the setting to "Show offline content only".

Cc: @jwold @dero

[kkalarickal]

Verified on 6a3f38f

Per the comment #105 (comment) there is a difference between making service worker offline and cutting the network connection.

So for all the scenarios where Service Worker is made offline, the status message is consistently "OFFLINE". The setting button is not allowed to be toggled when service worker is offline. This helps reduce any confusion around the relationship between status and setting.

For all scenarios where network connection is cut, the application does not yet support the functionality.