Refactor browser info collection to use User-Agent Client Hints API

HTMLReport/modules/reportUI.js

@@ -20,22 +20,29 @@ export function displaySessionInfo(session) {
     const browserInfo = session.getBrowserInfo();
     const startDateTime = session.getStartDateTime();
 
+    const brand = browserInfo.brand || browserInfo.browser || 'N/A';
+    const model = browserInfo.model || '';
+    const browserLabel = model ? `${brand} (${model})` : brand;
+    const os = browserInfo.os || 'N/A';
+    const osVersion = browserInfo.osVersion || '';
+    const osLabel = osVersion ? `${os} ${osVersion}` : os;
+
     sessionInfo.innerHTML = `
         <div class="info-item">
             <span class="info-label">Start Date</span>
             <span class="info-value">${startDateTime.toLocaleString()}</span>
         </div>
         <div class="info-item">
             <span class="info-label">Browser</span>
-            <span class="info-value">${browserInfo.browser} ${browserInfo.browserVersion}</span>
+            <span class="info-value">${browserLabel}</span>
         </div>
         <div class="info-item">
-            <span class="info-label">Operating System</span>
-            <span class="info-value">${browserInfo.os}</span>
+            <span class="info-label">Version</span>
+            <span class="info-value">${browserInfo.browserVersion || 'N/A'}</span>
         </div>
         <div class="info-item">
-            <span class="info-label">Cookies</span>
-            <span class="info-value">${browserInfo.cookies ? 'Enabled' : 'Disabled'}</span>
+            <span class="info-label">Operating System</span>
+            <span class="info-value">${osLabel}</span>
         </div>
     `;
 }

background.js

