Add extension icon badge to injected components

Fixes: #8
Change-Id: Id1d0ae4a3da057fb06f5137be2271e293d8f0cd4
diff --git a/src/_locales/ca/messages.json b/src/_locales/ca/messages.json
index d76a7cb..911bb44 100644
--- a/src/_locales/ca/messages.json
+++ b/src/_locales/ca/messages.json
@@ -142,5 +142,9 @@
   "inject_ccdarkmode_helper": {
     "message": "Canviar tema",
     "description": "Tooltip for the dark mode switch."
+  },
+  "inject_extension_badge_helper": {
+    "message": "Afegit per $1",
+    "description": "Tooltip for the extension badge, which appears next to components injected by the extension."
   }
 }
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index de6f351..d542386 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -142,5 +142,9 @@
   "inject_ccdarktheme_helper": {
     "message": "Switch theme",
     "description": "Tooltip for the dark mode switch."
+  },
+  "inject_extension_badge_helper": {
+    "message": "Added by $1",
+    "description": "Tooltip for the extension badge, which appears next to components injected by the extension."
   }
 }
diff --git a/src/_locales/es/messages.json b/src/_locales/es/messages.json
index bdb20af..00d4a60 100644
--- a/src/_locales/es/messages.json
+++ b/src/_locales/es/messages.json
@@ -142,5 +142,9 @@
   "inject_ccdarktheme_helper": {
     "message": "Cambiar tema",
     "description": "Tooltip for the dark mode switch."
+  },
+  "inject_extension_badge_helper": {
+    "message": "Añadido por $1",
+    "description": "Tooltip for the extension badge, which appears next to components injected by the extension."
   }
 }
diff --git a/src/common/console.css b/src/common/console.css
new file mode 100644
index 0000000..7e11247
--- /dev/null
+++ b/src/common/console.css
@@ -0,0 +1,33 @@
+.TWPT-badge {
+  width: calc(18/13*var(--icon-size, 16px));
+  height: calc(18/13*var(--icon-size, 16px));
+  border-radius: 50%;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  background-color: #009688;
+  color: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22), 0 2px 2px 0 rgba(0, 0, 0, 0.12);
+
+  user-select: none;
+}
+
+.TWPT-badge .material-icon-i {
+  font-size: var(--icon-size, 16px);
+}
+
+.TWPT-previous-posts {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.TWPT-previous-posts .TWPT-badge {
+  --icon-size: 18px;
+  margin-right: 8px;
+}
diff --git a/src/common/forum.css b/src/common/forum.css
new file mode 100644
index 0000000..7e862fd
--- /dev/null
+++ b/src/common/forum.css
@@ -0,0 +1,28 @@
+.TWPT-badge {
+  width: calc(18/13*var(--icon-size, 16px));
+  height: calc(18/13*var(--icon-size, 16px));
+  border-radius: 50%;
+  margin: 4px;
+
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  background-color: #009688;
+  color: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22), 0 2px 2px 0 rgba(0, 0, 0, 0.12);
+
+  user-select: none;
+}
+
+.TWPT-badge img {
+  height: var(--icon-size, 16px);
+  filter: invert(1);
+}
+
+.user-profile__user-link.TWPT-user-link > * {
+  vertical-align: middle;
+}
diff --git a/src/content_scripts/console_inject.js b/src/content_scripts/console_inject.js
index f25fe4b..6a73bdc 100644
--- a/src/content_scripts/console_inject.js
+++ b/src/content_scripts/console_inject.js
@@ -25,7 +25,7 @@
   link.innerText = chrome.i18n.getMessage('inject_previousposts_' + type);
 
   container.appendChild(link);
-  node.querySelector('.main-card-content').appendChild(container);
+  node.appendChild(container);
 }
 
 function mutationCallback(mutationList, observer) {
@@ -58,8 +58,35 @@
               var query2 = encodeURIComponent(
                   '(creator:"' + name + '" | replier:"' + name +
                   '") forum:any');
-              addProfileHistoryLink(node, 'forum', query1);
-              addProfileHistoryLink(node, 'all', query2);
+
+              var container = document.createElement('div');
+              container.classList.add('TWPT-previous-posts');
+
+              var badge = document.createElement('div');
+              badge.classList.add('TWPT-badge');
+              badge.setAttribute(
+                  'title',
+                  chrome.i18n.getMessage(
+                      'inject_extension_badge_helper',
+                      [chrome.i18n.getMessage('appName')]));
+
+              var badgeI = document.createElement('i');
+              badgeI.classList.add(
+                  'material-icon-i', 'material-icons-extended');
+              badgeI.textContent = 'repeat';
+
+              badge.appendChild(badgeI);
+              container.appendChild(badge);
+
+              var linkContainer = document.createElement('div');
+              linkContainer.classList.add('TWPT-previous-posts--links');
+
+              addProfileHistoryLink(linkContainer, 'forum', query1);
+              addProfileHistoryLink(linkContainer, 'all', query2);
+
+              container.appendChild(linkContainer);
+
+              node.querySelector('.main-card-content').appendChild(container);
             }
           }
         }
