mozilla-services / screenshots Goto Github PK

Because of addon permission issues we can't access the content of iframes when serializing pages. This is discussed some in the addon docs.

I'm not sure what the best resolution here is (especially taking into account e10s)

Having the comments show up containing only the hashtag that puts that item into the present collection is not that interesting. Maybe we should not show that part of the comment (the present hashtag specifically). Though sometimes inline hashtags are part of the narrative, like look at this great #artisantoast #recipe!

This probably doesn't work with pre-Aurora Firefox, maybe even current release. We should figure out what version seems to work, and explicitly warn for any versions before that.

Sometimes there is private stuff on the page. There should be a tool to fuzz it out.

My thought was that you'd draw a rectangle, and "fuzz" it. This would replace the text with similar-length garbled text, and use a CSS transform to fuzz the text. Images would be fuzzed via some canvas routing. If we could fuzz just sections of images that'd be cool.

If you are scrolled to a particular part of the shot, when you click on the link to go to the original page we should find the closest anchor (not #psid-# of course), and link to that – then you will get close to where you were in the copied page.

Right now when you load a shot you'll always get the normal mode. We should make it sticky if that was the last thing viewed (by the owner presumably, but we don't have that)

As a form of export, you should be able to copy the tag page to the clipboard, and get a nicely formatted version of the all the articles, suitable for pasting into some document tool (Word, an email, etc).

Fonts often can't be loaded cross-domain, which makes custom fonts frequently break. I think we'll need to proxy those, or something.

The styling is very basic, but we should look up what a nice readable baseline CSS would look like.

It's hard to see more than one item at a time on the tag page. Maybe some kind of list view would be appropriate.

We should have a quick search on tag pages, that just searches the text in the page itself (titles, excerpts, URLs). We'd immediately filter down the collection inline.

Right now you can only see the excerpt when you go to the collection view. There should be some way of looking at it from the page view.

The comment dropdown is wonky in its styling, I wanted it to appear to be continuous with the content above, but this seems hard to maintain. Maybe some Javascript is necessary to get the top position just right.

We'd want to add a sort order to the individual tags (in PageTags), probably a float, so we can flop them around on reorder. We'd need some kind of dragging, though it's hard because you can only see a couple items on a single screen.

From the tag page, you should be able to zoom into a page, the shot or live page. This would open an inline iframe onto the page.

Unfortunately some live pages might try to break out.

Notify the creator of a shot when the first new person sees the page – kind of a read receipt

Annotator is a drop-in Javascript file for saving annotations. Could be an easy way to add these features to the shot. Could also make it easy to opt in to too much complexity all at once.

In comments I'd like to support a little bit of Markdown, as it's relatively unintrusive. We'd still autolink hashtags. No HTML should be allowed, mostly I want inline styles and links.

Right now we try to use the exact icon as the favicon. This can be confusing. I think we should use a modified form, so it's clear it's a copy of the page.

If you try to make a shot of a pageshot page, it should make a proper copy, not a DOM-based freeze.

Implied in this is that we have a copy technique, but that's just a matter of copying the PageData and PageTags records.

The tag page is good for collections, we should have one for all your items. It won't scale to large collections, but that's okay for now.

When we share things on the web, we don't know if the other person will see what we see, we rely on website owners to create stable and direct URLs, we have to understand the difference between permalinks and index pages, we can't share experiences that happen inside sophisticated web applications, and we can't share sets of related items.

We can do better

The /newpage.html and /newframe.html pages get loaded on copy, and are very static. We should make sure they cache well.

Right now you can select one visual part of a page that is saved and marked.

I'd like to also include text selections. When you select text on the page, a control would pop up that would allow you to "save" the selection. That saved selection would be like a kind of comment, and also could be used as a replacement for the excerpt (similar to how you can select an image as the summary image). First attempt at this would be text-only, not trying to capture any other parts of the selection.

Probably these would be displayed not inline, but as a list, and if you click on them then it will scroll to that context.

We should do a HEAD... If-Modified-Since request on pages, to check if they have been changed since saved.

I don't know what to expect... I would expect some pages will not be using expiry times, but I'm not sure. It'll be an experiment.

