Implemented tilfinltd/aws-extend-switch-roles#290

options.html

@@ -136,6 +136,7 @@ <h1>Settings</h1>
     <li><label for="showOnlyMatchingRolesCheckBox"><input type="checkbox" id="showOnlyMatchingRolesCheckBox">Show only matching roles</label></li>
     <li><label for="signinEndpointInHereCheckBox"><input type="checkbox" id="signinEndpointInHereCheckBox">Sign-in endpoint in current region</label> (Experimental, Supporters only) </li>
     <li><s><label for="autoAssumeLastRoleCheckBox"><input type="checkbox" id="autoAssumeLastRoleCheckBox">Automatically assume last assumed role</label> (Experimental) </s> (temporarily disabled) </li>
+    <li><label for="enableImageBorderColorCheckBox"><input type="checkbox" id="enableImageBorderColorCheckBox">Enable image border color</label></li>
     <li>
       Configuration storage:
       <label for="configStorageSyncRadioButton"><input type="radio" name="configStorage" id="configStorageSyncRadioButton" value="sync">Sync</label>

src/lib/create_role_list_item.js

@@ -1,17 +1,19 @@
-export function createRoleListItem(document, item, url, region, { hidesAccountId }, selectHandler) {
+export function createRoleListItem(document, item, url, region, { hidesAccountId, enableImageBorderColor }, selectHandler) {
   const li = document.createElement('li');
   const headSquare = document.createElement('span');
   headSquare.textContent = ' ';
   headSquare.className = 'headSquare';
-  if (item.color) {
+  if (item.image) {
+    headSquare.style.backgroundImage = `url('${item.image.replace(/"/g, '')}')`;
+    if (item.color && enableImageBorderColor) {
+      headSquare.style.border = `3px solid #${item.color}`;
+    }
+  } else if (item.color) {
     headSquare.style.backgroundColor = `#${item.color}`;
-  } else if (!item.image) {
+  } else {
     // set gray if both color and image are undefined
     headSquare.style.backgroundColor = '#aaaaaa';
   }
-  if (item.image) {
-    headSquare.style.backgroundImage = `url('${item.image.replace(/"/g, '')}')`;
-  }
 
   const anchor = document.createElement('a');
   anchor.href = "#";

src/options.js

@@ -64,7 +64,7 @@ window.onload = function() {
     }
   }
 
-  const booleanSettings = ['hidesAccountId', 'showOnlyMatchingRoles', 'autoAssumeLastRole'];
+  const booleanSettings = ['hidesAccountId', 'showOnlyMatchingRoles', 'autoAssumeLastRole', 'enableImageBorderColor'];
   for (let key of booleanSettings) {
     elById(`${key}CheckBox`).onchange = function() {
       syncStorageRepo.set({ [key]: this.checked });

src/popup.js

@@ -110,20 +110,21 @@ function main() {
 
 function loadFormList(curURL, userInfo, tabId) {
   const storageRepo = new SyncStorageRepository(chrome || browser)
-  storageRepo.get(['hidesAccountId', 'showOnlyMatchingRoles', 'configStorageArea', 'signinEndpointInHere'])
+  storageRepo.get(['hidesAccountId', 'showOnlyMatchingRoles', 'configStorageArea', 'signinEndpointInHere', 'enableImageBorderColor'])
   .then(data => {
     const hidesAccountId = data.hidesAccountId || false;
     const showOnlyMatchingRoles = data.showOnlyMatchingRoles || false;
     const configStorageArea = data.configStorageArea || 'sync';
     const signinEndpointInHere = data.signinEndpointInHere || false;
+    const enableImageBorderColor = data.enableImageBorderColor || false;
 
     new StorageRepository(chrome || browser, configStorageArea).get(['profiles', 'profiles_1', 'profiles_2', 'profiles_3', 'profiles_4'])
     .then(data => {
       if (data.profiles) {
         const dps = new DataProfilesSplitter();
         const profiles = dps.profilesFromDataSet(data);
         const profileSet = createProfileSet(profiles, userInfo, { showOnlyMatchingRoles });
-        renderRoleList(profileSet.destProfiles, tabId, curURL, { hidesAccountId, signinEndpointInHere });
+        renderRoleList(profileSet.destProfiles, tabId, curURL, { hidesAccountId, signinEndpointInHere, enableImageBorderColor }); 
         setupRoleFilter();
       }
     })

test/lib/create_role_list_item.test.js

@@ -97,7 +97,7 @@ background-image: url(https://www.exapmle.com/icon.png);"> </span>prf<span class
   });
 
   describe('profile has color and image', () => {
-    it('returns li element', () => {
+    it('returns li element with image border color when enableImageBorderColor is true', () => {
       const item = {
         profile: 'prf',
         aws_account_id: '333344441111',
@@ -106,13 +106,31 @@ background-image: url(https://www.exapmle.com/icon.png);"> </span>prf<span class
         image: '"https://www.exapmle.com/icon.png"',
       }
       const url = 'https://console.aws.amazonaws.com/?region=us-east-1';
-      const li = createRoleListItem(window.document, item, url, 'us-east-1', {}, () => {});
-
+      const li = createRoleListItem(window.document, item, url, 'us-east-1', { enableImageBorderColor: true }, () => {});
+  
       const a = li.querySelector('a')
-      expect(a.innerHTML).to.eq(`<span class="headSquare" style="background-color: rgb(255, 170, 34); \
-background-image: url(https://www.exapmle.com/icon.png);"> </span>prf<span class="suffixAccountId">333344441111</span>`);
+      expect(a.innerHTML).to.eq(`<span class="headSquare" style="background-image: url(https://www.exapmle.com/icon.png); border: 3px solid #ffaa22;"> </span>prf<span class="suffixAccountId">333344441111</span>`);
+    });
+  });
+
+  describe('profile has color and image', () => {
+    it('returns li element without color style when enableImageBorderColor is false', () => {
+      const item = {
+        profile: 'prf',
+        aws_account_id: '333344441111',
+        role_name: 'img-role',
+        color: 'ffaa22',
+        image: '"https://www.exapmle.com/icon.png"',
+      }
+      const url = 'https://console.aws.amazonaws.com/?region=us-east-1';
+      const li = createRoleListItem(window.document, item, url, 'us-east-1', { enableImageBorderColor: false }, () => {});
+
+      const a = li.querySelector('a')
+      expect(a.innerHTML).to.eq(`<span class="headSquare" style="background-image: url(https://www.exapmle.com/icon.png);"> </span>prf<span class="suffixAccountId">333344441111</span>`);
     });
   });
+
+
 
   describe('profile has region', () => {
     it('returns li element', () => {