feat: open Preferences in a new tab

add-on/manifest.common.json

@@ -24,6 +24,8 @@
     "default_popup": "dist/popup/browser-action/index.html"
   },
   "options_ui": {
+    "open_in_tab": true,
+    "browser_style": false,
     "page": "dist/options/options.html"
   },
   "web_accessible_resources": [

add-on/src/landing-pages/welcome/page.js

@@ -57,7 +57,7 @@ const renderCompanionLogo = (i18n, isIpfsOnline) => {
 }
 
 const renderWelcome = (i18n, peerCount, onOpenWebUi) => {
-  const anchorClass = 'white link underline-under hover-aqua'
+  const anchorClass = 'aqua hover-white'
   const copyClass = 'mv0 tc lh-copy f5'
   const svgWidth = 80
 
@@ -94,7 +94,7 @@ const renderWelcome = (i18n, peerCount, onOpenWebUi) => {
 
 const renderInstallSteps = (i18n, isIpfsOnline) => {
   const copyClass = 'mv0 white f5 lh-copy'
-  const anchorClass = 'white link underline-under hover-aqua'
+  const anchorClass = 'aqua hover-white'
   const stateUnknown = isIpfsOnline === null
 
   return html`
@@ -117,9 +117,9 @@ const renderInstallSteps = (i18n, isIpfsOnline) => {
    ======================================================== */
 
 const renderResources = (i18n) => {
-  const labelClass = 'aqua mb1'
+  const labelClass = 'ttu tracked f6 fw4 teal mt0 mb3'
   const copyClass = 'mt0 mb4 lh-copy'
-  const anchorClass = 'navy link underline-under hover-aqua'
+  const anchorClass = 'link underline-under hover-aqua'
 
   return html`
     <div class="w-80 mv4 navy f5">
@@ -158,7 +158,7 @@ const renderVideos = (i18n) => {
   return html`
     <div class="w-80 flex flex-column flex-row-ns justify-between-ns aqua f5">
       <div class="flex flex-column mr1">
-        <p>${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}</p>
+        <p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}</p>
         <a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=8CMxDNuuAiQ" target="_blank">
           <img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/zb2rhoo8LXEwek8HLLYsXhra9YuYxRDEun3rHRc18mLvK3A5w" alt="${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}" />
           ${overlayDiv()}
@@ -167,7 +167,7 @@ const renderVideos = (i18n) => {
       </div>
 
       <div class="flex flex-column">
-        <p>${i18n.getMessage('page_landingWelcome_videos_permanent_web')}</p>
+        <p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_videos_permanent_web')}</p>
         <a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=HUVmypx9HGI" target="_blank">
           <img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/zb2rhbCqh6W5Veot1sgZC5v7oLMnrkxq8ikd7auyy9UKSLBBa" alt="${i18n.getMessage('page_landingWelcome_videos_permanent_web')}" />
           ${overlayDiv()}
@@ -179,12 +179,12 @@ const renderVideos = (i18n) => {
 }
 
 const renderProjects = (i18n) => {
-  const anchorClass = 'flex flex-column items-center navy link hover-aqua'
+  const anchorClass = 'flex flex-column items-center navy link underline-under hover-aqua'
   const logoWidth = 80
 
   return html`
     <div class="w-80 mv4 navy f6">
-      <p class="mb4 aqua f5">${i18n.getMessage('page_landingWelcome_projects_title')}</p>
+      <p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_projects_title')}</p>
 
       <div class="flex justify-between-ns">
         <a class="${anchorClass}" href="https://multiformats.io/" target="_blank">

add-on/src/landing-pages/welcome/welcome.css

@@ -12,6 +12,10 @@
   text-underline-position: under;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
 .state-unknown {
   opacity: 0;
   filter: blur( .15em );

add-on/src/options/forms/api-form.js

@@ -13,8 +13,8 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_api')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_api')}</h2>
         <div>
           <label for="ipfsApiUrl">
             <dl>
@@ -23,6 +23,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="ipfsApiUrl"
             type="url"
             inputmode="url"
@@ -41,6 +42,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="ipfsApiPollMs"
             type="number"
             inputmode="numeric"

add-on/src/options/forms/dnslink-form.js

@@ -17,15 +17,15 @@ function dnslinkForm ({
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_dnslink')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_dnslink')}</h2>
         <div>
           <label for="dnslinkPolicy">
             <dl>
               <dt>${browser.i18n.getMessage('option_dnslinkPolicy_title')}</dt>
               <dd>
                 ${browser.i18n.getMessage('option_dnslinkPolicy_description')}
-                <p><a href="https://docs-beta.ipfs.io/how-to/dnslink-companion/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/dnslink-companion/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
@@ -65,7 +65,7 @@ function dnslinkForm ({
               <dd>
                 ${browser.i18n.getMessage('option_dnslinkRedirect_description')}
                 ${dnslinkRedirect ? html`<p class="red i">${browser.i18n.getMessage('option_dnslinkRedirect_warning')}</p>` : null}
-                <p><a href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>

add-on/src/options/forms/experiments-form.js

@@ -25,9 +25,9 @@ function experimentsForm ({
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_experiments')}</legend>
-        <div>${browser.i18n.getMessage('option_experiments_warning')}</div>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_experiments')}</h2>
+        <div class="mb2">${browser.i18n.getMessage('option_experiments_warning')}</div>
         <div>
           <label for="displayNotifications">
             <dl>
@@ -69,7 +69,7 @@ function experimentsForm ({
             <dl>
               <dt>${browser.i18n.getMessage('option_detectIpfsPathHeader_title')}</dt>
               <dd>${browser.i18n.getMessage('option_detectIpfsPathHeader_description')}
-                <p><a href="https://docs-beta.ipfs.io/how-to/companion-x-ipfs-path-header/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/companion-x-ipfs-path-header/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
@@ -86,12 +86,12 @@ function experimentsForm ({
                 <!-- TODO: https://github.com/ipfs-shipyard/ipfs-companion/pull/777
                 ${browser.i18n.getMessage('option_ipfsProxy_description')}
                 <p>${ipfsProxy ? html`
-                    <a href="${browser.extension.getURL('dist/pages/proxy-acl/index.html')}" target="_blank">
+                    <a class="link underline hover-aqua" href="${browser.extension.getURL('dist/pages/proxy-acl/index.html')}" target="_blank">
                       ${browser.i18n.getMessage('option_ipfsProxy_link_manage_permissions')}
                     </a>` : html`<del>${browser.i18n.getMessage('option_ipfsProxy_link_manage_permissions')}</del>`}
                 </p>
                 -->
-                <p><a href="https://docs-beta.ipfs.io/how-to/companion-window-ipfs/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/companion-window-ipfs/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
@@ -107,6 +107,7 @@ function experimentsForm ({
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="logNamespaces"
             type="text"
             required
@@ -120,7 +121,7 @@ function experimentsForm ({
               <dd>${browser.i18n.getMessage('option_resetAllOptions_description')}</dd>
             </dl>
           </label>
-          <div><button id="resetAllOptions" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
+          <div><button id="resetAllOptions" class="Button transition-all sans-serif v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline white bg-red white" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
         </div>
       </fieldset>
     </form>

add-on/src/options/forms/file-import-form.js

@@ -11,21 +11,22 @@ function fileImportForm ({ importDir, openViaWebUI, preloadAtPublicGateway, onOp
   const onPreloadAtPublicGatewayChange = onOptionChange('preloadAtPublicGateway')
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_fileImport')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_fileImport')}</h2>
         <div>
           <label for="importDir">
             <dl>
               <dt>${browser.i18n.getMessage('option_importDir_title')}</dt>
               <dd>
                 ${browser.i18n.getMessage('option_importDir_description')}
-                <p><a href="https://docs-beta.ipfs.io/concepts/file-systems/#mutable-file-system-mfs" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/concepts/file-systems/#mutable-file-system-mfs" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>
             </dl>
           </label>
           <input
+            class="bg-white navy"
             id="importDir"
             type="text"
             pattern="^\/(.*)"

add-on/src/options/forms/gateways-form.js

@@ -33,8 +33,8 @@ function gatewaysForm ({
 
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_gateways')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_gateways')}</h2>
           <div>
             <label for="publicGatewayUrl">
               <dl>
@@ -43,6 +43,7 @@ function gatewaysForm ({
               </dl>
             </label>
             <input
+              class="bg-white navy"
               id="publicGatewayUrl"
               type="url"
               inputmode="url"
@@ -59,13 +60,14 @@ function gatewaysForm ({
                 <dt>${browser.i18n.getMessage('option_publicSubdomainGatewayUrl_title')}</dt>
                 <dd>
                   ${browser.i18n.getMessage('option_publicSubdomainGatewayUrl_description')}
-                  <p><a href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
+                  <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
                     ${browser.i18n.getMessage('option_legend_readMore')}
                   </a></p>
                 </dd>
               </dl>
             </label>
             <input
+              class="bg-white navy"
               id="publicSubdomainGatewayUrl"
               type="url"
               inputmode="url"
@@ -87,6 +89,7 @@ function gatewaysForm ({
                 </dl>
               </label>
               <input
+                class="bg-white navy"
                 id="customGatewayUrl"
                 type="url"
                 inputmode="url"
@@ -118,7 +121,7 @@ function gatewaysForm ({
                   <dt>${browser.i18n.getMessage('option_useSubdomains_title')}</dt>
                   <dd>
                     ${browser.i18n.getMessage('option_useSubdomains_description')}
-                    <p><a href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
+                    <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway" target="_blank">
                       ${browser.i18n.getMessage('option_legend_readMore')}
                     </a></p>
                   </dd>
@@ -136,6 +139,7 @@ function gatewaysForm ({
                 </dl>
               </label>
               <textarea
+                class="bg-white navy"
                 id="noIntegrationsHostnames"
                 spellcheck="false"
                 onchange=${onNoIntegrationsHostnamesChange}

add-on/src/options/forms/global-toggle-form.js

@@ -8,7 +8,7 @@ const switchToggle = require('../../pages/components/switch-toggle')
 function globalToggleForm ({ active, onOptionChange }) {
   const toggle = onOptionChange('active')
   return html`
-    <form class="dib mb3">
+    <form class="db mb3 bg-aqua-muted charcoal">
       <label for="active" class="dib pa3 flex items-center pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
         ${switchToggle({ id: 'active', checked: active, onchange: toggle, style: 'mr3' })}
         ${browser.i18n.getMessage('panel_headerActiveToggleTitle')}

add-on/src/options/forms/ipfs-node-form.js

@@ -11,16 +11,16 @@ function ipfsNodeForm ({ ipfsNodeType, ipfsNodeConfig, onOptionChange }) {
   const withChromeSockets = hasChromeSocketsForTcp()
   return html`
     <form>
-      <fieldset>
-        <legend>${browser.i18n.getMessage('option_header_nodeType')}</legend>
+      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_nodeType')}</h2>
         <div>
           <label for="ipfsNodeType">
             <dl>
               <dt>${browser.i18n.getMessage('option_ipfsNodeType_title')}</dt>
               <dd>
                 <p>${browser.i18n.getMessage('option_ipfsNodeType_external_description')}</p>
                 <p>${browser.i18n.getMessage(withChromeSockets ? 'option_ipfsNodeType_embedded_chromesockets_description' : 'option_ipfsNodeType_embedded_description')}</p>
-                <p><a href="https://docs-beta.ipfs.io/how-to/companion-node-types/" target="_blank">
+                <p><a class="link underline hover-aqua" href="https://docs-beta.ipfs.io/how-to/companion-node-types/" target="_blank">
                   ${browser.i18n.getMessage('option_legend_readMore')}
                 </a></p>
               </dd>