mozilla / side-view

An experiment with opening mobile views of pages in the sidebar

Side View

An experiment with opening mobile views of pages in the sidebar.

Install from addons.mozilla.org

Installing

Use npm install, then npm start.

Installing manually

Check out the repository. Go to about:debugging in Firefox, and select Load Temporary Add-on. Select a file in the addon/ directory.

Or: install web-ext (like npm i -g web-ext) and run web-ext run -s addon/ --browser-console -f nightly

Using

This adds a context menu item: Open in sidebar or Open link in sidebar. Select that, and the sidebar will be opened with a mobile view of the page.

Credits

Anthony_f's Sidebar for Google Search inspired this add-on's approach.

side-view's Issues

Localize

Presumably we'd use Pontoon and a similar build approach to Screenshots (though we don't currently have any build process)

Default Tab Split page should let users give feedback

Make sure you can send a tab to the sidebar when a tab is open in the sidebar

Pages should default to mobile view

Keep sidebar tab list updating live

The sidebar fetches the list of tabs when you go home, but doesn't keep it updated. Maybe we can listen for the important events in sidebar.js? background.js doesn't have as good an idea of when the tab list is displaying.

Close sidebar if it's open when clicking browserAction

This is a followup to #23.

This might be hard, because sidebar.open() is supposed to be called in response to a user action. Which means any async calls before calling that could cause trouble.

Maybe we could do this by always calling open (no await!), but then immediately send a message to the sidebar asking if it is open, and if it is, then call close.

Get a more final name

"Tab Split 2" obviously is not the final name

Send tab to sidebar from context click on a link

Content-Security-Policy can block pages

Use can use CSP to block framing a site. testpilot.firefox.com is an example, with frame-ancestors 'self'

Unfortunately modifying the request via the add-on does not affect the CSP :(

Note we can definitely read the CSP header, and detect that there will be a problem.

Send tab to sidebar from context click on tab

Support windows in npm scripts

via archived mozilla/tab-split#54

When doing things with directories in npm scripts, it is best to use something like mkdirp for portability across UNIX and Windows.

cross-env is also helpful for setting env variables

Set up circleci

Users should optionally be able to toggle to a desktop view

should this be persistent based on domain? probably...

Hide browser UI when in homepage

Right now the browser UI (back, reload, iframe, etc) is off-screen to the right when you are on the homepage, but it is still visible. You can identify this by tabbing, which will cause that UI to scroll back into focus.

Note this is part of #27

Setup different kinds of builds

We need to have dev and production builds (at least to support GA as in #30). Maybe using NODE_ENV? We'll have to write that to some file that the add-on can read (e.g., in Screenshots we create build/buildSettings.js).

Open bookmarks in sidebar via context menu

There's a FIXME about this already in background.js

Decide on User-Agent

There's a couple at the top of background.js. This is what Vivaldi uses:

Mozilla/5.0 (Linux; Android 6.0.1; SM-G920F Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.170 Mobile Safari/537.36 Vivaldi/1.95.1077.50

Include the addon linter

There's an example in Screenshots: https://github.com/mozilla-services/screenshots/blob/master/package.json#L91

Copy the version number from package.json to addon/manifest.json during the build

Right now, they have to manually be kept in sync (and are not in sync)

Optimize tab list rendering

Let's make it less flickery and not use react

Google Analytics snippet

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-77033033-7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-77033033-7');
</script>

Include the Test Pilot analytics library

See: https://www.npmjs.com/package/testpilot-ga

Pull in Hoverpad's CSS

We want to match Hoverpad's style, and should use their CSS in sidebar.html. Maybe from https://github.com/mozilla-services/hoverpad/blob/master/style.css

Create package.json

We should have a package.json file. Most of our "build" steps (ideally all?) should just be npm run scripts.

Add === warning

Per this comment

The Feedback button wrongly overlaps the "Current tabs" list when the window is vertically resized

[Affected versions]:

• Firefox 58.0.2 and up
• Tab Split 2 0.2.0

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Prerequisites]:

• Have a clean Firefox profile with the latest Tab Split 2 v0.2.0 installed.
• Have at least 4 tabs open.
• Have Tab Split sidebar open.

[Steps to reproduce]:

1. Open Firefox browser with the profile from prerequisites.
2. Vertically resize the window until "Recent Splits" section is not visible.
3. Scroll down and observe the right bottom of the sidebar.

[Expected result]:

• The "Feedback" button is displayed.

[Actual result]:

• The "Feedback" button overlaps the "Current Tabs" list.

[Notes]:

• This issue is reproducible if you diagonally resize the window or if you resize the sidebar to its minimum width.
• Also, when you hover the "Feedback" button, it is partially visible.
• Here is a screen recording with this issue:
  

Warn about CSP-blocked pages

Per #33, some pages won't work in iframes. We can still detect this, in the same code that we use to fix X-Frame-Options.

I propose:

• We detect X-Frame-Options
• We send a message with the URL affected to the sidebar when we see this
• The sidebar additionally checks that the URL being loaded is the affected URL, and in that case it removes the iframe and replaces it with a warning message (or maybe redirects the iframe to a warning page). This additional check is because the code that reads the header might catch requests that aren't coming from the sidebar.

Note Bug 1318532 would fix this for us (by allowing us to use <iframe mozbrowser>), so it's not necessarily a permanent flaw in our approach (but it can't be fixed for launch).

Show a list of currently open tabs in a newly opened sidebar

Convert to async/await

I think we're clear to use those without any transpilation.

Consider a back/refresh option

Implement list of recent splits

We should list up to 10 recent splits

Sidebar title should persist regardless of currently displayed URL

New Tab favicon is undefined

Steps to reproduce:

1. npm run run

Actual results:

The Tab Split sidebar has a broken image next to the "New Tab" label.

Expected results:

Check if the tab.favIconUrl is truthy/defined before setting the image.src in ./addon/sidebar.js?
Or, possibly set a default favicon, if that keeps the spacing/layout more consistent-ier.

https://github.com/mozilla/tab-split-2/blob/1d839ee41c8be7d37a553fcbd5600893f6b6f2f3/addon/sidebar.js#L22-L23

Add eslint rules

Should borrow the setup/configuration from some other package.

The website is wrongly blank and the "Home" button becomes unusable if you press the "Tab" key after you return to the Homepage UI

[Affected versions]:

• Firefox 58.0.2 and up
• Tab Split 2 0.2.0

[Affected Platforms]:

• All Windows
• All Linux

[Prerequisites]:

• Have a clean Firefox profile with the latest Tab Split 2 v0.2.0 installed.
• Have the Tab Split sidebar open.

[Steps to reproduce]:

1. Open Firefox browser with the profile from prerequisites and navigate to a website.
2. Click the tab from the "Current Tabs" list.
3. Press the "Home" sidebar's button.
4. Click the "Tab" key and press again the "Home" button.

[Expected result]:

• The homepage UI is displayed.

[Actual result]:

• Nothing happens and the website remains blank.

[Notes]:

• This issue is still reproducible if you click the "Refresh" button.
• Here is a screen recording with this issue:
  

Add QA testplan

Via archived mozilla/tab-split#11

Once we have a functioning add-on to play with, we should write a QA testplan that we can use to verify releases.

Initially, I'd want to make sure that devtools and fullscreen and Activity Stream and stuff like Min-Vid/Lockbox all work as expected with a split viewport.

/cc @SoftVision-PaulOiegas @Softvision-CristinaBadescu

Tabs with no icon don't display well on the homepage

Example: about:newtab

Implement and verify metrics pings

Users should be able to get back to the list view from any sidebar page

Create browserAction

I.e., a toolbar button. This would be the same as "open tab in sidebar". It's primarily for increased visibility.

If the sidebar is open to Tab Split, then the sidebar should be closed. See Bug 1427431 for some more info. Closing may not be easy.

It's too hard to multitask in the browser

Sometimes you want to read one page while you work on another, or vice versa. It should be easier!

Create metrics doc

Note PR #40 has some starter events and FIXMEs about other events.

The "Current Tabs" list does not update accordingly when a tab is closed

[Affected versions]:

• Firefox 58.0.2 and up
• Tab Split 2 0.2.0

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Prerequisites]:

