polish popup/manage/edit css/svg/etc.

* restore the correct width of svg icons
* popup: use the standard formatting & SVG <symbol>
* popup .breadcrumbs hover highlight
* manage: black links, transitions; use <p> in #options; trim .homepage
* edit: move regexp tester info link to a template

edit.html

@@ -89,7 +89,6 @@
 			}
 			#url {
 				margin-left: 0.25rem;
-				color: inherit;
 			}
 			#url:not([href^="http"]) {
 				display: none;
@@ -97,10 +96,9 @@
 			.svg-icon {
 				cursor: pointer;
 				vertical-align: middle;
-				transition: opacity .5s;
+				transition: fill .5s;
 				width: 16px;
 				height: 16px;
-				fill: currentColor;
 			}
 			.svg-icon:not(.applies-to-help):not(.dismiss) {
 				margin-left: 0.2rem;
@@ -108,13 +106,17 @@
 			h2 .svg-icon, label .svg-icon {
 				margin-top: -2px;
 			}
+			.svg-icon.info {
+				width: 14px;
+				height: 16px;
+			}
 			.svg-icon:hover,
 			.svg-icon.info {
-				opacity: .6;
+				fill: #666;
 			}
 			.svg-icon,
 			.svg-icon.info:hover {
-				opacity: 1;
+				fill: #000;
 			}
 			#enabled {
 				margin-left: 0;
@@ -638,6 +640,9 @@
 		<template data-id="jumpToLine">
 			<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
 		</template>
+		<template data-id="regexpTestPartial">
+			<a target="_blank" href="https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites#advanced-matching-with-regular-expressions"><svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></a>
+		</template>
 
 		<script src="storage.js"></script>
 		<script src="messaging.js"></script>

edit.js

@@ -1689,11 +1689,7 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
 				rxData.urls = urlsNow;
 			}
 		}
