mozilla / side-view Goto Github PK
View Code? Open in Web Editor NEWAn experiment with opening mobile views of pages in the sidebar
License: Mozilla Public License 2.0
An experiment with opening mobile views of pages in the sidebar
License: Mozilla Public License 2.0
[Affected versions]:
[Affected Platforms]:
[Prerequisites]:
[Steps to reproduce]:
[Expected result]:
[Actual result]:
[Notes]:
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.
should this be persistent based on domain? probably...
Needs design. This would be on the sidebar homepage, and should be dismissable.
We should list up to 10 recent splits
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
There's an example in Screenshots: https://github.com/mozilla-services/screenshots/blob/master/package.json#L91
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."
Presumably we'd use Pontoon and a similar build approach to Screenshots (though we don't currently have any build process)
There's a FIXME about this already in background.js
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
).
Let's make it less flickery and not use react
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:
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).
"Tab Split 2" obviously is not the final name
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.
npm run run
The Tab Split sidebar has a broken image next to the "New Tab" label.
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.
Per this comment
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.
Right now, they have to manually be kept in sync (and are not in sync)
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
We should have a package.json file. Most of our "build" steps (ideally all?) should just be npm run scripts.
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.
[Affected versions]:
[Affected Platforms]:
[Prerequisites]:
[Steps to reproduce]:
[Expected result]:
[Actual result]:
[Notes]:
Sometimes you want to read one page while you work on another, or vice versa. It should be easier!
I think we're clear to use those without any transpilation.
There are visual designs from the old version of tab split we can borrow.
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.
This is bootstrap/experiment
[Affected versions]:
[Affected Platforms]:
[Prerequisites]:
[Steps to reproduce]:
[Expected result]:
[Actual result]:
[Notes]:
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.
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
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
The sidebar wants an icon, as will the browserAction
Should borrow the setup/configuration from some other package.
Example: about:newtab
<!-- 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>
Note PR #40 has some starter events and FIXMEs about other events.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.