From fff59ee12f3171e77e20cf2ebafd8f2f19af41e6 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 17 Sep 2022 21:19:18 +0300
Subject: [PATCH] use a self-explanatory "..." in #write-for-frames

---
 popup.html      |  5 ++++-
 popup/popup.css | 31 ++++++-------------------------
 popup/popup.js  | 13 +++++++++----
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/popup.html b/popup.html
index b23056a3..dea735d4 100644
--- a/popup.html
+++ b/popup.html
@@ -98,6 +98,10 @@
     </div>
   </template>
 
+  <template data-id="writeForFrames">
+    <div id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0">...</div>
+  </template>
+
   <script src="js/polyfill.js"></script>
   <script src="js/msg.js"></script>
   <script src="js/toolbox.js"></script>
@@ -143,7 +147,6 @@
         <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
         <div>U</div>
       </label>
-      <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
       <span id="write-style-for" i18n="writeStyleFor"></span>
     </div>
   </div>
diff --git a/popup/popup.css b/popup/popup.css
index 82600261..2ef79bcf 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -510,33 +510,14 @@ a:hover .svg-icon {
   display: none;
 }
 
-#write-for-frames:not([hidden]) {
-  position: relative;
-  width: 5px;
-  height: 5px;
-  display: inline-block;
-  margin: 0 2px 2px;
-  --dash: transparent 2px, currentColor 2px, currentColor 3px, transparent 3px;
-  background: linear-gradient(var(--dash)), linear-gradient(90deg, var(--dash));
+#write-for-frames {
+  cursor: pointer;
+  margin: 0 0 -.25em;
+  font-family: monospace;
 }
 
-#write-for-frames.expanded {
-  background: linear-gradient(var(--dash));
-}
-
-#write-for-frames::after {
-  position: absolute;
-  margin: -2px;
-  border: 1px solid currentColor;
-  content: "";
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-#write-for-frames:not(.expanded) ~ .match:not([data-frame-id="0"]),
-#write-for-frames:not(.expanded) ~ .match .match {
+#write-style:not(.expanded) .match:not([data-frame-id="0"]),
+#write-style:not(.expanded) .match .match {
   display: none;
 }
 
diff --git a/popup/popup.js b/popup/popup.js
index b8ca20ce..36b413b7 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -144,10 +144,15 @@ async function initPopup(frames) {
   }
 
   frames.forEach(createWriterElement);
-  Object.assign($('#write-for-frames'), {
-    onclick: e => e.currentTarget.classList.toggle('expanded'),
-    hidden: frames.length < 2 || !$('.match .match:not(.dupe)'),
-  });
+
+  if (frames.length > 1 && $('.match .match:not(.dupe)')) {
+    $('#write-style').append(Object.assign(t.template.writeForFrames, {
+      onclick() {
+        this.remove();
+        $('#write-style').classList.add('expanded');
+      },
+    }));
+  }
 
   const isStore = tabURL.startsWith(URLS.browserWebStore);
   if (isStore && !FIREFOX) {