Fix #65: Show vendor favicons in product listing.

src/background/extraction.js

@@ -17,11 +17,17 @@ import {validatePropType} from 'commerce/utils';
  * with normal page navigation, this is also run when the prices are being
  * updated in the background.
  *
- * @param {ExtractedProduct} extracted
+ * @param {ExtractedProduct} contentExtractedProduct
  * @param {MessageSender} sender
  *  The sender for the content script that extracted this product
  */
-export async function handleExtractedProductData(extractedProduct, sender) {
+export async function handleExtractedProductData(contentExtractedProduct, sender) {
+  // Fetch the favicon, which the content script cannot do itself.
+  const extractedProduct = {
+    ...contentExtractedProduct,
+    vendorFaviconUrl: sender.tab.favIconUrl,
+  };
+
   // Do nothing if the extracted product is missing fields.
   const result = validatePropType(extractedProduct, extractedProductShape);
   if (result !== undefined) {

src/browser_action/components/ProductCard.css

@@ -66,6 +66,13 @@
   grid-row: 2;
 }
 
+.product .details .vendor-favicon {
+  height: 16px;
+  margin-inline-end: 8px;
+  width: 16px;
+  vertical-align: -3px;
+}
+
 .product .details .latest-price {
   color: var(--grey-90);
   font-size: 16px;

src/browser_action/components/ProductCard.jsx

@@ -112,6 +112,9 @@ export default class ProductCard extends React.Component {
         <h3 className="title" title={product.title}>{product.title}</h3>
 
         <div className="details">
+          {product.vendorFaviconUrl && (
+            <img className="vendor-favicon" src={product.vendorFaviconUrl} alt="" />
+          )}
           <span className={`latest-price ${priceDifference < 0 ? 'price-decrease' : ''}`}>
             {latestPrice.amount.toFormat('$0.00')}
           </span>

src/state/migrations.js

@@ -31,6 +31,16 @@ const MIGRATIONS = [
   function initialExample(state) {
     return state;
   },
+
+  function addProductVendorFaviconUrl(state) {
+    return {
+      ...state,
+      products: state.products.map(product => ({
+        ...product,
+        vendorFaviconUrl: '',
+      })),
+    };
+  },
 ];
 
 // Actions

src/state/products.js

@@ -22,6 +22,7 @@ export const productShape = pt.shape({
   url: pt.string.isRequired,
   image: pt.string.isRequired,
   isDeleted: pt.bool.isRequired,
+  vendorFaviconUrl: pt.string.isRequired,
 });
 
 /**
@@ -35,6 +36,7 @@ export const extractedProductShape = pt.shape({
   image: pt.string.isRequired,
   price: pt.number.isRequired,
   date: pt.string.isRequired,
+  vendorFaviconUrl: pt.string,
 });
 
 
@@ -184,6 +186,7 @@ export function getProductFromExtracted(data) {
     title: data.title,
     url: data.url,
     image: data.image,
+    vendorFaviconUrl: data.vendorFaviconUrl || '',
     isDeleted: false,
   };
 }