From 72be5861a41662bf792a158df5193d672a70ca60 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Mon, 24 Jul 2017 16:25:39 +0800 Subject: [PATCH] Move icons out of JavaScript --- manifest.template.json | 4 ++++ webext/data/contentscript.js | 38 +++++++++--------------------------- webext/data/style.css | 5 +++++ webext/icons/flame.svg | 3 +++ webext/icons/star.svg | 3 +++ 5 files changed, 24 insertions(+), 29 deletions(-) create mode 100644 webext/icons/flame.svg create mode 100644 webext/icons/star.svg diff --git a/manifest.template.json b/manifest.template.json index a521e84..2db449f 100644 --- a/manifest.template.json +++ b/manifest.template.json @@ -7,6 +7,10 @@ "icons": { "128": "webext/icons/Heart_and_fork_inside_128.png" }, + "web_accessible_resources": [ + "webext/icons/star.svg", + "webext/icons/flame.svg" + ], "permissions": [ "*://github.com/*", "*://api.github.com/*" diff --git a/webext/data/contentscript.js b/webext/data/contentscript.js index 2ff23cc..8191deb 100644 --- a/webext/data/contentscript.js +++ b/webext/data/contentscript.js @@ -4,37 +4,17 @@ const _logName = 'lovely-forks:'; const DEBUG = false; let text; -const svgNS = 'http://www.w3.org/2000/svg'; - function createIconSVG(type) { - const svg = document.createElementNS(svgNS, 'svg'); - svg.setAttributeNS(null, 'height', 12); - svg.setAttributeNS(null, 'width', 10.5); - svg.setAttributeNS(null, 'viewBox', '0 0 14 16'); - svg.style['vertical-align'] = 'bottom'; - svg.style['fill'] = 'currentColor'; - - svg.classList.add('opticon', `opticon-${type}`); - - const title = document.createElementNS(svgNS, 'title'); - - const iconPath = document.createElementNS(svgNS, 'path'); - switch(type) { - case 'star': - title.append('Number of stars'); - iconPath.setAttributeNS(null, 'd', 'M14 6l-4.9-0.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14l4.33-2.33 4.33 2.33L10.4 9.26 14 6z'); - break; - case 'flame': - title.append('Fork may be more recent than upstream.'); - iconPath.setAttributeNS(null, 'd', 'M5.05 0.31c0.81 2.17 0.41 3.38-0.52 4.31-0.98 1.05-2.55 1.83-3.63 3.36-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-0.3-6.61-0.61 2.03 0.53 3.33 1.94 2.86 1.39-0.47 2.3 0.53 2.27 1.67-0.02 0.78-0.31 1.44-1.13 1.81 3.42-0.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52 0.13-2.03 1.13-1.89 2.75 0.09 1.08-1.02 1.8-1.86 1.33-0.67-0.41-0.66-1.19-0.06-1.78 1.25-1.23 1.75-4.09-1.88-6.22l-0.02-0.02z'); - iconPath.setAttributeNS(null, 'fill', '#d26911'); - break; + const icon = document.createElement('img'); + if (type === 'star') { + icon.title = 'Number of stars'; + } else if (type === 'flame') { + icon.title = 'Fork may be more recent than upstream.'; + } else { + return icon; } - - iconPath.append(title); - svg.append(iconPath); - - return svg; + icon.src = chrome.extension.getURL(`webext/icons/${type}.svg`); + return icon; } function emptyElem(elem) { diff --git a/webext/data/style.css b/webext/data/style.css index b5fea99..e9955d1 100644 --- a/webext/data/style.css +++ b/webext/data/style.css @@ -24,3 +24,8 @@ opacity: 0; } } + +/* icons */ +.lovely-forks-addon img { + vertical-align: bottom; +} diff --git a/webext/icons/flame.svg b/webext/icons/flame.svg new file mode 100644 index 0000000..075b68e --- /dev/null +++ b/webext/icons/flame.svg @@ -0,0 +1,3 @@ + + + diff --git a/webext/icons/star.svg b/webext/icons/star.svg new file mode 100644 index 0000000..1d5f9dc --- /dev/null +++ b/webext/icons/star.svg @@ -0,0 +1,3 @@ + + +