Refactor login page scripts & styles into modules and remove stuff broken by Twitter updates

Browser/TweetDeckBrowser.cs

@@ -136,10 +136,6 @@ private void browser_FrameLoadStart(object sender, FrameLoadStartEventArgs e) {
 			if (frame.IsMain) {
 				string url = frame.Url;
 
-				if (TwitterUrls.IsTwitter(url)) {
-					CefScriptExecutor.RunFile(frame, "twitter.js");
-				}
-
 				if (!TwitterUrls.IsTwitterLogin2Factor(url)) {
 					frame.ExecuteJavaScriptAsync(TwitterUtils.BackgroundColorOverride);
 				}
@@ -165,6 +161,9 @@ private void browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e) {
 						CefScriptExecutor.RunFile(frame, "introduction.js");
 					}
 				}
+				else if (TwitterUrls.IsTwitter(url)) {
+					CefScriptExecutor.RunBootstrap(frame, "login", "login.css");
+				}
 
 				CefScriptExecutor.RunFile(frame, "update.js");
 			}

Resources/Content/.all.js

@@ -51,6 +51,7 @@ import setup_tweet_context_menu from "./features/setup_tweet_context_menu.js";
 import setup_tweetduck_account_bamboozle from "./features/setup_tweetduck_account_bamboozle.js";
 import setup_video_player from "./features/setup_video_player.js";
 import skip_pre_login_page from "./features/skip_pre_login_page.js";
+import hide_cookie_bar from "./login/hide_cookie_bar.js";
 
 const globalFunctions = [
 	window.TDGF_applyROT13,

Resources/Content/login/hide_cookie_bar.js

@@ -0,0 +1,33 @@
+/**
+ * Calls a callback once an element exists.
+ * @param {string} selector
+ * @param {function(HTMLElement)} callback
+ */
+const triggerWhenExists = function(selector, callback) {
+	const id = window.setInterval(function() {
+		const ele = document.querySelector(selector);
+		
+		if (ele && callback(ele)) {
+			window.clearInterval(id);
+		}
+	}, 5);
+};
+
+/**
+ * Hides cookie bar.
+ */
+export default function() {
+	triggerWhenExists("a[href^='https://help.twitter.com/rules-and-policies/twitter-cookies']", function(cookie) {
+		while (!!cookie) {
+			if (cookie.offsetHeight > 30) {
+				cookie.remove();
+				return true;
+			}
+			else {
+				cookie = cookie.parentNode;
+			}
+		}
+		
+		return false;
+	});
+};

Resources/Content/login/setup_document_attributes.js

@@ -0,0 +1,8 @@
+export default function() {
+	if (location.pathname === "/login") {
+		document.documentElement.setAttribute("login", "");
+	}
+	else if (location.pathname === "/logout") {
+		document.documentElement.setAttribute("logout", "");
+	}
+};

Resources/Content/styles/login.css

@@ -0,0 +1,3 @@
+html[login] *, html[logout] * {
+  border-radius: 0 !important;
+}

Resources/Scripts/styles/twitter.css

@@ -1,85 +0,0 @@
-/*********************/
-/* Center everything */
-/*********************/
-
-#doc {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  position: absolute;
-  display: table;
-}
-
-#page-outer {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-#page-container {
-  padding: 0 20px !important;
-  width: 100% !important;
-  box-sizing: border-box !important;
-}
-
-.page-canvas {
-  margin: 0 auto !important;
-}
-
-.ResponsiveLayout {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
-
-.Section {
-  padding: 36px !important;
-}
-
-/*******************/
-/* General styling */
-/*******************/
-
-* {
-  border-radius: 0 !important;
-}
-
-html, body {
-  overflow-y: auto !important;
-}
-
-.page-canvas, div[tweetduck-login-wrapper], body.ResponsiveLayout > div.PageContainer > div.Section {
-  box-shadow: 0 0 150px rgba(255, 255, 255, 0.3) !important;
-}
-
-.topbar, .TopNav {
-  display: none !important;
-}
-
-input {
-  padding: 5px 8px 4px !important;
-}
-
-button[type='submit'] {
-  border: 1px solid rgba(0, 0, 0, 0.3) !important;
-}
-
-/****************************/
-/* General per-page styling */
-/****************************/
-
-html[login] div[tweetduck-login-wrapper] {
-  /* vertically center page & fix colors */
-  margin-top: calc(50vh - 237px);
-  padding: 26px 1.1vw;
-  max-width: 450px;
-  background-color: white;
-}
-
-html[login] #tweetduck-helper:hover {
-  text-decoration: underline;
-}
-
-html[logout] {
-  overflow: hidden !important;
-}

