onenotedev / webclipper Goto Github PK

There is currently no way to taper off how often the tooltip shows.

Mitigation is to give users an option to turn them off and turn them off after they've been seen a certain times and if the user has ever clipped the content type we are trying to inform them about.

Because in Safari we inject a listener into every page which is needed when we invoke the clipper, after you install (or upgrade) the extension any existing pages need to be refreshed before the clipper will work.

We need to detect this case and prompt the user to refresh the page before invoking the clipper.

Here is an example page:
http://www.cooksillustrated.com/recipes/9065-grilled-shrimp-and-vegetable-kebabs

It looks like there are a couple of issues on this site:

1. The full page screenshot is off a bit. It looks like we're garbling up the layout at the top.
2. In article mode, the image is missing.

For #2, the reason is because the element contains some child elements which need to be deleted. Also, there is a transparent SVG just below that needs to be removed.

This is repro'd on google.com's logo. We have logic that removes the srcset attribute but for some reason it's not doing what is expected.

Because we still rely on the browser's ability to write cookies on the www.onenote.com domain, there is a possibility that another extension, or the browser itself if certain options are set, can block that cookie write. We should try to detect this situation and let the user know how to get around it. Nearly always the answer is to add an exception for https://www.onenote.com.

The challenge here is that the message itself will need to be somewhat generic as we will have no idea what is actually blocking the cookie. Hopefully we can write in a way that the user can just "figure it out".

When the authentication service hits an error, it is generally returned as part of the redirect URL. We are currently logging this error, but really it should be something that we can bubble up to the user. This is mostly because most of the time we don't have any control over it and the error is specific to that user.

This is tracking the work to somehow bubble up the error message we get back to the user.

Current (initial) thoughts are to add a "more info" link which opens up a popup with the message (as well as the clipper ID/session ID to help debug.

This is likely happening on our other page nav inject scripts. This does not seem to affect the operation of the tooltip, so it may be possible that we're referencing the Api somewhere in the script despite us not needing to (I don't see why we should be doing so in the first place). We either need to remove the reference to OneNoteApi or ensure it gets built into the script during build.

The wiki currently doesn't cover all the architectural topics of the Web Clipper

We currently do not provide a good-enough message for O365 customers who are unable to save a new page as they reached the 20k item limit in OneDrive. See: https://github.com/OneNoteDev/WebClipper/blob/master/src/scripts/clipperUI/oneNoteApiUtils.ts

This is error code 20008, which we currently handle, but there error message is inadequate. Ideally we can provide a link to some page where the user can take actionable steps to reduce the number of items to < 20000.

We have other places in our codebase where we declare enums as PascalCase e.g., AnimationState, ClipMode, AugmentationModel, as opposed to entirely UPPERCASE.

We should follow the same naming convention throughout the code base.

Relevant App Analytics Query:

reportdata
| where Label == "UnhandledExceptionThrown"
| where ClipperVersion == "3.2.7"
| where FailureInfo contains "innerHTML" 

Not sure what the underlying issue is. Only 2 sessions have hit it, but since we are only rolled out to 5%, this could balloon quickly.

It looks like we are not rendering the PDFs correctly in Edge. Also, the attachment is not getting uploaded properly and the PDF pages are not rendering in OneNote. Basically, things seem to be broken right now.

This is becoming one of the top requested features based on the more recent reviews. Many customers do not want to have to close the dialog after clipping. We need to think about this a little more, but my first instinct is to make this a setting (which would require a settings panel) and have an option where we automatically close the dialog after X number of seconds. As an enhancement, we might stop the fade-out if the user mouses over the dialog.

It looks like we're not correctly logging the error description when O365 sign-in errors occur.

We will likely need to add some KhanAcademy-specific client-side code to manually extract videos from KhanAcademy.

Also, it would be nice if we can have a folder of scripts that does each of these site-specific extractions, one site per file.

Since the UI was revised it looks like we didn't update the recipe icon.

1. Turn on highlighter in article mode
2. Switch to bookmark mode
3. Select some text in the bookmark

Expected: Nothing happens
Actual: That line gets highlighted

It looks like the clipper is not able to install on Firefox ESR builds 45.3+. I dug around the documentation and couldn't find anything saying that web extension support isn't yet available, and according to this page, 45.3 is the equivalent to 48 on the standard track, so I think it should work.

Current working theory: We set the minimum Firefox version to 48 and because the ESR builds are on a different versioning track, it's blocking the extension even though technically it should work fine.

