Use data uris to store the images for the profiles

src/lib/content.js

@@ -102,6 +102,14 @@ function loadProfiles(profileSet, list, csrf, hidesHistory, hidesAccountId) {
       input = li.querySelector('input[type="submit"]');
       let name = input.value;
       name = name.replace(/\s+\|\s+\d+$/, '');
+      let profile = profileSet.destProfiles.find(function (profile) {
+        return profile.profile === name;
+      });
+      if (profile && profile.imagedata) {
+        li.querySelector('label.awsc-role-color').innerHTML = Sanitizer.escapeHTML`
+          <img src=${profile.imagedata} style="margin-top: -1px; margin-left: -1px; width: 17px; height: 17px">
+        `;
+      }
       if (profileSet.excludedNames.includes(name)) {
         const nextLi = li.nextElementSibling;
         list.removeChild(li);
@@ -124,7 +132,7 @@ function loadProfiles(profileSet, list, csrf, hidesHistory, hidesAccountId) {
 
     var color = item.color || 'aaaaaa';
     var actionHost = window.location.host.endsWith('.amazonaws-us-gov.com') ? 'signin.amazonaws-us-gov.com' : 'signin.aws.amazon.com';
-    if (!item.image) {
+    if (!item.imagedata) {
         list.insertAdjacentHTML('beforeend', Sanitizer.escapeHTML`<li>
          <form action="https://${actionHost}/switchrole" method="POST" target="_top" data-aesr-profile="${item.profile}">
           <input type="hidden" name="action" value="switchFromBasis">
@@ -150,7 +158,7 @@ function loadProfiles(profileSet, list, csrf, hidesHistory, hidesAccountId) {
           <input type="hidden" name="color" value="${color}">
           <input type="hidden" name="csrf" value="${csrf}">
           <input type="hidden" name="redirect_uri" value="${redirectUri}">
-          <label for="awsc-recent-role-switch-0" class="awsc-role-color"><img src=${item.image.replace(/"/g, '')} style="margin-top: -1px; margin-left: -1px; width: 17px; height: 17px"></label>
+          <label for="awsc-recent-role-switch-0" class="awsc-role-color"><img src=${item.imagedata} style="margin-top: -1px; margin-left: -1px; width: 17px; height: 17px"></label>
           <input type="submit" class="awsc-role-submit awsc-role-display-name" name="displayName" value="${name}"
                 title="${item.role_name}@${item.aws_account_id}" style="white-space:pre"></form>
         </li>`);
@@ -221,8 +229,8 @@ function attachColorLine(profiles) {
     const color = found && found.color || null;
 
     var label = usernameMenu.querySelector('.nav-elt-label');
-    if (found && found.image) {
-      label.insertAdjacentHTML('beforebegin', Sanitizer.escapeHTML`<img id="AESW_Image" src=${found.image.replace(/"/g, '')} style="float: left; padding-right: .66em; width: 1.33em; height: 1.33em">`);
+    if (found && found.imagedata) {
+      label.insertAdjacentHTML('beforebegin', Sanitizer.escapeHTML`<img id="AESW_Image" src=${found.imagedata} style="float: left; padding-right: .66em; width: 1.33em; height: 1.33em">`);
     }
 
     if (color) {

src/options.js

@@ -2,6 +2,35 @@ function elById(id) {
   return document.getElementById(id);
 }
 
+// taken from: https://davidwalsh.name/convert-image-data-uri-javascript
+// converted to return a promise
+function getDataUri(profile) {
+  return new Promise(function(resolve, reject) {
+    var image = new Image();
+    image.setAttribute('crossOrigin', 'anonymous');
+
+    image.onload = function() {
+      var canvas = document.createElement('canvas');
+      canvas.width = 64; // or 'width' if you want a special/scaled size
+      canvas.height = 64; // or 'height' if you want a special/scaled size
+
+      canvas.getContext('2d').drawImage(this, 0, 0, 64, 64);
+
+      // get as Data URI
+      profile.imagedata = canvas.toDataURL('image/png')
+      console.log(`Got data uri for: ${profile.image}: ${profile.imagedata}`);
+      resolve(profile);
+    };
+    image.onerror = function() {
+      console.error(`Failed to load image: ${profile.image}`);
+      reject(profile)
+    }
+
+    console.log(`Getting data uri for: ${profile.image}`);
+    image.src = profile.image.replace(/"/g, '');
+  })
+}
+
 window.onload = function() {
   var colorPicker = new ColorPicker(document);
 
@@ -34,27 +63,86 @@ window.onload = function() {
         msgSpan.innerHTML = '<span style="color:#dd1111">Failed to save bacause the number of profiles exceeded maximum 200!</span>';
         return;
       }
+      // map the profiles to promises. if there is an image specification but no
+      // imagedata attribute then generate the data-uri otherwise resolve to the
+      // original profile
+      Promise.all(profiles.map(function(profile) {
+        if (profile.image && !profile.imagedata) {
+          return getDataUri(profile)
+        }
+        return new Promise(function(resolve, reject) {
+          resolve(profile)
+        });
+      })).then(values => {
+        // parse the rawstr into a list of lines or profiles (where each profile
+        // is a list of lines) preserving comments and formatting so that we can
+        // just add the imagedata lines. NOTE: the data parser turns comments
+        // and empty lines into profile separators
+        const lines = rawstr.split('\n');
+        const profileLines = [];
+        let output = "";
+        let currentProfile = undefined;
+        lines.forEach(function(line) {
+          if (r = line.match(/^\[(.+)\]$/)) {
+            var pname = r[1].trim();
+            pname = pname.replace(/^profile\s+/i, '');
+            currentProfile = {
+              profile: pname,
+              lines: [line]
+            };
+            profileLines.push(currentProfile);
+          } else {
+            if (currentProfile) {
+              currentProfile.lines.push(line);
+            } else {
+              output += line;
+            }
+          }
+        });
 
-      localStorage['rawdata'] = rawstr;
+        // re-render the profiles as string to update the UI and local storage
+        output += profileLines.map(function(profile) {
+          let match = values.find(function(value) {
+            return value.profile === profile.profile
+          });
+          // only add an imagedata line if there isn't one
+          if (!profile.lines.find(function(line) { return line.startsWith('imagedata'); })) {
+            console.log('no imagedata');
+            // add it after the image line if there is one
+            const index = profile.lines.findIndex(function(line) { return line.startsWith('image'); });
+            if (index > -1) {
+              profile.lines = profile.lines.slice(0, index + 1)
+                .concat([`imagedata = ${match.imagedata}`])
+                .concat(profile.lines.slice(index + 1));
+            }
+          }
+          return profile.lines.join('\n');
+        }).join('\n');
 
-      const dps = new DataProfilesSplitter();
-      const dataSet = dps.profilesToDataSet(profiles);
-      dataSet.lztext = LZString.compressToUTF16(rawstr);
+        localStorage['rawdata'] = output;
+        textArea.value = output;
 
-      chrome.storage.sync.set(dataSet,
-        function() {
-          const { lastError } = chrome.runtime || browser.runtime;
-          if (lastError) {
-            msgSpan.innerHTML = Sanitizer.escapeHTML`<span style="color:#dd1111">${lastError.message}</span>`;
-            return;
-          }
+        const dps = new DataProfilesSplitter();
+        const dataSet = dps.profilesToDataSet(values);
+        dataSet.lztext = LZString.compressToUTF16(output);
 
-          msgSpan.innerHTML = '<span style="color:#1111dd">Configuration has been updated!</span>';
-          setTimeout(function() {
-            msgSpan.innerHTML = '';
-          }, 2500);
-        });
-    } catch (e) {
+        chrome.storage.sync.set(dataSet,
+          function() {
+            const { lastError } = chrome.runtime || browser.runtime;
+            if (lastError) {
+              msgSpan.innerHTML = Sanitizer.escapeHTML`<span style="color:#dd1111">${lastError.message}</span>`;
+              return;
+            }
+
+            msgSpan.innerHTML = '<span style="color:#1111dd">Configuration has been updated!</span>';
+            setTimeout(function() {
+              msgSpan.innerHTML = '';
+            }, 2500);
+          });
+      }).catch(error => {
+        console.log(error.message);
+      });
+    } catch(e) {
       msgSpan.innerHTML = '<span style="color:#dd1111">Failed to save because of invalid format!</span>';
     }
   }

test/fixtures/data.json

@@ -9,7 +9,7 @@
     { "profile": "b-stg",  "aws_account_id": "666611113333", "role_name": "stg-role", "source_profile": "base-b" },
     { "profile": "b-prod", "aws_account_id": "666611114444", "role_name": "prod-role", "source_profile": "base-b", "color": "ffcc333" },
     { "profile": "b-renpou", "aws_account_id": "666611115555", "role_name": "renpou", "source_profile": "base-b" },
-    { "profile": "a-stg-image",  "aws_account_id": "555511113333", "role_name": "stg-role-image", "source_profile": "base-a", "image": "not-found.png" },
-    { "profile": "b-prod-image", "aws_account_id": "666611114444", "role_name": "prod-role-image", "source_profile": "base-b", "image": "not-found.png" }
+    { "profile": "a-stg-image",  "aws_account_id": "555511113333", "role_name": "stg-role-image", "source_profile": "base-a", "image": "not-found.png", "imagedata": "imagedata" },
+    { "profile": "b-prod-image", "aws_account_id": "666611114444", "role_name": "prod-role-image", "source_profile": "base-b", "image": "not-found.png", imagedata: "imagedata" }
   ]
 }