Add animation optimization to edit-design plugin and fix label margin

Resources/Plugins/edit-design/browser.js

@@ -11,6 +11,7 @@ enabled(){
     moveTweetActionsToRight: true,
     smallComposeTextSize: false,
     roundedScrollBars: false,
+    optimizeAnimations: true,
     avatarRadius: 10
   };
   
@@ -208,6 +209,11 @@ enabled(){
       this.css.insert(".scroll-styled-h::-webkit-scrollbar-thumb { border-radius: 0 }");
     }
     
+    if (this.config.optimizeAnimations){
+      this.css.insert(".app-content { will-change: transform }");
+      this.css.insert(".column-holder { will-change: transform }");
+    }
+    
     if (this.config.columnWidth[0] === '/'){
       let cols = this.config.columnWidth.slice(1);
       

Resources/Plugins/edit-design/modal.html

@@ -86,6 +86,16 @@
             <input data-td-key="roundedScrollBars" class="js-theme-checkbox touch-larger-label" type="checkbox">
             Rounded Scroll Bars
           </label>
+          
+          <!-- ADVANCED -->
+          
+          <label class="txt-uppercase touch-larger-label">
+            <b>Advanced</b>
+          </label>
+          <label class="checkbox">
+            <input data-td-key="optimizeAnimations" class="js-theme-checkbox touch-larger-label" type="checkbox">
+            Optimize Animations (uses more memory for smoother animations)
+          </label>
         </div>
         
         <div class="l-column mdl-column">
@@ -174,7 +184,7 @@
   }
   
   .td-modal-content label.checkbox {
-    margin: 0 16px 5px 4px;
+    margin: 0 0 5px 4px;
     cursor: pointer;
   }