-		const moreInfoLink = '<a target="_blank" ' +
+		const moreInfoLink = template.regexpTestPartial.outerHTML;
-			'href="https://github.com/stylish-userstyles/' +
-			'stylish/wiki/Applying-styles-to-specific-sites' +
-			'#advanced-matching-with-regular-expressions">' +
-			'<img src="/images/help.png"></a>';
 		const stats = {
 			full: {data: [], label: t('styleRegexpTestFull')},
 			partial: {data: [], label: t('styleRegexpTestPartial') + moreInfoLink},

manage.css

@@ -3,20 +3,14 @@ body {
   font: 12px arial, sans-serif;
 }
 
-a,
+a {
-a:visited {
+  color: #000;
-  color: inherit;
+  transition: color .5s;
-  opacity: .75;
+  text-decoration-skip: ink;
-  -webkit-transition: opacity 0.5s;
 }
 
-a:hover,
+a:hover {
-a.homepage:hover {
+  color: #666;
-  opacity: .6;
-}
-
-a.homepage {
-  opacity: 1;
 }
 
 #header {
@@ -53,13 +47,20 @@ a.homepage {
 .svg-icon {
   cursor: pointer;
   vertical-align: middle;
-  margin-left: 0.3rem;
-  margin-right: 0.3rem;
   margin-top: -4px;
-  transition: opacity .5s;
+  transition: fill .5s;
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  fill: #000;
+}
+
+.svg-icon:hover {
+  fill: #666;
+}
+
+.homepage {
+  margin-left: 0.1em;
+  margin-right: 0.1em;
 }
 
 .style-name {
@@ -69,12 +70,11 @@ a.homepage {
 
 .style-name a, .style-edit-link {
   text-decoration: none;
-  color: inherit;
 }
 
 .style-name-link:hover {
   text-decoration: underline;
-  color: black;
+  color: #000;
 }
 
 .applies-to {
@@ -181,11 +181,6 @@ summary {
   animation: highlight 10s cubic-bezier(0,.82,.47,.98);
 }
 
-#find-editor-styles {
-  display: block;
-  margin-top: .5em;
-}
-
 @keyframes highlight {
   from {
     background-color: rgba(128, 128, 128, .5);

manage.html

@@ -25,9 +25,7 @@
   </template>
 
   <template data-id="styleHomepage">
-    <a target="_blank" class="homepage">
+    <a target="_blank" class="homepage"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
-      <svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg>
-    </a>
   </template>
 
   <template data-id="appliesToTarget">
@@ -87,10 +85,14 @@
   </p>
   <div id="options">
     <h2 id="options-heading" i18n-text="optionsHeading"></h2>
+    <p>
       <button id="manage-options-button" i18n-text="openOptionsManage"></button>
       <button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
+    </p>
+    <p>
       <a id="find-editor-styles" i18n-text="editorStylesButton"
        href="https://userstyles.org/styles/browse/chrome-extension" target="_blank"></a>
+    <p>
   </div>
   <div id="backup">
     <h2 id="backup-title" i18n-text="backupButtons"></h2>

popup.css

@@ -36,12 +36,16 @@ input[type=checkbox] {
   display: block;
 }
 
-a,
+a {
-a:visited {
+  color: #000;
-  color: black;
+  transition: color .5s;
   text-decoration-skip: ink;
 }
 
+a:hover {
+  color: #666;
+}
+
 .left-gutter {
   display: table-cell;
   width: 16px;
@@ -195,9 +199,13 @@ body.blocked > DIV {
 .svg-icon {
   pointer-events: none;
   transition: fill .5s;
+  width: 14px;
+  height: 16px;
+  fill: #666;
 }
+
 a:hover .svg-icon {
-  fill: #000000;
+  fill: #000;
 }
 
 body > .actions {
@@ -245,6 +253,12 @@ body.blocked #unavailable {
 
 /* 'New style' links */
 
+#write-style {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 #write-style-for {
   margin-right: .6ex
 }
@@ -264,7 +278,9 @@ body.blocked #unavailable {
 
 #match {
   overflow-wrap: break-word;
-  display: inline-block;
+  display: block;
+  flex-grow: 9;
+  min-width: 200px;
 }
 
 /* "breadcrumbs" 'new style' links */

popup.html

@@ -14,15 +14,12 @@
         <div class="actions">
           <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
           <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
-                    <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel"> <!--`i18n-title` automatically creates `title` attribute -->
+          <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
-                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon edit" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
+            <!--`i18n-title` automatically creates `title` attribute -->
-                            <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
+            <svg class="svg-icon edit"><use xlink:href="#svg-icon-edit"/></svg>
-                        </svg>
           </a>
           <a href="#" class="delete" i18n-title="deleteStyleLabel">
-                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon remove" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
+            <svg class="svg-icon remove"><use xlink:href="#svg-icon-remove"/></svg>
-                            <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
-                        </svg>
           </a>
         </div>
       </div>
@@ -55,12 +52,11 @@
   <script src="messaging.js"></script>
   <script src="apply.js"></script>
   <script src="dom.js"></script>
-
   <script src="popup.js"></script>
 </head>
 
 <body id="stylus-popup">
-    <!-- confirm -->
+
   <div id="confirm">
     <div>
       <b>Style's Name</b>
@@ -77,7 +73,9 @@
       <span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
     </div>
   </div>
+
   <div id="installed"></div>
+
   <div class="actions">
     <div id="disable-all-wrapper">
       <div class="left-gutter">
@@ -103,6 +101,14 @@
       <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
     </div>
   </div>
-</body>
 
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+    <symbol id="svg-icon-edit" width="14" height="16" viewBox="0 0 14 16">
+      <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
+    </symbol>
+    <symbol id="svg-icon-remove" width="14" height="16" viewBox="0 0 14 16">
+      <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
+    </symbol>
+  </svg>
+</body>
 </html>

popup.js

@@ -78,7 +78,9 @@ function initPopup(url) {
   // Write new style links
   const writeStyle = $('#write-style');
   const matchTargets = document.createElement('span');
-  matchTargets.id = 'match';
+  const matchWrapper = document.createElement('span');
+  matchWrapper.id = 'match';
+  matchWrapper.appendChild(matchTargets);
 
   // For this URL
   const urlLink = template.writeStyle.cloneNode(true);
@@ -120,7 +122,7 @@ function initPopup(url) {
     matchTargets.classList.add('breadcrumbs');
     matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild));
   }
-  writeStyle.appendChild(matchTargets);
+  writeStyle.appendChild(matchWrapper);
 }