@@ -311,14 +311,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             }
             sendResponse({
                 startDateTime: session.StartDateTime,
-                browserInfo: {
-                    browser: session.BrowserInfo.browser || "Chrome",
-                    browserVersion: session.BrowserInfo.browserVersion || chrome.runtime.getManifest().version,
-                    os: session.BrowserInfo.os || navigator.platform,
-                    osVersion: session.BrowserInfo.osVersion || navigator.userAgent,
-                    cookies: session.BrowserInfo.cookies || navigator.cookieEnabled,
-                    flashVersion: session.BrowserInfo.flashVersion || "N/A"
-                },
+                browserInfo: session.BrowserInfo,
                 annotations: session.annotations.map(annotation => ({
                     type: annotation.constructor.name,
                     name: annotation.name,
@@ -504,7 +497,7 @@ async function addAnnotation(type, name, imageURL) {
 }
 
 async function startSession() {
-    var systemInfo = getSystemInfo();
+    var systemInfo = await getSystemInfo();
     session = new Session(Date.now(), systemInfo);
     await saveSession();
 }
@@ -521,7 +514,7 @@ function exportSessionCSV() {
     var csvData = exportService.getCSVData();
 
     var browserInfo = session.getBrowserInfo();
-    var browserInfoString = browserInfo.browser + "_" + browserInfo.browserVersion;
+    var browserInfoString = (browserInfo.brand || browserInfo.browser || 'Chrome') + "_" + browserInfo.browserVersion;
 
     // Formatear la fecha correctamente
     const date = new Date(session.getStartDateTime());
@@ -552,7 +545,7 @@ function exportSessionJSon() {
     var jsonData = exportJSonService.getJSon(session);
 
     var browserInfo = session.getBrowserInfo();
-    var browserInfoString = browserInfo.browser + "_" + browserInfo.browserVersion;
+    var browserInfoString = (browserInfo.brand || browserInfo.browser || 'Chrome') + "_" + browserInfo.browserVersion;
 
     // Formatear la fecha correctamente
     const date = new Date(session.getStartDateTime());

jest.setup.js

@@ -22,13 +22,30 @@ global.chrome = {
 
 // Mock navigator properties used in browserInfo.js
 global.navigator = {
-  ...global.navigator, // Preserve existing navigator properties if any
+  ...global.navigator,
   platform: 'TestPlatform',
   userAgent: 'TestUserAgent/1.0',
   cookieEnabled: true,
+  language: 'es-ES',
+  userAgentData: {
+    platform: 'Windows',
+    brands: [
+      { brand: 'Google Chrome', version: '122' },
+      { brand: 'Chromium', version: '122' },
+      { brand: 'Not A;Brand', version: '99' }
+    ],
+    getHighEntropyValues: jest.fn(() => Promise.resolve({
+      fullVersionList: [
+        { brand: 'Google Chrome', version: '122.0.6261.112' },
+        { brand: 'Chromium', version: '122.0.6261.112' },
+        { brand: 'Not A;Brand', version: '99.0.0.0' }
+      ],
+      platformVersion: '10.0',
+      model: ''
+    }))
+  }
 };
 
-
 // Attempt to load the custom date.js library.
 // IMPORTANT: This path is relative to the project root.
 // Ensure 'lib/date.js' exists and this path is correct.

src/Session.js

@@ -1,17 +1,7 @@
 import { Bug, Note, Idea, Question } from './Annotation.js';
-import { getSystemInfo } from './browserInfo.js';
-
 export class Session {
   constructor(dateTime, browserInfo) {
-    // Check if provided browserInfo is sufficiently complete
-    if (browserInfo && typeof browserInfo.browser === 'string' && browserInfo.browser !== '' &&
-        typeof browserInfo.browserVersion === 'string' && browserInfo.browserVersion !== '' &&
-        typeof browserInfo.os === 'string' && browserInfo.os !== '') {
-        this.BrowserInfo = browserInfo;
-    } else {
-        // If browserInfo is missing, null, undefined, or incomplete, get current system info
-        this.BrowserInfo = getSystemInfo();
-    }
+    this.BrowserInfo = (browserInfo && typeof browserInfo === 'object') ? browserInfo : {};
     this.StartDateTime = dateTime || Date.now(); // Provide a fallback for dateTime
     this.annotations = [];
   }

src/browserInfo.js

@@ -1,10 +1,65 @@
-export function getSystemInfo() {
+export async function getSystemInfo() {
+    let brand = '';
+    let model = '';
+    let browserVersion = '';
+    let os = '';
+    let osVersion = '';
+
+    if (navigator.userAgentData) {
+        os = navigator.userAgentData.platform || '';
+
+        try {
+            const highEntropy = await navigator.userAgentData.getHighEntropyValues([
+                'fullVersionList',
+                'platformVersion',
+                'model'
+            ]);
+
+            const brands = highEntropy.fullVersionList || [];
+
+            // Find Chromium's version to use as reference for the real browser version
+            const chromiumEntry = brands.find(b => b.brand === 'Chromium');
+            const chromiumMajor = chromiumEntry ? chromiumEntry.version.split('.')[0] : null;
+
+            // Real browser brand: not Chromium, and has the same major version as Chromium
+            const significantBrand = brands.find(b =>
+                b.brand !== 'Chromium' &&
+                chromiumMajor !== null &&
+                b.version.split('.')[0] === chromiumMajor
+            );
+
+            if (significantBrand) {
+                brand = significantBrand.brand;
+                browserVersion = significantBrand.version;
+            } else if (chromiumEntry) {
+                brand = 'Chrome';
+                browserVersion = chromiumEntry.version;
+            }
+
+            osVersion = highEntropy.platformVersion || '';
+            model = highEntropy.model || '';
+        } catch (e) {
+            const brands = navigator.userAgentData.brands || [];
+            const chromiumEntry = brands.find(b => b.brand === 'Chromium');
+            const chromiumMajor = chromiumEntry ? chromiumEntry.version : null;
+            const significantBrand = brands.find(b =>
+                b.brand !== 'Chromium' && b.version === chromiumMajor
+            );
+            if (significantBrand) {
+                brand = significantBrand.brand;
+                browserVersion = significantBrand.version;
+            } else if (chromiumEntry) {
+                brand = 'Chrome';
+                browserVersion = chromiumEntry.version;
+            }
+        }
+    }
+
     return {
-        browser: "Chrome",
-        browserVersion: chrome.runtime.getManifest().version,
-        os: navigator.platform,
-        osVersion: navigator.userAgent,
-        cookies: navigator.cookieEnabled,
-        flashVersion: "N/A" // Flash ya no se usa en navegadores modernos
+        brand,
+        model,
+        browserVersion,
+        os,
+        osVersion
     };
-} 
+}

test/spec/browserInfo.test.js

@@ -3,10 +3,8 @@ import { getSystemInfo } from '../../src/browserInfo';
 describe('getSystemInfo', () => {
   let systemInfo;
 
-  beforeAll(() => {
-    // getSystemInfo relies on global mocks set in jest.setup.js
-    // We can call it once if the global mocks are static for these tests
-    systemInfo = getSystemInfo();
+  beforeAll(async () => {
+    systemInfo = await getSystemInfo();
   });
 
   it('should return an object', () => {
@@ -15,42 +13,34 @@ describe('getSystemInfo', () => {
   });
 
   it('should contain all expected keys', () => {
-    expect(systemInfo).toHaveProperty('browser');
+    expect(systemInfo).toHaveProperty('brand');
+    expect(systemInfo).toHaveProperty('model');
     expect(systemInfo).toHaveProperty('browserVersion');
     expect(systemInfo).toHaveProperty('os');
     expect(systemInfo).toHaveProperty('osVersion');
-    expect(systemInfo).toHaveProperty('cookies');
-    expect(systemInfo).toHaveProperty('flashVersion');
   });
 
-  it('should retrieve browser name correctly', () => {
-    expect(systemInfo.browser).toBe('Chrome'); // Hardcoded in function
+  it('should retrieve real browser brand (not Chromium or fake brand)', () => {
+    expect(systemInfo.brand).toBe('Google Chrome');
+    expect(systemInfo.brand).not.toBe('Chromium');
   });
 
-  it('should retrieve browser version from chrome.runtime.getManifest', () => {
-    // Assuming jest.setup.js mocks chrome.runtime.getManifest().version to '1.0.0'
-    expect(systemInfo.browserVersion).toBe('1.0.0');
+  it('should retrieve full browser version matching Chromium version', () => {
+    expect(systemInfo.browserVersion).toBe('122.0.6261.112');
   });
 
-  it('should retrieve OS platform from navigator.platform', () => {
-    // Assuming jest.setup.js mocks navigator.platform to 'TestPlatform'
-    expect(systemInfo.os).toBe('TestPlatform');
+  it('should retrieve OS platform from userAgentData', () => {
+    expect(systemInfo.os).toBe('Windows');
   });
 
-  it('should retrieve OS version from navigator.userAgent', () => {
-    // Assuming jest.setup.js mocks navigator.userAgent to 'TestUserAgent/1.0'
-    // The function extracts this specifically, so the test should reflect that.
-    // If getSystemInfo is more complex, this might need adjustment.
-    // For now, assuming it directly uses navigator.userAgent for osVersion.
-    expect(systemInfo.osVersion).toBe('TestUserAgent/1.0');
+  it('should retrieve OS version from userAgentData high entropy values', () => {
+    expect(systemInfo.osVersion).toBe('10.0');
   });
 
-  it('should retrieve cookie status from navigator.cookieEnabled', () => {
-    // Assuming jest.setup.js mocks navigator.cookieEnabled to true
-    expect(systemInfo.cookies).toBe(true);
-  });
-
-  it('should report Flash version as N/A', () => {
-    expect(systemInfo.flashVersion).toBe('N/A'); // Hardcoded in function
+  it('should not include screenResolution, language, timezone or cookies', () => {
+    expect(systemInfo).not.toHaveProperty('screenResolution');
+    expect(systemInfo).not.toHaveProperty('language');
+    expect(systemInfo).not.toHaveProperty('timezone');
+    expect(systemInfo).not.toHaveProperty('cookies');
   });
 });