favicon and title pass-through: improvements from #356, closes #342

- only add icons if in top frame, fix indent
- favicon: move icon and title logic to default_banner to allow overriding default behavior (eg. Webrecorder uses its own favicon)
- title: prepend original page title with 'pywb Live: ' or 'pywb Archived: ' in default banner to avoid confusion with actual site, also works for frameless mode.

pywb/static/default_banner.js

@@ -61,27 +61,36 @@ This file is part of pywb, https://github.com/webrecorder/pywb
 
     function set_banner(url, ts, is_live, title) {
         var capture_str;
+        var title_str;
 
         if (!ts) {
             return;
         }
 
+        var date_str = ts_to_date(ts, true);
+
         if (title) {
-            capture_str = '"' + title + '"';
+            capture_str = title;
         }  else {
             capture_str = url;
         }
 
+        title_str = capture_str;
         capture_str = "<b id='title_or_url'>" + capture_str + "</b>";
 
         if (is_live) {
+            title_str = " pywb Live: " + title_str;
             capture_str += "<i>Live on&nbsp;</i>";
         } else {
+            title_str += "pywb Archived: " + title_str;
             capture_str += "<i>Archived on&nbsp;</i>";
         }
 
-        capture_str += ts_to_date(ts, true);
+        title_str += " (" + date_str + ")";
+        capture_str += date_str;
+
         document.querySelector("#_wb_capture_info").innerHTML = capture_str;
+        window.document.title = title_str;
     }
 
     if (window.top != window) {
@@ -118,6 +127,25 @@ This file is part of pywb, https://github.com/webrecorder/pywb
                     return;
                 }
 
+                // favicon update
+                if (type === 'load') {
+                    var head = document.querySelector('head');
+                    var oldLink = document.querySelectorAll("link[rel*='icon']");
+                    for (var i = 0; i < oldLink.length; i++) {
+                        head.removeChild(oldLink[i]);
+                    }
+
+                    if (state.icons) {
+                        for (var i = 0; i < state.icons.length; i++) {
+                            var icon = state.icons[i];
+                            var link = document.createElement('link');
+                            link.rel = icon.rel;
+                            link.href = icon.href;
+                            head.appendChild(link);
+                        }
+                    }
+                }
+
                 set_banner(state.url, state.ts, state.is_live, title);
             });
         }

pywb/static/wb_frame.js

@@ -109,23 +109,6 @@ function ContentFrame(content_info) {
 
     this.handle_message = function(state) {
         var type = state.wb_type;
-        
-        if (type === 'load') {
-			window.document.title = state.title + ' ' + state.ts;
-			var head = document.querySelector('head');
-			var oldLink = document.querySelectorAll("link[rel*='icon']");
-			for (var i = 0; i < oldLink.length; i++) {
-				head.removeChild(oldLink[i]);
-			}
-			var len = state.icons.length;
-			for (var i = 0; i < len; i++) {
-				var icon = state.icons[i];
-				var link = document.createElement('link');
-				link.rel = icon.rel;
-				link.href = icon.href;
-				head.appendChild(link);
-			}
-		}
 
         if (type == "load" || type == "replace-url") {
             this.set_url(state);

pywb/static/wombat.js

@@ -3619,26 +3619,31 @@ var _WBWombat = function($wbwindow, wbinfo) {
                 return;
             }
 
-            var icons = [];
+            if ($wbwindow != $wbwindow.__WB_replay_top) {
-			var hicons = $wbwindow.document.querySelectorAll("link[rel*='icon']");
+                return;
-			for (var i = 0; i < hicons.length; i++) {
+            }
-				var hicon = hicons[i];
-				icons.push({
-					rel: hicon.rel,
-					href: wb_getAttribute.call(hicon, 'href')
-				})
-			}
 
-			var message = {
+            var icons = [];
-				"icons": icons,
+
-				"url": $wbwindow.WB_wombat_location.href,
+            var hicons = $wbwindow.document.querySelectorAll("link[rel*='icon']");
-				"ts": wbinfo.timestamp,
+            for (var i = 0; i < hicons.length; i++) {
-				"request_ts": wbinfo.request_ts,
+                var hicon = hicons[i];
-				"is_live": wbinfo.is_live,
+                    icons.push({
-				"title": $wbwindow.document ? $wbwindow.document.title : "",
+                    rel: hicon.rel,
-				"readyState": $wbwindow.document.readyState,
+                    href: wb_getAttribute.call(hicon, 'href')
-				"wb_type": "load"
+                })
-			}
+            }
+
+            var message = {
+                "icons": icons,
+                "url": $wbwindow.WB_wombat_location.href,
+                "ts": wbinfo.timestamp,
+                "request_ts": wbinfo.request_ts,
+                "is_live": wbinfo.is_live,
+                "title": $wbwindow.document ? $wbwindow.document.title : "",
+                "readyState": $wbwindow.document.readyState,
+                "wb_type": "load"
+            }
 
             send_top_message(message);
         }