✨ Webpage security icon

apps/content/src/browser/components/Tab.svelte

@@ -13,7 +13,7 @@
   } from '../windowApi/WindowTabs.js'
   import { readable } from 'svelte/store'
   import { dragTabIds, dragTabsTranslation } from './tabs__drag.js'
-    import { derived } from '@amadeus-it-group/tansu'
+  import { derived } from '@amadeus-it-group/tansu'
 
   /** @type {WebsiteView} */
   export let view
@@ -30,7 +30,13 @@
     return () => view.events.off('changeTitle', set)
   })
 
-  const transform = derived([dragTabIds, dragTabsTranslation], ([dragTabIds, dragTabsTranslation]) => dragTabIds.includes(view.windowBrowserId) ? `translateY(${dragTabsTranslation}px)` : '')
+  const transform = derived(
+    [dragTabIds, dragTabsTranslation],
+    ([dragTabIds, dragTabsTranslation]) =>
+      dragTabIds.includes(view.windowBrowserId)
+        ? `translateY(${dragTabsTranslation}px)`
+        : '',
+  )
 
   $: isActive = $activeTabId === view.windowBrowserId
   $: isSelected = $selectedTabIds.includes(view.windowBrowserId)
@@ -211,7 +217,8 @@
     background-color: var(--theme-active);
   }
 
