From 4f5e56bc55a056f36bdab8ae63e0cc735ecb78a0 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 8 Apr 2017 14:03:54 +0300
Subject: [PATCH] manage: don't flicker newUI sub-options

---
 manage.css  |  8 ++++++++
 manage.html |  4 ++--
 manage.js   | 21 ++++++++++++++-------
 3 files changed, 24 insertions(+), 9 deletions(-)
diff --git a/manage.css b/manage.css
index 1a9bbe36..a804cb55 100644
--- a/manage.css
+++ b/manage.css
@@ -306,6 +306,14 @@ summary {
   filter: grayscale(0);
 }
 
+#newUIoptions {
+  display: none;
+}
+
+.newUI #newUIoptions {
+  display: initial;
+}
+
 #newUIoptions label {
   display: flex;
   align-items: center;
diff --git a/manage.html b/manage.html
index 36ebeda0..2febad71 100644
--- a/manage.html
+++ b/manage.html
@@ -78,6 +78,7 @@
   <script src="apply.js"></script>
   <script src="dom.js"></script>
   <script src="localization.js"></script>
+  <script src="manage.js"></script>
 </head>
 
 <body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
@@ -112,7 +113,7 @@
   <div id="options">
     <h2 id="options-heading" i18n-text="optionsHeading"></h2>
     <label><input id="manage.newUI" type="checkbox"><span i18n-text="manageNewUI"></span></label>
-    <div id="newUIoptions" class="hidden">
+    <div id="newUIoptions">
       <label><input id="manage.newUI.favicons" type="checkbox"><span i18n-text="manageFavicons"></span></label>
       <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
@@ -172,7 +173,6 @@
 
 </svg>
 
-<script src="manage.js"></script>
 <script src="backup/fileSaveLoad.js"></script>
 <script src="msgbox/msgbox.js"></script>
 
diff --git a/manage.js b/manage.js
index b6cfa652..941f0327 100644
--- a/manage.js
+++ b/manage.js
@@ -1,12 +1,17 @@
 /* global messageBox */
 'use strict';
 
-const installed = $('#installed');
+let installed;
+
 const newUI = {
   enabled: prefs.get('manage.newUI'),
   favicons: prefs.get('manage.newUI.favicons'),
   targets: prefs.get('manage.newUI.targets'),
+  renderClass() {
+    document.documentElement.classList.toggle('newUI', newUI.enabled);
+  },
 };
+newUI.renderClass();
 
 const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
 const GET_FAVICON_URL = 'https://www.google.com/s2/favicons?domain=';
@@ -14,10 +19,12 @@ const OWN_ICON = chrome.app.getDetails().icons['16'];
 
 const handleEvent = {};
 
-
-getStylesSafe()
-  .then(showStyles)
-  .then(initGlobalEvents);
+Promise.all([
+  getStylesSafe(),
+  onDOMready().then(initGlobalEvents),
+]).then(([styles]) => {
+  showStyles(styles);
+});
 
 
 chrome.runtime.onMessage.addListener(msg => {
@@ -34,6 +41,7 @@ chrome.runtime.onMessage.addListener(msg => {
 
 
 function initGlobalEvents() {
+  installed = $('#installed');
   installed.onclick = handleEvent.entryClicked;
   $('#check-all-updates').onclick = checkUpdateAll;
   $('#apply-all-updates').onclick = applyUpdateAll;
@@ -371,9 +379,8 @@ function switchUI({styleOnly} = {}) {
 
   Object.assign(newUI, {enabled, favicons, targets});
 
-  installed.classList.toggle('newUI', enabled);
+  newUI.renderClass();
   installed.classList.toggle('has-favicons', favicons);
-  $('#newUIoptions').classList.toggle('hidden', !enabled);
   $('#style-overrides').textContent = `
     .newUI .targets {
       max-height: ${newUI.targets * 18}px;
