From b804e39de635c50aa32d75ae62abae0f81cc4edd Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 19 Feb 2022 17:12:15 +0300
Subject: [PATCH] workaround for crbug.com/1288447

---
 edit.html        | 26 ++++++++++++++++++--------
 edit/edit.css    |  4 +---
 edit/edit.js     |  2 ++
 js/dom.js        |  7 -------
 manage.html      | 15 ++++++++-------
 manage/manage.js |  3 +++
 manage/sorter.js | 10 ++++++----
 7 files changed, 38 insertions(+), 29 deletions(-)
diff --git a/edit.html b/edit.html
index 146a3b7c..5da81492 100644
--- a/edit.html
+++ b/edit.html
@@ -62,7 +62,6 @@
     <script src="edit/sections-editor-section.js"></script>
     <script src="edit/sections-editor.js"></script>
     <script src="edit/usw-integration.js"></script>
-    <script src="edit/edit.js"></script>
 
     <template data-id="appliesTo">
       <li class="applies-to-item">
@@ -239,13 +238,16 @@
     <link href="vendor/codemirror/addon/search/matchesonscrollbar.css" rel="stylesheet">
     <link href="js/color/color-picker.css" rel="stylesheet">
     <link href="edit/codemirror-default.css" rel="stylesheet">
-    <link href="edit/edit.css" rel="stylesheet">
-    <script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC -->
-  </head>
 
-  <body id="stylus-edit">
+  <template data-id="body"> <!-- https://crbug.com/1288447 -->
     <div id="header">
-      <h1 id="heading" i18n="data-edit:editStyleHeading, data-add:addStyleTitle"></h1>
+      <h1 id="heading" i18n="data-edit:editStyleHeading, data-add:addStyleTitle">
+        <a class="usercss-only"
+           href="https://github.com/openstyles/stylus/wiki/Usercss"
+           i18n="title:externalUsercssDocument" target="_blank">
+          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+        </a>
+      </h1>
       <section id="basic-info">
         <div id="basic-info-name">
           <input id="name" class="style-contributor" spellcheck="false">
@@ -474,13 +476,21 @@
       </symbol>
 
       <symbol id="svg-icon-plus" viewBox="0 0 8 8">
-        <path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
+        <path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
       </symbol>
 
       <symbol id="svg-icon-minus" viewBox="0 0 8 8">
-        <path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
+        <path d="M0 3v2h8v-2h-8z"/>
       </symbol>
 
     </svg>
+  </template>
+
+  <link href="edit/edit.css" rel="stylesheet">
+  <script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC -->
+</head>
+
+<body id="stylus-edit">
+<script src="edit/edit.js"></script>
   </body>
 </html>
diff --git a/edit/edit.css b/edit/edit.css
index 6d3a238f..5485b05a 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -42,7 +42,7 @@ html.is-new-style #publish,
 html.is-new-style #heading::after {
   content: attr(data-add);
 }
-html:not(.is-new-style) #heading::after {
+html:not(.is-new-style) #heading::before {
   content: attr(data-edit);
 }
 
@@ -802,8 +802,6 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 }
 #help-popup button[name^="import"] {
   line-height: 1.5rem;
-  padding: 0 0.5rem;
-  margin: 0.5rem 0 0 0.5rem;
   pointer-events: none;
   opacity: 0.5;
 }
diff --git a/edit/edit.js b/edit/edit.js
index ca514d92..7d33a37f 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -16,6 +16,8 @@
 
 //#region init
 
+document.body.appendChild(t.template.body);
+
 baseInit.ready.then(async () => {
   [editor.template] = await Promise.all([
     editor.isUsercss && !editor.style.id && chromeSync.getLZValue(chromeSync.LZ_KEY.usercssTemplate),
diff --git a/js/dom.js b/js/dom.js
index f9f41e18..05703223 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -12,7 +12,6 @@
   getEventKeyName
   messageBoxProxy
   moveFocus
-  onDOMready
   scrollElementIntoView
   setupLivePrefs
   showSpinner
@@ -275,12 +274,6 @@ function moveFocus(rootElement, step) {
   }
 }
 
-function onDOMready() {
-  return document.readyState !== 'loading'
-    ? Promise.resolve()
-    : new Promise(resolve => document.on('DOMContentLoaded', () => resolve(), {once: true}));
-}
-
 /**
  * Scrolls `window` or the closest parent with `class="scroller"` if the element is not visible,
  * centering the element in the view
diff --git a/manage.html b/manage.html
index fbf49234..ff5df44e 100644
--- a/manage.html
+++ b/manage.html
@@ -147,14 +147,8 @@
   <script src="manage/filters.js"></script>
   <script src="manage/render.js"></script>
   <script src="manage/sorter.js"></script>
-  <script src="manage/manage.js"></script>
-
-  <link rel="stylesheet" href="manage/manage.css">
-  <script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC -->
-</head>
-
-<body id="stylus-manage" i18n="dragndrop-hint:dragDropMessage">
 
+<template data-id="body"> <!-- https://crbug.com/1288447 -->
 <div id="header">
   <h1 id="manage-heading" i18n="manageHeading"></h1>
 
@@ -384,6 +378,13 @@
     <path d="M0,16h7v-6H0V16z M1,11h5v4H1V11z M0,5h7V0H0V5z M1,1h5v3H1V1z M13,11v3l-4-3.5L13,7v3h2V3H8V2h8v9H13z M7,9H0V8h7V9z M7,7H0V6h7V7z"/>
   </symbol>
 </svg>
+</template>
 
+<link rel="stylesheet" href="manage/manage.css">
+<script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC -->
+</head>
+
+<body id="stylus-manage" i18n="dragndrop-hint:dragDropMessage">
+<script src="manage/manage.js"></script>
 </body>
 </html>
diff --git a/manage/manage.js b/manage/manage.js
index 31d5a4a7..25661259 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -17,6 +17,8 @@
 */// dom.js
 'use strict';
 
+document.body.appendChild(t.template.body);
+
 /** @type {HTMLElement} */
 let installed;
 
@@ -66,6 +68,7 @@ newUI.renderClass();
   window.on('pageshow', handleVisibilityChange);
   window.on('pagehide', handleVisibilityChange);
   setupLivePrefs();
+  sorter.init();
   router.update();
   prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI());
   switchUI({styleOnly: true});
diff --git a/manage/sorter.js b/manage/sorter.js
index 3a4b140a..38f63e80 100644
--- a/manage/sorter.js
+++ b/manage/sorter.js
@@ -1,4 +1,4 @@
-/* global $ $create messageBoxProxy onDOMready */// dom.js
+/* global $ $create messageBoxProxy */// dom.js
 /* global installed */// manage.js
 /* global prefs */
 /* global t */// localization.js
@@ -66,16 +66,16 @@ const sorter = (() => {
 
   let columns = 1;
 
-  onDOMready().then(() => {
+  function init() {
     prefs.subscribe(ID, sorter.update);
     $('#sorter-help').onclick = showHelp;
     addOptions();
     updateColumnCount();
-  });
+  }
 
   function addOptions() {
     let container;
-    const select = $('#manage.newUI.sort');
+    const select = $('#' + ID);
     const renderBin = document.createDocumentFragment();
     const option = $create('option');
     const optgroup = $create('optgroup');
@@ -118,6 +118,8 @@ const sorter = (() => {
 
   return {
 
+    init,
+
     sort({styles}) {
       const sortBy = getPref().split(splitRegex);
       const len = sortBy.length;