• Have a clean Firefox profile with the latest Tab Split 2 v0.2.0 installed.
• Have at least 2 tabs open.
• Have Tab Split sidebar open.

[Steps to reproduce]:

1. Open Firefox browser with the profile from prerequisites.
2. Close one tab and observe the "Current Tabs" list.

[Expected result]:

• The closed tab is no longer displayed in the list.

[Actual result]:

• The previously closed tab is still displayed.

[Notes]:

• The list updates only after another action is performed, such as closing another tab, open another tab or refreshing the window.
• Here is a screen recording with this issue:
  

Create onboarding

Needs design. This would be on the sidebar homepage, and should be dismissable.

Move *.tmpl files into addon/?

Per #56 (comment)

@ianb says: "It's a little odd to me that manifest.json.tmpl is in the root, and I'd probably want to just put it in addon/, but for now I copied that approach and we can discuss it later. (If it went in addon/, then we'd want to use web-ext build --ignore-files '*.tmpl')"

@pdehaan says: "Sorry, I went w/ putting it in the root because I didn't want it to get bundled into the add-on when running web-ext build. I totally forgot they added the --ignore-files flag."

Make sidebar scalable up to 50% of window

This is bootstrap/experiment

Get an icon

The sidebar wants an icon, as will the browserAction

Apply visual designs

There are visual designs from the old version of tab split we can borrow.

Make it work in multiple windows

While the sidebar is opened in the "current" window, the message that is sent goes to all sidebars. Additionally, when opening a new sidebar in a new window, the retry code stops retrying as soon as it contacts any sidebar, which could be a sidebar in an unintended window.

It might help if we set the URL to sidebar.html#url={url_to_open} instead of using the messaging.

Review accessibility

• All buttons and links should have visible focus states
• All buttons and links should be accessible via keyed entry (tab selection)
• All form elements should include appropriate label attributes
• All grouped buttons should be nested in a and described with a legend
• All UI should be verified to use A11y friendly contrast ratios