Merge pull request #365 from ezzak/fix_svgs_again

Fix SVGs again

Author: rich-hansen

src/css/popup.css

@@ -82,6 +82,7 @@ header {
 .menu_button,
 #close_button {
   cursor: pointer;
+  display: flex;
 }
 
 .state_boundary {

src/css/violations.css

@@ -142,11 +142,10 @@ violation-list code {
   box-sizing: border-box;
 }
 
-.download_img {
+.download_button {
   cursor: pointer;
   opacity: 0.8;
-  width: 16px;
-  height: 16px;
+  display: inline-flex;
 }
 
 violation-list .subtable_wrapper.expanded {

src/html/popup.html

@@ -48,37 +48,65 @@
       status-message="i18ndownloadSourceDescription"
       primary-button-id="i18nDownloadSourceButton"
       primary-button-action="download"></state-element>
-
     <div class="state_boundary" id="menu">
       <header>
         <span class="header_title">
           <img src="default_32.png" width="20px" height="20px" />
           <p class="header_label" id="i18nTopLevel"></p>
         </span>
-        <img id="close_button" height="20px" width="20px" src="x.svg" />
+        <span id="close_button">
+          <object
+            height="20px"
+            width="20px"
+            type="image/svg+xml"
+            data="x.svg" /></object>
+        </span>
       </header>
-
       <div class="menu_top_level">
         <div class="menu_right_sidebar">
           <div class="menu_row">
-            <img src="circle-info.svg" height="20px" />
+            <object
+              type="image/svg+xml"
+              data="circle-info.svg"
+              height="20px"></object>
             <p id="i18nTopLevelLearnMore"></p>
-            <img src="chevron-right.svg" height="16px" />
+            <object
+              type="image/svg+xml"
+              data="chevron-right.svg"
+              height="16px"></object>
           </div>
           <div class="menu_row">
-            <img src="circle-info.svg" height="20px" />
+            <object
+              type="image/svg+xml"
+              data="circle-info.svg"
+              height="20px"></object>
             <p id="i18nViewAllViolations"></p>
-            <img src="chevron-right.svg" height="16px" />
+            <object
+              type="image/svg+xml"
+              data="chevron-right.svg"
+              height="16px"></object>
           </div>
           <div class="menu_row">
-            <img src="circle-download-cta.svg" height="20px" />
+            <object
+              type="image/svg+xml"
+              data="circle-download-cta.svg"
+              height="20px"></object>
             <p id="i18ndownloadSourcePrompt"></p>
-            <img src="chevron-right.svg" height="16px" />
+            <object
+              type="image/svg+xml"
+              data="chevron-right.svg"
+              height="16px"></object>
           </div>
           <div class="menu_row">
-            <img src="circle-download-cta.svg" height="20px" />
+            <object
+              type="image/svg+xml"
+              data="circle-download-cta.svg"
+              height="20px"></object>
             <p id="i18ndownloadReleaseSourcePrompt"></p>
-            <img src="chevron-right.svg" height="16px" />
+            <object
+              type="image/svg+xml"
+              data="chevron-right.svg"
+              height="16px"></object>
           </div>
         </div>
       </div>

src/js/popup/popup.ts

@@ -153,11 +153,13 @@ class PopupHeader extends HTMLElement {
               : ''
           }
         </span>
-        <img
-          class="menu_button"
-          height="20px"
-          width="20px"
-          src="menu-badge.svg" />
+        <span class="menu_button">
+          <object
+            type="image/svg+xml"
+            height="20px"
+            width="20px"
+            data="menu-badge.svg"></object>
+        </span>
       </header>
     `;
 
@@ -231,9 +233,10 @@ class StateElement extends HTMLElement {
           <div class="content_body">
             ${
               type
-                ? `<img
+                ? `<object
                     class="body_image"
-                    src="${type}-header.svg"/>`
+                    type="image/svg+xml"
+                    data="${type}-header.svg"></object>`
                 : ''
             }
             ${

src/js/popup/violation-list.ts

@@ -33,11 +33,16 @@ class ViolationList extends HTMLElement {
                 <td>${v.version}</td>
                 <td>${v.origin}</td>
                 <td>
-                  <img
-                    class="download_img"
+                  <span
                     data-tab-id="${tabID}"
                     data-hash="${v.hash}"
-                    src="circle-download-cta.svg"/>
+                    class="download_button">
+                    <object
+                      type="image/svg+xml"
+                      width="16px"
+                      height="16px"
+                      data="circle-download-cta.svg"></object>
+                  </span>
                 </td>
               </tr>
             `;
@@ -100,7 +105,7 @@ class ViolationList extends HTMLElement {
         </table>
       `;
 
-      document.querySelectorAll('.download_img').forEach(img => {
+      document.querySelectorAll('.download_button').forEach(img => {
         img.addEventListener('click', () => {
           const tabID = img.getAttribute('data-tab-id')!;
           const hash = img.getAttribute('data-hash')!;