-  button[role='tab'][data-dragging='true'], button[role='tab'][data-dragging='true'] * {
+  button[role='tab'][data-dragging='true'],
+  button[role='tab'][data-dragging='true'] * {
     pointer-events: none;
   }
 

apps/content/src/browser/components/Tabs.svelte

@@ -11,7 +11,12 @@
   import { browserImports } from '../browserImports.js'
 </script>
 
-<ul role="tablist" on:dragstart={TabDragApi.dragStart} on:dragend={TabDragApi.dragEnd} on:dragover={TabDragApi.dragOver}>
+<ul
+  role="tablist"
+  on:dragstart={TabDragApi.dragStart}
+  on:dragend={TabDragApi.dragEnd}
+  on:dragover={TabDragApi.dragOver}
+>
   {#each $windowTabs as tab, index (tab.view.windowBrowserId)}
     <Tab view={tab.view} {index} />
   {/each}

apps/content/src/browser/components/UrlBox.svelte

@@ -20,11 +20,18 @@
 <script>
   // @ts-check
   import { writable } from 'svelte/store'
+  import {
+    RiEyeLine,
+    RiLockLine,
+    RiLockUnlockLine,
+    RiQuestionLine,
+  } from 'svelte-remixicon'
 
   import * as WebsiteViewApi from '../windowApi/WebsiteView.js'
   import * as UrlBoxApi from './urlBox.js'
   import { onMount } from 'svelte'
   import PageAction from './PageAction.svelte'
+  import UrlBoxButton from './UrlBoxButton.svelte'
 
   /** @type {WebsiteView} */
   export let view
@@ -37,7 +44,13 @@
     view.browser.browsingContext?.currentURI,
   )
 
-  /** @type {HTMLInputElement} */
+  const security = readable(0, (set) => {
+    view.events.on('securityChange', set)
+    return () => view.events.off('securityChange', set)
+  })
+  const humanSecurity = UrlBoxApi.humanSecurityInfo(security)
+
+  /** @type {HTMLInputElement?} */
   let input
   let activeIndex = 0
   /**
@@ -82,20 +95,41 @@
   }
 
   onMount(() => {
-    uri.subscribe((uri) => decodeURI((input.value = uri?.spec || '')))
-    uri.subscribe((uri) => value.set(decodeURI(uri?.spec || '')))
-    uri.subscribe(UrlBoxApi.performCursedUrlStyling(input))
+    if (input) {
+      const style = UrlBoxApi.performCursedUrlStyling(input)
+      const unsubscribe = uri.subscribe((uri) => {
+        if (input) {
+          input.value = decodeURI(uri?.spec || '')
+          value.set(decodeURI(uri?.spec || ''))
+          style()
+        }
+      })
+
+      return () => unsubscribe()
+    }
   })
 </script>
 
 <div class="url-box">
+  <UrlBoxButton>
+    {#if $humanSecurity.has('broken')}
+      <RiEyeLine />
+    {:else if $humanSecurity.has('insecure')}
+      <RiLockUnlockLine />
+    {:else if $humanSecurity.has('secure')}
+      <RiLockLine />
+    {:else}
+      <RiQuestionLine />
+    {/if}
+  </UrlBoxButton>
+
   <input
     type="text"
     bind:this={input}
     bind:value={$value}
     on:focus={() => (inputFocused = true)}
     on:blur={() => (inputFocused = false)}
-    on:input={() => userValue.set(input.value)}
+    on:input={() => userValue.set(input?.value || '')}
     on:keydown={(e) => {
       if (e.key === 'ArrowDown') {
         e.preventDefault()
@@ -178,7 +212,8 @@
     flex-grow: 2;
     position: relative;
     height: 2.5rem;
-    padding-right: 0.25rem;
+    padding: 0 2px;
+    gap: 0.125rem;
 
     border: 0.25rem solid var(--theme-active);
     border-radius: 1rem;
@@ -202,7 +237,6 @@
 
     border: none;
     background: none;
-    padding: 0 1rem;
     margin: 0;
   }
 

apps/content/src/browser/components/tabs__drag.js

@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 // @ts-check
 import { writable } from '@amadeus-it-group/tansu'
 
@@ -116,9 +120,8 @@ export function dragOver(event) {
 }
 
 /**
- * @param {DragEvent} event
  */
-export function dragEnd(event) {
+export function dragEnd() {
   windowTabs.update((tabs) => {
     if (dragTabIds().length == 0) {
       return tabs

apps/content/src/browser/components/urlBox.js

@@ -12,6 +12,53 @@ import tld from '../data/tld.txt'
  * @property {string} url
  */
 
+/**
+ * @typedef {'insecure' | 'broken' | 'secure' | 'blocked-mixed-active' | 'loaded-mixed-active' | 'blocked-mixed-display' | 'loaded-mixed-display' | 'ssl-3' | 'week-cert' | 'user-overridden'} SecurityState
+ */
+
+/**
+ * @param {import('svelte/store').Readable<number>} store
+ */
+export function humanSecurityInfo(store) {
+  return derived(store, (store) => {
+    /** @type {Set<SecurityState>} */
+    const status = new Set()
+
+    if (store & Ci.nsIWebProgressListener.STATE_IS_INSECURE) {
+      status.add('insecure')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_IS_BROKEN) {
+      status.add('broken')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_IS_SECURE) {
+      status.add('secure')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_BLOCKED_MIXED_ACTIVE_CONTENT) {
+      status.add('blocked-mixed-active')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_LOADED_MIXED_ACTIVE_CONTENT) {
+      status.add('loaded-mixed-active')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_BLOCKED_MIXED_DISPLAY_CONTENT) {
+      status.add('blocked-mixed-display')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_LOADED_MIXED_DISPLAY_CONTENT) {
+      status.add('loaded-mixed-display')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_USES_SSL_3) {
+      status.add('ssl-3')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_USES_WEAK_CRYPTO) {
+      status.add('week-cert')
+    }
+    if (store & Ci.nsIWebProgressListener.STATE_CERT_USER_OVERRIDDEN) {
+      status.add('user-overridden')
+    }
+
+    return status
+  })
+}
+
 /**
  * Autocomplete that should take under a milisecond to evaluate. There will be
  * no debouncing on the user's input
@@ -69,14 +116,16 @@ function slowAutocomplete(input) {
  * bits and bobs. Heavily based on mozilla's code. I did not
  * come up with these shenanagans
  *
- * @param {HTMLInputElement} inputElement
+ * @param {HTMLInputElement?} inputElement
  */
 export function performCursedUrlStyling(inputElement) {
   /**
    * Manual currying!
    */
   return () => {
     try {
+      if (!inputElement) return
+
       // @ts-expect-error - shenanagans !== type checking :(
       const /** @type {nsIEditorType} */ editor = inputElement.editor
       const /** @type {nsISelectionControllerType} */ controller =

apps/content/src/browser/windowApi/WebsiteView.js

@@ -322,7 +322,7 @@ class TabProgressListener {
    * @returns {void}
    */
   onSecurityChange(aWebProgress, aRequest, aState) {
-    // console.log('onSecurityChange')
+    this.view.events.emit('securityChange', aState)
   }
 
   /**

libs/link/package.json

@@ -12,6 +12,7 @@
     "mitt": "^3.0.1"
   },
   "devDependencies": {
+    "@amadeus-it-group/tansu": "^1.0.0",
     "gecko-types": "github:quark-platform/gecko-types",
     "zora": "^5.2.0"
   }

libs/link/types/windowApi/WebsiteView.d.ts

@@ -26,6 +26,7 @@ declare type WebsiteViewEvents = {
   changeTitle: string
   locationChange: WebsiteViewLocationChangeProperties
   themeChange: OklchTheme
+  securityChange: number
 }
 
 declare type WebsiteView = {