Resources/Scripts/twitter.js

@@ -1,101 +0,0 @@
-(function(){
-  const isLogin = location.pathname === "/login";
-  const isLogout = location.pathname === "/logout";
-  
-  //
-  // Function: Inject custom CSS into the page.
-  //
-  const injectCSS = function(){
-    if (!document.head){
-      setTimeout(injectCSS, 5);
-      return;
-    }
-    
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = "https://abs.twimg.com/tduck/css";
-    
-    document.head.appendChild(link);
-    
-    if (isLogin){
-      document.documentElement.setAttribute("login", "");
-    }
-    else if (isLogout){
-      document.documentElement.setAttribute("logout", "");
-    }
-  };
-  
-  setTimeout(injectCSS, 1);
-  
-  //
-  // Function: Trigger once element exists.
-  //
-  const triggerWhenExists = function(query, callback){
-    let id = window.setInterval(function(){
-      const ele = document.querySelector(query);
-      
-      if (ele && callback(ele)){
-        window.clearInterval(id);
-      }
-    }, 5);
-  };
-  
-  //
-  // Block: Add profile import button & enable custom styling, make page links external on old login page.
-  //
-  if (isLogin){
-    document.addEventListener("DOMContentLoaded", function(){
-      triggerWhenExists("main h1", function(heading){
-        heading.parentNode.parentNode.setAttribute("tweetduck-login-wrapper", "");
-        return true;
-      });
-      
-      triggerWhenExists("a[href='/i/flow/signup']", function(texts){
-        texts = texts.parentNode;
-        
-        let link = texts.childNodes[0];
-        let separator = texts.childNodes[1];
-        
-        if (link && separator){
-          texts.classList.add("tweetduck-login-links");
-          
-          link = link.cloneNode(false);
-          link.id = "tweetduck-helper";
-          link.href = "#";
-          link.innerText = "Import TweetDuck profile";
-          
-          texts.appendChild(separator.cloneNode(true));
-          texts.appendChild(link);
-          
-          link.addEventListener("click", function(){
-            $TD.openProfileImport();
-          });
-          
-          return true;
-        }
-        else{
-          return false;
-        }
-      });
-    });
-  }
-  
-  //
-  // Block: Hide cookie crap.
-  //
-  document.addEventListener("DOMContentLoaded", function(){
-    triggerWhenExists("a[href^='https://help.twitter.com/rules-and-policies/twitter-cookies']", function(cookie){
-      while(!!cookie){
-        if (cookie.offsetHeight > 30){
-          cookie.remove();
-          return true;
-        }
-        else{
-          cookie = cookie.parentNode;
-        }
-      }
-      
-      return false;
-    });
-  });
-})();

TweetDuck.csproj

@@ -323,6 +323,7 @@
     <None Include="app.config" />
     <None Include="packages.config" />
     <None Include="Resources\Content\styles\tweetdeck.css" />
+    <None Include="Resources\Content\styles\login.css" />
     <None Include="Resources\Images\avatar.png" />
     <None Include="Resources\Images\icon-muted.ico" />
     <None Include="Resources\Images\icon-small.ico" />
@@ -357,8 +358,6 @@
     <None Include="Resources\Scripts\imports\markup\introduction.html" />
     <None Include="Resources\Scripts\imports\scripts\plugins.base.js" />
     <None Include="Resources\Scripts\imports\styles\introduction.css" />
-    <None Include="Resources\Scripts\imports\styles\twitter.base.css" />
-    <None Include="Resources\Scripts\imports\styles\twitter.logout.css" />
     <None Include="Resources\Scripts\imports\styles\update.css" />
     <None Include="Resources\Scripts\introduction.js" />
     <None Include="Resources\Scripts\notification.js" />
@@ -368,8 +367,6 @@
     <None Include="Resources\Scripts\plugins.notification.js" />
     <None Include="Resources\Scripts\screenshot.js" />
     <None Include="Resources\Scripts\styles\notification.css" />
-    <None Include="Resources\Scripts\styles\twitter.css" />
-    <None Include="Resources\Scripts\twitter.js" />
     <None Include="Resources\Scripts\update.js" />
   </ItemGroup>
   <ItemGroup>
@@ -459,6 +456,8 @@
     <Content Include="Resources\Content\globals\prioritize_newest_event.js" />
     <Content Include="Resources\Content\globals\reload_columns.js" />
     <Content Include="Resources\Content\globals\show_tweet_detail.js" />
+    <Content Include="Resources\Content\login\hide_cookie_bar.js" />
+    <Content Include="Resources\Content\login\setup_document_attributes.js" />
     <Content Include="Resources\Scripts\bootstrap.js" />
   </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />