Flex popup with optional layouts/click actions

_locales/en/messages.json

@@ -368,8 +368,12 @@
     "description": "Text for a checkbox that opens search results 'inline' (within the Stylus popup window)"
   },
   "findStylesInlineTooltip": {
-    "message": "Display search results inside this window.",
-    "description": "Text for a checkbox that displays search results within the Stylus popup."
+    "message": "Display search results inside this window",
+    "description": "Text for a checkbox that displays search results within the Stylus popup"
+  },
+  "findStylesExternalTooltip": {
+    "message": "Display search results on an external website",
+    "description": "Text for a checkbox that displays search results on an external website"
   },
   "genericAdd": {
     "message": "Add",
@@ -767,6 +771,24 @@
   "optionsOpenManager": {
     "message": "Manage styles"
   },
+  "optionsPopupClassicUI": {
+    "message": "Text and buttons"
+  },
+  "optionsPopupIconUI": {
+    "message": "Vector icons"
+  },
+  "optionsPopupTitleClickAction": {
+    "message": "Style name click action"
+  },
+  "optionsPopupClickActionLink": {
+    "message": "Edit style"
+  },
+  "optionsPopupClickActionToggle": {
+    "message": "Toggle style"
+  },
+  "optionsPopupTitle": {
+    "message": "Action elements"
+  },
   "optionsPopupWidth": {
     "message": "Popup width (in pixels)"
   },
@@ -851,6 +873,10 @@
     "message": "Temporarily applies the changes without saving.\nSave the style to make the changes permanent.",
     "description": "Tooltip for the checkbox in style editor to enable live preview while editing."
   },
+  "reEnableAllStyles": {
+    "message": "Turn all previously enabled styles back on",
+    "description": "Label for the element which turns all disabled styles back on."
+  },
   "replace": {
     "message": "Replace",
     "description": "Label before the replace input field in the editor shown on Ctrl-H"
@@ -1252,10 +1278,6 @@
     "message": "Updates installed:",
     "description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
   },
-  "usercssAvoidOverwriting": {
-    "message": "Please change the value of @name or @namespace to avoid overwriting an existing style.",
-    "description": "Shown in a message box when attempting to save a new Usercss style that would overwrite an existing one."
-  },
   "usercssConfigIncomplete": {
     "message": "The style was updated or deleted after the configuration dialog was shown. These variables were not saved to avoid corrupting the style's metadata:"
   },
@@ -1282,6 +1304,10 @@
     "message": "Write style for: ",
     "description": "Label for toolbar pop-up that precedes the links to write a new style"
   },