@@ -146,6 +173,20 @@
     switchContent.appendChild(icon);
     darkThemeSwitch.appendChild(switchContent);
 
+    var badgeContent = document.createElement('div');
+    badgeContent.classList.add('TWPT-badge');
+    badgeContent.setAttribute(
+        'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
+          chrome.i18n.getMessage('appName')
+        ]));
+
+    var badgeI = document.createElement('i');
+    badgeI.classList.add('material-icon-i', 'material-icons-extended');
+    badgeI.textContent = 'repeat';
+
+    badgeContent.appendChild(badgeI);
+    darkThemeSwitch.appendChild(badgeContent);
+
     var rightControl = document.querySelector('header .right-control');
     rightControl.style.width =
         (parseInt(window.getComputedStyle(rightControl).width) + 58) + 'px';
diff --git a/src/content_scripts/profile_inject.js b/src/content_scripts/profile_inject.js
index 2ad5002..869d8b6 100644
--- a/src/content_scripts/profile_inject.js
+++ b/src/content_scripts/profile_inject.js
@@ -23,12 +23,29 @@
       li.classList.add('user-profile__user-link');
 
       var a = document.createElement('a');
-      a.classList.add('user-profile__user-link');
+      a.classList.add('user-profile__user-link', 'TWPT-user-link');
       a.href = url;
       a.setAttribute(
           'data-stats-id', 'user-posts-link--tw-power-tools-by-avm99963');
-      a.textContent = chrome.i18n.getMessage('inject_previousposts');
 
+      var badge = document.createElement('span');
+      badge.classList.add('TWPT-badge');
+      badge.setAttribute(
+          'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
+            chrome.i18n.getMessage('appName')
+          ]));
+
+      var badgeImg = document.createElement('img');
+      badgeImg.src =
+          'https://fonts.gstatic.com/s/i/materialicons/repeat/v6/24px.svg';
+
+      badge.appendChild(badgeImg);
+      a.appendChild(badge);
+
+      var span = document.createElement('span');
+      span.textContent = chrome.i18n.getMessage('inject_previousposts');
+
+      a.appendChild(span);
       li.appendChild(a);
       ul.appendChild(li);
       links.appendChild(ul);
diff --git a/src/injections/ccdarktheme.css b/src/injections/ccdarktheme.css
index 8208f05..6c15b0d 100644
--- a/src/injections/ccdarktheme.css
+++ b/src/injections/ccdarktheme.css
@@ -8,7 +8,7 @@
   --TWPT-card-border: #5f6368;
   --TWPT-subtle-border: #383735;
   --TWPT-link: #8ab4f8;
-  --TWPT-thread-read-background: rgba(255, 255, 255, 0.08);
+  --TWPT-thread-read-background: rgba(255, 255, 255, .08);
   --TWPT-drawer-background: #2d2e30;
 }
 
diff --git a/src/injections/ccdarktheme_switch.css b/src/injections/ccdarktheme_switch.css
index c0d94f5..e42342d 100644
--- a/src/injections/ccdarktheme_switch.css
+++ b/src/injections/ccdarktheme_switch.css
@@ -1,4 +1,5 @@
 .TWPT-dark-theme {
+  position: relative;
   padding: 4px 8px;
   cursor: pointer;
 }
@@ -6,3 +7,10 @@
 .TWPT-dark-theme .content {
   padding: 8px;
 }
+
+.TWPT-dark-theme .TWPT-badge {
+  --icon-size: 13px;
+  position: absolute;
+  bottom: 6px;
+  right: 5px;
+}
diff --git a/templates/manifest.gjson b/templates/manifest.gjson
index 5905d74..d414749 100644
--- a/templates/manifest.gjson
+++ b/templates/manifest.gjson
@@ -18,6 +18,7 @@
     {
       "matches": ["https://support.google.com/s/community*"],
       "js": ["common/content_scripts.js", "content_scripts/console_inject_start.js"],
+      "css": ["common/console.css"],
       "run_at": "document_start"
     },
     {
@@ -37,7 +38,8 @@
     },
     {
       "matches": ["https://support.google.com/*/profile/*"],
-      "js": ["common/content_scripts.js", "content_scripts/profile_inject.js"]
+      "js": ["common/content_scripts.js", "content_scripts/profile_inject.js"],
+      "css": ["common/forum.css"]
     }
   ],
   "permissions": [