Bump edit-design plugin version

Core/Bridge/TweetDeckBridge.cs

@@ -11,8 +11,8 @@ using TweetDuck.Resources;
 
 namespace TweetDuck.Core.Bridge{
     sealed class TweetDeckBridge{
-        public static string FontSizeClass;
-        public static string NotificationHeadContents;
+        public static string FontSize { get; private set; }
+        public static string NotificationHeadLayout { get; private set; }
 
         public static string LastHighlightedTweetUrl = string.Empty;
         public static string LastHighlightedQuoteUrl = string.Empty;
@@ -25,7 +25,7 @@ namespace TweetDuck.Core.Bridge{
         private static readonly Dictionary<string, string> SessionData = new Dictionary<string, string>(2);
 
         public static void ResetStaticProperties(){
-            FontSizeClass = NotificationHeadContents = null;
+            FontSize = NotificationHeadLayout = null;
             LastHighlightedTweetUrl = LastHighlightedQuoteUrl = LastHighlightedTweetAuthors = LastHighlightedTweetImages = string.Empty;
         }
 
@@ -56,12 +56,11 @@ namespace TweetDuck.Core.Bridge{
             });
         }
 
-        public void LoadFontSizeClass(string fsClass){
-            form.InvokeAsyncSafe(() => FontSizeClass = fsClass);
-        }
-
-        public void LoadNotificationHeadContents(string headContents){
-            form.InvokeAsyncSafe(() => NotificationHeadContents = headContents);
+        public void LoadNotificationLayout(string fontSize, string headLayout){
+            form.InvokeAsyncSafe(() => {
+                FontSize = fontSize;
+                NotificationHeadLayout = headLayout;
+            });
         }
 
         public void SetLastRightClickInfo(string type, string link){

Core/Handling/ContextMenuNotification.cs

@@ -48,7 +48,7 @@ namespace TweetDuck.Core.Handling{
             }
             
             if (HasDevTools){
-                model.AddSeparator();
+                AddSeparator(model);
                 AddDebugMenuItems(model);
             }
 

Core/Handling/DragHandlerBrowser.cs

@@ -4,11 +4,18 @@ using CefSharp;
 namespace TweetDuck.Core.Handling{
     sealed class DragHandlerBrowser : IDragHandler{
         public bool OnDragEnter(IWebBrowser browserControl, IBrowser browser, IDragData dragData, DragOperationsMask mask){
+            void TriggerDragStart(string type, string data = null){
+                browserControl.ExecuteScriptAsync("window.TDGF_onGlobalDragStart", type, data);
+            }
+
             if (dragData.IsLink){
-                browserControl.ExecuteScriptAsync("window.TDGF_onGlobalDragStart", "link", dragData.LinkUrl);
+                TriggerDragStart("link", dragData.LinkUrl);
+            }
+            else if (dragData.IsFragment){
+                TriggerDragStart("text", dragData.FragmentText.Trim());
             }
             else{
-                browserControl.ExecuteScriptAsync("window.TDGF_onGlobalDragStart", "unknown");
+                TriggerDragStart("unknown");
             }
 
             return false;

Core/Notification/FormNotificationBase.cs

@@ -15,7 +15,7 @@ namespace TweetDuck.Core.Notification{
     partial class FormNotificationBase : Form{
         protected static int FontSizeLevel{
             get{
-                switch(TweetDeckBridge.FontSizeClass){
+                switch(TweetDeckBridge.FontSize){
                     case "largest": return 4;
                     case "large": return 3;
                     case "small": return 1;

Core/Notification/Screenshot/FormNotificationScreenshotable.cs

@@ -22,7 +22,7 @@ namespace TweetDuck.Core.Notification.Screenshot{
             browser.LoadingStateChanged += (sender, args) => {
                 if (!args.IsLoading){
                     using(IFrame frame = args.Browser.MainFrame){
-                        ScriptLoader.ExecuteScript(frame, "window.setTimeout($TD_NotificationScreenshot.trigger, 129)", "gen:screenshot");
+                        ScriptLoader.ExecuteScript(frame, "window.setTimeout($TD_NotificationScreenshot.trigger, document.getElementsByTagName('iframe').length ? 267 : 67)", "gen:screenshot");
                     }
                 }
             };

Core/Notification/TweetNotification.cs

@@ -5,9 +5,7 @@ using TweetDuck.Resources;
 
 namespace TweetDuck.Core.Notification{
     sealed class TweetNotification{
-        private const string DefaultFontSizeClass = "medium";
-        private const string DefaultHeadContents = @"<meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='chrome=1'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/font.5ef884f9f9.css'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/app-dark.5631e0dd42.css'><style type='text/css'>body{background:#222426}</style>";
-
+        private const string DefaultHeadLayout = @"<html class='os-windows txt-size--14' data-td-font='medium' data-td-theme='dark'><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='chrome=1'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/font.5ef884f9f9.css'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/app-dark.5631e0dd42.css'><style type='text/css'>body{background:#222426}</style>";
         private static readonly string CustomCSS = ScriptLoader.LoadResource("styles/notification.css");
 
         private static string ExampleTweetHTML;
@@ -67,8 +65,7 @@ namespace TweetDuck.Core.Notification{
         public string GenerateHtml(string bodyClasses = null, bool enableCustomCSS = true){
             StringBuilder build = new StringBuilder();
             build.Append("<!DOCTYPE html>");
-            build.Append("<html class='os-windows txt-base-").Append(TweetDeckBridge.FontSizeClass ?? DefaultFontSizeClass).Append("'>");
-            build.Append("<head>").Append(TweetDeckBridge.NotificationHeadContents ?? DefaultHeadContents);
+            build.Append(TweetDeckBridge.NotificationHeadLayout ?? DefaultHeadLayout);
             
             if (enableCustomCSS){
                 build.Append("<style type='text/css'>").Append(CustomCSS).Append("</style>");

Program.cs

@@ -21,7 +21,7 @@ namespace TweetDuck{
         public const string BrandName = "TweetDuck";
         public const string Website = "https://tweetduck.chylex.com";
 
-        public const string VersionTag = "1.10";
+        public const string VersionTag = "1.10.1";
 
         public static readonly bool IsPortable = File.Exists("makeportable");
 

README.md

@@ -1,3 +1,11 @@
+# Support
+
+[Follow TweetDuck on Twitter](https://twitter.com/TryTweetDuck)  |  [Support via PayPal](https://paypal.me/chylex)  |  [Support via Patreon](https://www.patreon.com/chylex)
+
+<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/2W76v7hRmUe7NfaeUKq9K8Wq/chylex/TweetDuck'>
+  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/2W76v7hRmUe7NfaeUKq9K8Wq/chylex/TweetDuck.svg' />
+</a>
+
 # Build Instructions
 
 ### Setup

Resources/Guide/index.html

@@ -57,9 +57,10 @@
           <details>
             <summary id="emoji">How to add emoji to tweets</summary>
             <div>
-              <p>When writing a new tweet, click the heart icon to open an emoji picker. If you're writing a reply, click the <em>Popout</em> icon first to bring the reply into the large panel.</p>
+              <p>When writing a new tweet, click the heart icon to open an emoji picker. If you're writing a reply, click the <em>Popout</em> icon to bring the reply into the New Tweet panel.</p>
               <p>Then you can immediately type into the <em>Search</em> field, which accepts keywords separated by space. Pressing <em>Enter</em> in the search field (when not empty) will insert the first result into your tweet. Pressing <em>Escape</em> closes the emoji picker.</p>
-              <p>You can also use your mouse to scroll through the emoji, click on the emoji to insert them, and change the skin tone.</p>
+              <p>You can also use your mouse to change the skin tone, scroll through the emoji, and click on the emoji to insert them.</p>
+              <p>Typing <em>:emoji_name:</em> in the New Tweet panel will automatically search for an emoji using those keywords. If a single emoji is found, it will be inserted into the tweet (press <em>Backspace</em> or <em>Escape</em> to revert it). If multiple emojis are found, it will open the emoji picker where you can refine the search, or press <em>Escape</em> to go back.</p>
               <p>Emoji are provided by an official plugin called <em>Emoji keyboard</em>, which is enabled by default. The heart icon will not show if the plugin is disabled.</p>
               <img src="img/new-tweet-emoji.png" alt="">
             </div>

Resources/Plugins/edit-design/.meta

@@ -8,10 +8,10 @@ Edit layout & design
 chylex
 
 [version]
-1.1.3
+1.1.4
 
 [website]
 https://tweetduck.chylex.com
 
 [requires]
-1.7
+1.10.2

Resources/Plugins/edit-design/browser.js

@@ -331,7 +331,7 @@ enabled(){
     this.css.insert("#general_settings .cf { display: none !important }");
     this.css.insert("#settings-modal .js-setting-list li:nth-child(3) { border-bottom: 1px solid #ccd6dd }");
     
-    this.css.insert(".txt-base-smallest:not(.icon), .txt-base-largest:not(.icon) { font-size: "+this.config.fontSize+" !important }");
+    this.css.insert("html[data-td-font] { font-size: "+this.config.fontSize+" !important }");
     this.css.insert(".avatar { border-radius: "+this.config.avatarRadius+"% !important }");
     
     let notificationScrollbarColor = null;
@@ -507,7 +507,7 @@ enabled(){
     
     $TDP.injectIntoNotificationsBefore(this.$token, "css", "</head>", `
 <style type='text/css'>
-.txt-base-smallest:not(.icon), .txt-base-largest:not(.icon) { font-size: ${this.config.fontSize} !important }
+html[data-td-font] { font-size: ${this.config.fontSize} !important }
 .avatar { border-radius: ${this.config.avatarRadius}% !important }
 
 ${this.config.revertIcons ? `

Resources/Plugins/reply-account/.meta

@@ -8,7 +8,7 @@ Custom reply account
 chylex
 
 [version]
-1.2.2
+1.2.3
 
 [website]
 https://tweetduck.chylex.com
@@ -20,4 +20,4 @@ configuration.js
 configuration.default.js
 
 [requires]
-1.3.3
+1.8

Resources/Plugins/reply-account/browser.js

@@ -17,7 +17,7 @@ enabled(){
           return;
         }
         
-        var section = data.element.closest("section.column");
+        var section = data.element.closest("section.js-column");
         
         var column = TD.controller.columnManager.get(section.attr("data-column"));
         var header = $(".column-title", section);
@@ -35,7 +35,7 @@ enabled(){
         }
         
         try{
-          query = configuration.customSelector(column.getColumnType(), columnTitle, columnAccount, column);
+          query = configuration.customSelector(column.getColumnType(), columnTitle, columnAccount, column, section.hasClass("column-temp"));
         }catch(e){
           $TD.alert("warning", "Plugin reply-account has invalid configuration: customSelector threw an error: "+e.message);
           return;

Resources/Plugins/reply-account/configuration.default.js

@@ -21,11 +21,14 @@
    * This assumes a basic knowledge of JavaScript and jQuery.
    *
    * 1. Set value of 'useAdvancedSelector' to true
-   * 2. Uncomment the 'customSelector' function, and replace the example code with your desired behavior
+   * 2. Replace the example code in 'customSelector' function with your desired behavior
    *
    * The 'customSelector' function should return a string in one of the formats supported by 'defaultAccount'.
    * If it returns anything else (for example, false or undefined), it falls back to 'defaultAccount' behavior.
    *
+   * When writing a custom function, you can install Dev Tools to access the browser console:
+   *   https://tweetduck.chylex.com/guide/#dev-tools
+   *
    *
    * The 'type' parameter is TweetDeck column type. Here is the full list of column types, note that some are
    * unused and have misleading names (for example, Home columns are 'col_timeline' instead of 'col_home'):
@@ -46,28 +49,33 @@
    * contain other text (for example, the Scheduled column contains the string 'All accounts').
    *
    *
-   * The 'column' parameter is a TweetDeck column object. If you want to see all properties of the object,
-   * run the following code in your browser console, which will return an array containing all of your
-   * current column objects in order:
+   * The 'column' parameter is a TweetDeck column object. If you want to see the object structure,
+   * run the following code in the console for an array containing all of your column objects:
    *   TD.controller.columnManager.getAllOrdered()
    *
+   *
+   * The 'isTemporary' parameter is true if the column is not attached to the main column list,
+   * for example when clicking on a profile and viewing their tweets in a modal dialog.
+   *
    */
   
   useAdvancedSelector: false,
   
-  /*customSelector: function(type, title, account, column){
+  customSelector: function(type, title, account, column, isTemporary){
+    console.info(arguments); // Prints all arguments into the console
+    
     if (type === "col_search" && title === "TweetDuck"){
       // This is a search column that looks for 'TweetDuck' in the tweets,
       // search columns are normally linked to the preferred account
-      // so this forces the @TryTweetDuck account to be used instead.
+      // so this forces the @TryTweetDuck account to be used instead
       return "@TryTweetDuck";
     }
     else if (type === "col_timeline" && account === "@chylexcz"){
       // This is a Home column of my test account @chylexcz,
-      // but I want to reply to tweets from my official account.
+      // but I want to reply to tweets from my official account
       return "@chylexmc";
     }
     
     // otherwise returns 'undefined' which falls back to 'defaultAccount' behavior
-  }*/
+  }
 }

Resources/Scripts/code.js

@@ -14,6 +14,11 @@
   //
   var onAppReady = [];
   
+  //
+  // Variable: DOM HTML element.
+  //
+  var doc = document.documentElement;
+  
   //
   // Variable: DOM object containing the main app element.
   //
@@ -258,49 +263,62 @@
   })();
   
   //
-  // Function: Retrieves the tags to be put into <head> for notification HTML code.
+  // Block: Hook into settings object to detect when the settings change, and update html attributes and notification layout.
   //
-  var getNotificationHeadContents = function(){
-    let tags = [];
+  (function(){
+    let refreshSettings = function(){      
+      let fontSizeName = TD.settings.getFontSize();
+      let themeName = TD.settings.getTheme();
       
-    $(document.head).children("link[rel='stylesheet']:not([title]),link[title='"+TD.settings.getTheme()+"'],meta[charset],meta[http-equiv]").each(function(){
-      tags.push($(this)[0].outerHTML);
+      let tags = [
+        `<html class='os-windows ${(doc.getAttribute("class").match(/txt-\S+/) || [ "txt-size--14" ])[0]}' data-td-font='${fontSizeName}' data-td-theme='${themeName}'><head>`
+      ];
+      
+      $(document.head).children("link[rel='stylesheet']:not([title]),link[title='"+themeName+"'],meta[charset],meta[http-equiv]").each(function(){
+        tags.push($(this)[0].outerHTML);
+      });
+      
+      tags.push("<style type='text/css'>");
+      tags.push("body { background: "+getClassStyleProperty("column", "background-color")+" }"); // set background color
+      tags.push("a[data-full-url] { word-break: break-all }"); // break long urls
+      tags.push(".media-item, .media-preview { border-radius: 1px !important }"); // square-ify media
+      tags.push(".quoted-tweet { border-radius: 0 !important }"); // square-ify quoted tweets
+      tags.push(".activity-header { align-items: center !important; margin-bottom: 4px }"); // tweak alignment of avatar and text in notifications
+      tags.push(".activity-header .tweet-timestamp { line-height: unset }"); // fix timestamp position in notifications
+      
+      if (fontSizeName === "smallest"){
+        tags.push(".badge-verified:before { width: 13px !important; height: 13px !important; background-position: -223px -98px !important }"); // fix cut off badge icon
+      }
+      
+      tags.push("</style>");
+      
+      doc.setAttribute("data-td-font", fontSizeName);
+      doc.setAttribute("data-td-theme", themeName);
+      $TD.loadNotificationLayout(fontSizeName, tags.join(""));
+    };
+    
+    TD.settings.setFontSize = appendToFunction(TD.settings.setFontSize, function(name){
+      setTimeout(refreshSettings, 0);
     });
 
-    tags.push("<style type='text/css'>");
-    tags.push("body { background: "+getClassStyleProperty("column", "background-color")+" }"); // set background color
-    tags.push("a[data-full-url] { word-break: break-all }"); // break long urls
-    tags.push(".txt-base-smallest .badge-verified:before { width: 13px !important; height: 13px !important; background-position: -223px -98px !important }"); // fix cut off badge icon
-    tags.push(".media-item, .media-preview { border-radius: 1px !important }"); // square-ify media
-    tags.push(".quoted-tweet { border-radius: 0 !important }"); // square-ify quoted tweets
-    tags.push(".activity-header { align-items: center !important; margin-bottom: 4px }"); // tweak alignment of avatar and text in notifications
-    tags.push(".activity-header .tweet-timestamp { line-height: unset }"); // fix timestamp position in notifications
-    tags.push("</style>");
+    TD.settings.setTheme = appendToFunction(TD.settings.setTheme, function(name){
+      setTimeout(refreshSettings, 0);
+    });
 
-    return tags.join("");
-  };
+    onAppReady.push(refreshSettings);
+  })();
   
   //
-  // Block: Hook into settings object to detect when the settings change.
+  // Block: Fix OS name.
   //
-  TD.settings.setFontSize = appendToFunction(TD.settings.setFontSize, function(name){
-    $TD.loadFontSizeClass(name);
-  });
+  if (ensurePropertyExists(TD, "util", "getOSName")){
+    TD.util.getOSName = function(){
+      return "windows";
+    };
     
-  TD.settings.setTheme = appendToFunction(TD.settings.setTheme, function(name){
-    document.documentElement.setAttribute("data-td-theme", name);
-    
-    setTimeout(function(){
-      $TD.loadNotificationHeadContents(getNotificationHeadContents());
-    }, 0);
-  });
-  
-  onAppReady.push(function(){
-    document.documentElement.setAttribute("data-td-theme", TD.settings.getTheme());
-    
-    $TD.loadFontSizeClass(TD.settings.getFontSize());
-    $TD.loadNotificationHeadContents(getNotificationHeadContents());
-  });
+    doc.classList.remove("os-");
+    doc.classList.add("os-windows");
+  }
   
   //
   // Block: Enable popup notifications.
@@ -580,7 +598,7 @@
           setImportantProperty(selectedTweet.find(".js-media-preview-container"), "margin-bottom", "4px");
           selectedTweet.find(".js-translate-call-to-action").first().remove();
           selectedTweet.find(".js-tweet").first().nextAll().remove();
-          selectedTweet.find("footer").last().prevUntil(":not(.txt-mute.txt-small)").addBack().remove(); // footer, date, location
+          selectedTweet.find("footer").last().prevUntil(":not(.txt-mute)").addBack().remove(); // footer, date, location
         }
         else{
           setImportantProperty(selectedTweet.find(".js-media-preview-container"), "margin-bottom", "10px");
@@ -684,7 +702,7 @@
     let isDraggingValid = false;
     
     window.TDGF_onGlobalDragStart = function(type, data){
-      isDraggingValid = type === "link" && tweetRegex.test(data);
+      isDraggingValid = (type === "link" || type === "text") && tweetRegex.test(data);
     };
     
     app.delegate("section.js-column", {
@@ -796,11 +814,13 @@
   });
   
   //
-  // Block: Make middle click on tweet reply icon open the compose drawer.
+  // Block: Make middle click on tweet reply icon open the compose drawer. Only works for non-temporary columns.
   //
-  app.delegate(".js-reply-action", "mousedown", function(e){
+  app.delegate(".js-reply-action", "auxclick", function(e){
     if (e.which === 2){
-      if ($("[data-drawer='compose']").hasClass("is-hidden")){
+      let column = $(this).closest(".js-column");
+      
+      if (column && column.hasClass("column") && $("[data-drawer='compose']").hasClass("is-hidden")){
         $(document).trigger("uiDrawerShowDrawer", {
           drawer: "compose",
           withAnimation: true

Resources/Scripts/pages/example.html

@@ -3,7 +3,7 @@
     <div class="js-tweet tweet">
       <header class="tweet-header">
         <time class="tweet-timestamp js-timestamp pull-right txt-mute">
-          <a target="_blank" rel="url" href="https://twitter.com/chylexmc" class="txt-small">0s</a>
+          <a target="_blank" rel="url" href="https://twitter.com/chylexmc" class="txt-size-variable--12">0s</a>
         </time>
         <a target="_blank" rel="user" href="https://twitter.com/chylexmc" class="account-link link-complex block">
           <div class="obj-left item-img tweet-img">

Resources/Scripts/styles/browser.css

@@ -38,11 +38,19 @@
 /* Square-ify stuff */
 /********************/
 
-.btn, .mdl, .mdl-content, .app-search-fake, .app-search-input, .popover, .lst-modal, .media-item, .media-preview, .tooltip-inner {
+.btn, .mdl, .mdl-content, .app-search-fake, .app-search-input, .popover, .lst-modal, .tooltip-inner {
   border-radius: 1px !important;
 }
 
-.compose-text-container, .dropdown-menu, .list-item-last, .quoted-tweet, .input-group-button, input, textarea, select, .prf-header, .accs li, .accs img {
+.media-item, .media-preview, .media-image, .js-media-added .br--4 {
+  border-radius: 1px !important;
+}
+
+.compose-text-container, .compose-reply-tweet, .compose-message-recipient-input-container, .compose-message-recipient, .compose-media-bar-holder, .media-grid-container {
+  border-radius: 0 !important;
+}
+
+.dropdown-menu, .list-item-last, .quoted-tweet, .input-group-button, input, textarea, select, .prf-header, .accs li, .accs img {
   border-radius: 0 !important;
 }
 
@@ -160,14 +168,14 @@ a[data-full-url] {
   vertical-align: 10%;
 }
 
-.txt-base-smallest .sprite-verified-mini {
+html[data-td-font='smallest'] .sprite-verified-mini {
   /* fix cut off badge when zoomed in */
   width: 13px !important;
   height: 13px !important;
   background-position: -223px -99px !important;
 }
 
-.txt-base-smallest .badge-verified:before {
+html[data-td-font='smallest'] .badge-verified:before {
   /* fix cut off badge in notifications */
   width: 13px !important;
   height: 13px !important;
@@ -189,9 +197,14 @@ a[data-full-url] {
   cursor: pointer;
 }
 
-/********************************************************************/
-/* Fix glaring visual issues because twitter is fucking incompetent */
-/********************************************************************/
+.is-inverted-dark .inline-reply .btn:hover {
+  /* Reply buttons in modals are bork */
+  background-color: transparent;
+}
+
+/***************************************************************/
+/* Fix glaring visual issues that twitter hasn't fixed yet smh */
+/***************************************************************/
 
 .column-nav-link .attribution {
   /* fix cut off account names */
@@ -203,6 +216,17 @@ a[data-full-url] {
   margin: 20px 0 0 !important;
 }
 
+.compose-reply-tweet-remove {
+  /* fix close reply button position; this would make sense if the reply account name became full size, but it still cuts off where the button used to be */
+  top: 3px !important;
+  right: -2px !important;
+}
+
+#account-safeguard-checkbox, #inline-account-safeguard-checkbox {
+  /* fix "Ready to Tweet/send" alignment with the checkbox */
+  vertical-align: -15%;
+}
+
 /************************************************/
 /* Fix tooltips in navigation and column header */
 /************************************************/