Add browser icons (#4239)

* Add popular browser icons

* Adjust fallback icon color for dark mode

* Add changelog

* Add MIUI browser logo

* Fix Edge and MacOS in seeds

* Add smaller browser logos

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 ## Unreleased
 
 ### Added
+- Icons for browsers plausible/analytics#4239
 
 ### Removed
 

assets/js/dashboard/stats/devices/index.js

@@ -7,6 +7,27 @@ import * as url from '../../util/url'
 import { VISITORS_METRIC, PERCENTAGE_METRIC, maybeWithCR } from '../reports/metrics';
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
 
+// Icons copied from https://github.com/alrra/browser-logos
+const BROWSER_ICONS = {
+  'Chrome': 'chrome.svg',
+  'Safari': 'safari.svg',
+  'Firefox': 'firefox.svg',
+  'Microsoft Edge': 'edge.svg',
+  'Vivaldi': 'vivaldi.svg',
+  'Opera': 'opera.svg',
+  'Samsung Browser': 'samsung-internet.svg',
+  'Chromium': 'chromium.svg',
+  'UC Browser': 'uc.svg',
+  'Yandex Browser': 'yandex.png', // Only PNG available in browser-logos
+  // Logos underneath this line are not available in browser-logos. Grabbed from random places on the internets.
+  'DuckDuckGo Privacy Browser': 'duckduckgo.svg',
+  'MIUI Browser': 'miui.webp',
+  'Huawei Browser Mobile': 'huawei.png',
+  'QQ Browser': 'qq.png',
+  'Ecosia': 'ecosia.png',
+  'vivo Browser': 'vivo.png'
+}
+
 function Browsers({ query, site, afterFetchData }) {
   function fetchData() {
     return api.get(url.apiPath(site, '/browsers'), query)
@@ -19,6 +40,17 @@ function Browsers({ query, site, afterFetchData }) {
     }
   }
 
+  function renderIcon(listItem) {
+    const filename = BROWSER_ICONS[listItem.name] || 'fallback.svg'
+
+    return (
+      <img
+        src={`/images/icon/browser/${filename}`}
+        className="w-4 h-4 mr-2"
+      />
+    )
+  }
+
   return (
     <ListReport
       fetchData={fetchData}
@@ -27,6 +59,7 @@ function Browsers({ query, site, afterFetchData }) {
       keyLabel="Browser"
       metrics={maybeWithCR([VISITORS_METRIC, PERCENTAGE_METRIC], query)}
       query={query}
+      renderIcon={renderIcon}
     />
   )
 }

assets/js/dashboard/stats/locations/index.js

@@ -16,7 +16,7 @@ function Countries({query, site, onClick, afterFetchData}) {
   }
 
   function renderIcon(country) {
-    return <span className="mr-1">{country.flag}</span>
+    return <span className="mr-2">{country.flag}</span>
   }
 
   function getFilterFor(listItem) {
@@ -49,7 +49,7 @@ function Regions({query, site, onClick, afterFetchData}) {
   }
 
   function renderIcon(region) {
-    return <span className="mr-1">{region.country_flag}</span>
+    return <span className="mr-2">{region.country_flag}</span>
   }
 
   function getFilterFor(listItem) {
@@ -82,7 +82,7 @@ function Cities({query, site, afterFetchData}) {
   }
 
   function renderIcon(city) {
-    return <span className="mr-1">{city.country_flag}</span>
+    return <span className="mr-2">{city.country_flag}</span>
   }
 
   function getFilterFor(listItem) {

assets/js/dashboard/stats/reports/list.js

@@ -18,7 +18,7 @@ const DATA_CONTAINER_HEIGHT = (ROW_HEIGHT + ROW_GAP_HEIGHT) * (MAX_ITEMS - 1) +
 const COL_MIN_WIDTH = 70
 
 function FilterLink({ filterQuery, onClick, children }) {
-  const className = classNames('max-w-max w-full flex md:overflow-hidden', {
+  const className = classNames('max-w-max w-full flex items-center md:overflow-hidden', {
     'hover:underline': !!filterQuery
   })
 
@@ -276,11 +276,7 @@ export default function ListReport(props) {
 
   function maybeRenderIconFor(listItem) {
     if (props.renderIcon) {
-      return (
-        <span className="pr-1">
-          {props.renderIcon(listItem)}
-        </span>
-      )
+      return props.renderIcon(listItem)
     }
   }
 

assets/js/dashboard/stats/sources/source-list.js

@@ -36,7 +36,7 @@ function AllSources(props) {
     return (
       <img
         src={`/favicon/sources/${encodeURIComponent(listItem.name)}`}
-        className="inline w-4 h-4 mr-2 -mt-px align-middle"
+        className="w-4 h-4 mr-2"
       />
     )
   }

priv/repo/seeds.exs

@@ -163,10 +163,10 @@ native_stats_range
       hostname: Enum.random(["en.dummy.site", "es.dummy.site", "dummy.site"]),
       timestamp: put_random_time.(date, index),
       referrer_source: Enum.random(["", "Facebook", "Twitter", "DuckDuckGo", "Google"]),
-      browser: Enum.random(["Edge", "Chrome", "Safari", "Firefox", "Vivaldi"]),
+      browser: Enum.random(["Microsoft Edge", "Chrome", "Safari", "Firefox", "Vivaldi"]),
       browser_version: to_string(Enum.random(0..50)),
       screen_size: Enum.random(["Mobile", "Tablet", "Desktop", "Laptop"]),
-      operating_system: Enum.random(["Windows", "macOS", "Linux"]),
+      operating_system: Enum.random(["Windows", "Mac", "Linux"]),
       operating_system_version: to_string(Enum.random(0..15)),
       pathname:
         Enum.random([