fix split-btn with popup.stylesFirst (#1394)

global.css

@@ -326,17 +326,9 @@ body.resizing-v > * {
   content: '';
   border: var(--side) solid transparent;
   display: inline-block;
-}
-.split-btn-pedal:not(.up)::after {
   border-top: calc(var(--side) * 1.3) solid currentColor;
   vertical-align: bottom;
 }
-.split-btn-pedal.up::after {
-  border-bottom: calc(var(--side) * 1.3) solid currentColor;
-  vertical-align: top;
-  position: relative;
-  top: 1px;
-}
 .split-btn-pedal.active {
   box-shadow: inset 0 0 100px rgba(0, 0, 0, .2);
 }

popup.html

@@ -190,7 +190,7 @@
     <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
   </div>
 
-  <div class="actions">
+  <div class="actions" id="main-actions">
     <div id="disable-all-wrapper">
       <div class="main-controls">
         <label id="disableAll-label" i18n-text="disableAllStyles">
@@ -222,7 +222,7 @@
       <div class="split-btn">
         <button id="popup-manage-button" i18n-text="openManage"
                 data-href="manage.html" i18n-title="popupManageTooltip"></button
-        ><button class="split-btn-pedal up" i18n-menu-site="popupManageSiteStyles"></button>
+        ><button class="split-btn-pedal" i18n-menu-site="popupManageSiteStyles"></button>
       </div>
       <button id="popup-options-button" i18n-text="openOptions"></button>
       <button id="popup-wiki-button"

popup/popup.css

@@ -668,8 +668,8 @@ body.blocked .actions > .main-controls {
   flex-direction: row;
   padding: var(--outer-padding) 1px;
 }
-#popup-options .split-btn {
+#popup-options .split-btn > :first-child {
-  display: flex;
+  width: calc(100% - 16px);
 }
 #popup-options button {
   white-space: nowrap;
@@ -686,10 +686,36 @@ body.blocked .actions > .main-controls {
   flex: 1 1 auto;
   min-width: 2em;
 }
-#popup-manage-button ~ .split-btn-menu {
+html:not(.styles-last) #popup-manage-button ~ .split-btn-menu {
   bottom: 0;
   transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */
 }
+html:not(.styles-last) .split-btn-pedal::after {
+  border-top: var(--side) solid transparent;
+  border-bottom: calc(var(--side) * 1.3) solid currentColor;
+  vertical-align: top;
+  position: relative;
+  top: 1px;
+}
+.styles-last body,
+.styles-last #main-actions {
+  display: flex;
+  flex-direction: column;
+}
+.styles-last #installed,
+.styles-last #main-actions > :not(#popup-options) {
+  order: 1;
+  flex: 1 0;
+}
+.styles-last #main-actions {
+  margin-top: 0;
+}
+.styles-last #search-results {
+  order: 2;
+}
+.styles-last #installed {
+  border-top: 1px solid black;
+}
 
 /* confirm */
 

popup/popup.js

@@ -38,10 +38,8 @@ preinit.then(({frames, styles, url}) => {
 msg.onExtension(onRuntimeMessage);
 
 prefs.subscribe('popup.stylesFirst', (key, stylesFirst) => {
-  const actions = $('body > .actions');
+  document.documentElement.classList.toggle('styles-last', !stylesFirst);
-  const before = stylesFirst ? actions : actions.nextSibling;
+}, {runNow: true});
-  document.body.insertBefore(installed, before);
-});
 if (CHROME_POPUP_BORDER_BUG) {
   prefs.subscribe('popup.borders', toggleSideBorders, {runNow: true});
 }
@@ -126,12 +124,6 @@ async function initPopup(frames) {
     }
   };
 
-  if (!prefs.get('popup.stylesFirst')) {
-    document.body.insertBefore(
-      $('body > .actions'),
-      installed);
-  }
-
   for (const el of $$('link[media=print]')) {
     el.removeAttribute('media');
   }