Edge does not support taking screenshots of the tab yet, so for clarity, we could call 'Region' mode 'Image' mode as it's more descriptive.

http://www.usatoday.com/story/news/nation/2016/09/22/state-emergency-charlotte-protests-continue-second-night/90825016/

http://d.axfp.org/grammar2.pdf

Currently, it could be argued that our pageNav style popups break user workflow and some users reported to be annoyed by it. I think this is a good opportunity to re-explore WebExtensions API for notifications and see if we can come up with a better experience.

PR #22 introduced a setSettingsJsonForTesting method in settings.ts in order to allow for testing of custom, non-production settings. However, exposing a test-only method on Settings like this isn't the best approach, as it could get misused.

Get rid of setSettingsJsonForTesting and implement a DI-like solution so that our test environments can inject a different object than the one in the settings.json production file, as desired.

Right now we use OneNoteApi.RequestError for a lot of our XHR onerror handling, and it's pretty tightly coupled and it doesn't make too much sense. We need to refactor this out.

I repro'd it on the current dev build and on the build in "production", 3.2.4

http://www.pdf995.com/samples/pdf.pdf

^ Compare the Chrome Clipper on this page to the Firefox one. There are two extra images and the article mode has text, when it should say "No content found".

Example: http://html5doctor.com/the-figure-figcaption-elements/
For me, this is hitting the 30s timeout consistently.

Joshua spec'd really nice animations for the ratings prompt feature, but due to my own newness to motion design and our animations framework (Velocity.js), implementing them took a while.

We did not want to block shipping the feature, so I reused pre-existing Web Clipper animations to ship. This tracks replacing the temp animations with the shiny new ones.

Yesterday @leakymemory and I found a bug that was a result of casting to , and that code did not have a comment as to why that cast was needed. I think we should look through our code for these occurances and comment these (assuming casting to <any> is something we really need).

Of course, casting to <any> is pretty dangerous in the sense that it goes against what Typescript is for, and where possible, we should create interfaces and use those instead.

1. Navigate to https://www.choicehotels.com/mississippi/hattiesburg/clarion-hotels/ms140?sid=xGvANg.IuZC3g1Uu.32
2. Open Clipper in Full Page Mode

Expected: Screenshot of the page
Actual; Blank Image

More broken links:
https://mqshen.gitbooks.io/prml/content/Chapter2/gaussian/sequential_estimation.html

PR #22 introduced a getCachedValue method on the Storage abstraction in frontEndGlobals.ts. It was created to avoid the asynchronicity of calling getValue inside of the ratings helper feature, which was making ratingsPanel.tsx much less unit testable.

See full discussion.

getCachedValue could be avoided if we could await the completion of some asynchronous tasks before moving on with execution in the calling method.

So this task tracks investigation and work needed to polyfill async/await. Some initial questions:

1. Do we want to wait for ES8 (ES2017) to (maybe) include it, and for browsers to then support ES8? (caveat: we still need to continue to support IE 10+, which only supports up to ES5)
2. Is there a reliable npm async/await polyfill module available if we don't wish to upgrade to ES8?

When attempting to post a page with the following Presentation:

<html xmlns="http://www.w3.org/1999/xhtml" lang=en-US>
<head>
  <title>annual_report_2009.pdf</title>
  <meta name="created" content="-07:00 ">
</head>
<body>
  <object data-attachment="annual_report_2009.pdf" data="name:Attachment8624" type="application/pdf" />
  <img data-render-src="http://www.iso.org/iso/annual_report_2009.pdf"/>
  Clipped from: <a href="http://www.iso.org/iso/annual_report_2009.pdf">http://www.iso.org/iso/annual_report_2009.pdf</a>
</body>
</html>

