update millix bar code

chrome/browser/resources/millix/millix_bar.html

@@ -222,6 +222,10 @@
       </div>
     </div>
   </div>
+  <!--UNCOMMENT ON DEV MODE ONLY
+  <iframe id="frame_millix_api" src="./millix_ws.html" class="hidden-element"
+    onload="millix_bar.onApiFrameReady()"></iframe>
+  -->
   <iframe id="frame_millix_api" src="chrome-untrusted://millix-ws/" class="hidden-element"
     onload="millix_bar.onApiFrameReady()"></iframe>
 </body>

chrome/browser/resources/millix/millix_bar.js

 let CHILD_FRAME_ID = 'chrome-untrusted://millix-ws/'
 
-// UNCOMMENT ON TEST MODE ONLY
+// UNCOMMENT ON DEV MODE ONLY
 /*
 CHILD_FRAME_ID = "*";
 const cr = {
@@ -21,9 +21,10 @@ const NODE_SIGNATURE = '4d9yMgPRHhFYJ85GuAQcZ1TW7VZkgofY5PhyK7A8rNjtggVUCrFh2nxH
 setTimeout(() => {
     millix_bar.connectToWallet({ node_id: NODE_ID, node_signature: NODE_SIGNATURE })
     millix_bar.activateWallet()
+    millix_bar.refreshThemeStyles({ is_dark_theme: true })
 }, 1000)
 */
