Add support for Safari 14

.gitignore

@@ -47,3 +47,5 @@ chrome-extension/dist.pem
 .htaccess
 *.zip
 *.mp4
+
+chrome-extension/safari

chrome-extension/build-variables.js

@@ -3,5 +3,6 @@ module.exports = {
     chrome: 'https://chrome.google.com/webstore/detail/gene-info/jggendahejbhkghnachhlomkkheomchp',
     edge: 'https://microsoftedge.microsoft.com/addons/detail/gene-info/hegihjieeonojcnhfmhmedmoobggamka',
     firefox: 'https://addons.mozilla.org/firefox/addon/gene-info/',
+    safari: 'https://apps.apple.com/us/app/gix-for-safari/id1543199063',
   },
 };

chrome-extension/package.json

@@ -8,6 +8,7 @@
     "prod-ext:chrome": "NODE_ENV=production webpack --config webpack.prod.js --env.browser=chrome",
     "prod-ext:edge": "NODE_ENV=production webpack --config webpack.prod.js --env.browser=edge",
     "prod-ext:firefox": "NODE_ENV=production webpack --config webpack.prod.js --env.browser=firefox",
+    "prod-ext:safari": "NODE_ENV=production webpack --config webpack.prod.js --env.browser=safari",
     "prod-ext:test": "NODE_ENV=production webpack --config webpack.prod-test.js --env.browser=chrome",
     "start:chrome": "web-ext run --target chromium --source-dir ./dev-build/",
     "start:firefox": "web-ext run --source-dir ./dev-build/"

chrome-extension/src/content/templates/panel/interactor.js

@@ -67,12 +67,9 @@ const style = `
 .interactor-table {
   table-layout: fixed;
 }
-.interactor-table th:first-child {
+.interactor-table__col_fixed {
   width: 100px;
 }
-.interactor-table th:not(:first-child) {
-  width: calc((100% - 100px) / 2);
-}
 .interactor-table th button {
   background-color: transparent;
   border: none;
@@ -163,6 +160,23 @@ const createInteractorElement = (report, settings) => {
         class: 'interactor-table',
         tag: 'table',
         children: [
+          {
+            tag: 'colgroup',
+            children: [
+              {
+                class: 'interactor-table__col_fixed',
+                tag: 'col',
+              },
+              {
+                class: 'interactor-table__col_dynamic',
+                tag: 'col',
+              },
+              {
+                class: 'interactor-table__col_dynamic',
+                tag: 'col',
+              },
+            ],
+          },
           {
             tag: 'thead',
             children: [

design/AppIcon.appiconset/Contents.json

@@ -0,0 +1 @@
+{"images":[{"size":"128x128","expected-size":"128","filename":"128.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"1x"},{"size":"256x256","expected-size":"256","filename":"256.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"1x"},{"size":"128x128","expected-size":"256","filename":"256.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"2x"},{"size":"256x256","expected-size":"512","filename":"512.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"2x"},{"size":"32x32","expected-size":"32","filename":"32.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"1x"},{"size":"512x512","expected-size":"512","filename":"512.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"1x"},{"size":"16x16","expected-size":"16","filename":"16.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"1x"},{"size":"16x16","expected-size":"32","filename":"32.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"2x"},{"size":"32x32","expected-size":"64","filename":"64.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"2x"},{"size":"512x512","expected-size":"1024","filename":"1024.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"mac","scale":"2x"}]}

docs/public/index.html

@@ -27,59 +27,6 @@
       <a class="nav-right__workspace" href="/workspace">
         Workspace
       </a>
-      <a
-        href="https://chrome.google.com/webstore/detail/gene-info/jggendahejbhkghnachhlomkkheomchp"
-        tooltip="Chrome Web Store"
-        tooltip-position="bottom"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          aria-label="Chrome Web Store page"
-          role="img"
-          height="35"
-          viewBox="10.406 1 645.179 645.152"
-        >
-          <title>Chrome</title>
-          <desc>Web Store page</desc>
-          <path d="M181.459 273.521L82.079 120.81C143.997 43.804 236.872 1.398 331.829 1.008c55.023-.39 111.217 13.658 162.338 43.186 56.454 32.78 99.38 79.868 126.696 133.98l-267.051-14.048c-75.575-4.423-147.508 38.113-172.353 109.395zm42.796 50.081c0 60.096 48.649 108.745 108.745 108.745 60.096 0 108.745-48.649 108.745-108.745 0-60.096-48.649-108.745-108.745-108.745-60.096-.001-108.745 48.518-108.745 108.745zm409.616-116.03l-181.72 9.366c49.3 57.625 50.08 140.744 8.585 204.482L314.919 645.675c60.486 3.252 122.794-10.016 179.248-42.796 139.704-80.649 196.288-249.75 139.704-395.307zm-449.55 177.947L62.958 146.825c-33.17 50.73-52.552 111.607-52.552 176.776 0 161.297 118.111 294.887 272.514 318.562l82.859-162.338c-74.925 14.049-147.248-27.055-181.458-94.306z"/>
-        </svg>
-      </a>
-      <a
-        href="https://addons.mozilla.org/addon/gene-info/"
-        tooltip="Firefox Add-ons"
-        tooltip-position="bottom"
-      >
-
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          aria-label="Firefox Add-ons page"
-          role="img"
-          height="35"
-          viewBox="0 0 624.375 643.887"
-        >
-          <title>Firefox</title>
-          <desc>Add-ons page</desc>
-          <path d="M621.903 294.237c-.91-5.854-1.821-9.235-1.821-9.235s-2.341 2.602-6.113 7.674c-1.171-13.918-3.643-27.576-7.545-41.104-4.812-16.78-11.057-33.04-18.861-48.649-4.942-10.406-10.666-20.292-17.3-29.658-2.342-3.512-4.813-7.024-7.284-10.276-11.447-18.731-24.715-30.309-39.935-52.031-9.886-16.65-16.78-34.991-20.032-54.113-4.162 11.577-7.414 23.414-9.625 35.511-15.74-15.869-29.268-27.056-37.593-34.73C415.47 19.642 420.152 0 420.152 0s-75.836 84.681-43.056 172.874c11.316 29.918 30.958 56.063 56.454 75.315 31.738 26.275 66.079 46.828 84.16 99.64-14.568-27.707-36.552-50.991-63.479-66.99 8.065 19.122 12.228 39.804 12.098 60.486 0 79.348-64.519 143.736-143.866 143.606-10.797 0-21.463-1.171-31.869-3.643a134.18 134.18 0 0 1-35.642-12.097c-16.78-10.146-31.219-23.545-42.666-39.414l-.26-.391 2.602.911c5.983 2.081 11.967 3.642 18.211 4.812 24.325 5.203 49.82 2.212 72.323-8.585 22.764-12.617 36.422-21.983 47.608-18.211h.261c10.927 3.512 19.512-7.154 11.707-18.211-13.528-17.43-35.642-26.016-57.495-22.113-22.763 3.252-43.576 19.512-73.364 3.772-1.951-1.04-3.772-2.081-5.593-3.252-2.081-1.171 6.374 1.69 4.423.39-6.504-3.252-12.748-7.023-18.731-11.187-.39-.39 4.553 1.431 4.032 1.041-7.674-5.203-14.309-11.968-19.512-19.772-5.333-9.625-5.854-21.333-1.301-31.349 2.732-4.943 7.024-8.975 12.098-11.316 3.902 1.951 6.244 3.382 6.244 3.382s-1.691-3.252-2.732-4.943c.391-.13.65 0 1.041-.26 3.382 1.431 10.796 5.203 14.829 7.544 2.732 1.431 4.943 3.512 6.764 6.114 0 0 1.301-.65.39-3.512-1.431-3.512-3.772-6.504-7.024-8.585h.26c2.992 1.561 5.854 3.382 8.585 5.333a41.655 41.655 0 0 0 3.382-18.211c.26-3.382-.26-6.894-1.431-10.146-1.041-2.081.65-2.862 2.471-.65-.26-1.691-.91-3.252-1.561-4.813v-.13s1.041-1.431 1.561-1.951a23.866 23.866 0 0 1 4.423-3.512 191.138 191.138 0 0 1 29.528-15.089c8.325-3.643 15.219-6.374 16.65-7.285 2.081-1.301 4.032-2.862 5.854-4.553 6.895-5.854 11.707-14.048 13.268-23.024.131-1.17.261-2.341.391-3.642v-1.951c-1.171-4.553-8.976-7.935-49.95-11.837-14.438-2.341-26.016-13.138-29.268-27.447v-.13a104.132 104.132 0 0 1 40.064-49.82c1.041-.911-4.163.26-3.122-.65 3.512-1.691 7.024-3.252 10.667-4.553 1.821-.781-7.805-4.423-16.39-3.512-5.203.26-10.406 1.561-15.219 3.642 2.081-1.691 8.064-4.032 6.634-4.032-10.927 2.081-21.463 6.114-31.089 11.707 0-1.041.13-1.951.65-2.862-7.674 3.252-14.309 8.455-19.512 14.959.13-1.171.26-2.341.26-3.512-3.512 2.602-6.764 5.593-9.496 8.976l-.13.13c-22.634-8.715-47.219-10.796-71.023-6.114l-.26-.13h.26c-4.943-4.032-9.235-8.715-12.618-14.179l-.26.13-.521-.26c-1.561-2.341-3.122-4.943-4.813-7.805-1.17-2.081-2.341-4.423-3.512-6.764a.28.28 0 0 0-.26-.26c-.521 0-.781 2.211-1.171 1.691v-.13c-4.163-10.796-6.114-22.374-5.724-34.081l-.26.13c-6.634 4.553-11.707 11.187-14.439 18.861-1.17 2.731-2.081 4.292-2.862 5.854v-.65c.13-1.431.781-4.292.65-4.033-.13.26-.26.391-.39.521-1.951 2.211-3.772 4.813-5.073 7.544-1.171 2.472-2.211 5.073-2.992 7.675-.13.39 0-.39 0-1.301s.13-2.602 0-2.211l-.39.911A192.31 192.31 0 0 0 54.5 164.157c-.521 3.642-.781 7.285-.65 10.796v.26c-6.244 6.764-11.707 14.309-16.52 22.244-15.74 26.536-27.447 55.283-34.861 85.331a207.274 207.274 0 0 1 18.601-32.649A301.81 301.81 0 0 0 0 360.967c2.341-11.187 5.463-22.113 9.105-32.909-2.211 44.877 6.374 89.623 25.235 130.468 25.235 56.584 67.12 104.062 120.062 136.192 21.593 14.568 45.137 25.885 69.982 33.56a872.753 872.753 0 0 0 10.016 3.513c-1.041-.391-2.082-.911-3.122-1.301 29.398 8.845 60.096 13.397 90.794 13.397 108.876 0 144.777-41.495 148.029-45.527 5.333-4.812 9.756-10.666 12.878-17.3a312.844 312.844 0 0 1 6.373-2.732l1.301-.65 2.472-1.17c16.39-7.675 31.869-17.431 45.918-28.748 21.202-15.219 36.292-37.332 42.796-62.567 3.902-9.235 4.032-19.512.52-28.877 1.171-1.821 2.212-3.643 3.513-5.594 23.414-37.593 36.682-80.519 38.503-124.745v-3.642c0-9.497-.78-18.862-2.472-28.098zM232.97 167.281c-.52 1.431-1.17 2.992-1.691 4.553a63.869 63.869 0 0 1 1.691-4.553z"/>
-        </svg>
-      </a>
-      <a
-        href="https://microsoftedge.microsoft.com/addons/detail/gene-info/hegihjieeonojcnhfmhmedmoobggamka"
-        tooltip="Microsoft Edge add-ons"
-        tooltip-position="bottom"
-      >
-
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          aria-label="Microsoft Edge add-ons page"
-          role="img"
-          height="35"
-          viewBox="0 0 512 512">
-        >
-          <title>Microsoft Edge </title>
-          <desc>add-ons page</desc>
-          <path d="M481.92,134.48C440.87,54.18,352.26,8,255.91,8,137.05,8,37.51,91.68,13.47,203.66c26-46.49,86.22-79.14,149.46-79.14,79.27,0,121.09,48.93,122.25,50.18,22,23.8,33,50.39,33,83.1,0,10.4-5.31,25.82-15.11,38.57-1.57,2-6.39,4.84-6.39,11,0,5.06,3.29,9.92,9.14,14,27.86,19.37,80.37,16.81,80.51,16.81A115.39,115.39,0,0,0,444.94,322a118.92,118.92,0,0,0,58.95-102.44C504.39,176.13,488.39,147.26,481.92,134.48ZM212.77,475.67a154.88,154.88,0,0,1-46.64-45c-32.94-47.42-34.24-95.6-20.1-136A155.5,155.5,0,0,1,203,215.75c59-45.2,94.84-5.65,99.06-1a80,80,0,0,0-4.89-10.14c-9.24-15.93-24-36.41-56.56-53.51-33.72-17.69-70.59-18.59-77.64-18.59-38.71,0-77.9,13-107.53,35.69C35.68,183.3,12.77,208.72,8.6,243c-1.08,12.31-2.75,62.8,23,118.27a248,248,0,0,0,248.3,141.61C241.78,496.26,214.05,476.24,212.77,475.67Zm250.72-98.33a7.76,7.76,0,0,0-7.92-.23,181.66,181.66,0,0,1-20.41,9.12,197.54,197.54,0,0,1-69.55,12.52c-91.67,0-171.52-63.06-171.52-144A61.12,61.12,0,0,1,200.61,228,168.72,168.72,0,0,0,161.85,278c-14.92,29.37-33,88.13,13.33,151.66,6.51,8.91,23,30,56,47.67,23.57,12.65,49,19.61,71.7,19.61,35.14,0,115.43-33.44,163-108.87A7.75,7.75,0,0,0,463.49,377.34Z"/>
-        </svg>
-      </a>
       <a
         href="https://github.com/knightjdr/gene-info"
         tooltip="GitHub"
@@ -162,6 +109,12 @@ <h2>Download</h2>
           </svg>
           Edge
         </a>
+        <a class="link-button" href="https://apps.apple.com/us/app/gix-for-safari/id1543199063">
+          <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 512 512">
+            <path d="M274.69,274.69l-37.38-37.38L166,346ZM256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8ZM411.85,182.79l14.78-6.13A8,8,0,0,1,437.08,181h0a8,8,0,0,1-4.33,10.46L418,197.57a8,8,0,0,1-10.45-4.33h0A8,8,0,0,1,411.85,182.79ZM314.43,94l6.12-14.78A8,8,0,0,1,331,74.92h0a8,8,0,0,1,4.33,10.45l-6.13,14.78a8,8,0,0,1-10.45,4.33h0A8,8,0,0,1,314.43,94ZM256,60h0a8,8,0,0,1,8,8V84a8,8,0,0,1-8,8h0a8,8,0,0,1-8-8V68A8,8,0,0,1,256,60ZM181,74.92a8,8,0,0,1,10.46,4.33L197.57,94a8,8,0,1,1-14.78,6.12l-6.13-14.78A8,8,0,0,1,181,74.92Zm-63.58,42.49h0a8,8,0,0,1,11.31,0L140,128.72A8,8,0,0,1,140,140h0a8,8,0,0,1-11.31,0l-11.31-11.31A8,8,0,0,1,117.41,117.41ZM60,256h0a8,8,0,0,1,8-8H84a8,8,0,0,1,8,8h0a8,8,0,0,1-8,8H68A8,8,0,0,1,60,256Zm40.15,73.21-14.78,6.13A8,8,0,0,1,74.92,331h0a8,8,0,0,1,4.33-10.46L94,314.43a8,8,0,0,1,10.45,4.33h0A8,8,0,0,1,100.15,329.21Zm4.33-136h0A8,8,0,0,1,94,197.57l-14.78-6.12A8,8,0,0,1,74.92,181h0a8,8,0,0,1,10.45-4.33l14.78,6.13A8,8,0,0,1,104.48,193.24ZM197.57,418l-6.12,14.78a8,8,0,0,1-14.79-6.12l6.13-14.78A8,8,0,1,1,197.57,418ZM264,444a8,8,0,0,1-8,8h0a8,8,0,0,1-8-8V428a8,8,0,0,1,8-8h0a8,8,0,0,1,8,8Zm67-6.92h0a8,8,0,0,1-10.46-4.33L314.43,418a8,8,0,0,1,4.33-10.45h0a8,8,0,0,1,10.45,4.33l6.13,14.78A8,8,0,0,1,331,437.08Zm63.58-42.49h0a8,8,0,0,1-11.31,0L372,383.28A8,8,0,0,1,372,372h0a8,8,0,0,1,11.31,0l11.31,11.31A8,8,0,0,1,394.59,394.59ZM286.25,286.25,110.34,401.66,225.75,225.75,401.66,110.34ZM437.08,331h0a8,8,0,0,1-10.45,4.33l-14.78-6.13a8,8,0,0,1-4.33-10.45h0A8,8,0,0,1,418,314.43l14.78,6.12A8,8,0,0,1,437.08,331ZM444,264H428a8,8,0,0,1-8-8h0a8,8,0,0,1,8-8h16a8    ,8,0,0,1,8,8h0A8,8,0,0,1,444,264Z"/>
+          </svg>
+          Safari
+        </a>
       </p>
     </header>
     <main>
@@ -596,7 +549,7 @@ <h2>Browser support</h2>
               </tr>
               <tr>
                 <td>Safari</td>
-                <td><span class="not-supported">&#x2718;</span></td>
+                <td>&#x2714;</td>
               </tr>
             </tbody>
           </table>
@@ -613,7 +566,13 @@ <h3>Microsoft Edge</h3>
         </p>
         <h3>Safari</h3>
         <p>
-          We are working on porting the extension to Safari but cannot provide an ETA.
+          The extension works in Safari 14, which is available on macOS 10.14 and above (Mojave, Catalina, Big Sur).
+          To install, follow the <a href="https://apps.apple.com/us/app/gix-for-safari/id1543199063">App Store link</a> and
+          allow your browser to open the link at the App Store, then Install the extension. When you open Safari it will
+          display a notification with instructions on how to activate the extension. Once activated, you'll
+          then need to click on the extension's icon from the toolbar and grant it access to read the web sites you
+          visit (ideally "Always allow on every website"). Finally, you'll need to refresh the page you are on
+          or navigate to a new page.
         </p>
         <h3>Chromium browsers</h3>
         <p>

package.json

@@ -14,6 +14,7 @@
     "prod-ext:chrome": "npm run prod-ext:chrome --prefix chrome-extension",
     "prod-ext:edge": "npm run prod-ext:edge --prefix chrome-extension",
     "prod-ext:firefox": "npm run prod-ext:firefox --prefix chrome-extension",
+    "prod-ext:safari": "npm run prod-ext:safari --prefix chrome-extension && ./safari-build.sh",
     "prod-ext:test": "npm run prod-ext:test --prefix chrome-extension",
     "start:chrome": "npm run start:chrome --prefix chrome-extension",
     "start:firefox": "npm run start:firefox --prefix chrome-extension",

safari-build.sh

@@ -0,0 +1,23 @@
+buildNumber='1'
+versionNumber=$(cat chrome-extension/dist/manifest.json | jq '.version')
+infoPlist='chrome-extension/safari/gix/gix/Info.plist'
+infoPlistExtension='chrome-extension/safari/gix/gix Extension/Info.plist'
+
+# convert extension
+xcrun safari-web-extension-converter ./chrome-extension/dist --project-location ./chrome-extension/safari --app-name gix --bundle-identifier dev.jamesknight.gix --copy-resources --force --swift --no-open
+
+# copy app icons
+rm -rf chrome-extension/safari/gix/gix/Assets.xcassets/AppIcon.appiconset
+cp -r design/AppIcon.appiconset chrome-extension/safari/gix/gix/Assets.xcassets
+
+# update version and build numbers
+/usr/libexec/PlistBuddy -c "Set :CFBundleVersion $buildNumber" "$infoPlist"
+/usr/libexec/PlistBuddy -c "Set :CFBundleVersion $buildNumber" "$infoPlistExtension"
+/usr/libexec/PlistBuddy -c "Set :CFBundleShortVersionString $versionNumber" "$infoPlist"
+/usr/libexec/PlistBuddy -c "Set :CFBundleShortVersionString $versionNumber" "$infoPlistExtension"
+
+# set app category
+/usr/libexec/PlistBuddy -c "Add :LSApplicationCategoryType string public.app-category.productivity" "$infoPlist"
+
+# add encryption boolean
+/usr/libexec/PlistBuddy -c "Add :ITSAppUsesNonExemptEncryption bool false" "$infoPlist"