style(browserAction): move Active Tab section to the top

+ unify labels related to redirects

add-on/_locales/en/messages.json

@@ -44,7 +44,7 @@
     "description": "A menu item in Browser Action pop-up (panel_openWebui)"
   },
   "panel_redirectToggle": {
-    "message": "Gateway Redirect",
+    "message": "Redirect to Gateway",
     "description": "A menu item in Browser Action pop-up (panel_redirectToggle)"
   },
   "panel_redirectToggleTooltip": {

add-on/src/popup/browser-action/context-actions.js

@@ -84,10 +84,12 @@ function activeTabActions (state) {
   const showActiveTabSection = (state.isRedirectContext) || state.isIpfsContext
   if (!showActiveTabSection) return
   return html`
-      <div class="no-select w-100 outline-0--focus tl">
-        ${navHeader('panel_activeTabSectionHeader')}
+      <div>
+      ${navHeader('panel_activeTabSectionHeader')}
+      <div class="fade-in pv1 bb b--black-10">
         ${contextActions(state)}
       </div>
+      </div>
   `
 }
 module.exports.activeTabActions = activeTabActions

add-on/src/popup/browser-action/operations.js

@@ -4,24 +4,15 @@
 const browser = require('webextension-polyfill')
 const html = require('choo/html')
 const navItem = require('./nav-item')
-const navHeader = require('./nav-header')
 
 module.exports = function operations ({
   active,
   redirect,
   ipfsNodeType,
-  isIpfsOnline,
-  isApiAvailable,
-  onQuickUpload,
-  onOpenWebUi,
   onToggleGlobalRedirect
 }) {
-  const activeQuickUpload = active && isIpfsOnline && isApiAvailable
-  const activeWebUI = active && isIpfsOnline && ipfsNodeType === 'external'
   const activeRedirectSwitch = active && ipfsNodeType === 'external'
-
   return html`
-    <div>
     <div class="fade-in pv1 bb b--black-10">
   ${navItem({
     text: browser.i18n.getMessage('panel_redirectToggle'),
@@ -31,20 +22,5 @@ module.exports = function operations ({
     onClick: onToggleGlobalRedirect
   })}
     </div>
-    ${navHeader('panel_toolsSectionHeader')}
-    <div class="fade-in pv1 bb b--black-10">
-  ${navItem({
-    text: browser.i18n.getMessage('panel_quickUpload'),
-    style: 'b',
-    disabled: !activeQuickUpload,
-    onClick: onQuickUpload
-  })}
-  ${navItem({
-    text: browser.i18n.getMessage('panel_openWebui'),
-    disabled: !activeWebUI,
-    onClick: onOpenWebUi
-  })}
-    </div>
-    </div>
   `
 }

add-on/src/popup/browser-action/page.js

@@ -5,6 +5,7 @@ const html = require('choo/html')
 const header = require('./header')
 const { activeTabActions } = require('./context-actions')
 const operations = require('./operations')
+const tools = require('./tools')
 
 // Render the browser action page:
 // Passed current app `state` from the store and `emit`, a function to create
@@ -31,6 +32,7 @@ module.exports = function browserActionPage (state, emit) {
       ${header(headerProps)}
       ${operations(opsProps)}
       ${activeTabActions(activeTabActionsProps)}
+      ${tools(opsProps)}
     </div>
   `
 }

add-on/src/popup/browser-action/tools.js

@@ -0,0 +1,38 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const browser = require('webextension-polyfill')
+const html = require('choo/html')
+const navItem = require('./nav-item')
+const navHeader = require('./nav-header')
+
+module.exports = function tools ({
+  active,
+  ipfsNodeType,
+  isIpfsOnline,
+  isApiAvailable,
+  onQuickUpload,
+  onOpenWebUi
+}) {
+  const activeQuickUpload = active && isIpfsOnline && isApiAvailable
+  const activeWebUI = active && isIpfsOnline && ipfsNodeType === 'external'
+
+  return html`
+    <div>
+    ${navHeader('panel_toolsSectionHeader')}
+    <div class="fade-in pv1 bb b--black-10">
+  ${navItem({
+    text: browser.i18n.getMessage('panel_quickUpload'),
+    style: 'b',
+    disabled: !activeQuickUpload,
+    onClick: onQuickUpload
+  })}
+  ${navItem({
+    text: browser.i18n.getMessage('panel_openWebui'),
+    disabled: !activeWebUI,
+    onClick: onOpenWebUi
+  })}
+    </div>
+    </div>
+  `
+}