Expected: Page consisting of pdf attachment, 0 or more images of the pdf, "Clipped from" annotation
Actual: Page consisting of pdf attachment, another pdf attachment (0kb, created by the API, doesn't work), "Clipped from" annotation

PR #22 comment from @VishaalK:

We have 3-ish versions of mockStorage out there. I see one in tooltipHelper_tests.ts, another in sectionPicker_tests.ts. Can you add a low pri PBI to unify these?

This causes an error saying we refuse to execute the inline event handler. This shouldn't break us, but we should remove all attribute-based event handlers from selections.

ONML does not allow the user of

1. In Firefox, select some text and right click, or right click an image

Expected: The default context menu item 'OneNote Web Clipper' is not in the context menu
Actual: The default context menu item is there

(from VishaalK): According to https://bugzilla.mozilla.org/show_bug.cgi?id=1274860 this is a known bug and someone was working on it in July. It was updated on 8/10. Not sure if Mozilla employees are going to fix this or if its left for someone else to do. I posted a comment asking for an update.

To get into the Mozilla Add-ons Store, we need to reduce our use of this as it is a potential security issue.

There are 5 places in the code where we do this:

1. logPageModifications(...) in saveToOneNote.ts: we create a DIV in the document and put clipperState.augmentationPreviewInfo.previewBodyHtml in to determine how many highlights are in the text. It is pretty tedious to determine this information in memory, Also previewBodyHtml is a big ol' string that needs to be converted to HTML in order for this work.
   Update: Shouldn't matter if we sanitize HTML.
2. createPostProcessedHtml(...) sticks previewBodyHtml into a div so we can apply the font-size and font-family in the preview as in-line styles. Same issue as above.
   Update: Shouldn't matter if we sanitize HTML.
3. removeElementsNotSupportedInOnml(...) in domUtil.ts. We replace the <center> tag with a div with the same innerHTML. Interesting StackOverflow: http://stackoverflow.com/questions/3435871/jquery-how-to-change-tag-name. A common theme is using an already existing node and traversing it using the DOM APIs.
   Update: Shouldn't matter if we sanitize HTML, we can do it with sanitize-html.
4. getDocumentFromDomString(...) in domUtils.ts. Used in the bookmark mode to get the content of the page.
   Update: We use this function retrieve img, meta, and link tags from the original, non-augmented contentData of the page. If possible, we could get it from the augmentation result, which is guaranteed to be cleaned. We are rendering the contentData into a document on our iframe, which could be potentially malicious.
5. When we use Selection mode from the Context menu, we wrap whatever they've selected in a div. We convert a RangyRange into a string by calling .toHtml(). Maybe we can walk the RangyRange instead?
   Update: this one is the most difficult one, but I think we can actually find a way to wrap this using pure JS.

I've identified ways we can sanitize the HTML before injecting it anywhere, but it might not be necessary.

The "outstanding" issue is that we get ContentInHtml from our Augmentation API and then put that in the preview. That comes back as a string, so we have to parse that at some point.

A small user-friendliness task.

e.g., the "Clipped from" urls here:

Hard for the user to interact with the full URL, if desired.

For example, we should not set Notebooks in localStorage if UserInfo is not set, and we should abstract this problem away from the developer having to do this check every time.

This one will need a bit of thinking. Was originally going to write a wrapper for storageBase, however, the logic where we know if the user is signed in or not lives in the UI, whereas storageBase lives in the background. I think a possible way of solving this is having two classes that implement some interface representing storage, one of them living in the UI and one in the back. Need to think about this one more as one is synchronous (background -> itself) in nature and the other is asynchronous (UI -> background).

The class itself is a bit of a mess (e.g., getFreshValue is not very relevant to the class, storageBase is a silly name) so we could break it up a bit :)

The W3C Specification links on http://html5doctor.com/the-figure-figcaption-elements/ show up large and indented in the prod preview, but are tiny in the actual OneNote page.

OneNote converts unknown tags to divs and so the styling in the preview is hard to get correct.

An exception is being thrown here, likely due to a user setting. We need to account for this.

In looking through the logs, particularly when we hit an unexpected failure, we are logging in such a way that a single failure can be logged/counted multiple times. This makes it hard to monitor spikes as a small number of errors can seem more magnified.

Session_Id == "127f0021-947d-0efa-474d-fb9cb50e952a" as an example.

https://www.microsoft.com/en-us/store/movies-and-tv?ocid=amc-devices-videopage

ctrl-a page, right click page, clip selection
Exception is thrown

"{"error":"Communicator INJECTED_AND_EXTENSION caught an error: Failed to execute 'appendChild' on 'Node': Only one element on document allowed."}"

Utils.ts is an awkward dumping ground for methods that don't belong anywhere else. It also references a bunch of random things like ClipperState etc. That means that code that use Utils.ts to do something really simple will inadvertently import a bunch of other js files. We should split this out in a way that makes sense.

https://vimeo.com/ondemand/unclekent2

Expected: The video shows up in article mode
Actual: There is no video in article mode, and it defaults to Full Page.

The webextensions API does not support this explicitly but we can potentially use a hack. This will need some investigation.

chromeInject.js:7137 Uncaught TypeError: Cannot read property 'postMessage' of undefined