Allow downloading plotly images (#9234)

DonJayamanne · rchiodo · commit 8ec8c8ba513f · 2019-12-20T08:19:09.000-08:00
* Allow downloading plotly images

* Oops
diff --git a/src/client/common/application/webPanels/webPanel.ts b/src/client/common/application/webPanels/webPanel.ts
@@ -131,7 +131,7 @@ export class WebPanel implements IWebPanel {
             <head>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
-                <meta http-equiv="Content-Security-Policy" content="img-src 'self' data: https: http: blob:; default-src 'unsafe-inline' 'unsafe-eval' vscode-resource: data: https: http:;">
+                <meta http-equiv="Content-Security-Policy" content="img-src 'self' data: https: http: blob:; default-src 'unsafe-inline' 'unsafe-eval' vscode-resource: data: https: http: blob:;">
                 <meta name="theme-color" content="#000000">
                 <meta name="theme" content="${Identifiers.GeneratedThemeName}"/>
                 <title>React App</title>
@@ -165,7 +165,7 @@ export class WebPanel implements IWebPanel {
             <head>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
-                <meta http-equiv="Content-Security-Policy" content="img-src 'self' data: https: http: blob:; default-src 'unsafe-inline' 'unsafe-eval' vscode-resource: data: https: http:;">
+                <meta http-equiv="Content-Security-Policy" content="img-src 'self' data: https: http: blob:; default-src 'unsafe-inline' 'unsafe-eval' vscode-resource: data: https: http: blob:;">
                 <meta name="theme-color" content="#000000">
                 <meta name="theme" content="${Identifiers.GeneratedThemeName}"/>
                 <title>React App</title>
diff --git a/src/client/common/application/webPanels/webPanelServer.ts b/src/client/common/application/webPanels/webPanelServer.ts
@@ -132,7 +132,7 @@ export class WebPanelServer {
             <head>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
-                <meta http-equiv="Content-Security-Policy" content="img-src 'self' data: https: http: blob:; default-src 'unsafe-inline' 'unsafe-eval' vscode-resource: data: https: http:;">
+                <meta http-equiv="Content-Security-Policy" content="img-src 'self' data: https: http: blob:; default-src 'unsafe-inline' 'unsafe-eval' vscode-resource: data: https: http: blob:;">
                 <meta name="theme-color" content="#000000">
                 <meta name="theme" content="${Identifiers.GeneratedThemeName}"/>
                 <title>React App</title>
diff --git a/src/datascience-ui/interactive-common/handlers.ts b/src/datascience-ui/interactive-common/handlers.ts
@@ -13,8 +13,30 @@ export function handleLinkClick(ev: MouseEvent, linkClick: (href: string) => voi
                 anchor = inner[0];
             }
         }
-        if (anchor && anchor.href && !anchor.href.startsWith('vscode')) {
+        if (!anchor || !anchor.href || anchor.href.startsWith('vscode')) {
+            return;
+        }
+        if (!anchor.href.startsWith('blob:')) {
             linkClick(anchor.href);
         }
+
+        // We an have an image (as a blob) and the reference is blob://null:<someguid>
+        // We need to get the blob, for that make a http request and the response will be the Blob
+        // Next convert the blob into something that can be sent to the client side.
+        // Just send an inlined base64 image to `linkClick`, such as `data:image/png;base64,xxxxx`
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', anchor.href, true);
+        xhr.responseType = 'blob';
+        xhr.onload = () => {
+            const blob = xhr.response;
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onload = () => {
+                if (typeof reader.result === 'string'){
+                    linkClick(reader.result);
+                }
+            };
+        };
+        xhr.send();
     }
 }
diff --git a/src/datascience-ui/native-editor/nativeCell.tsx b/src/datascience-ui/native-editor/nativeCell.tsx
@@ -164,7 +164,7 @@ export class NativeCell extends React.Component<INativeCellProps> {
     private onMouseClick = (ev: React.MouseEvent<HTMLDivElement>) => {
         if (ev.nativeEvent.target) {
             const elem = ev.nativeEvent.target as HTMLElement;
-            if (!elem.className.includes('image-button')) {
+            if (!elem.className.includes || !elem.className.includes('image-button')) {
                 // Not a click on an button in a toolbar, select the cell.
                 ev.stopPropagation();
                 this.lastKeyPressed = undefined;
