feat: add favicon support

extension/panel.css

@@ -8,14 +8,29 @@ html, body {
 }
 
 .tab {
-  border: solid grey 1px;
+  display: flex;
+  align-items: center;
+  border: solid #cfcfcf 1px;
   margin-bottom: 1px;
   padding-left: 2px;
   width: 100%;
 }
 
 .tab-title {
+  display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 90%;
+}
+
+.tab-favicon {
+  display: inline-block;
+  background-size: cover;
+  background-position: center;
+  width: 15px;
+  height: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
+  vertical-align: middle;
 }

src/Sidebar.purs

@@ -4,11 +4,11 @@ import Browser.Runtime as Runtime
 import Browser.Tabs (Tab, TabId, WindowId)
 import Browser.Tabs.OnUpdated (ChangeInfo(..))
 import Browser.Windows (getCurrent)
-import Control.Alternative (pure)
+import Control.Alternative (pure, (*>))
 import Control.Bind ((>=>))
 import Data.Foldable (traverse_)
 import Data.Function (flip)
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe(..), maybe)
 import Data.Monoid ((<>))
 import Data.Newtype (unwrap)
 import Data.Show (show)
@@ -18,7 +18,7 @@ import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
 import Effect.Class (liftEffect)
 import Effect.Console (log)
-import JQuery (JQuery, append, create, remove, select, setAttr, setText)
+import JQuery (JQuery, append, create, css, remove, select, setAttr, setText)
 import Prelude (Unit, bind, ($), discard)
 import PureTabs.Model (BackgroundEvent(..), SidebarEvent(..))
 
@@ -59,13 +59,21 @@ createTabElement tab' = do
   tabDiv <- create "<div>"
   setAttr "class" "tab" tabDiv
   setAttr "id" tab.id tabDiv
-  favicon <- create "<span class=\"favicon\">"
+  -- favicon
+  faviconDiv <- create "<div class=\"tab-favicon\">"
+  setFaviconUrl tab.favIconUrl faviconDiv
+  append faviconDiv tabDiv
+  -- title
   tabTitle <- create "<div class=\"tab-title\">"
   setText tab.title tabTitle
-  append favicon tabDiv
   append tabTitle tabDiv
   pure tabDiv
 
+setFaviconUrl :: Maybe String -> JQuery -> Effect Unit
+setFaviconUrl Nothing div = pure unit
+setFaviconUrl (Just favData) div = css {"background-image": favUrl} div
+  where favUrl = "url(" <> favData <> ")"
+
 deleteTabElement :: TabId -> Effect Unit
 deleteTabElement tabId = do
   div <- select ("#" <> show tabId)
@@ -80,6 +88,12 @@ updateTabInfo tid cinfo' tab' = do
   tabTitleDiv <- select ("#" <> (show tid) <> " > .tab-title")
   let
     newTitle = case cinfo.status of
-      Just "loading" -> "Loading ..."
-      _ -> tab.title
-  setText newTitle tabTitleDiv
+      Just "loading" -> Just "Loading ..."
+      -- only change the title if we did receive a new title
+      -- prevent some flickering when the status `complete` but the tab title
+      -- info is empty
+      _ -> cinfo.title 
+  maybe (pure unit) (\t -> setText t tabTitleDiv) newTitle
+
+  tabFaviconDiv <- select ("#" <> (show tid) <> " > .tab-favicon")
+  setFaviconUrl cinfo.favIconUrl tabFaviconDiv