deploy: 8a905e4

Author: phoenixide

LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js

@@ -46,6 +46,45 @@
         type: "setupBroadcast",
         broadcastChannel: window.LIVE_PREVIEW_BROADCAST_CHANNEL_ID,
         clientID});
+    let sentTitle, sentFavIconURL;
+
+    function convertImgToBase64(url, callback) {
+        let canvas = document.createElement('CANVAS');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        img.onload = function() {
+            canvas.height = img.height;
+            canvas.width = img.width;
+            ctx.drawImage(img, 0, 0);
+            const dataURL = canvas.toDataURL();
+            callback(dataURL);
+            canvas = null;
+        };
+        img.src = url;
+    }
+
+    setInterval(()=>{
+        const favIcon = document.querySelector("link[rel~='icon']");
+        const faviconUrl = favIcon && favIcon.href;
+        if(sentFavIconURL !== faviconUrl){
+            sentFavIconURL = faviconUrl;
+            convertImgToBase64(faviconUrl, function(base64) {
+                worker.postMessage({
+                    type: "updateTitleIcon",
+                    faviconBase64: base64
+                });
+            });
+        }
+
+        if(sentTitle!== document.title) {
+            sentTitle = document.title;
+            worker.postMessage({
+                type: "updateTitleIcon",
+                title: document.title
+            });
+        }
+    }, 1000);
 
     const WebSocketTransport = {
         _channelOpen: false,

LiveDevelopment/BrowserScripts/pageLoaderWorker.js

@@ -25,11 +25,13 @@
  */
 
 
+let _livePreviewNavigationChannel;
+
 function _setupBroadcastChannel(broadcastChannel, clientID) {
     if(!broadcastChannel){
         return;
     }
-    const _livePreviewNavigationChannel=new BroadcastChannel(broadcastChannel);
+    _livePreviewNavigationChannel=new BroadcastChannel(broadcastChannel);
     _livePreviewNavigationChannel.onmessage = (event) => {
         const type = event.data.type;
         switch (type) {
@@ -47,13 +49,23 @@ function _setupBroadcastChannel(broadcastChannel, clientID) {
     _sendOnlineHeartbeat();
     setInterval(()=>{
         _sendOnlineHeartbeat();
-    }, 1000);
+    }, 3000);
+}
+
+function updateTitleAndFavicon(event) {
+    _livePreviewNavigationChannel.postMessage({
+        type: 'UPDATE_TITLE_AND_ICON',
+        title: event.data.title,
+        faviconBase64: event.data.faviconBase64,
+        URL: location.href
+    });
 }
 
 onmessage = (event) => {
     const type = event.data.type;
     switch (type) {
     case 'setupBroadcast': _setupBroadcastChannel(event.data.broadcastChannel, event.data.clientID); break;
+    case 'updateTitleIcon': updateTitleAndFavicon(event); break;
     default: console.error("Live Preview page worker: received unknown event:", event);
     }
 };

LiveDevelopment/LiveDevMultiBrowser.js

@@ -69,8 +69,7 @@ define(function (require, exports, module) {
     // events
     const EVENT_OPEN_PREVIEW_URL = "openPreviewURL",
         EVENT_CONNECTION_CLOSE = "ConnectionClose",
-        EVENT_STATUS_CHANGE = "statusChange",
-        EVENT_LIVE_PREVIEW_CLICKED= "livePreviewClicked";
+        EVENT_STATUS_CHANGE = "statusChange";
 
     const Dialogs              = require("widgets/Dialogs"),
         DefaultDialogs       = require("widgets/DefaultDialogs"),
@@ -576,7 +575,10 @@ define(function (require, exports, module) {
                         _handleRelatedDocumentDeleted(msg.href);
                     })
                     .on(LiveDevProtocol.EVENT_LIVE_PREVIEW_CLICKED + ".livedev", function (event, msg) {
-                        exports.trigger(EVENT_LIVE_PREVIEW_CLICKED, msg);
+                        exports.trigger(LiveDevProtocol.EVENT_LIVE_PREVIEW_CLICKED, msg);
+                    })
+                    .on(LiveDevProtocol.EVENT_LIVE_PREVIEW_RELOAD + ".livedev", function (event, clients) {
+                        exports.trigger(LiveDevProtocol.EVENT_LIVE_PREVIEW_RELOAD, clients);
                     });
             } else {
                 console.error("LiveDevelopment._open(): No server active");
@@ -604,10 +606,12 @@ define(function (require, exports, module) {
         _createLiveDocumentForFrame(initialDoc);
 
         // start listening for requests
-        _server.start();
+        _server.start()
+            .then(()=>{
+                // open browser to the url
+                _open(initialDoc);
+            });
 
-        // open browser to the url
-        _open(initialDoc);
     }
 
     /**
@@ -920,7 +924,8 @@ define(function (require, exports, module) {
     exports.EVENT_OPEN_PREVIEW_URL = EVENT_OPEN_PREVIEW_URL;
     exports.EVENT_CONNECTION_CLOSE = EVENT_CONNECTION_CLOSE;
     exports.EVENT_STATUS_CHANGE = EVENT_STATUS_CHANGE;
-    exports.EVENT_LIVE_PREVIEW_CLICKED = EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_CLICKED = LiveDevProtocol.EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_RELOAD = LiveDevProtocol.EVENT_LIVE_PREVIEW_RELOAD;
 
     // Export public functions
     exports.open                = open;

LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -53,7 +53,8 @@ define(function (require, exports, module) {
     const LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME = "phoenix_live_preview_scripts_instrumented_345Tt96G4.js";
     const LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME = "pageLoaderWorker_345Tt96G4.js";
 
-    const EVENT_LIVE_PREVIEW_CLICKED = "livePreviewClicked";
+    const EVENT_LIVE_PREVIEW_CLICKED = "livePreviewClicked",
+        EVENT_LIVE_PREVIEW_RELOAD = "livePreviewReload";
 
     /**
      * @private
@@ -344,6 +345,7 @@ define(function (require, exports, module) {
      *      to the method.
      */
     function reload(ignoreCache, clients) {
+        exports.trigger(EVENT_LIVE_PREVIEW_RELOAD, clients);
         return _send(
             {
                 method: "Page.reload",
@@ -406,4 +408,5 @@ define(function (require, exports, module) {
     exports.LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME = LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME;
     exports.LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME = LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME;
     exports.EVENT_LIVE_PREVIEW_CLICKED = EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_RELOAD = EVENT_LIVE_PREVIEW_RELOAD;
 });

LiveDevelopment/main.js

@@ -292,6 +292,9 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_CLICKED, function (_event, clickDetails) {
             exports.trigger(exports.EVENT_LIVE_PREVIEW_CLICKED, clickDetails);
         });
+        MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_RELOAD, function (_event, clientDetails) {
+            exports.trigger(exports.EVENT_LIVE_PREVIEW_RELOAD, clientDetails);
+        });
 
     });
 
@@ -316,6 +319,7 @@ define(function main(require, exports, module) {
     exports.EVENT_OPEN_PREVIEW_URL = MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL;
     exports.EVENT_CONNECTION_CLOSE = MultiBrowserLiveDev.EVENT_CONNECTION_CLOSE;
     exports.EVENT_LIVE_PREVIEW_CLICKED = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_RELOAD = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_RELOAD;
     exports.EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = EVENT_LIVE_HIGHLIGHT_PREF_CHANGED;
 
     // Export public functions