-// END TEST
+// END DEV MODE BLOCK
 
 cr.define('millix_bar', function () {
     'use strict';
@@ -43,6 +44,7 @@ cr.define('millix_bar', function () {
     let advertisementRenderingTimestampPaused = undefined;
     let advertisementPaymentTimestampLast = undefined;
     let sessionStart = undefined;
+    let isDarkTheme = false;
 
     function refreshThemeStyles(data) {
         if (data.is_dark_theme) {
@@ -50,6 +52,8 @@ cr.define('millix_bar', function () {
         } else {
             document.body.classList.remove('dark');
         }
+
+        isDarkTheme = data.is_dark_theme;
     }
 
     function onApiFrameReady() {
@@ -90,6 +94,23 @@ cr.define('millix_bar', function () {
     function showNewAdvertisement(advertisement) {
         const $headline = $('#advertisement_headline');
         const $targetPhrase = $('#advertisement_deck');
+
+        if (walletLocked) {
+            $headline.text('');
+            $targetPhrase.text('');
+            $headline.prop("href", undefined);
+            $targetPhrase.prop("href", undefined);
+
+            $headline.prop("title", undefined);
+            $targetPhrase.prop("title", undefined);
+
+            $headline.off('click');
+            $targetPhrase.off('click');
+
+            advertisementRenderingTimestampStart = undefined;
+            return;
+        }
+
         !!advertisementPaymentTimestampLast && console.log("last ad payment", moment(new Date(advertisementPaymentTimestampLast)).fromNow())
         if (!advertisement || !advertisement.advertisement_url) {
             const aMinuteAgo = Date.now() - 60000;
@@ -110,8 +131,9 @@ cr.define('millix_bar', function () {
             }
 
             $headline.css('font-weight', 'normal');
-            $headline.css('color', 'lightgray');
-            $targetPhrase.css('color', 'lightgray');
+            $headline.css('color', isDarkTheme ? 'rgba(115,115,115,0.8)' : 'lightgray');
+            $targetPhrase.css('font-weight', 'normal');
+            $targetPhrase.css('color', isDarkTheme ? 'rgba(115,115,115,0.8)' : 'lightgray');
 
             $headline.prop("href", undefined);
             $targetPhrase.prop("href", undefined);
@@ -132,6 +154,7 @@ cr.define('millix_bar', function () {
         } else {
             $headline.css('font-weight', '');
             $headline.css('color', '');
+            $targetPhrase.css('font-weight', '');
             $targetPhrase.css('color', '');
 
             if ($(".arrow-icon").hasClass('open')) { //ads container not visible
@@ -201,10 +224,10 @@ cr.define('millix_bar', function () {
         fetchAdvertisementTimeout = setTimeout(() => fetchAdvertisement(), ADVERTISEMENT_ROTATION_TIME);
     }
 
-    function updateLastTransactionTimestamp(updateNow) {
+    function updateLastTransactionTimestamp(scheduleOnly) {
         clearTimeout(transactionTimestampUpdateTimeout);
 
-        if (updateNow) {
+        if (!scheduleOnly) {
             millixAPIFrame.contentWindow.postMessage({
                 type: 'get_last_transaction_timestamp'
             }, CHILD_FRAME_ID);
@@ -221,7 +244,7 @@ cr.define('millix_bar', function () {
         sessionStart = Date.now();
         advertisementPaymentTimestampLast = Date.now();
 
-        updateLastTransactionTimestamp(true);
+        updateLastTransactionTimestamp();
 
 
         $('#wallet_unlock').addClass('hidden');
@@ -387,12 +410,12 @@ cr.define('millix_bar', function () {
     }
 
     function onLastTransactionTimestampUpdate(data) {
-        if(!data.timestamp){
+        if (!data.timestamp) {
             advertisementPaymentTimestampLast = undefined;
         } else {
             advertisementPaymentTimestampLast = data.timestamp * 1000;
         }
-        updateLastTransactionTimestamp();
+        updateLastTransactionTimestamp(true);
     }
 
     function changeVolume(data) {
@@ -472,6 +495,7 @@ cr.define('millix_bar', function () {
         onApiFrameReady,
         onLastTransactionUpdate,
         onLastTransactionTimestampUpdate,
+        refreshThemeStyles,
         expandView,
         onTransaction,
         showNewAdvertisement,

chrome/browser/resources/millix/millix_ws.js

@@ -4,6 +4,9 @@ class _API {
     static HOST_TANGLED = 'https://localhost:15555';
     static TANGLED_API = `${_API.HOST_TANGLED}/api`;
     static PARENT_FRAME_ID = 'tangled://millix-bar';
+    // UNCOMMENT ON DEV MODE: NOTE REMOVE THE LINE ABOVE
+    // static PARENT_FRAME_ID = '*';
+    // END DEV MODE BLOCK
 
     constructor() {
         this.nodeID = undefined;
@@ -192,6 +195,7 @@ document.addEventListener('DOMContentLoaded', () => {
 let readStatHandlerID = null;
 let addressKeyIdentifier = null;
 function readStat() {
+    clearTimeout(readStatHandlerID);
     API.getNodeStat()
         .then(data => {
             window.parent.postMessage({ type: "node_stat", data }, _API.PARENT_FRAME_ID);

chrome/browser/ui/webui/millix/untrusted_millix_app.cc

@@ -40,7 +40,7 @@ UntrustedMillixAppUI::UntrustedMillixAppUI(content::WebUI* web_ui)
   untrusted_source->AddResourcePath("static/media/roboto_medium.woff", IDR_MILLIX_APP_ROBOTO_MEDIUM_WOFF);
   untrusted_source->AddResourcePath("static/media/roboto_medium.woff", IDR_MILLIX_APP_ROBOTO_MEDIUM_WOFF2);
   untrusted_source->AddResourcePath("static/media/roboto_regular.woff", IDR_MILLIX_APP_ROBOTO_REGULAR_WOFF);
-  untrusted_source->AddResourcePath("static/media/roboto_regular.woff", IDR_MILLIX_APP_ROBOTO_REGULAR_WOFF2);
+  untrusted_source->AddResourcePath("static/media/roboto_regular.woff2", IDR_MILLIX_APP_ROBOTO_REGULAR_WOFF2);
 
   untrusted_source->SetDefaultResource(IDR_MILLIX_APP_UNTRUSTED_HTML);