add disabled tooltip and fallback image convertion to png

Author: silverwind

.eslintrc.yaml

@@ -199,7 +199,7 @@ rules:
   newline-per-chained-call: [0]
   no-alert: [0]
   no-array-constructor: [2]
-  no-async-promise-executor: [2]
+  no-async-promise-executor: [0]
   no-await-in-loop: [0]
   no-bitwise: [0]
   no-buffer-constructor: [0]

options/locale/locale_en-US.ini

@@ -95,6 +95,7 @@ copy_content = Copy content
 copy_branch = Copy branch name
 copy_success = Copied!
 copy_error = Copy failed
+copy_unsupported = This file type can not be copied
 
 write = Write
 preview = Preview

templates/repo/view_file.tmpl

@@ -38,7 +38,7 @@
 					{{end}}
 				</div>
 				<a download href="{{$.RawFileLink}}"><span class="btn-octicon tooltip" data-content="{{.locale.Tr "repo.download_file"}}" data-position="bottom center">{{svg "octicon-download"}}</span></a>
-				<a id="copy-content" class="btn-octicon {{if .CanCopyContent}}tooltip{{else}}disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}}{{if .CanCopyContent}} data-content="{{.locale.Tr "copy_content"}}" aria-label="{{.locale.Tr "copy_content"}}"{{end}}>{{svg "octicon-copy" 14}}</a>
+				<a id="copy-content" class="btn-octicon tooltip{{if not .CanCopyContent}} disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-content="{{if .CanCopyContent}}{{.locale.Tr "copy_content"}}{{else}}{{.locale.Tr "copy_unsupported"}}{{end}}">{{svg "octicon-copy" 14}}</a>
 				{{if .Repository.CanEnableEditor}}
 					{{if .CanEditFile}}
 						<a href="{{.RepoLink}}/_edit/{{PathEscapeSegments .BranchName}}/{{PathEscapeSegments .TreePath}}"><span class="btn-octicon tooltip" data-content="{{.EditFileTooltip}}" data-position="bottom center">{{svg "octicon-pencil"}}</span></a>

web_src/js/features/copycontent.js

@@ -1,14 +1,20 @@
 import {copyToClipboard} from './clipboard.js';
 import {showTemporaryTooltip} from '../modules/tippy.js';
+import {imageBlobToPng} from '../utils.js';
 const {i18n} = window.config;
 
+async function doCopy(content, btn) {
+  const success = await copyToClipboard(content);
+  showTemporaryTooltip(btn, success ? i18n.copy_success : i18n.copy_error);
+}
+
 export function initCopyContent() {
   const btn = document.getElementById('copy-content');
   if (!btn || btn.classList.contains('disabled')) return;
 
   btn.addEventListener('click', async () => {
     if (btn.classList.contains('is-loading')) return;
-    let content;
+    let content, isImage;
     const link = btn.getAttribute('data-link');
 
     // when data-link is present, we perform a fetch. this is either because
@@ -21,6 +27,7 @@ export function initCopyContent() {
         const contentType = res.headers.get('content-type');
 
         if (contentType.startsWith('image/') && !contentType.startsWith('image/svg')) {
+          isImage = true;
           content = await res.blob();
         } else {
           content = await res.text();
@@ -36,10 +43,18 @@ export function initCopyContent() {
     }
 
     try {
-      const success = await copyToClipboard(content);
-      showTemporaryTooltip(btn, success ? i18n.copy_success : i18n.copy_error);
+      await doCopy(content, btn);
     } catch {
-      showTemporaryTooltip(btn, i18n.copy_error);
+      if (isImage) {
+        // convert image to png as last-resort as some browser only support png copy
+        try {
+          await doCopy(await imageBlobToPng(content), btn);
+        } catch {
+          showTemporaryTooltip(btn, i18n.copy_error);
+        }
+      } else {
+        showTemporaryTooltip(btn, i18n.copy_error);
+      }
     }
   });
 }

web_src/js/modules/tippy.js

@@ -27,6 +27,7 @@ export function createTippy(target, opts = {}) {
 export function initTooltip(el, props = {}) {
   const content = el.getAttribute('data-content') || props.content;
   if (!content) return null;
+  if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', content);
   return createTippy(el, {
     content,
     delay: 100,

web_src/js/utils.js

@@ -85,3 +85,44 @@ export function translateMonth(month) {
 export function translateDay(day) {
   return new Date(Date.UTC(2022, 7, day)).toLocaleString(getCurrentLocale(), {weekday: 'short'});
 }
+
+// convert a Blob to a DataURI
+function blobToDataURI(blob) {
+  return new Promise((resolve, reject) => {
+    try {
+      const reader = new FileReader();
+      reader.addEventListener('load', (e) => {
+        resolve(e.target.result);
+      });
+      reader.addEventListener('error', () => {
+        reject(new Error('FileReader failed'));
+      });
+      reader.readAsDataURL(blob);
+    } catch (err) {
+      reject(err);
+    }
+  });
+}
+
+// convert a jpg (and possibly other formats) blob to a png blob
+export function imageBlobToPng(blob) {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const img = new Image();
+      const canvas = document.createElement('canvas');
+      img.addEventListener('load', () => {
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const context = canvas.getContext('2d');
+        context.drawImage(img, 0, 0);
+        canvas.toBlob(resolve, 'image/png');
+      });
+      img.addEventListener('error', () => {
+        reject(new Error('Image convertion failed'));
+      });
+      img.src = await blobToDataURI(blob);
+    } catch (err) {
+      reject(err);
+    }
+  });
+}