use a self-explanatory "..." in #write-for-frames

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>

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;
 }
 

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) {