+  "writeStyleForInfo": {
+    "message": "Create a new style by specifying target URLs.\nAvailable options shown in hover tooltips.",
+    "description": "Style creation actions tooltip to accompany icon"
+  },
   "writeStyleForURL": {
     "message": "this URL",
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"

js/prefs.js

@@ -89,6 +89,12 @@ var prefs = new function Prefs() {
     'iconset': 0,                   // 0 = dark-themed icon
                                     // 1 = light-themed icon
 
+    'popupui': 0,                   // 0 = new UI
+                                    // 1 = classic UI
+
+    'popupclick': 0,                // 0 = edit
+                                    // 1 = toggle
+
     'badgeDisabled': '#8B0000',     // badge background color when disabled
     'badgeNormal': '#006666',       // badge background color
 

options.html

@@ -105,6 +105,57 @@ <h1 i18n-text="optionsCustomizePopup"></h1>
             <span></span>
           </span>
         </label>
+        <div class="radio-outer-wrapper action-elements">
+          <div class="radio-title" i18n-text="optionsPopupTitle"></div>
+          <div class="radio-inner-wrapper">
+            <label i18n-title="optionsPopupIconUI">
+              <div class="popupui">
+                <input type="radio" name="popupui">
+                <div class="icon-wrapper use-svg">
+                  <svg class="svg-icon vector" viewBox="0 0 40 22">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="m 36.9,0.95 c -1.2,0 -2.4,0.8 -2.9,1.9 H 23.8 v -2.5 h -7.5 v 2.5 H 6 C 5.5,1.75 4.4,0.95 3.1,0.95 1.3,0.95 0,2.35 0,4.05 c 0,1.7 1.4,3.1 3.1,3.1 1.2,0 2.4,-0.8 2.9,-1.9 h 6.4 c -3,2 -5.2,5.1 -6.2,8.8 H 3.8 v 7.6 h 7.5 v -7.5 H 8.8 c 1.1,-3.6 4,-6.6 7.5,-7.9 v 1.6 h 7.5 v -1.6 c 3.6,1.4 6.4,4.2 7.5,7.9 h -2.5 v 7.5 h 7.5 v -7.5 h -2.4 c -1,-3.6 -3.2,-6.8 -6.2,-8.8 H 34 c 0.5,1.1 1.6,1.9 2.9,1.9 1.8,0 3.1,-1.4 3.1,-3.1 0,-1.8 -1.4,-3.2 -3.1,-3.2 z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+            <label i18n-title="optionsPopupClassicUI">
+              <div class="popupui">
+                <input type="radio" name="popupui">
+                <div class="icon-wrapper use-text">
+                  <svg class="svg-icon text" viewBox="0 0 8 8">
+                    <path d="M0 0v2h.5c0-.55.45-1 1-1h1.5v5.5c0 .28-.22.5-.5.5h-.5v1h4v-1h-.5c-.28 0-.5-.22-.5-.5v-5.5h1.5c.55 0 1 .45 1 1h.5v-2h-8z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
+        <div class="radio-outer-wrapper style-name-action">
+          <div class="radio-title" i18n-text="optionsPopupTitleClickAction"></div>
+          <div class="radio-inner-wrapper">
+            <label i18n-title="optionsPopupClickActionLink">
+              <div class="popupclick ">
+                <input type="radio" name="popupclick">
+                <div class="icon-wrapper use-edit">
+                  <svg class="svg-icon edit" viewBox="0 0 1024 1024">
+                    <path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
+                    <path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+            <label i18n-title="optionsPopupClickActionToggle">
+              <div class="popupclick">
+                <input type="radio" name="popupclick">
+                <div class="icon-wrapper use-toggle">
+                  <svg class="svg-icon double-toggle" viewBox="0 0 1024 1024">
+                    <path d="M692.053333 474.502095 331.897905 474.502095c-119.369143 0-216.088381-100.766476-216.088381-225.060571S212.528762 24.380952 331.897905 24.380952l360.131048 0c119.369143 0 216.137143 100.766476 216.137143 225.060571S811.398095 474.502095 692.053333 474.502095zM692.053333 61.878857 331.897905 61.878857c-99.449905 0-180.077714 83.992381-180.077714 187.562667s80.62781 187.562667 180.077714 187.562667l360.131048 0c99.474286 0 180.077714-83.992381 180.077714-187.562667S791.527619 61.878857 692.053333 61.878857zM331.897905 399.433143c-79.579429 0-144.067048-67.145143-144.067048-149.991619s64.512-150.064762 144.067048-150.064762c79.555048 0 144.042667 67.193905 144.042667 150.064762S411.452952 399.433143 331.897905 399.433143zM331.897905 549.497905l360.131048 0c119.369143 0 216.137143 100.790857 216.137143 225.060571S811.398095 999.619048 692.053333 999.619048L331.897905 999.619048c-119.369143 0-216.088381-100.766476-216.088381-225.03619S212.528762 549.497905 331.897905 549.497905zM692.053333 924.623238c79.60381 0 144.11581-67.193905 144.11581-150.040381s-64.512-150.064762-144.11581-150.064762c-79.579429 0-144.042667 67.218286-144.042667 150.064762S612.473905 924.623238 692.053333 924.623238z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
       </div>
     </div>
 

options/options.css

@@ -18,6 +18,27 @@ body {
   max-width: 800px;
 }
 
+.radio-outer-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.radio-inner-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.radio-inner-wrapper label > :first-child {
+  margin-right: 4px;
+}
+
+.radio-title + label {
+  margin-left: auto;
+  margin-right: 1.25rem;
+}
+
 @supports (-moz-appearance:none) {
   body {
     --addons-page-left-padding: 6px;
@@ -86,13 +107,17 @@ label > :first-child {
   flex-grow: 1;
 }
 
-label:not([disabled]) > :first-child {
-  cursor: default;
+label:not([disabled]),
+label:not([disabled]) * {
+  cursor: pointer;
+}
+
+label:not([disabled]) input[type=number] {
+  cursor: auto;
 }
 
 label:not([disabled]):hover > :first-child {
   text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
-  cursor: pointer;
 }
 
 input[type=number],
@@ -253,6 +278,64 @@ html:not(.firefox):not(.opera) #updates {
   width: 16px;
 }
 
+.action-elements {
+  padding: 6px 0;
+}
+
+.icon-wrapper {
+  display: inline-flex;
+}
+
+.action-elements input,
+.style-name-action input {
+  margin: 0 3px -1px;
+}
+
+.icon-wrapper.use-text {
+  margin: 0 3px;
+}
+
+.icon-wrapper.use-edit {
+  margin: 0 5px 0 6px;
+}
+
+.action-elements label > :first-child,
+.style-name-action label > :first-child {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.action-elements label,
+.style-name-action label {
+  width: 56px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon-wrapper .svg-icon {
+  fill: #666;
+  transition: fill .5s;
+}
+
+label:hover .icon-wrapper .svg-icon {
+  fill: #000;
+}
+
+.svg-icon.text,
+.svg-icon.vector {
+  height: 16px;
+}
+
+.svg-icon.edit {
+  height: 18px;
+}
+
+.svg-icon.double-toggle {
+  height: 22px;
+}
+
 #advanced.collapsible.collapsed .collapsible-resizer .svg-icon,
 #advanced.collapsible:not(.collapsed) .collapsible-resizer h1:hover .svg-icon {
   fill: #666;