The request has to happen in privileged code of course.

Maybe login required. Hashtags would become user-account-specific.

The screenshot code is not e10s compatible, because it tries to access the contentWindow directly in process (in lib/screenshot.js) – we get an obscure error under e10s because we get a fake/proxy contentWindow. I haven't figured out how to do this in a Jetpack addon (the porting docs I've found refer to frame workers, but only tell how to make those from XUL addons).

I like React.js, we should use it. Requires build steps and stuff, but such is life.

We should look into ways to find associated captions from images. Like look for a sibling element with some indication that it is a caption.

After #11 we'll have a "personal" archive of saved items of some sort. Quick-and-dirty search would be interesting to try. There's an Appengine API so it shouldn't require much investment.

We might want to move the body out of the /data/<path> JSON blob.

The framed toolbar maybe isn't the right thing to be sharing, instead as a viewer you should just see the page, perhaps with some inline stuff.

Your logged-in state could determine which view you get, though ideally the framed version would have a different URL, and if you aren't logged in you'd be directed back to the plain view.

This should make sharing work better, as framed content isn't treated well by sharing services.

The image selector is kind of subtle and moves around, it could be better

Maybe a "switch to tab" link would show up, which switches tabs instead of opening the link. Maybe something similar with hashtag links.

Once we have #12 we'll be showing the hashtags in various places, and iconography would help make them easier to track.

Entering icons is hard, but we could instead just let you associate them – then whenever a hashtag was used we'd also add the icon. Maybe we'd do it via a dynamically generated user-specific stylesheet (so no real updates have to be done to content). All hashtag links would become like <a class="tag tag-recipes">recipes</a>

I'm not sure this is useful, but I think it's worth trying some sharing widget in the app (for example) – just to see if it adds value.

A proposed description of what we have now:

Shot or Shot Page: what you make when you shoot a page, the web page that is created

Full Page: the frozen page, as framed in the full view

Source page: the page from which the shot was taken

Clip: an image clip or a text clip; an image click is a rectangle taken from the page.

Viewer: the person viewing the shot, who did not create the shot.

Creator: the person who made the shot

Navigation bar: the bar at the top of the page (that has the title, etc)

Top bar: the bar you get when you click the PageShot button, that lets you save the shot.

My Shots: the shot index page, where you can see all your devices.

There should be a tag page for two tags, where both are present

While tags are good to group items, they aren't very task-oriented. For instance, I want to ask you to look at a couple product alternatives for a purchase: that task doesn't really have a name, and won't be long lived. Some other approach (still with the tag collection view) would be appropriate. Maybe with a "parent" page that is effectively the name of the tag?

We should be understanding how people use this as early as possible.

Google Analytics might be a simple option to start with. Right now we don't know what questions we want to ask, but if we can collect some data then we'll have the infrastructure once we actually figure out some questions.

The addon is tightly bound to desktop Firefox, so no option there for mobile, but viewing shots is very accessible to mobile. We should make sure those portions (the viewer mode generally, the tag view specifically) work well on mobile. #18 would be helpful.

There should be a way to save a group of tabs all at once, to a tag (similar to the direct-to-tag dropdown, only you'd select several tabs instead of just the active one). The current tab should default to selected.

This could be as simple as an email address.

You can choose which image for an excerpt, but not no image. Also no excerpt text. We also need a way to get it back.

Right now we're using pixel locations for things like the snippet. This doesn't work well on other resolutions, especially with responsive design.

We should borrow the resolution-independent code from TogetherJS (that uses selectors).

A simple title and description could be nice, when you want to explain why this tag exists. The title could include a non-normalized tag form (like #HotOrNot or #hot-or-not instead of just #hotornot, even though those all mean the same thing)

We could just search the title for something that normalizes to the tag, and if so not show the tag elsewhere.

It would be nice to be able to really quickly save the current page to a recently used hashtag. This might be a separate dropdown where you can select the tag. This might open an invisible tab instead of a visible one.

User accounts (#11) would be useful so it's more certain you can recall the page later.

Just the top bar might be too subtle.

We should show the number of unique visitors each page gets (i.e., has anyone else seen this page?)

The name "PageShot" is okay, but doesn't excite me.