From dbc26c2901f8fa84ce421893657a5e56417be66d Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:21:41 -0400
Subject: [PATCH 01/32] One UI PR to rule them all
Gonna take a while to figure out all the other edited files.
---
edit.html | 17 +---
global.css | 236 ++++++++++++++++++++++++++++++++++++++++++---------
manage.html | 14 +--
options.html | 55 +++++++++++-
popup.html | 170 ++++++++++++++++++++++++++++---------
5 files changed, 388 insertions(+), 104 deletions(-)
diff --git a/edit.html b/edit.html
index 8463a98403..e136d6fb39 100644
--- a/edit.html
+++ b/edit.html
@@ -25,6 +25,7 @@
<script src="js/script-loader.js"></script>
<script src="js/storage-util.js"></script>
<script src="content/apply.js"></script>
+ <script src="edit/lint.js"></script>
<script src="edit/util.js"></script>
<script src="edit/regexp-tester.js"></script>
<script src="edit/applies-to-line-widget.js"></script>
@@ -64,8 +65,6 @@
<script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
<link href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet" />
- <script src="vendor/codemirror/addon/lint/lint.js"></script>
-
<link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet" />
<script src="vendor/codemirror/addon/hint/show-hint.js"></script>
@@ -88,16 +87,6 @@
<link href="edit/codemirror-default.css" rel="stylesheet">
<script src="edit/codemirror-default.js"></script>
- <script src="edit/linter.js"></script>
- <script src="edit/linter-defaults.js"></script>
- <script src="edit/linter-engines.js"></script>
- <script src="edit/linter-meta.js"></script>
- <script src="edit/linter-help-dialog.js"></script>
- <script src="edit/linter-report.js"></script>
- <script src="edit/linter-config-dialog.js"></script>
-
- <script src="edit/editor-worker.js"></script>
-
<link id="cm-theme" rel="stylesheet">
<template data-id="appliesTo">
@@ -272,7 +261,7 @@
</template>
</head>
- <body id="stylus-edit">
+ <body id="stylus-edit" class="truegray-alpha-2">
<div id="header">
<h1 id="heading"> </h1> <!-- nbsp allocates the actual height which prevents page shift -->
<section id="basic-info">
@@ -428,7 +417,7 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
</a>
</h2>
</summary>
- <div class="lint-report-container"></div>
+ <div></div>
</details>
<div id="footer" class="hidden">
<a href="https://github.com/openstyles/stylus/wiki/Usercss"
diff --git a/global.css b/global.css
index 16c49b8826..0ea73fbf4f 100644
--- a/global.css
+++ b/global.css
@@ -1,3 +1,124 @@
+:root {
+ --white: hsl(0, 0%, 100%);
+ --white-alpha-75: hsla(0, 0%, 100%, 0.75);
+ --gray-lightness-10: hsl(0, 0%, 10%);
+ --gray-lightness-20: hsl(0, 0%, 20%);
+ --gray-lightness-24: hsl(0, 0%, 24%);
+ --gray-lightness-25: hsl(0, 0%, 25%);
+ --gray-lightness-27: hsl(0, 0%, 27%);
+ --gray-lightness-30: hsl(0, 0%, 30%);
+ --gray-lightness-33: hsl(0, 0%, 33%);
+ --gray-lightness-38: hsl(0, 0%, 38%);
+ --gray-lightness-40: hsl(0, 0%, 40%);
+ --gray-lightness-45: hsl(0, 0%, 45%);
+ --gray-lightness-46: hsl(0, 0%, 46%);
+ --truegray: hsl(0, 0%, 50%);
+ --gray-lightness-60: hsl(0, 0%, 60%);
+ --gray-lightness-65: hsl(0, 0%, 65%);
+ --gray-lightness-66: hsl(0, 0%, 66%);
+ --gray-lightness-73: hsl(0, 0%, 73%);
+ --gray-lightness-76: hsl(0, 0%, 76%);
+ --gray-lightness-80: hsl(0, 0%, 80%);
+ --gray-lightness-84: hsl(0, 0%, 84%);
+ --gray-lightness-85: hsl(0, 0%, 85%);
+ --gray-lightness-86: hsl(0, 0%, 86%);
+ --gray-lightness-87: hsl(0, 0%, 87%);
+ --gray-lightness-88: hsl(0, 0%, 88%);
+ --gray-lightness-90: hsl(0, 0%, 90%);
+ --main-bg: hsl(0, 0%, 90%);
+ --gray-lightness-92: hsl(0, 0%, 92%);
+ --gray-lightness-93: hsl(0, 0%, 93%);
+ --gray-lightness-95: hsl(0, 0%, 95%);
+ --truegray-alpha-05: hsla(0, 0%, 50%, .05);
+ --truegray-alpha-06: hsla(0, 0%, 50%, .06);
+ --truegray-alpha-07: hsla(0, 0%, 50%, .07);
+ --truegray-alpha-1: hsla(0, 0%, 50%, .1);
+ --truegray-alpha-15: hsla(0, 0%, 50%, .15);
+ --truegray-alpha-2: hsla(0, 0%, 50%, .2);
+ --truegray-alpha-25: hsla(0, 0%, 50%, .25);
+ --truegray-alpha-3: hsla(0, 0%, 50%, .3);
+ --truegray-alpha-4: hsla(0, 0%, 50%, .4);
+ --truegray-alpha-5: hsla(0, 0%, 50%, .5);
+ --truegray-alpha-6: hsla(0, 0%, 50%, .6);
+ --truegray-alpha-7: hsla(0, 0%, 50%, .7);
+ --black: hsl(0, 0%, 0%);
+ --black-alpha-05: hsla(0, 0%, 0%, .05);
+ --black-alpha-1: hsla(0, 0%, 0%, .1);
+ --black-alpha-15: hsla(0, 0%, 0%, .15);
+ --black-alpha-25: hsla(0, 0%, 0%, .25);
+ --black-alpha-3: hsla(0, 0%, 0%, .3);
+ --black-alpha-4: hsla(0, 0%, 0%, .4);
+ --black-alpha-45: hsla(0, 0%, 0%, .45);
+ --black-alpha-5: hsla(0, 0%, 0%, .5);
+ --black-alpha-7: hsla(0, 0%, 0%, .7);
+ --black-alpha-75: hsla(0, 0%, 0%, .75);
+ --darker-red: hsl(0, 100%, 42%);
+ --darkred: hsl(0, 100%, 27%);
+ --maroon: hsl(0, 100%, 25%);
+ --darker-maroon: hsl(0, 100%, 20%);
+ --red-alpha-05: hsla(0, 100%, 50%, .05);
+ --red-alpha-1: hsla(0, 100%, 50%, .1);
+ --darkgreen: hsl(120, 100%, 20%);
+ --darkcyan: hsl(180, 100%, 27%);
+ --darkcyan-alpha-5: hsla(180, 100%, 27%, .5);
+ --darkcyan-alpha-75: hsla(180, 100%, 27%, .75);
+ --focus-outline: hsl(180, 100%, 34%);
+ --selection: hsl(180, 50%, 34%);
+}
+
+/* in case custom browser bg is specified */
+html {
+ background-color: var(--white);
+}
+
+a, .disabled a:hover {
+ color: var(--black);
+ transition: color .5s;
+ text-decoration-skip: ink;
+}
+
+a:hover {
+ color: var(--gray-lightness-40);
+}
+
+.main-bg {
+ background-color: var(--main-bg);
+}
+
+.truegray-alpha-05 {
+ background-color: var(--truegray-alpha-05);
+}
+
+.truegray-alpha-06 {
+ background-color: var(--truegray-alpha-06);
+}
+
+.truegray-alpha-1 {
+ background-color: var(--truegray-alpha-1);
+}
+
+.truegray-alpha-15 {
+ background-color: var(--truegray-alpha-15);
+}
+
+.truegray-alpha-2 {
+ background-color: var(--truegray-alpha-2);
+}
+
+* {
+ outline-color: var(--focus-outline);
+}
+
+::selection {
+ color: var(--white);
+ background-color: var(--selection);
+}
+
+::-moz-selection {
+ color: var(--white);
+ background-color: var(--selection);
+}
+
body {
font: normal 12px Arial, system-ui, sans-serif;
}
@@ -24,49 +145,66 @@ button {
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 7px;
- border: 1px solid hsl(0, 0%, 62%);
+ border: 1px solid var(--gray-lightness-60);
font: inherit;
font-size: 13px;
- color: #000;
- background-color: hsl(0, 0%, 100%);
+ color: var(--gray-lightness-10);
+ background-color: var(--gray-lightness-95);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
background-repeat: repeat-x;
- background-size: 100% 100%;
- transition: background-color .25s, border-color .25s;
+ background-size: auto 100%;
+ transition: color .25s, background-color .25s, border-color .25s;
}
button:not(:disabled):hover {
- background-color: hsl(0, 0%, 95%);
- border-color: hsl(0, 0%, 52%);
+ color: var(--black);
+ background-color: var(--gray-lightness-90);
+ border-color: var(--truegray);
}
button:active {
- background-color: hsl(0, 0%, 95%);
- border-color: hsl(0, 0%, 52%);
+ background-color: var(--gray-lightness-90);
+ border-color: var(--truegray);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
background-repeat: repeat-x;
background-size: 100% 100%;
}
-/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
-#message-box-buttons button:not(:disabled):hover {
- background-color: hsl(0, 0%, 90%);
- border-color: hsl(0, 0%, 50%);
-}
-
input {
font: inherit;
}
-input:not([type]) {
- background: #fff;
- color: #000;
+input:not([type]),
+input[type="text"],
+input[type="search"] {
+ color: var(--black);
+ background: var(--gray-lightness-93);
height: 22px;
- min-height: 22px!important;
line-height: 22px;
padding: 0 3px;
font: inherit;
- border: 1px solid hsl(0, 0%, 66%);
+ border: 1px solid var(--gray-lightness-66);
+ transition: border-color .25s;
+}
+
+input[data-focused-via-click]:not([type]):focus,
+input[data-focused-via-click][type="number"]:focus,
+input[data-focused-via-click][type="search"]:focus,
+label[data-focused-via-click] input[type="number"]:focus,
+label[data-focused-via-click] + input[type="number"]:focus,
+input[data-focused-via-click].config-value:focus,
+label[data-focused-via-click] input.config-value:focus {
+ outline: none;
+ border-color: var(--focus-outline);
+}
+
+input[type="number"] {
+ height: 22px;
+ color: var(--black);
+ background: var(--gray-lightness-93);
+ border: 1px solid var(--gray-lightness-66);
+ padding-top: 2px;
+ padding-bottom: 2px;
}
.svg-icon.checked {
@@ -74,7 +212,7 @@ input:not([type]) {
height: 8px;
width: 8px;
display: none;
- fill: #000;
+ fill: var(--gray-lightness-20);
margin: 2px 0 0 2px;
}
@@ -89,19 +227,19 @@ input[type="checkbox"]:not(.slider) {
position: absolute;
left: 0;
top: 0;
- border: 1px solid hsl(0, 0%, 46%);
+ border: 1px solid var(--gray-lightness-46);
height: 12px;
width: 12px;
display: inline-flex;
border-radius: 2px;
- background-color: hsla(0, 0%, 0%, .1);
+ background-color: var(--truegray-alpha-15);
margin: 0;
transition: background-color .1s, border-color .1s;
}
input[type="checkbox"]:not(.slider):hover {
- border-color: hsl(0, 0%, 32%);
- background-color: hsl(0, 0%, 82%);
+ border-color: var(--black);
+ background-color: var(--truegray-alpha-25);
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@@ -113,31 +251,46 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
input[type="checkbox"]:not(.slider):disabled {
background-color: transparent;
- border-color: hsl(0, 0%, 50%);
+ border-color: var(--truegray);
}
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
- fill: hsl(0, 0%, 50%);
+ fill: var(--truegray);
}
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
- color: hsl(0, 0%, 50%);
+ color: var(--truegray);
}
label {
+ color: var(--gray-lightness-20);
transition: color .1s;
}
+label:hover {
+ color: var(--black)
+}
+
select {
-moz-appearance: none;
-webkit-appearance: none;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAIGBgYGAgIGBgSS07UcAAAAEdFJOUwAiFQpfOvseAAAAFklEQVQI12NgZGBkwA+YoZAJDhkhEAACSgAd0bXODAAAAABJRU5ErkJggg==);
+ background-repeat: repeat-x;
+ background-size: 100% 100%;
height: 22px;
font: inherit;
- color: #000;
- background-color: transparent;
- border: 1px solid hsl(0, 0%, 66%);
+ color: var(--gray-lightness-20);
+ background-color: var(--gray-lightness-88);
+ border: 1px solid var(--gray-lightness-60);
padding: 0 20px 0 6px;
- transition: color .5s;
+ transition: color .5s, background-color .5s, border-color .5s;
+}
+
+select:hover,
+select:focus {
+ color: var(--black);
+ background-color: var(--main-bg);
+ border-color: var(--truegray);
}
.select-resizer {
@@ -152,19 +305,24 @@ select {
display: inline-flex;
height: 14px;
width: 14px;
- fill: #000;
+ fill: var(--gray-lightness-30);
position: absolute;
top: 4px;
right: 4px;
transition: fill .5s;
}
+select:hover + .svg-icon.select-arrow,
+select:focus + .svg-icon.select-arrow {
+ fill: var(--black);
+}
+
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
- background: hsl(0, 0%, 88%);
+ background: var(--gray-lightness-88);
border-radius: 50%;
- border: 1px solid hsl(0, 0%, 60%);
+ border: 1px solid var(--gray-lightness-60);
cursor: default;
height: 13px;
width: 13px;
@@ -186,7 +344,7 @@ input[type="radio"]:after {
}
input[type="radio"]:checked:after {
- background-color: hsl(0, 0%, 30%);
+ background-color: var(--gray-lightness-30);
transform: scale(1);
}
@@ -235,9 +393,6 @@ select[disabled] > option {
/* We can customize everything about number inputs except arrows. They're horrible in Linux FF, so we'll hide them unless hovered or focused. */
.firefox.non-windows input[type="number"] {
-moz-appearance: textfield;
- background: #fff;
- color: #000;
- border: 1px solid hsl(0, 0%, 66%);
}
.firefox.non-windows input[type="number"]:not(:disabled):hover,
@@ -246,8 +401,7 @@ select[disabled] > option {
}
.firefox.non-windows input[type="color"] {
- background: #fff;
- border: 1px solid hsl(0, 0%, 66%);
+ border: 1px solid var(--gray-lightness-66);
padding: 4px;
}
diff --git a/manage.html b/manage.html
index df581f3fe3..d6393b781e 100644
--- a/manage.html
+++ b/manage.html
@@ -167,9 +167,9 @@ <h2 class="style-name">
<script src="js/storage-util.js" async></script>
</head>
-<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
+<body id="stylus-manage" class="truegray-alpha-15" i18n-dragndrop-hint="dragDropMessage">
-<div id="header">
+<div id="header" class="truegray-alpha-06">
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
<div id="manage-settings">
@@ -325,16 +325,18 @@ <h2 i18n-text="manageFilters">:
<div id="newUIoptions">
<div>
- <label for="manage.newUI.favicons" i18n-text="manageFavicons">
- <input id="manage.newUI.favicons" type="checkbox">
- <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+ <div class="favicon-label-wrapper">
+ <label for="manage.newUI.favicons" i18n-text="manageFavicons">
+ <input id="manage.newUI.favicons" type="checkbox">
+ <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+ </label>
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
<svg class="svg-icon select-arrow">
<title i18n-text="optionsSubheading"></title>
<use xlink:href="#svg-icon-select-arrow"/>
</svg>
</a>
- </label>
+ </div>
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
<div>
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
diff --git a/options.html b/options.html
index edf5850ee5..ec057cd5fd 100644
--- a/options.html
+++ b/options.html
@@ -28,7 +28,7 @@
<script src="content/apply.js"></script>
</head>
-<body id="stylus-options">
+<body id="stylus-options" class="truegray-alpha-2">
<div id="options">
<div class="block">
@@ -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>
@@ -167,7 +218,7 @@ <h1 i18n-text="optionsAdvanced">
</div>
</div>
- <div class="block" id="actions">
+ <div class="block truegray-alpha-2" id="actions">
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
<button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
<div data-cmd="check-updates">
diff --git a/popup.html b/popup.html
index 6c96fdfd98..5673946843 100644
--- a/popup.html
+++ b/popup.html
@@ -25,18 +25,31 @@
<template data-id="style">
<div class="entry">
<div class="main-controls">
+ <a class="style-edit-link-accessibility directLinkUI-el" href="edit.html?id=" tabindex="0"></a>
<label class="style-name">
- <input class="checker" type="checkbox">
- <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+ <input class="checker toggleUI-el" type="checkbox">
+ <svg class="svg-icon checked toggleUI-el"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
<div class="actions">
- <a href="#" class="enable" i18n-text="enableStyleLabel" tabindex="0"></a>
- <a href="#" class="disable" i18n-text="disableStyleLabel" tabindex="0"></a>
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a>
- <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
+ <a href="#" class="enable directLinkUI-el" i18n-title="enableStyleLabel" tabindex="0">
+ <svg class="svg-icon toggled-off" viewbox="0 0 24 24">
+ <path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M7,15c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3s3,1.34,3,3C10,13.66,8.66,15,7,15z"/>
+ <path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10 c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
+ <path d="M7,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C10,10.34,8.66,9,7,9z"/>
+ </svg>
+ </a>
+ <a href="#" class="disable directLinkUI-el" i18n-title="disableStyleLabel" tabindex="0">
+ <svg class="svg-icon toggled-on" viewbox="0 0 24 24">
+ <path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M17,15c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3s3,1.34,3,3C20,13.66,18.66,15,17,15z"/>
+ <path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10 c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
+ <path d="M17,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C20,10.34,18.66,9,17,9z"/>
+ </svg>
+ </a>
+ <a class="style-edit-link toggleUI-el" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
<svg class="svg-icon edit" 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"/>
</svg>
@@ -50,6 +63,14 @@
</div>
</template>
+ <template data-id="confirmHotkey">
+ <a id="popup-confirm-icon" class="action-wrapper iconUI-el" i18n-title="confirmOK">
+ <svg class="svg-icon thumbsup" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="M13.991 13.991c-.05.69-1.269 1-1.998 1H5.666l-1.668-1V7.995c1.359 0 2.108-.75 3.128-1.879 1.229-1.359 1.139-2.558.879-4.127-.08-.5.5-1 1-1 .829 0 1.998 2.729 1.998 3.998l-.02 1.03c0 .689.33.969 1.02.969H14c.63 0 .98.36 1 .999l-1 5.996-.01.01zm0-7.995h-2.018l.02-.98C11.993 3.719 10.823 0 8.994 0c-.58 0-1.169.3-1.559.77-.36.41-.5.909-.42 1.409.25 1.479.28 2.278-.629 3.278-1 1.089-1.48 1.549-2.388 1.549h-2C.94 6.996 0 7.935 0 8.994v3.998c0 1.06.94 1.999 1.999 1.999h1.719l1.439.86c.16.089.33.139.52.139h6.325c1.13 0 2.839-.5 2.999-1.879l.979-5.946c.02-.08.02-.14.02-.2-.03-1.17-.84-1.969-1.999-1.969h-.01z"/>
+ </svg>
+ </a>
+ </template>
+
<template data-id="writeStyle">
<a class="write-style-link"></a>
</template>
@@ -71,14 +92,14 @@
</template>
<template data-id="unavailableInfo">
- <div class="blocked-info">
+ <div class="blocked-info truegray-alpha-1">
<label i18n-text="stylusUnavailableForURL"></label>
<p i18n-text="stylusUnavailableForURLdetails"></p>
</div>
</template>
<template data-id="unreachableInfo">
- <div class="blocked-info">
+ <div class="blocked-info truegray-alpha-1">
<label i18n-text="unreachableContentScript"></label>
<p i18n-text="unreachableFileHint"></p>
</div>
@@ -166,13 +187,25 @@
<script src="js/storage-util.js" async></script>
</head>
-<body id="stylus-popup">
+<body id="stylus-popup" class="truegray-alpha-15">
<div id="confirm">
- <div>
+ <div class="main-bg">
<b>Style's Name</b>
<span i18n-text="deleteStyleConfirm"></span>
- <div>
+ <div class="iconUI-el">
+ <a id="popup-delete-icon" href="#" class="action-wrapper" i18n-title="confirmDelete" data-cmd="ok" tabindex="0">
+ <svg class="svg-icon remove" 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"/>
+ </svg>
+ </a>
+ <a id="popup-cancel-icon" href="#" class="action-wrapper iconUI-el" i18n-title="confirmCancel" data-cmd="cancel" tabindex="0">
+ <svg class="svg-icon cancel" viewBox="0 0 14 16">
+ <path fill-rule="evenodd" d="M7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0 1.3c1.3 0 2.5.44 3.47 1.17l-8 8A5.755 5.755 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zm0 11.41c-1.3 0-2.5-.44-3.47-1.17l8-8c.73.97 1.17 2.17 1.17 3.47 0 3.14-2.56 5.7-5.7 5.7z"/>
+ </svg>
+ </a>
+ </div>
+ <div class="classicUI-el">
<button i18n-text="confirmDelete" data-cmd="ok"></button>
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
</div>
@@ -183,45 +216,100 @@
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
</div>
- <div class="actions">
- <div id="disable-all-wrapper">
- <div class="main-controls">
- <label id="disableAll-label" i18n-text="disableAllStyles">
- <input id="disableAll" type="checkbox">
- <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+ <div id="popup-manage-wrapper" class="action-wrapper truegray-alpha-1">
+ <button id="popup-manage-button" class="classicUI-el" i18n-text="openManage" data-href="manage.html" i18n-title="popupManageTooltip"></button>
+ <a id="popup-manage-icon" href="#" class="iconUI-el" data-href="manage.html" i18n-title="popupManageTooltip" tabindex="0">
+ <svg class="svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
+ </svg>
+ </a>
+ </div>
+ <div id="popup-options-wrapper" class="action-wrapper truegray-alpha-1">
+ <button id="popup-options-button" class="classicUI-el" i18n-text="openOptionsPopup"></button>
+ <a id="popup-options-icon" href="#" class="iconUI-el" i18n-title="openOptionsPopup" tabindex="0">
+ <svg class="svg-icon options" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
+ </svg>
+ </a>
+ </div>
+ <div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
+ <div id="find-styles">
+ <a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
+ <a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
+ <svg class="svg-icon search" viewBox="0 0 24 24">
+ <path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7 L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
+ </svg>
+ </a>
+ <span id="find-styles-inline-group">
+ <label i18n-title="findStylesInlineTooltip">
+ <input id="popup.findStylesInline" class="checker toggle-inline classicUI-el" type="checkbox">
+ <svg class="svg-icon checked classicUI-el"><use xlink:href="#svg-icon-checked"/></svg>
+ <span class="classicUI-el" i18n-text="findStylesInline"></span>
+ <a id="find-inline-icon" href="#" class="iconUI-el" tabindex="0">
+ <svg viewBox="0 0 20 20" class="svg-icon inline">
+ <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M 17,9 H 11 V 3 l 2,2 4,-4 2,2 -4,4 z"/>
+ </svg>
+ </a>
+ <a id="find-external-icon" href="#" class="iconUI-el" i18n-title="findStylesExternalTooltip" tabindex="0">
+ <svg class="svg-icon external" viewBox="0 0 20 20">
+ <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+ </svg>
+ </a>
</label>
- </div>
+ <div id="find-external-icon-noclick" class="iconUI-el" i18n-title="findStylesExternalTooltip">
+ <svg class="svg-icon external noclick" viewBox="0 0 20 20">
+ <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+ </svg>
+ </div>
+ </span>
</div>
+ </div>
+ <div id="popup-wiki-wrapper" class="action-wrapper truegray-alpha-1">
+ <button id="popup-wiki-button" class="classicUI-el" i18n-text="linkStylusWiki" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki"></button>
+ <a id="popup-wiki-icon" class="iconUI-el" href="#" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki" tabindex="0">
+ <svg class="svg-icon wiki" viewBox="0 0 24 24">
+ <path d="M12.09 13.119c-.936 1.932-2.217 4.548-2.853 5.728-.616 1.074-1.127.931-1.532.029-1.406-3.321-4.293-9.144-5.651-12.409-.251-.601-.441-.987-.619-1.139-.181-.15-.554-.24-1.122-.271C.103 5.033 0 4.982 0 4.898v-.455l.052-.045c.924-.005 5.401 0 5.401 0l.051.045v.434c0 .119-.075.176-.225.176l-.564.031c-.485.029-.727.164-.727.436 0 .135.053.33.166.601 1.082 2.646 4.818 10.521 4.818 10.521l.136.046 2.411-4.81-.482-1.067-1.658-3.264s-.318-.654-.428-.872c-.728-1.443-.712-1.518-1.447-1.617-.207-.023-.313-.05-.313-.149v-.468l.06-.045h4.292l.113.037v.451c0 .105-.076.15-.227.15l-.308.047c-.792.061-.661.381-.136 1.422l1.582 3.252 1.758-3.504c.293-.64.233-.801.111-.947-.07-.084-.305-.22-.812-.24l-.201-.021c-.052 0-.098-.015-.145-.051-.045-.031-.067-.076-.067-.129v-.427l.061-.045c1.247-.008 4.043 0 4.043 0l.059.045v.436c0 .121-.059.178-.193.178-.646.03-.782.095-1.023.439-.12.186-.375.589-.646 1.039l-2.301 4.273-.065.135 2.792 5.712.17.048 4.396-10.438c.154-.422.129-.722-.064-.895-.197-.172-.346-.273-.857-.295l-.42-.016c-.061 0-.105-.014-.152-.045-.043-.029-.072-.075-.072-.119v-.436l.059-.045h4.961l.041.045v.437c0 .119-.074.18-.209.18-.648.03-1.127.18-1.443.421-.314.255-.557.616-.736 1.067 0 0-4.043 9.258-5.426 12.339-.525 1.007-1.053.917-1.503-.031-.571-1.171-1.773-3.786-2.646-5.71l.053-.036z"/>
+ </svg>
+ </a>
+ </div>
+ <div id="disable-all-wrapper" class="action-wrapper truegray-alpha-1">
<div class="main-controls">
- <div id="find-styles">
- <a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesForSite"></a>
- <span id="find-styles-inline-group">
- <label i18n-title="findStylesInlineTooltip">
- <input id="popup.findStylesInline" class="checker" type="checkbox">
- <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
- <span i18n-text="findStylesInline"></span>
- </label>
- </span>
+ <label id="disableAll-label" class="classicUI-el" i18n-text="disableAllStyles">
+ <input id="disableAll" type="checkbox">
+ <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+ </label>
+ </div>
+ <a id="disable-all-icon" class="iconUI-el" href="#" tabindex="0">
+ <div i18n-title="disableAllStyles">
+ <svg class="svg-icon toggle-all-off" viewBox="0 0 24 24">
+ <path fill="none" d="M0 0h24v24H0z"/>
+ <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
+ </svg>
</div>
- <div id="write-style">
- <span id="write-style-for" i18n-text="writeStyleFor"></span>
+ <div i18n-title="reEnableAllStyles">
+ <svg class="svg-icon toggle-all-on" viewBox="0 0 24 24">
+ <path fill="none" d="M0 0h24v24H0z"/>
+ <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
+ </svg>
</div>
- </div>
+ </a>
+ </div>
- <!-- Actions -->
- <div id="popup-options">
- <button id="popup-manage-button" i18n-text="openManage"
- data-href="manage.html" i18n-title="popupManageTooltip"></button>
- <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
- <button id="popup-wiki-button"
- i18n-text="linkStylusWiki"
- i18n-title="linkGetHelp"
- data-href="https://github.com/openstyles/stylus/wiki"></button>
+ <div id="write-style-wrapper" class="truegray-alpha-1">
+ <div id="write-style">
+ <span id="write-style-for" i18n-text="writeStyleFor">
+ <div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
+ <svg class="svg-icon write-style iconUI-el" 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>
+ </span>
</div>
</div>
<div id="search-results-error" class="hidden"></div>
- <div id="search-results" class="hidden">
+ <div id="search-results" class="hidden truegray-alpha-1">
<div class="search-results-nav" data-type="top"></div>
<div id="search-results-list"></div>
<div class="search-results-nav" data-type="bottom"></div>
@@ -240,8 +328,8 @@
<path d="M6.2,0C5.8,0,5.4,0.4,5.4,0.8v0.7C5,1.7,4.6,1.8,4.3,2L3.8,1.5C3.6,1.4,3.4,1.3,3.2,1.3S2.7,1.4,2.6,1.5L1.5,2.6c-0.3,0.3-0.3,0.9,0,1.2L2,4.3C1.8,4.6,1.7,5,1.5,5.4H0.8C0.4,5.4,0,5.8,0,6.2v1.5c0,0.5,0.4,0.8,0.8,0.8h0.7C1.7,9,1.8,9.4,2,9.7l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.2l1.1,1.1c0.3,0.3,0.9,0.3,1.2,0L4.3,12c0.4,0.2,0.8,0.4,1.2,0.5v0.7c0,0.5,0.4,0.8,0.8,0.8h1.5c0.5,0,0.8-0.4,0.8-0.8v-0.7C9,12.3,9.4,12.2,9.7,12l0.5,0.5c0.3,0.3,0.9,0.3,1.2,0l1.1-1.1c0.3-0.3,0.3-0.8,0-1.2L12,9.7c0.2-0.4,0.4-0.8,0.5-1.2h0.7c0.5,0,0.8-0.4,0.8-0.8V6.2c0-0.5-0.4-0.8-0.8-0.8h-0.7C12.3,5,12.2,4.6,12,4.3l0.5-0.5c0.3-0.3,0.3-0.9,0-1.2l-1.1-1.1c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4,0.1-0.6,0.2L9.7,2C9.4,1.8,9,1.7,8.6,1.5V0.8C8.6,0.4,8.2,0,7.8,0L6.2,0z M6.8,0.8h0.4c0.2,0,0.4,0.2,0.4,0.4v1.2c0.8,0.1,1.6,0.4,2.3,0.9l0.8-0.8c0.2-0.2,0.4-0.2,0.6,0l0.3,0.3c0.2,0.2,0.2,0.4,0,0.6l-0.8,0.8c0.5,0.7,0.8,1.4,0.9,2.3h1.2c0.2,0,0.4,0.2,0.4,0.4v0.4c0,0.2-0.2,0.4-0.4,0.4h-1.2c-0.1,0.8-0.4,1.6-0.9,2.3l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l-0.3,0.3c-0.2,0.2-0.4,0.2-0.6,0l-0.8-0.8c-0.7,0.5-1.4,0.8-2.3,0.9v1.2c0,0.2-0.2,0.4-0.4,0.4H6.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-0.8-0.1-1.6-0.4-2.3-0.9l-0.8,0.8c-0.2,0.2-0.4,0.2-0.6,0l-0.3-0.3c-0.2-0.2-0.2-0.4,0-0.6l0.8-0.8C2.8,9.2,2.5,8.4,2.4,7.6H1.2C1,7.6,0.8,7.4,0.8,7.2V6.8c0-0.2,0.2-0.4,0.4-0.4h1.2c0.1-0.8,0.4-1.6,0.9-2.3L2.5,3.3c-0.2-0.2-0.2-0.4,0-0.6l0.3-0.3c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.7-0.5,1.4-0.8,2.3-0.9V1.2C6.4,1,6.6,0.8,6.8,0.8L6.8,0.8z M7,3.6C5.1,3.6,3.6,5.1,3.6,7c0,0,0,0,0,0c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4C10.4,5.1,8.9,3.6,7,3.6C7,3.6,7,3.6,7,3.6z M7,4.8c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C4.8,5.8,5.8,4.8,7,4.8z"/>
</symbol>
- <symbol id="svg-icon-config-uso" viewBox="0 0 14 14">
- <path d="M2,3h4v2H4v6h6V9h2v4H2V3z M8,1h6v6l-2.2-2.2l-4,4L6.2,7.2l4-4L8,1z"/>
+ <symbol id="svg-icon-config-uso" viewBox="0 0 20 20">
+ <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</symbol>
<symbol id="svg-icon-help" viewBox="0 0 14 16">
From 586ad8aad755aa520a87c4f6e72af0ff84861f35 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:24:42 -0400
Subject: [PATCH 02/32] edit
---
edit/beautify.js | 5 +-
edit/codemirror-default.css | 63 ++++++++++-------
edit/codemirror-editing-hooks.js | 9 +--
edit/edit.css | 113 +++++++++++++++++--------------
edit/edit.js | 46 +++++++++----
edit/global-search.css | 40 +++++++----
edit/global-search.js | 10 ++-
7 files changed, 178 insertions(+), 108 deletions(-)
diff --git a/edit/beautify.js b/edit/beautify.js
index 50ef555389..830b7e714e 100644
--- a/edit/beautify.js
+++ b/edit/beautify.js
@@ -40,8 +40,7 @@ function beautify(event) {
$create('.buttons', [
$create('button', {
attributes: {role: 'close'},
- // showHelp.close will be defined after showHelp() is invoked
- onclick: () => showHelp.close(),
+ onclick: showHelp.close,
}, t('confirmClose')),
$create('button', {
attributes: {role: 'undo'},
@@ -63,7 +62,7 @@ function beautify(event) {
]),
]));
- $('#help-popup').className = 'wide';
+ $('#help-popup').className = 'main-bg wide';
scope.forEach(cm => {
setTimeout(() => {
diff --git a/edit/codemirror-default.css b/edit/codemirror-default.css
index 83085a6d88..eaee8378ac 100644
--- a/edit/codemirror-default.css
+++ b/edit/codemirror-default.css
@@ -1,12 +1,48 @@
+:root {
+ --applies-to-pseudo: hsla(214, 100%, 90%, 0.15);
+}
+
+/************ CM default ************/
+.CodeMirror.cm-s-default {
+ background: var(--gray-lightness-93);
+}
+
+.CodeMirror {
+ outline-style: solid;
+ outline-color: transparent;
+ outline-width: 1px;
+ outline-offset: -1px;
+ transition: outline-color .25s;
+}
+
+.CodeMirror-focused {
+ outline-color: var(--focus-outline);
+}
+
+.CodeMirror.cm-s-default .CodeMirror-gutters {
+ background-color: var(--truegray-alpha-1);
+ border-right: 1px solid var(--truegray-alpha-2);
+}
+
+.CodeMirror.cm-s-default .CodeMirror-activeline-background {
+ background: var(--cm-activeline-bg);
+}
+
+.CodeMirror-hints.default {
+ background-color: var(--main-bg);
+}
+
.CodeMirror-hints {
z-index: 999;
}
+
+/* match Windows select hover, so no variables */
.CodeMirror-hint:hover {
- color: white;
+ color: #fff;
background: #08f;
}
.CodeMirror {
- border: solid #CCC 1px;
+ border: 1px solid var(--gray-lightness-76);
}
.CodeMirror-lint-mark-warning {
background: none;
@@ -14,17 +50,6 @@
.CodeMirror-dialog {
-webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
}
-.CodeMirror-focused {
- outline: -webkit-focus-ring-color auto 5px;
- outline-offset: -2px;
-}
-@supports (-moz-appearance:none) {
- /* restrict to FF */
- .CodeMirror-focused {
- outline: #7dadd9 auto 1px;
- outline-offset: -1px;
- }
-}
.CodeMirror-search-field {
width: 10em;
}
@@ -32,22 +57,14 @@
width: 5em;
}
.CodeMirror-search-hint {
- color: #888;
+ color: var(--truegray);
}
.cm-uso-variable {
font-weight: bold;
}
-.cm-searching.cm-matchhighlight {
- /* tokens found by manual search should not animate by cm-matchhighlight */
- animation-name: search-and-match-highlighter !important;
-}
-@keyframes search-and-match-highlighter {
- from { background-color: rgba(255, 255, 0, .4); } /* search color */
- to { background-color: rgba(100, 255, 100, .4); } /* sarch + highlight */
-}
.CodeMirror-activeline .applies-to:before {
- background-color: hsla(214, 100%, 90%, 0.15);
+ background-color: var(--applies-to-pseudo);
content: "";
top: 1em;
left: 0;
diff --git a/edit/codemirror-editing-hooks.js b/edit/codemirror-editing-hooks.js
index 01cd79c4ca..308f99e70d 100644
--- a/edit/codemirror-editing-hooks.js
+++ b/edit/codemirror-editing-hooks.js
@@ -1,5 +1,5 @@
/*
-global CodeMirror loadScript
+global CodeMirror linterConfig loadScript
global editors editor styleId ownTabId
global save toggleStyle setupAutocomplete makeSectionVisible getSectionForChild
global getSectionsHashes
@@ -8,6 +8,9 @@ global messageBox
'use strict';
onDOMscriptReady('/codemirror.js').then(() => {
+
+ CodeMirror.defaults.lint = linterConfig.getForCodeMirror();
+
const COMMANDS = {
save,
toggleStyle,
@@ -40,9 +43,6 @@ onDOMscriptReady('/codemirror.js').then(() => {
});
CodeMirror.defineInitHook(cm => {
- if (!cm.display.wrapper.closest('#sections')) {
- return;
- }
if (prefs.get('editor.livePreview') && styleId) {
cm.on('changes', updatePreview);
}
@@ -299,6 +299,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
break;
default:
value = null;
+ document.body.removeAttribute('data-match-highlight');
}
option = 'highlightSelectionMatches';
break;
diff --git a/edit/edit.css b/edit/edit.css
index 5481bb08de..9c84596d0c 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -1,8 +1,17 @@
:root {
--header-narrow-min-height: 12em;
+ --match-highlighter-alpha-15: hsla(193, 99%, 38%, .15);
+ --regexp-report-mark-alpha-5: hsla(60, 100%, 50%, .5);
+ --section-label-highlight: hsl(60, 100%, 80%);
+ --cm-activeline-bg: hsl(180, 22%, 88%);
+ --darkgreen: hsl(120, 100%, 20%);
+ --global-progress: hsla(180, 66%, 36%, .25);
+ --beautify-select-gradient-left: hsla(0, 0%, 0%, .07);
+ --beautify-select-gradient-right: hsla(0, 0%, 0%, .05);
}
body {
+ display: flex;
margin: 0;
font: 12px arial,sans-serif;
}
@@ -13,8 +22,8 @@ body {
top: 0;
left: 0;
right: 0;
- background-color: hsla(180, 66%, 36%, .25);
- border-left: 0 solid darkcyan;
+ background-color: var(--global-progress);
+ border-left: 0 solid var(--darkcyan);
z-index: 2147483647;
opacity: 0;
transition: opacity 2s;
@@ -27,7 +36,7 @@ body {
display: none !important;
}
-/************ checkbox & select************/
+/************ checkbox & select ************/
.options-column > div[class="option"] {
margin-bottom: 4px;
}
@@ -49,9 +58,9 @@ label {
position: fixed;
top: 0;
padding: 1rem;
- border-right: 1px dashed #AAA;
- -webkit-box-shadow: 0 0 3rem -1.2rem black;
- box-shadow: 0 0 3rem -1.2rem black;
+ border-right: 1px dashed var(--gray-lightness-66);
+ -webkit-box-shadow: 0 0 3rem -1.2rem var(--black);
+ box-shadow: 0 0 3rem -1.2rem var(--black);
box-sizing: border-box;
z-index: 10;
display: flex;
@@ -61,6 +70,7 @@ label {
margin-top: 0;
}
#sections {
+ flex-grow: 1;
padding-left: 280px;
}
#sections h2 {
@@ -122,7 +132,7 @@ label {
#preview-errors {
background-color: red;
- color: white;
+ color: var(--white);
padding: 0 6px;
border-radius: 9px;
margin-left: -.5em;
@@ -164,19 +174,19 @@ label {
.svg-icon:hover,
.svg-icon.info,
.svg-icon.settings {
- fill: #666;
+ fill: var(--gray-lightness-40);
}
.svg-icon,
.svg-icon.info:hover,
.svg-icon.settings:hover {
- fill: #000;
+ fill: var(--black);
}
#options span .svg-icon {
margin-top: -3px; /* inline info and config icons */
}
input:invalid {
- background-color: rgba(255, 0, 0, 0.1);
- color: darkred;
+ background-color: var(--truegray-alpha-05);
+ color: var(--darkred);
}
#enabled {
margin-left: 0;
@@ -198,7 +208,7 @@ input:invalid {
}
#header summary:hover h2 {
- border-color: #bbb;
+ border-color: var(--truegray-alpha-7);
}
#header summary svg {
@@ -272,7 +282,7 @@ input:invalid {
padding: 0 1rem .3rem;
}
#sections > *:not(:first-child) {
- border-top: 2px solid hsl(0, 0%, 80%);
+ border-top: 2px solid var(--truegray-alpha-3);
}
.add-section:after {
content: attr(short-text);
@@ -348,18 +358,23 @@ input:invalid {
.resize-grip-enabled .CodeMirror-scrollbar-filler {
bottom: 7px; /* make space for resize-grip */
}
-body[data-match-highlight="token"] .cm-matchhighlight-approved .cm-matchhighlight,
-body[data-match-highlight="token"] .CodeMirror-selection-highlight-scrollbar {
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar {
+ outline: 0;
+}
+body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .cm-matchhighlight,
+body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .CodeMirror-selection-highlight-scrollbar {
animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
animation-fill-mode: both;
}
-body[data-match-highlight="selection"] .cm-matchhighlight-approved .cm-matchhighlight,
-body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar {
- background-color: rgba(1, 151, 193, 0.1);
+body[data-match-highlight="selection"]:not(.find-open) .cm-matchhighlight,
+body[data-match-highlight="selection"]:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
+ background-color: var(--match-highlighter-alpha-15);
}
+
@-webkit-keyframes highlight {
from {
- background-color: #ff9;
+ background-color: var(--section-label-highlight);
}
to {
background-color: inherit;
@@ -375,7 +390,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
}
@keyframes fadein-match-highlighter {
from { background-color: transparent; }
- to { background-color: rgba(1, 151, 193, 0.1); }
+ to { background-color: var(--match-highlighter-alpha-15); }
}
.resize-grip {
position: absolute;
@@ -416,7 +431,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
padding: 0;
height: 22px;
align-items: center;
- margin: 0 .2em 0 0;
+ margin: 0 .35em 0 0;
white-space: nowrap;
}
.applies-to ul {
@@ -468,14 +483,14 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
.add-applies-to .svg-icon,
.remove-applies-to .svg-icon {
pointer-events: none;
- fill: hsl(0, 0%, 60%);
+ fill: var(--gray-lightness-60);
height: 12px;
width: 12px;
}
.add-applies-to:hover .svg-icon,
.remove-applies-to:hover .svg-icon {
pointer-events: none;
- fill: hsl(0, 0%, 0%);
+ fill: var(--black);
}
.test-regexp {
display: none;
@@ -487,7 +502,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
cursor: pointer;
}
.regexp-report mark {
- background-color: rgba(255, 255, 0, .5);
+ background-color: var(--regexp-report-mark-alpha-5);
}
.regexp-report details {
margin-left: 1rem;
@@ -504,10 +519,10 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
overflow-wrap: break-word;
}
.regexp-report details[data-type="full"] {
- color: darkgreen;
+ color: var(--darkgreen);
}
.regexp-report details[data-type="partial"] {
- color: darkgray;
+ color: var(--truegray-alpha-6);
}
.regexp-report details[data-type="invalid"] {
color: maroon;
@@ -538,7 +553,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
margin-top: -1px;
}
.regexp-report-note {
- color: #999;
+ color: var(--truegray);
position: absolute;
margin: 0 0.5rem 0 0;
hyphens: auto;
@@ -550,8 +565,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
max-width: 50vw;
position: fixed;
display: none;
- background-color: white;
- box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
+ box-shadow: 3px 3px 30px var(--black-alpha-5);
padding: 0.5rem;
z-index: 99;
}
@@ -560,7 +574,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
max-width: 100%;
}
#help-popup.big {
- box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important;
+ box-shadow: var(--black-alpha-5) 0px 0px 0px 100000px !important;
left: calc(280px - 3rem);
}
#help-popup.big .CodeMirror {
@@ -569,7 +583,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
}
#help-popup .title {
font-weight: bold;
- background-color: rgba(0,0,0,0.05);
+ background-color: var(--truegray-alpha-15);
margin: -0.5rem -0.5rem 0.5rem;
padding: .5rem 32px .5rem .5rem;
}
@@ -594,10 +608,12 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
word-break: break-all;
}
.keymap-list input {
+ background-color: var(--main-bg);
+ border: 1px solid var(--truegray-alpha-6);
width: 100%;
}
.keymap-list tr:nth-child(odd) {
- background-color: rgba(0, 0, 0, 0.07);
+ background-color: var(--truegray-alpha-1);
}
.keymap-list td:first-child {
white-space: nowrap;
@@ -651,9 +667,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
#lint table:last-child {
margin-bottom: 0;
}
-#lint table.empty {
- display: none;
-}
#lint caption {
text-align: left;
font-weight: bold;
@@ -663,7 +676,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
cursor: pointer;
}
#lint tr:hover {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: var(--black-alpha-1);
}
#lint td[role="severity"] {
font-size: 0;
@@ -716,12 +729,15 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
}
.beautify-options select {
border: none;
- background: linear-gradient(90deg, rgba(0, 0, 0, .05) 18px, rgba(0, 0, 0, .02) 24px);
+ background: linear-gradient(90deg, var(--beautify-select-gradient-left) 18px, var(--beautify-select-gradient-right) 24px);
font-family: monospace;
font-weight: bold;
padding-left: 4px;
margin-left: 4px;
}
+.beautify-options select option{
+ background-color: var(--truegray-alpha-2)
+}
/************ single editor **************/
.usercss body {
@@ -751,8 +767,9 @@ html:not(.usercss) .usercss-only,
}
.usercss #name {
- background-color: #eee;
- color: #888;
+ background-color: var(--truegray-alpha-07);
+ color: var(--truegray);
+ cursor: not-allowed;
}
#sections .single-editor,
@@ -770,14 +787,8 @@ html:not(.usercss) .usercss-only,
outline: none;
}
-#footer a {
- color: #333;
- transition: color .5s;
- text-decoration-skip: ink;
-}
-
-#footer a:hover {
- color: #666;
+.single-editor .CodeMirror.cm-s-default {
+ outline: none !important;
}
.usercss.firefox #sections,
@@ -788,9 +799,13 @@ html:not(.usercss) .usercss-only,
/************ line widget *************/
.CodeMirror-linewidget .applies-to {
+ font: normal 12px Arial, system-ui, sans-serif;
margin: 1em 0;
padding: .75rem .75rem .25rem;
padding-right: calc(1em + 20px);
+ background-color: var(--gray-lightness-90);
+ border-top: 1px solid var(--truegray-alpha-3);
+ border-bottom: 1px solid var(--truegray-alpha-3);
}
.CodeMirror-linewidget .applies-to li {
@@ -821,7 +836,7 @@ html:not(.usercss) .usercss-only,
width: unset;
position: inherit;
border-right: none;
- border-bottom: 1px dashed #AAA;
+ border-bottom: 1px dashed var(--gray-lightness-66);
padding: 0;
}
#actions {
@@ -933,7 +948,7 @@ html:not(.usercss) .usercss-only,
padding-left: 0;
display: flex;
flex-direction: column;
- flex: 1;
+ flex: 1 1 auto;
}
#sections > * {
margin: 0 .5rem .5rem;
diff --git a/edit/edit.js b/edit/edit.js
index 7ee8e21be6..44af06c1d7 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -1,12 +1,13 @@
/*
-global CodeMirror loadScript
+global CodeMirror parserlib loadScript
+global CSSLint initLint linterConfig updateLintReport renderLintReport updateLinter
global createSourceEditor
global closeCurrentTab regExpTester messageBox
global setupCodeMirror
global beautify
global initWithSectionStyle addSections removeSection getSectionsHashes
global sectionsToMozFormat
-global moveFocus editorWorker
+global moveFocus
*/
'use strict';
@@ -211,6 +212,7 @@ function beforeUnload() {
}
const isDirty = editor ? editor.isDirty() : !isCleanGlobal();
if (isDirty) {
+ updateLintReportIfEnabled(null, 0);
// neither confirm() nor custom messages work in modern browsers but just in case
return t('styleChangesNotSaved');
}
@@ -226,7 +228,7 @@ function isUsercss(style) {
function initStyleData() {
// TODO: remove .replace(/^\?/, '') when minimum_chrome_version >= 52 (https://crbug.com/601425)
const params = new URLSearchParams(location.search.replace(/^\?/, ''));
- const id = Number(params.get('id'));
+ const id = params.get('id');
const createEmptyStyle = () => ({
id: null,
name: params.get('domain') ||
@@ -242,8 +244,8 @@ function initStyleData() {
)
],
});
- return fetchStyle()
- .then(style => {
+ return API.getStyles({id: id || -1})
+ .then(([style = createEmptyStyle()]) => {
styleId = style.id;
if (styleId) sessionStorage.justEditedStyleId = styleId;
// we set "usercss" class on <html> when <body> is empty
@@ -257,13 +259,6 @@ function initStyleData() {
}
return style;
});
-
- function fetchStyle() {
- if (id) {
- return API.getStyleFromDB(id);
- }
- return Promise.resolve(createEmptyStyle());
- }
}
function initHooks() {
@@ -281,6 +276,9 @@ function initHooks() {
$('#save-button').addEventListener('click', save, false);
$('#sections-help').addEventListener('click', showSectionHelp, false);
+ // TODO: investigate why FF needs this delay
+ debounce(initLint, FIREFOX ? 100 : 0);
+
if (!FIREFOX) {
$$([
'input:not([type])',
@@ -355,6 +353,7 @@ function toggleStyle() {
}
function save() {
+ updateLintReportIfEnabled(null, 0);
if (!validate()) {
return;
}
@@ -415,6 +414,12 @@ function updateTitle() {
$('#save-button').disabled = clean;
}
+function updateLintReportIfEnabled(...args) {
+ if (CodeMirror.defaults.lint) {
+ updateLintReport(...args);
+ }
+}
+
function showMozillaFormat() {
const popup = showCodeMirrorPopup(t('styleToMozillaFormatTitle'), '', {readOnly: true});
popup.codebox.setValue(toMozillaFormat());
@@ -456,7 +461,16 @@ function fromMozillaFormat() {
function doImport({replaceOldStyle = false}) {
lockPageUI(true);
- editorWorker.parseMozFormat({code: popup.codebox.getValue().trim()})
+ new Promise(setTimeout)
+ .then(() => {
+ const worker = linterConfig.worker.csslint;
+ if (!worker.instance) worker.instance = new Worker(worker.path);
+ })
+ .then(() => linterConfig.invokeWorker({
+ linter: 'csslint',
+ action: 'parse',
+ code: popup.codebox.getValue().trim(),
+ }))
.then(({sections, errors}) => {
// shouldn't happen but just in case
if (!sections.length && errors.length) {
@@ -469,7 +483,8 @@ function fromMozillaFormat() {
removeOldSections(replaceOldStyle);
return addSections(sections, div => setCleanItem(div, false));
})
- .then(() => {
+ .then(sectionDivs => {
+ sectionDivs.forEach(div => updateLintReportIfEnabled(div.CodeMirror, 1));
$('.dismiss').dispatchEvent(new Event('click'));
})
.catch(showError)
@@ -524,7 +539,7 @@ function showToMozillaHelp(event) {
function showHelp(title = '', body) {
const div = $('#help-popup');
- div.className = '';
+ div.className = 'main-bg';
const contents = $('.contents', div);
contents.textContent = '';
@@ -589,6 +604,7 @@ function showCodeMirrorPopup(title, html, options) {
foldGutter: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
matchBrackets: true,
+ lint: linterConfig.getForCodeMirror(),
styleActiveLine: true,
theme: prefs.get('editor.theme'),
keyMap: prefs.get('editor.keyMap')
diff --git a/edit/global-search.css b/edit/global-search.css
index 51ec91112b..e769899167 100644
--- a/edit/global-search.css
+++ b/edit/global-search.css
@@ -6,9 +6,9 @@
max-width: calc(100vw - 4rem);
box-sizing: border-box;
z-index: 10000;
- background-color: white;
- box-shadow: 4px 5px 20px -6px rgba(0, 0, 0, .5);
- border: 1px solid hsla(0, 0%, 50%, .4);
+ background-color: var(--white);
+ box-shadow: 4px 5px 20px -6px var(--black-alpha-5);
+ border: 1px solid var(--truegray-alpha-4);
transition: opacity .25s;
border-top: none;
}
@@ -21,7 +21,7 @@
padding-right: .75em;
display: flex;
align-items: stretch;
- background-color: hsla(0, 0%, 50%, .1);
+ background-color: var(--truegray-alpha-1);
}
#search-replace-dialog [data-type="content"] {
@@ -59,7 +59,7 @@
padding: .25rem .25rem .25rem .5rem;
margin: 0;
border: none;
- background-color: white;
+ background-color: var(--white);
font-weight: bold;
white-space: nowrap;
color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
@@ -118,7 +118,7 @@
right: 0;
bottom: 0;
position: absolute;
- border-color: hsla(180, 100%, 30%, .5);
+ border-color: var(--darkcyan-alpha-5);
border-style: none none solid none;
border-width: 4px;
}
@@ -160,11 +160,11 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: hsla(0, 0%, 100%, .75);
+ background-color: var(--white-alpha-75);
}
#search-replace-dialog [data-type="status"] {
- background-color: hsla(0, 0%, 50%, .2);
+ background-color: var(--truegray-alpha-2);
padding-top: 2px;
padding-left: .5rem;
display: flex;
@@ -181,17 +181,33 @@
opacity: 1;
}
-/*********** CodeMirror ****************/
+/*********** CodeMirror search. Shouldn't need variables ****************/
+body.find-open .search-target-editor {
+ outline-color: darkorange !important;
+}
-.search-target-editor {
- outline: 1px solid darkorange;
+body.find-open .cm-searching {
+ background-color: rgba(255, 255, 0, .4);
}
-#stylus .search-target-match {
+body.find-open .cm-searching.search-target-match {
background-color: darkorange;
color: black;
}
+body.find-open .CodeMirror-search-match {
+ background: gold;
+ border-top: 1px solid orange;
+ border-bottom: 1px solid orange;
+}
+
+/* hide default CM search highlighting */
+body .cm-searching,
+body .CodeMirror-search-match {
+ background-color: transparent;
+ border-color: transparent;
+}
+
@media (max-width: 500px) {
#search-replace-dialog {
left: 0;
diff --git a/edit/global-search.js b/edit/global-search.js
index c8bdaa5c3f..24df31e5e8 100644
--- a/edit/global-search.js
+++ b/edit/global-search.js
@@ -753,8 +753,14 @@ onDOMready().then(() => {
function makeTargetVisible(element) {
const old = $('.' + TARGET_CLASS);
if (old !== element) {
- if (old) old.classList.remove(TARGET_CLASS);
- if (element) element.classList.add(TARGET_CLASS);
+ if (old) {
+ old.classList.remove(TARGET_CLASS);
+ document.body.classList.remove('find-open');
+ }
+ if (element) {
+ element.classList.add(TARGET_CLASS);
+ document.body.classList.add('find-open');
+ }
}
}
From b2af8770ee8c522c75caa5217f24a4d35b0f46e4 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:25:29 -0400
Subject: [PATCH 03/32] usercss
---
install-usercss/install-usercss.css | 86 ++++++++++++++++-------------
1 file changed, 49 insertions(+), 37 deletions(-)
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index 7b22d04cc9..e7345a2ff3 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -1,18 +1,17 @@
+:root{
+ --install-btn-default: hsl(176, 50%, 35%);
+ --install-btn-default-hover: hsl(176, 50%, 40%);
+ --install-btn-update: hsl(140, 100%, 13%);
+ --install-btn-update-hover: hsl(140, 100%, 18%);
+ --warning-border: hsl(0, 28%, 60%);
+ --warnings-bg: hsl(0, 100%, 94%);
+}
+
body {
overflow: hidden;
margin: 0;
font: 12px arial, sans-serif;
- background: white;
-}
-
-a {
- color: #000;
- transition: color .5s;
- text-decoration-skip: ink;
-}
-
-a:hover {
- color: #666;
+ background: var(--main-bg);
}
img.icon,
@@ -23,16 +22,16 @@ img.icon,
.svg-icon {
margin-left: 2px;
- fill: #000;
+ fill: var(--black);
transition: fill .5s;
}
a:hover .svg-icon {
- fill: #666;
+ fill: var(--gray-lightness-40);
}
input:disabled + span {
- color: rgb(128, 128, 128);
+ color: var(--truegray);
}
.container {
@@ -45,8 +44,8 @@ input:disabled + span {
flex: 0 0 280px;
box-sizing: border-box;
padding: 1rem;
- border-right: 1px dashed #aaa;
- box-shadow: 0 0 50px -18px black;
+ border-right: 1px dashed var(--gray-lightness-66);
+ box-shadow: 0 0 50px -18px var(--black);
overflow-wrap: break-word;
overflow-y: auto;
z-index: 100;
@@ -60,9 +59,9 @@ input:disabled + span {
display: none;
padding-bottom: 0;
flex-basis: auto;
- background: #ffe2e2;
+ background: var(--warnings-bg);
border-right: none;
- border-bottom: 1px dashed #aaa;
+ border-bottom: 1px dashed var(--gray-lightness-66);
}
.has-warnings .warnings {
@@ -111,19 +110,19 @@ h1 small {
.install {
font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
font-size: 14px;
- background-color: hsl(0, 0%, 33%);
- color: #eee;
+ background-color: var(--gray-lightness-33);
+ color: var(--gray-lightness-93);
border-radius: 4px;
padding: 4px 38px 4px 10px;
position: relative;
display: inline-block;
- text-shadow: 1px 1px 1px #333;
+ text-shadow: 1px 1px 1px var(--gray-lightness-20);
-webkit-appearance: none;
-moz-appearance: none;
border-style: none;
margin-bottom: 1ex;
cursor: pointer;
- box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset 1px 0 0 0 hsl(0, 0%, 24%);
+ box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset 1px 0 0 0 var(--gray-lightness-24);
transition: color .25s, background-color .25s;
}
@@ -135,8 +134,8 @@ h1 small {
}
.install:hover:not(:disabled) {
- background-color: hsl(0, 0%, 38%);
- color: #fff;
+ background-color: var(--gray-lightness-38);
+ color: var(--white);
text-shadow: none;
}
@@ -154,8 +153,8 @@ h1 small {
}
.install:before {
- border-left: 1px solid rgba(0, 0, 0, .3);
- box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset -1px 0 0 0 hsl(0, 0%, 38%);
+ border-left: 1px solid var(--black-alpha-3);
+ box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset -1px 0 0 0 var(--gray-lightness-38);
padding: 5px 8px;
transition: background-color .25s;
}
@@ -163,11 +162,11 @@ h1 small {
.install:before,
.install:active:before,
.install:active:hover:before {
- background-color: hsl(176, 50%, 35%);
+ background-color: var(--install-btn-default);
}
.install:hover:before {
- background-color: hsl(176, 50%, 40%);
+ background-color: var(--install-btn-default-hover);
}
.install:active,
@@ -179,7 +178,7 @@ h1 small {
.install:active,
.install:active:hover {
- background-color: hsl(0, 0%, 33%);
+ background-color: var(--gray-lightness-33);
}
.install:after {
@@ -190,7 +189,7 @@ h1 small {
.install:disabled {
opacity: .25;
- color: white;
+ color: var(--white);
cursor: auto;
}
@@ -201,25 +200,25 @@ h1 small {
.install.reinstall:before,
.install.reinstall:active:before,
.install.reinstall:active:hover:before {
- background-color: hsl(0, 0%, 20%);
+ background-color: var(--gray-lightness-20);
}
.install.reinstall:hover:before {
- background-color: hsl(0, 0%, 25%);
+ background-color: var(--gray-lightness-25);
}
.install.reinstall:hover:before {
- background-color: #444;
+ background-color: var(--gray-lightness-27);
}
.install.update:before,
.install.update:active:before,
.install.update:active:hover:before {
- background-color: hsl(140, 100%, 13%);
+ background-color: var(--install-btn-update);
}
.install.update:hover:before {
- background-color: hsl(140, 100%, 18%);
+ background-color: var(--install-btn-update-hover);
}
.install.update:after {
@@ -281,6 +280,19 @@ li {
border: none;
}
+/************ CM default ************/
+.CodeMirror.cm-s-default {
+ background: var(--gray-lightness-93) !important;
+}
+
+.CodeMirror.cm-s-default .CodeMirror-gutters {
+ background-color: var(--truegray-alpha-1) !important;
+ border-right: 1px solid var(--truegray-alpha-2) !important;
+}
+
+.CodeMirror {
+ outline: none !important;
+}
/* spinner-related */
#header {
@@ -457,7 +469,7 @@ label:not(.unavailable) {
#header {
flex: 0 1 auto;
border-right: none;
- border-bottom: 1px dashed #AAA;
+ border-bottom: 1px dashed var(--gray-lightness-66);
overflow-x: auto;
overflow-y: hidden;
padding: 0;
@@ -530,7 +542,7 @@ label:not(.unavailable) {
max-height: 20%;
}
.warning:not(:last-child) {
- border-bottom: 1px dashed #b57c7c;
+ border-bottom: 1px dashed var(--warning-border);
padding-bottom: 1em;
}
ul.applies-to,
From 525030c15dc126645741a82347a5d3959663c7d3 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:26:51 -0400
Subject: [PATCH 04/32] prefs
---
js/prefs.js | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/js/prefs.js b/js/prefs.js
index b89da99430..b59879d044 100644
--- a/js/prefs.js
+++ b/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
From 6474eb178a8e1a476b36783c8cd1f36b9dd60651 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:28:28 -0400
Subject: [PATCH 05/32] manage CSS
---
manage/manage.css | 176 +++++++++++++++++++++++++---------------------
1 file changed, 96 insertions(+), 80 deletions(-)
diff --git a/manage/manage.css b/manage/manage.css
index eb0374822c..ef1db06f85 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -5,13 +5,28 @@
--name-padding-right: 40px;
--actions-width: 75px;
--onoffswitch-width: 60px;
+ --manage-zebra-alpha-bg: hsla(0, 0%, 50%, .07);
+ --styles-hidden: hsla(180, 40%, 45%, .3);
+ --usercss-label: hsl(180, 100%, 20%);
+ --exit-filters: hsla(180, 50%, 27%, .5);
+ --exit-filters-hover: hsl(180, 50%, 27%);
+ --tooltip-default-border: hsl(52, 52%, 73%);
+ --tooltip-default-bg: hsl(54, 100%, 92%);
+ --tooltip-action-complete-border: hsl(179, 38%, 66%);
+ --tooltip-action-complete-bg: hsl(166, 100%, 88%);
+ --palered: hsl(0, 81%, 67%);
+ --lightred: hsl(0, 98%, 62%);
+ --red: hsl(0, 100%, 50%);
+ --stylename-manage-hover-text: hsl(180, 100%, 15%);
+ --stylename-hover-garadient-left: hsla(180, 50%, 30%, 0.2);
+ --stylename-hover-garadient-middle: hsla(180, 20%, 10%, 0.05);
}
body {
margin: 0;
/* Firefox: fill the entire page for drag'n'drop to work */
display: flex;
- height: 100%;
+ min-height: 100%;
}
#header:lang(ja) h1 {
@@ -22,7 +37,7 @@ body.all-styles-hidden-by-filters:before,
body.all-styles-hidden-by-filters:after {
position: absolute;
left: calc(3rem + var(--header-width));
- color: hsla(180, 40%, 45%, .3);
+ color: var(--styles-hidden);
animation: fadein 3s;
}
@@ -38,25 +53,15 @@ body.all-styles-hidden-by-filters:after {
top: 3rem;
}
-a, .disabled a:hover {
- color: #000;
- transition: color .5s;
- text-decoration-skip: ink;
-}
-
-a:hover {
- color: #666;
-}
-
#header {
width: var(--header-width);
height: 100vh;
position: fixed;
top: 0;
padding: 1rem;
- border-right: 1px dashed #AAA;
- -webkit-box-shadow: 0 0 50px -18px black;
- box-shadow: 0 0 50px -18px black;
+ border-right: 1px dashed var(--gray-lightness-66);
+ -webkit-box-shadow: 0 0 50px -18px var(--black);
+ box-shadow: 0 0 50px -18px var(--black);
overflow: auto;
box-sizing: border-box;
z-index: 9;
@@ -71,11 +76,6 @@ a:hover {
max-width: calc(100% - 30px);
}
-#check-all-updates-force {
- white-space: normal;
- text-align: left;
-}
-
#header h1 {
margin-top: 0;
margin-bottom: .3em;
@@ -103,7 +103,7 @@ a:hover {
}
#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
- fill: #aaa;
+ fill: var(--gray-lightness-66);
}
#add-style-as-usercss-wrapper input {
@@ -127,7 +127,7 @@ a:hover {
.entry {
margin: 0;
padding: 1.25em 2em;
- border-top: 1px solid #ddd;
+ border-top: 1px solid var(--gray-lightness-86);
}
.entry:first-child {
@@ -140,11 +140,11 @@ a:hover {
transition: fill .5s;
width: 20px;
height: 20px;
- fill: #666;
+ fill: var(--gray-lightness-40);
}
.svg-icon:hover {
- fill: #000;
+ fill: var(--black);
}
.svg-icon.info {
@@ -209,7 +209,7 @@ a:hover {
}
.applies-to .target:hover {
- background-color: rgba(128, 128, 128, .15);
+ background-color: var(--truegray-alpha-15);
}
.applies-to-extra:not([open]) {
@@ -239,7 +239,7 @@ a:hover {
font-weight: normal;
font-size: 11px;
text-transform: lowercase;
- background: rgba(128, 128, 128, .2);
+ background: var(--truegray-alpha-2);
padding: 2px 5px 3px;
border-radius: 4px;
margin-left: 1ex;
@@ -250,8 +250,8 @@ a:hover {
.entry.usercss .style-name-link::after {
content: "usercss";
- background-color: hsla(180, 100%, 20%, 1);
- color: white;
+ background-color: var(--usercss-label);
+ color: var(--white);
}
.disabled h2 .style-name-link,
@@ -292,8 +292,8 @@ a:hover {
padding-top: .1rem;
}
-#options-buttons button,
-#backup-buttons button {
+#options-buttons > *,
+#backup-buttons > * {
margin: 0 .2rem .5rem 0;
}
@@ -330,7 +330,7 @@ a:hover {
}
#header summary:hover h2 {
- border-color: #bbb;
+ border-color: var(--gray-lightness-73);
}
/* compact layout */
@@ -352,7 +352,7 @@ a:hover {
}
.newUI .entry.odd {
- background-color: rgba(128, 128, 128, 0.05);
+ background-color: var(--manage-zebra-alpha-bg);
}
.newUI .entry > * {
@@ -405,6 +405,8 @@ a:hover {
}
.filter-selection select {
+ background-image: none;
+ background-color: transparent;
height: 18px;
border: none;
max-width: 100%;
@@ -412,6 +414,10 @@ a:hover {
padding-right: 14px;
}
+.filter-selection select option {
+ background-color: var(--main-bg)
+}
+
.filter-selection .select-arrow {
margin-top: 2px;
top: 0;
@@ -434,7 +440,7 @@ a:hover {
#filters label:hover,
#filters .filter-selection:hover {
- background-color: hsla(0, 0%, 50%, .2);
+ background-color: var(--truegray-alpha-2);
}
.checkmate {
@@ -463,7 +469,7 @@ a:hover {
.newUI .entry .svg-icon.checked,
.newUI .entry:hover .svg-icon.checked {
- fill: #000;
+ fill: var(--black);
}
.newUI .entry input[type="checkbox"]:not(.slider) {
@@ -479,19 +485,26 @@ a:hover {
cursor: pointer;
}
-.newUI .entry .style-name:hover::before {
+.newUI .entry .style-name::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
- background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+ background: linear-gradient(to right, var(--stylename-hover-garadient-left), var(--stylename-hover-garadient-middle) 50%, transparent);
pointer-events: none;
+ opacity: 0;
+ transition: opacity .1s;
+ will-change: opacity;
+}
+
+.newUI .entry .style-name:hover::before {
+ opacity: 1;
}
.newUI .entry.enabled .style-name:hover .style-name-link {
- color: hsla(180, 100%, 15%, 1);
+ color: var(--stylename-manage-hover-text);
}
.newUI .style-name:after {
@@ -526,15 +539,15 @@ a:hover {
}
.newUI .entry .svg-icon {
- fill: #999;
+ fill: var(--gray-lightness-60);
}
.newUI .entry:hover .svg-icon {
- fill: #666;
+ fill: var(--gray-lightness-40);
}
.newUI .entry:hover .svg-icon:hover {
- fill: #000;
+ fill: var(--black);
}
.newUI .checking-update .check-update {
@@ -570,17 +583,17 @@ a:hover {
.newUI .can-update[data-details$="locally edited"] .update svg,
.newUI .update-problem .check-update svg {
- fill: #ef6969;
+ fill: var(--palered);
}
.newUI .can-update[data-details$="locally edited"]:hover .update svg,
.newUI .entry.update-problem:hover .check-update svg {
- fill: #fd4040;
+ fill: var(--lightred);
}
.newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
.newUI .entry.update-problem:hover .check-update svg:hover {
- fill: red;
+ fill: var(--red);
}
.newUI .actions {
@@ -593,19 +606,19 @@ a:hover {
margin-top: 18px;
margin-left: -36px;
padding: 1ex 1.5ex;
- border: 1px solid #ded597;
- background-color: #fffbd6;
+ border: 1px solid var(--tooltip-default-border);
+ background-color: var(--tooltip-default-bg);
border-radius: 4px;
- box-shadow: 2px 3px 10px rgba(0,0,0,.25);
+ box-shadow: 2px 3px 10px var(--black-alpha-25);
font-size: 90%;
animation: fadeout 10s;
animation-fill-mode: both;
}
.newUI .update-problem .check-update:after {
- background-color: red;
- border: 1px solid #d40000;
- color: white;
+ background-color: var(--red);
+ border: 1px solid var(--darker-red);
+ color: var(--white);
animation: none;
}
@@ -614,8 +627,8 @@ a:hover {
}
.newUI .can-update:not([data-details$="locally edited"]) .update:after {
- background-color: #c0fff0;
- border: 1px solid #89cac9;
+ background-color: var(--tooltip-action-complete-bg);
+ border: 1px solid var(--tooltip-action-complete-border);
}
.newUI .applies-to {
@@ -721,8 +734,7 @@ a:hover {
height: 14px;
display: inline-block;
vertical-align: middle;
- position: relative;
- top: -1px;
+ margin-left: 1px;
}
#newUIoptions [data-toggle-on-click] > svg {
@@ -815,15 +827,6 @@ input[id^="manage.newUI"] {
margin-top: 1ex;
}
-#update-all-no-updates[data-skipped-edited="true"] {
- font-weight: bold;
-}
-
-#update-all-no-updates[data-skipped-edited="true"]::after {
- font-weight: normal;
- display: block;
-}
-
/* highlight updated/added styles */
.highlight {
animation: highlight 10s cubic-bezier(0,.82,.47,.98);
@@ -834,7 +837,7 @@ input[id^="manage.newUI"] {
@keyframes highlight {
from {
- background-color: rgba(128, 128, 128, .5);
+ background-color: var(--truegray-alpha-5);
}
to {
background-color: none;
@@ -859,7 +862,7 @@ input[id^="manage.newUI"] {
}
#filters > label:hover {
- background-color: hsla(0, 0%, 50%, .4);
+ background-color: var(--truegray-alpha-4);
}
#filters {
@@ -867,9 +870,9 @@ input[id^="manage.newUI"] {
}
.active #filters-stats {
- background-color: darkcyan;
- border-color: darkcyan;
- color: white;
+ background-color: var(--darkcyan);
+ border-color: var(--darkcyan);
+ color: var(--white);
font-size: 0.7rem;
font-weight: normal;
padding: 2px 5px;
@@ -891,8 +894,17 @@ input[id^="manage.newUI"] {
margin-top: 4px
}
+.favicon-label-wrapper {
+ display: inline-flex;
+ flex-wrap: nowrap;
+}
+
+.favicon-label-wrapper a:hover .svg-icon {
+ fill: var(--black);
+}
+
#reset-filters svg {
- fill: hsla(180, 50%, 27%, .5);
+ fill: var(--exit-filters);
width: 24px; /* widen the click area a bit */
height: 20px;
padding: 2px;
@@ -900,7 +912,7 @@ input[id^="manage.newUI"] {
}
#reset-filters:hover svg {
- fill: hsla(180, 50%, 27%, 1);
+ fill: var(--exit-filters-hover);
}
#filters summary:not(.active) #reset-filters,
@@ -932,16 +944,20 @@ input[id^="manage.newUI"] {
#search {
max-width: calc(100% - 30px);
+ background-color: var(--gray-lightness-93);
+ border: 1px solid var(--gray-lightness-60);
+ transition: border-color .25s;
+}
+
+#search[data-focused-via-click]:focus {
+ border-color: var(--focus-outline);
}
#search, #manage\.newUI\.sort {
flex-grow: 1;
- background: #fff;
height: 20px;
box-sizing: border-box;
padding: 3px 3px 3px 4px;
- color: #000;
- border: 1px solid hsl(0, 0%, 66%);
}
#manage\.newUI\.sort {
@@ -970,12 +986,12 @@ input[id^="manage.newUI"] {
}
.help-text mark {
- background-color: rgba(128, 128, 128, .15);
+ background-color: var(--truegray-alpha-15);
color: currentColor;
padding: 2px 6px;
font-weight: bold;
font-family: Consolas, monospace;
- border: 1px solid rgba(128, 128, 128, .25);
+ border: 1px solid var(--truegray-alpha-25);
display: inline-block;
margin: 2px;
}
@@ -998,15 +1014,15 @@ input[id^="manage.newUI"] {
}
#import pre {
- background: #eee;
+ background: var(--main-bg);
overflow: auto;
margin: 0 0 .5em 0;
}
/* drag-n-drop on import button */
.dropzone:after {
- background-color: rgba(0, 0, 0, 0.7);
- color: white;
+ background-color: var(--black-alpha-7);
+ color: var(--white);
left: 0;
top: 0;
right: 0;
@@ -1015,7 +1031,7 @@ input[id^="manage.newUI"] {
position: fixed;
padding: calc(50vh - 3em) calc(50vw - 5em);
content: attr(dragndrop-hint);
- text-shadow: 1px 1px 10px black;
+ text-shadow: 1px 1px 10px var(--black);
font-size: xx-large;
text-align: center;
animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
@@ -1029,7 +1045,7 @@ input[id^="manage.newUI"] {
/* post-import report */
#message-box details:not([data-id="invalid"]) div:hover {
- background-color: rgba(128, 128, 128, .3);
+ background-color: var(--truegray-alpha-3);
}
#message-box details:not(:last-child) {
@@ -1141,7 +1157,7 @@ input[id^="manage.newUI"] {
width: 100%;
position: static;
border-right: none;
- border-bottom: 1px dashed #AAA;
+ border-bottom: 1px dashed var(--gray-lightness-66);
}
#manage-settings {
From 4f45e633ac43f969165722c99082d98947f2c451 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:29:35 -0400
Subject: [PATCH 06/32] messagebox
---
msgbox/msgbox.css | 22 +++++++++++++---------
msgbox/msgbox.js | 11 +++--------
2 files changed, 16 insertions(+), 17 deletions(-)
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index 3f8c25baf2..738691be03 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -1,3 +1,8 @@
+:root {
+ --message-box-title: hsl(170, 40%, 69%);
+ --firebrick: hsl(0, 68%, 42%);
+}
+
#message-box {
top: 0;
left: 0;
@@ -5,7 +10,7 @@
bottom: 0;
display: flex;
position: fixed;
- background-color: rgba(0, 0, 0, 0.45);
+ background-color: var(--black-alpha-45);
animation: fadein .25s ease-in-out;
z-index: 9999990;
-moz-user-select: none;
@@ -21,8 +26,7 @@
position: fixed;
display: flex;
flex-direction: column;
- background-color: white;
- box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.225);
+ box-shadow: 5px 5px 50px var(--black-alpha-25);
z-index: 9999991;
-moz-user-select: text;
}
@@ -57,7 +61,7 @@
#message-box-title {
font-weight: bold;
- background-color: rgb(145, 208, 198);
+ background-color: var(--message-box-title);
padding: .75rem 24px .75rem 52px;
font-size: 1rem;
position: relative;
@@ -79,8 +83,8 @@
}
#message-box.danger #message-box-title {
- background-color: firebrick;
- color: white;
+ background-color: var(--firebrick);
+ color: var(--white);
}
#message-box.danger #message-box-title::before {
@@ -92,11 +96,11 @@
}
#message-box.danger #message-box-close-icon svg {
- fill: maroon;
+ fill: var(--maroon);
}
#message-box.danger #message-box-close-icon svg:hover {
- fill: #600;
+ fill: var(--darker-maroon);
}
#message-box-close-icon {
@@ -117,6 +121,7 @@
position: relative;
flex-grow: 9;
overflow-wrap: break-word;
+ outline: none;
}
#message-box-contents p:first-child {
@@ -129,7 +134,6 @@
#message-box-buttons {
padding: .75rem .375rem;
- background-color: #f0f0f0;
text-align: center;
}
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index 9d04c1433f..84070380c6 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -34,12 +34,7 @@ function messageBox({
document.body.appendChild(messageBox.element);
messageBox.originalFocus = document.activeElement;
- // skip external links like feedback
- while ((moveFocus(messageBox.element, 1) || {}).target === '_blank') {/*NOP*/}
- // suppress focus outline when invoked via click
- if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
- document.activeElement.dataset.focusedViaClick = '';
- }
+ moveFocus(messageBox.element, 1);
if (typeof onshow === 'function') {
onshow(messageBox.element);
@@ -112,7 +107,7 @@ function messageBox({
const id = 'message-box';
messageBox.element =
$create({id, className}, [
- $create([
+ $create('div.main-bg', [
$create(`#${id}-title`, title),
$create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon},
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'},
@@ -120,7 +115,7 @@ function messageBox({
'5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z',
}))),
$create(`#${id}-contents`, tHTML(contents)),
- $create(`#${id}-buttons`,
+ $create(`#${id}-buttons.truegray-alpha-2`,
buttons.map((content, buttonIndex) => content &&
$create('button', Object.assign({
buttonIndex,
From e83ff94ef76cea16b2d42548b7577602f6da7fc3 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:30:33 -0400
Subject: [PATCH 07/32] options CSS
---
options/onoffswitch.css | 22 ++++---
options/options.css | 124 +++++++++++++++++++++++++++++++++-------
2 files changed, 118 insertions(+), 28 deletions(-)
diff --git a/options/onoffswitch.css b/options/onoffswitch.css
index c335c97e97..895d89f89d 100644
--- a/options/onoffswitch.css
+++ b/options/onoffswitch.css
@@ -1,5 +1,11 @@
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
+:root {
+ --slider-enabled-bg: hsl(165, 45%, 84%);
+ --slider-enabled-border: hsl(165, 45%, 82%);
+ --slider-enabled-circle: hsl(171, 96%, 37%);
+}
+
.onoffswitch {
position: relative;
margin: 1ex 0;
@@ -33,10 +39,10 @@
height: 12px;
padding: 0;
line-height: 12px;
- border: 0 solid #E3E3E3;
+ border: 1px solid var(--gray-lightness-84);
border-radius: 12px;
- background-color: #E0E0E0;
- box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
+ background-color: var(--gray-lightness-87);
+ box-shadow: inset 2px 2px 4px var(--black-alpha-15);
}
.onoffswitch span::before {
@@ -45,21 +51,21 @@
width: 18px;
height: 18px;
margin: -3px;
- background: #efefef;
+ background: var(--gray-lightness-92);
position: absolute;
top: 0;
bottom: 0;
right: 46px;
border-radius: 18px;
- box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
+ box-shadow: 0 3px 13px 0 var(--black-alpha-45);
}
.onoffswitch input:checked + span {
- background-color: #CAEBE3;
+ background-color: var(--slider-enabled-bg);
}
.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
- border-color: #CAEBE3;
+ border-color: var(--slider-enabled-border);
}
.onoffswitch input:checked + span .onoffswitch-inner {
@@ -69,5 +75,5 @@
.onoffswitch input:checked + span::before {
right: 0;
background-color: #04BA9F;
- box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
+ box-shadow: 3px 6px 18px 0 var(--black-alpha-25);
}
diff --git a/options/options.css b/options/options.css
index e852e568fe..28d1be34fa 100644
--- a/options/options.css
+++ b/options/options.css
@@ -10,7 +10,7 @@ html.opera body {
}
body {
- background: #fff;
+ background: var(--main-bg);
margin: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
@@ -18,13 +18,35 @@ 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;
+ --match-ff-bg: hsl(240, 9%, 98%);
/* compensate 'html.firefox .block' padding-left */
width: calc(100% - var(--addons-page-left-padding));
/* match the default FF theme */
- background-color: #f9f9fa;
+ background-color: var(--match-ff-bg)
}
html.firefox .block {
padding-left: var(--addons-page-left-padding);
@@ -39,7 +61,7 @@ body {
display: flex;
align-items: center;
margin: 1em 0;
- border-bottom: 1px dotted #ccc;
+ border-bottom: 1px dotted var(--gray-lightness-80);
padding: 0 16px .75em;
position: relative;
}
@@ -86,13 +108,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;
+ text-shadow: 0 0 0.01px var(--black-alpha-25);
}
input[type=number],
@@ -117,8 +143,8 @@ input[type=number] {
}
input[type=number]:invalid {
- background-color: rgba(255, 0, 0, 0.1);
- color: darkred;
+ background-color: var(--red-alpha-1);
+ color: var(--darkred);
}
input[type="color"] {
@@ -143,7 +169,6 @@ input[type="color"] {
align-items: stretch;
padding: 1em;
white-space: nowrap;
- background-color: rgba(0, 0, 0, .05);
margin: 0;
}
@@ -221,7 +246,7 @@ html:not(.firefox):not(.opera) #updates {
#advanced.collapsible h1 {
width: unset;
padding: 0;
- color: #333;
+ color: var(--gray-lightness-20);
transition: color .5s;
display: inline-flex;
align-items: center;
@@ -234,32 +259,91 @@ html:not(.firefox):not(.opera) #updates {
}
#advanced.collapsible:not(.collapsed) h1:hover {
- color: #666;
+ color: var(--gray-lightness-40);
}
#advanced.collapsible.collapsed h1 {
padding: 0;
- color: #666;
+ color: var(--gray-lightness-40);
}
#advanced.collapsible.collapsed:hover h1 {
- color: #333;
+ color: var(--gray-lightness-20);
}
.collapsible-resizer .svg-icon {
- fill: #333;
+ fill: var(--gray-lightness-20);
transition: fill .5s;
height: 16px;
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: var(--gray-lightness-40);
+ transition: fill .5s;
+}
+
+label:hover .icon-wrapper .svg-icon,
+input:checked + .icon-wrapper .svg-icon {
+ fill: var(--black);
+}
+
+.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;
+ fill: var(--gray-lightness-40);
}
#advanced.collapsible.collapsed:hover .collapsible-resizer .svg-icon {
- fill: #333;
+ fill: var(--gray-lightness-20);
}
#advanced.collapsible h1 .svg-icon {
@@ -278,12 +362,12 @@ html:not(.firefox):not(.opera) #updates {
.svg-inline-wrapper .svg-icon {
width: 16px;
height: 16px;
- fill: #666;
+ fill: var(--gray-lightness-40);
vertical-align: sub;
}
.svg-inline-wrapper:hover .svg-icon {
- fill: #000;
+ fill: var(--black);
}
#message-box.note > div {
@@ -306,7 +390,7 @@ html:not(.firefox):not(.opera) #updates {
.expanded-note {
font-size: 90%;
white-space: normal;
- color: #666;
+ color: var(--gray-lightness-40);
margin-top: .5em;
hyphens: auto;
}
From 97108767e773d99e1659c3199c163b4f142a7710 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:31:59 -0400
Subject: [PATCH 08/32] popup
---
popup/popup.css | 814 +++++++++++++++++++++++++++++++++------
popup/popup.js | 98 +++--
popup/search-results.css | 66 ++--
3 files changed, 805 insertions(+), 173 deletions(-)
diff --git a/popup/popup.css b/popup/popup.css
index 15e119184f..ae77fb7f42 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -6,6 +6,11 @@
--actions-width: 75px;
--onoffswitch-width: 60px;
--outer-padding: 9px;
+ --popup-zebra-alpha-bg: hsla(0, 0%, 50%, .1);
+ --all-disabled-checkbox-hover: hsl(0, 50%, 40%);
+ --stylename-popup-hover-text: hsl(180, 100%, 20%);
+ --stylename-hover-garadient-left: hsla(180, 50%, 30%, 0.2);
+ --stylename-hover-garadient-middle: hsla(180, 20%, 10%, 0.05);
}
html {
@@ -24,14 +29,16 @@ body {
font-size: 12px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
margin: 0;
+ display: flex;
+ flex-wrap: wrap;
}
.firefox body {
- color: #000;
- background-color: #fff;
+ color: var(--black);
+ background-color: var(--main-bg);
}
-body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
+#confirm {
margin-left: var(--outer-padding);
margin-right: var(--outer-padding);
}
@@ -41,14 +48,9 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
}
/************ checkbox ************/
-.style-name:hover input[type="checkbox"]:checked {
- border-color: hsl(0, 0%, 32%);
- background-color: hsl(0, 0%, 82%);
-}
-
.style-name:hover input[type="checkbox"] {
- border-color: hsl(0, 0%, 32%);
- background-color: hsl(0, 0%, 82%);
+ border-color: var(--black);
+ background-color: transparent;
}
#disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@@ -58,30 +60,28 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
pointer-events: none;
}
-#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
- fill: hsl(0, 68%, 42%);
-}
-
-#installed.disabled + .actions #disableAll:checked {
- border-color: hsl(0, 68%, 50%);
+body.disabled #disableAll:checked + .svg-icon.checked {
+ fill: var(--darker-red);
}
-#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
- fill: #fff;
+body.disabled #disableAll:checked:hover + .svg-icon.checked {
+ fill: var(--white);
}
-#disableAll:hover {
- border-color: hsl(0, 68%, 50%);
- background-color: hsl(20, 70%, 75%);
+#disableAll:hover,
+body.disabled #disableAll:checked {
+ border-color: var(--darker-red);
+ background-color: var(--red-alpha-05);
}
+body.disabled #disableAll-label,
#disableAll-label:hover {
- color: hsl(0, 68%, 42%);
+ color: var(--firebrick);
}
-#installed.disabled + .actions #disableAll:checked:hover {
- border-color: hsl(0, 50%, 56%);
- background-color: hsl(0, 50%, 56%);
+body.disabled #disableAll:checked:hover {
+ border-color: var(--firebrick);
+ background-color: var(--firebrick);
}
#installed .style-name .checker,
@@ -122,46 +122,307 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
display: inline;
}
-a {
- color: #000;
- transition: color .5s;
- text-decoration-skip: ink;
+body > div:last-of-type,
+body.blocked > div {
+ border-bottom: none;
}
-a:hover {
- color: #666;
+#search-results {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-basis: 100%;
+ padding-bottom: 12px;
}
-.actions > .main-controls {
- padding-left: 16px;
+#installed {
+ border-bottom: 1px solid var(--truegray-alpha-3);
+ max-height: 445px;
+ overflow-y: auto;
+ counter-reset: style-number;
+ position: relative;
+ flex-basis: 100%;
}
-.main-controls {
- display: table-cell;
+#write-styles-wrapper,
+.classicUI #disable-all-wrapper {
+ flex-basis: 100%;
}
-body > DIV:last-of-type,
-body.blocked > DIV {
- border-bottom: none;
+body.disabled .toggle-all-off,
+body:not(.disabled) .toggle-all-on {
+ display: none;
}
-#installed {
- border-bottom: 1px solid black;
- padding-bottom: 2px;
- padding-top: 2px;
- max-height: 445px;
- overflow-y: auto;
- counter-reset: style-number;
+#popup-write-style-icon {
+ display: inline-flex;
+}
+
+#write-styles-wrapper {
+ padding: var(--outer-padding);
+}
+
+.action-wrapper {
+ display: inline-flex;
+ flex-shrink: 1;
+ align-items: center;
+}
+
+#popup-manage-wrapper {
+ padding-left: 4px;
+}
+
+#disable-all-wrapper {
+ padding-right: 4px;
+}
+
+#find-styles-wrapper.action-wrapper {
+ flex-grow: 1;
+ justify-content: center;
+}
+
+/* accessibility */
+.main-controls .style-edit-link-accessibility {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ pointer-events: none
+}
+
+.style-edit-link-accessibility:not([data-focused-via-click]):focus + .style-name,
+.entry .actions > a:not([data-focused-via-click]):focus {
+ opacity: 1 !important;
+}
+
+#popup-manage-icon,
+#popup-options-icon,
+#popup-wiki-icon,
+#disable-all-icon,
+#popup-confirm-icon {
+ display: inline-flex;
+ height: 30px;
+ width: 30px;
+ align-items: center;
+ justify-content: center;
+}
+
+#popup-wiki-icon .svg-icon,
+#find-styles-icon .svg-icon {
+ height: 22px;
+ width: 22px;
+}
+
+#find-inline-icon {
+ display: inline-flex;
+}
+
+#popup-confirm-icon {
+ cursor: pointer;
+ margin: -5px 0;
+}
+
+#popup-options-icon .svg-icon,
+#popup-confirm-icon .svg-icon {
+ height: 18px;
+ width: 18px;
+}
+
+#disable-all-icon .svg-icon {
+ height: 20px;
+ width: 20px;
+}
+
+#write-style-for .svg-icon {
+ height: 16px;
+ width: 16px;
+}
+
+#find-external-icon,
+#find-external-icon-noclick,
+#find-inline-icon {
+ height: 20px;
+ padding-top: 3px;
+ overflow: hidden;
+ box-sizing: border-box;
+}
+
+#popup-manage-icon .svg-icon,
+#find-external-icon .svg-icon,
+#find-external-icon-noclick .svg-icon,
+#find-inline-icon .svg-icon,
+a[target="_blank"] .svg-icon.config {
+ height: 20px;
+ width: 20px;
+}
+
+#popup-manage-icon .svg-icon {
+ stroke: var(--gray-lightness-40);
+ fill: transparent;
+ transition: stroke .5s;
+}
+
+#popup-manage-icon:hover .svg-icon {
+ stroke: var(--black);
+}
+
+#find-styles-link,
+#write-style-for {
+ font-size: 0;
+}
+
+#write-style-wrapper {
+ flex-basis: 100%;
+ padding: var(--outer-padding);
+}
+
+#find-styles {
+ display: flex;
+}
+
+#find-styles-inline-group input[type="checkbox"] ~ #find-external-icon,
+.search-results-shown #find-external-icon-noclick,
+.error-shown #find-external-icon-noclick,
+#find-styles-icon {
+ display: inline-flex;
+}
+
+#find-styles-inline-group input[type="checkbox"]:checked ~ #find-external-icon,
+#find-styles-inline-group input[type="checkbox"]:not(:checked) ~ #find-inline-icon,
+#find-external-icon-noclick {
+ display: none;
+}
+
+.search-results-shown #find-external-icon,
+.search-results-shown #find-inline-icon,
+.error-shown #find-external-icon,
+.error-shown #find-inline-icon {
+ display: none !important;
+}
+
+#find-styles-inline-group,
+#find-inline-icon {
+ display: inline-flex;
+ height: min-content;
+}
+
+#find-styles-inline-group label {
+ display: inline-flex;
+ pointer-events: none;
+}
+
+#find-inline-icon,
+#find-external-icon {
+ pointer-events: all;
+}
+
+.svg-icon.write-style path:first-child {
+ stroke: var(--gray-lightness-40);
+ stroke-width: 1px;
+ stroke-linejoin: round;
+}
+
+.svg-icon.toggled-on,
+.svg-icon.toggled-off {
+ height: 22px;
+ width: 22px;
+}
+
+.svg-icon.toggled-on path,
+.svg-icon.toggled-off path {
+ transition: fill .5s, stroke .5s;
+ height: 22px;
+ width: 22px;
+}
+
+.svg-icon.toggled-on path:first-child,
+.svg-icon.toggled-on path:nth-child(2) {
+ fill: var(--gray-lightness-90);
+}
+
+a:hover .svg-icon.toggled-on path:first-child,
+a:hover .svg-icon.toggled-on path:nth-child(2) {
+ fill: var(--white);
+}
+
+.svg-icon.toggled-off path:first-child,
+.svg-icon.toggled-off path:nth-child(2) {
+ fill: var(--gray-lightness-80);
+}
+
+a:hover .svg-icon.toggled-off path:first-child,
+a:hover .svg-icon.toggled-off path:nth-child(2) {
+ fill: var(--gray-lightness-90);
+}
+
+.svg-icon.toggled-on path:nth-child(2),
+.svg-icon.toggled-off path:nth-child(2) {
+ stroke: var(--truegray);
+ stroke-width: 1px;
+ stroke-linejoin: round;
+}
+
+a:hover .svg-icon.toggled-on path:nth-child(2),
+a:hover .svg-icon.toggled-off path:nth-child(2) {
+ stroke: var(--black);
+}
+
+a:hover .svg-icon.toggled-on path:nth-child(3),
+a:hover .svg-icon.toggled-off path:nth-child(3) {
+ fill: var(--black);
+}
+
+
+.svg-icon.toggled-on path:nth-child(3),
+.svg-icon.toggled-off path:nth-child(3) {
+ fill: var(--gray-lightness-30);
+}
+
+.entry.disabled .actions > .enable,
+.entry.enabled .actions > .disable {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.entry.disabled .actions > .disable,
+.entry.enabled .actions > .enable,
+.toggleUI .entry.disabled .actions > .enable,
+.toggleUI .entry.enabled .actions > .disable,
+.toggleUI .directLinkUI-el {
+ display: none !important;
+}
+
+.classicUI #find-styles-inline-group label {
position: relative;
+ padding-left: 16px;
+ pointer-events: all;
+}
+
+.toggleUI .style-name {
+ padding-left: 26px;
+ cursor: default;
+}
+
+.iconUI .classicUI-el,
+.classicUI .iconUI-el,
+.directLinkUI .toggleUI-el,
+.toggleUI .editUI-el {
+ display: none !important;
}
-#installed.disabled .style-name {
+.iconUI #disable-all-wrapper {
+ padding: 0;
+}
+
+body.disabled .style-name {
text-decoration: line-through;
}
-#installed.disabled + .actions #disableAll-label {
+body.disabled + .actions #disableAll-label {
font-weight: bold;
- color: firebrick;
+ color: var(--firebrick);
}
#installed .actions {
@@ -204,8 +465,14 @@ html[style] .entry {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- padding-left: 26px;
+ padding-left: var(--outer-padding);
position: relative;
+ transition: color .1s, opacity .1s;
+ cursor: pointer;
+}
+
+.style-name:hover {
+ color: var(--stylename-popup-hover-text);
}
.entry .style-name::before {
@@ -215,9 +482,10 @@ html[style] .entry {
left: 0;
right: 0;
bottom: 0;
- background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+ background: linear-gradient(to right, var(--stylename-hover-garadient-left), var(--stylename-hover-garadient-middle) 50%, transparent);
pointer-events: none;
opacity: 0;
+ z-index: -1;
transition: opacity .1s;
will-change: opacity;
}
@@ -226,17 +494,72 @@ html[style] .entry {
opacity: 1;
}
+.entry.disabled .style-name,
+.entry.disabled .actions > a,
+.entry.regexp-partial .style-name,
+.entry.regexp-partial .actions > a,
+.unreachable .entry .style-name,
+.unreachable .entry .actions > a {
+ opacity: .4;
+}
+
+.entry.disabled .actions > a,
+.entry.regexp-partial .actions > a,
+.unreachable .entry .actions > a {
+ transition: opacity .1s;
+}
+
+/***** adjust disabled opacity on zebra-striping *****/
+
+#installed:not(.reverse-stripe) .entry.disabled:nth-child(even) .style-name,
+#installed:not(.reverse-stripe) .entry.disabled:nth-child(even) .actions > a,
+#installed:not(.reverse-stripe) .entry.regexp-partial:nth-child(even) .style-name,
+#installed:not(.reverse-stripe) .entry.regexp-partial:nth-child(even) .actions > a,
+#installed:not(.reverse-stripe) .unreachable .entry:nth-child(even) .style-name,
+#installed:not(.reverse-stripe) .unreachable .entry:nth-child(even) .actions > a,
+.reverse-stripe .entry.disabled:nth-child(odd) .style-name,
+.reverse-stripe .entry.disabled:nth-child(odd) .actions > a,
+.reverse-stripe .entry.regexp-partial:nth-child(odd) .style-name,
+.reverse-stripe .entry.regexp-partial:nth-child(odd) .actions > a,
+.reverse-stripe .unreachable .entry:nth-child(odd) .style-name,
+.reverse-stripe .unreachable .entry:nth-child(odd) .actions > a {
+ opacity: .35;
+}
+
+.entry.disabled:before,
+.entry.regexp-partial:before,
+.unreachable .entry:before {
+ opacity: .6;
+ transition: opacity .1s;
+}
+
+.entry:hover .style-name,
+.entry:hover .actions > a,
+.entry:hover:before {
+ opacity: 1 !important;
+}
+
.entry .main-controls {
height: 100%;
display: inline-flex;
flex-grow: 1;
overflow: hidden;
align-items: center;
- padding-right: 5px;
+ position: relative;
+}
+
+.entry .actions {
+ padding-left: 5px;
+}
+
+.entry:nth-child(odd),
+.reverse-stripe .entry:nth-child(even) {
+ background-color: transparent;
}
-.entry:nth-child(even) {
- background-color: rgba(0, 0, 0, 0.05);
+.entry:nth-child(even),
+.reverse-stripe .entry:nth-child(odd) {
+ background-color: var(--popup-zebra-alpha-bg);
}
.entry:nth-child(-n+10):before,
@@ -246,7 +569,7 @@ html[style] .entry {
position: absolute;
top: .9ex;
right: 5px;
- color: #aaa;
+ color: var(--gray-lightness-66);
}
.entry:nth-child(11):before {
@@ -265,9 +588,24 @@ html[style*="border"] .entry:nth-child(11):before {
}
.entry .actions > * {
- display: inline-block;
- padding: 0 1px;
- margin: 0 1px;
+ height: 26px;
+ width: 20px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.entry .actions > .enable,
+.entry .actions > .disable {
+ width: 24px;
+}
+
+.entry .actions > .configure {
+ padding-right: 1px;
+}
+
+.entry .actions > .configure[target="_blank"] {
+ padding-right: 2px;
}
.not-applied .checker,
@@ -284,11 +622,11 @@ html[style*="border"] .entry:nth-child(11):before {
}
.not-applied:hover .style-name {
- color: darkred;
+ color: var(--darkred);
}
.regexp-problem-indicator {
- background-color: #d00;
+ background-color: var(--darker-red);
width: 14px;
height: 14px;
line-height: 15px;
@@ -296,11 +634,12 @@ html[style*="border"] .entry:nth-child(11):before {
margin-right: 6px;
margin-left: 6px;
text-align: center;
- color: white;
+ color: var(--white);
font-weight: bold;
box-sizing: border-box;
cursor: pointer;
font-size: 90%;
+ flex-shrink: 0;
}
.regexp-partial .actions,
@@ -315,9 +654,9 @@ html[style*="border"] .entry:nth-child(11):before {
right: 0;
padding: .5rem;
font-size: 90%;
- border-top: 2px solid black;
- border-bottom: 2px solid black;
- box-shadow: 0 0 100px black;
+ border-top: 2px solid var(--black);
+ border-bottom: 2px solid var(--black);
+ box-shadow: 0 0 100px var(--black);
display: flex;
flex-direction: column;
z-index: 999999;
@@ -342,25 +681,53 @@ html[style*="border"] .entry:nth-child(11):before {
.svg-icon {
pointer-events: none;
transition: fill .5s;
- width: 14px;
+ width: 16px;
height: 16px;
- fill: #666;
+ fill: var(--gray-lightness-40);
}
-a:hover .svg-icon {
- fill: #000;
+a:hover .svg-icon,
+.actions a:hover .svg-icon,
+#find-styles:hover a:hover .svg-icon.external:not(.noclick),
+#find-styles:hover a:hover .svg-icon.inline,
+a:hover .svg-icon.search {
+ fill: var(--black);
}
-body > .actions {
- margin-top: 0.5em;
- /* raise the actions above the hotkey-info */
- position: relative;
- z-index: 4;
+.svg-icon.external,
+.svg-icon.inline {
+ fill: var(--gray-lightness-65);
+}
+
+.actions .svg-icon,
+.svg-icon.options {
+ fill: var(--truegray);
+}
+
+.svg-icon.search,
+#find-styles:hover .svg-icon.external:not(.noclick),
+#find-styles:hover .svg-icon.inline {
+ fill: var(--gray-lightness-45);
+}
+
+.svg-icon.remove {
+ height: 16px;
+ width: 14px;
+}
+
+#disable-all-icon {
+ transition: transform .5s;
+ will-change: transform;
+}
+
+#disable-all-icon:hover .svg-icon,
+body.disabled #disable-all-icon .svg-icon {
+ fill: var(--darker-red);
}
-.actions > div:not(:last-child):not(#disable-all-wrapper),
-.actions > .main-controls > div:not(:last-child) {
- margin-bottom: 0.75em;
+body.disabled #disable-all-icon {
+ transform: rotate(180deg);
+ transform-origin: 50% 50%;
}
.actions input,
@@ -369,15 +736,19 @@ body > .actions {
}
body.blocked #installed > *,
-body.blocked .actions > .main-controls {
+body.blocked #find-styles-wrapper,
+body.blocked #write-style-wrapper {
display: none;
}
-/* Never shown, but can be enabled with a style */
+.iconUI body.blocked #popup-options-wrapper {
+ flex-grow: 1;
+ justify-content: flex-start;
+}
-.entry .actions > .enable,
-.entry .actions > .disable {
- display: none;
+.iconUI body.blocked #popup-wiki-wrapper {
+ flex-grow: 1;
+ justify-content: flex-end;
}
/* 'New style' links */
@@ -385,11 +756,11 @@ body.blocked .actions > .main-controls {
#write-style {
display: flex;
flex-direction: row;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
}
#write-style-for {
- margin-right: .6ex
+ margin-right: .2rem;
}
.write-style-link {
@@ -401,10 +772,22 @@ body.blocked .actions > .main-controls {
}
#match {
- overflow-wrap: break-word;
- display: block;
- flex-grow: 9;
- min-width: 200px;
+ display: inline-flex;
+ flex-grow: 1;
+ margin-top: 2px;
+}
+
+#match > .breadcrumbs {
+ display: inline-flex;
+ flex-wrap: wrap;
+}
+
+#match > .breadcrumbs > * {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-wrap: nowrap;
+ max-width: calc(100vw - 42px);
}
/* "breadcrumbs" 'new style' links */
@@ -413,7 +796,7 @@ body.blocked .actions > .main-controls {
}
.breadcrumbs:hover a {
- color: #bbb;
+ color: var(--gray-lightness-73);
text-decoration: none
}
@@ -457,27 +840,18 @@ body.blocked .actions > .main-controls {
/* action buttons */
-#popup-options {
- display: flex;
- flex-direction: row;
- padding: var(--outer-padding) 1px;
-}
-
-#popup-options button {
+#popup-manage-wrapper button,
+#popup-options-wrapper button,
+#popup-wiki-wrapper button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 4px;
- margin-right: 4px;
/* several languages have labels of wildly different lengths so we try to maintain the proportion */
flex: 1 1 auto;
min-width: 2em;
}
-#popup-options button:last-child {
- margin-right: 0;
-}
-
/* confirm */
#confirm {
@@ -492,7 +866,7 @@ body.blocked .actions > .main-controls {
height: 100%;
margin: 0 !important;
box-sizing: border-box;
- background-color: rgba(0, 0, 0, 0.4);
+ background-color: var(--black-alpha-4);
animation: lights-off .5s cubic-bezier(.03, .67, .08, .94);
animation-fill-mode: both;
}
@@ -516,20 +890,44 @@ body.blocked .actions > .main-controls {
max-height: 80%;
min-height: 6em;
padding: 1em;
- background-color: #fff;
display: flex;
flex-direction: column;
- border: solid 2px rgba(0, 0, 0, 0.5);
+ border: solid 2px var(--black-alpha-5);
}
#confirm > div > *:not(:last-child) {
padding-bottom: .5em;
}
-#confirm > div > div {
+#confirm > div > div.classicUI-el {
text-align: center;
}
+#confirm > div > div.iconUI-el {
+ display: flex;
+ flex-basis: 100%;
+ justify-content: center;
+}
+
+.iconUI #confirm > div {
+ padding-bottom: .25em
+}
+
+#popup-delete-icon.action-wrapper,
+#popup-cancel-icon.action-wrapper {
+ height: 20px;
+ width: 20px;
+ justify-content: center;
+}
+
+#popup-delete-icon {
+ margin-right: .75rem;
+}
+
+#popup-cancel-icon {
+ margin-left: .75rem;
+}
+
.non-windows #confirm > div > div {
direction: rtl;
text-align: right;
@@ -541,12 +939,8 @@ body.blocked .actions > .main-controls {
margin: 0 .25em .25em 0;
}
-.unreachable .entry {
- opacity: .25;
-}
-
.unreachable .blocked-info {
- border-bottom: 1px solid black;
+ border-bottom: 1px solid var(--truegray-alpha-3);
}
.blocked-info {
@@ -554,13 +948,13 @@ body.blocked .actions > .main-controls {
}
.blocked-info label {
- padding: 5px 0;
+ padding: 5px var(--outer-padding);
display: block;
font-weight: bold;
}
.blocked-info p {
- padding: 1px 0 var(--outer-padding);
+ padding: 1px var(--outer-padding) var(--outer-padding);
display: block;
font-size: 90%;
margin: 0;
@@ -594,7 +988,7 @@ body.blocked .actions > .main-controls {
display: flex;
flex-direction: column;
border-left: 2px solid white;
- box-shadow: 0 0 90px rgba(0, 0, 0, .5);
+ box-shadow: 0 0 90px var(--black-alpha-5);
z-index: 5;
}
@@ -607,12 +1001,13 @@ body.blocked .actions > .main-controls {
#hotkey-info div {
padding: 1em;
- border-top: 1px solid #ddd;
- background-color: white;
+ border-top: 1px solid var(--gray-lightness-86);
+ background-color: var(--gray-lightness-95);
}
#hotkey-info div:last-child {
- box-shadow: 0 0 90px rgba(0, 0, 0, .25);
+ background-color: var(--gray-lightness-85);
+ box-shadow: 0 0 90px var(--black-alpha-25);
position: relative;
}
@@ -626,16 +1021,197 @@ body.blocked .actions > .main-controls {
#hotkey-info mark {
display: inline-block;
- background: linear-gradient(#ccc, #fff);
+ background: linear-gradient(var(--gray-lightness-80), var(--white));
padding: 1px 6px 0;
margin: 2px;
- border: 1px solid white;
+ border: 1px solid var(--white);
border-radius: 4px;
- box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
+ box-shadow: 1px 1px 4px var(--black-alpha-3);
font-weight: bold;
white-space: nowrap;
}
+/***** icon UI actions on top *****/
+
+.actions-top #confirm {
+ order: 1;
+}
+
+.actions-top #installed {
+ order: 8;
+ border-top: 1px solid var(--truegray-alpha-3);
+}
+
+.actions-top body:not(.search-results-shown) #installed {
+ border-bottom: 0;
+}
+
+.actions-top #popup-manage-wrapper {
+ order: 2;
+}
+
+.actions-top #popup-options-wrapper {
+ order: 3;
+}
+
+.actions-top #find-styles-wrapper {
+ order: 4;
+}
+
+.actions-top #popup-wiki-wrapper {
+ order: 5;
+}
+
+.actions-top #disable-all-wrapper {
+ order: 6;
+}
+
+.actions-top #write-style-wrapper {
+ order: 7;
+}
+
+.actions-top #search-results-error {
+ order: 9;
+}
+
+.actions-top #search-results {
+ order: 10;
+}
+
+/***** classic UI *****/
+
+.classicUI #confirm {
+ order: 1;
+}
+
+.classicUI #installed {
+ order: 2;
+}
+
+.classicUI #popup-manage-wrapper {
+ order: 6;
+}
+
+.classicUI #popup-options-wrapper {
+ order: 7;
+}
+
+.classicUI #find-styles-wrapper {
+ order: 4;
+}
+
+.classicUI #popup-wiki-wrapper {
+ order: 8;
+}
+
+.classicUI #disable-all-wrapper {
+ order: 3;
+}
+
+.classicUI #write-style-wrapper {
+ order: 5;
+}
+
+.classicUI #search-results-error {
+ order: 9;
+}
+
+.classicUI #search-results {
+ order: 10;
+}
+
+.classicUI #write-style {
+ flex-wrap: wrap;
+ padding: 0 4px 0 16px;
+}
+
+.classicUI #find-styles-wrapper {
+ align-items: baseline;
+ justify-content: flex-start;
+ padding: 0 4px 0 25px;
+}
+
+.classicUI #disable-all-wrapper {
+ padding: .6rem var(--outer-padding) .45rem;
+}
+
+.classicUI #find-styles-link {
+ font-size: 12px;
+ margin-right: .55rem;
+}
+
+.classicUI #write-style-for {
+ font-size: 12px;
+ flex-basis: 100%;
+}
+
+.classicUI #popup-manage-wrapper,
+.classicUI #popup-options-wrapper,
+.classicUI #popup-wiki-wrapper {
+ flex-grow: 1;
+ padding-bottom: var(--outer-padding);
+}
+
+.classicUI #popup-manage-wrapper {
+ padding-left: var(--outer-padding);
+ padding-right: 4px;
+}
+
+.classicUI #popup-wiki-wrapper {
+ padding-left: 4px;
+ padding-right: var(--outer-padding);
+}
+
+.toggleUI .style-name:hover {
+ color: var(--black);
+}
+
+.toggleUI .entry .style-name::before {
+ background: linear-gradient(to right, var(--black-alpha-15), var(--black-alpha-05) 50%, transparent);
+}
+
+/***** classic UI actions on top *****/
+
+.classicUI.actions-top #confirm {
+ order: 1;
+}
+
+.classicUI.actions-top #installed {
+ order: 8;
+}
+
+.classicUI.actions-top #popup-manage-wrapper {
+ order: 5;
+}
+
+.classicUI.actions-top #popup-options-wrapper {
+ order: 6;
+}
+
+.classicUI.actions-top #find-styles-wrapper {
+ order: 3;
+}
+
+.classicUI.actions-top #popup-wiki-wrapper {
+ order: 7;
+}
+
+.classicUI.actions-top #disable-all-wrapper {
+ order: 2;
+}
+
+.classicUI.actions-top #write-style-wrapper {
+ order: 4;
+}
+
+.classicUI.actions-top #search-results-error {
+ order: 9;
+}
+
+.classicUI.actions-top #search-results {
+ order: 10;
+}
+
/******************************************/
@keyframes lights-off {
@@ -643,13 +1219,13 @@ body.blocked .actions > .main-controls {
background-color: transparent;
}
to {
- background-color: rgba(0, 0, 0, 0.4);
+ background-color: var(--black-alpha-4);
}
}
@keyframes lights-on {
from {
- background-color: rgba(0, 0, 0, 0.4);
+ background-color: var(--black-alpha-4);
}
to {
background-color: transparent;
diff --git a/popup/popup.js b/popup/popup.js
index bea9498d2c..90d8e91a59 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -11,6 +11,22 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
toggleSideBorders();
+if (prefs.get('popupui') === 1) {
+ document.documentElement.classList.add('classicUI');
+} else {
+ document.documentElement.classList.add('iconUI');
+}
+
+if (prefs.get('popupclick') === 1) {
+ document.documentElement.classList.add('toggleUI');
+} else {
+ document.documentElement.classList.add('directLinkUI');
+}
+
+if (!prefs.get('popup.stylesFirst')) {
+ document.documentElement.classList.add('actions-top');
+}
+
getActiveTab().then(tab =>
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
? getTabRealURLFirefox(tab)
@@ -81,8 +97,17 @@ function initPopup() {
// action buttons
$('#disableAll').onchange = function () {
- installed.classList.toggle('disabled', this.checked);
+ document.body.classList.toggle('disabled', this.checked);
+ };
+
+ $('#disable-all-icon').onclick = () => {
+ $('#disableAll').click();
+ };
+
+ $('#find-styles-icon').onclick = () => {
+ $('#find-styles-link').click();
};
+
setupLivePrefs();
Object.assign($('#popup-manage-button'), {
@@ -91,18 +116,36 @@ function initPopup() {
oncontextmenu: handleEvent.openManager,
});
+ Object.assign($('#popup-manage-icon'), {
+ onclick: handleEvent.openManager,
+ onmouseup: handleEvent.openManager,
+ oncontextmenu: handleEvent.openManager,
+ });
+
+ $('#find-external-icon').onclick = () => {
+ event.preventDefault();
+ $('input.toggle-inline').click()
+ };
+
+ $('#find-inline-icon').onclick = () => {
+ event.preventDefault();
+ $('input.toggle-inline').click()
+ };
+
$('#popup-options-button').onclick = () => {
chrome.runtime.openOptionsPage();
window.close();
};
+ $('#popup-options-icon').onclick = () => {
+ event.preventDefault();
+ chrome.runtime.openOptionsPage();
+ window.close();
+ };
+
$('#popup-wiki-button').onclick = handleEvent.openURLandHide;
- if (!prefs.get('popup.stylesFirst')) {
- document.body.insertBefore(
- $('body > .actions'),
- installed);
- }
+ $('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
if (!tabURL) {
document.body.classList.add('blocked');
@@ -129,7 +172,7 @@ function initPopup() {
$('label', info).textContent = t('unreachableAMO');
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
- const renderToken = s => s[0] === '<' ? $create('b', tWordBreak(s.slice(1, -1))) : s;
+ const renderToken = s => s[0] === '<' ? $create('b', s.slice(1, -1)) : s;
const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
const noteNode = $create('fragment', note.split('\n').map(renderLine));
const target = $('p', info);
@@ -241,6 +284,9 @@ function showStyles(styles) {
}
window.dispatchEvent(new Event('showStyles:done'));
});
+
+ var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
+ $('#installed').classList.toggle('reverse-stripe', reverseZebra);
}
@@ -272,6 +318,12 @@ function createStyleElement({
onclick: handleEvent.openLink,
});
+ const editLinkAccess = $('.style-edit-link-accessibility', entry);
+ Object.assign(editLinkAccess, {
+ href: editLinkAccess.getAttribute('href') + style.id,
+ onclick: handleEvent.openLink,
+ });
+
const styleName = $('.style-name', entry);
Object.assign(styleName, {
htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
@@ -304,14 +356,7 @@ function createStyleElement({
if (check) detectSloppyRegexps([style]);
const oldElement = $(ENTRY_ID_PREFIX + style.id);
- if (oldElement && oldElement.contains(document.activeElement)) {
- // preserve the focused element inside
- const {className} = document.activeElement;
- oldElement.parentNode.replaceChild(entry, oldElement);
- // we're not using $() since className may contain multiple tokens
- const el = entry.getElementsByClassName(className)[0];
- if (el) el.focus();
- } else if (oldElement) {
+ if (oldElement) {
oldElement.parentNode.replaceChild(entry, oldElement);
} else {
container.appendChild(entry);
@@ -330,13 +375,16 @@ Object.assign(handleEvent, {
},
name(event) {
- this.checkbox.dispatchEvent(new MouseEvent('click'));
+ if (prefs.get('popupclick') === 1) {
+ this.checkbox.dispatchEvent(new MouseEvent('click'));
+ } else {
+ const entry = handleEvent.getClickedStyleElement(event);
+ $('.style-edit-link', entry).click();
+ }
event.preventDefault();
},
toggle(event) {
- // when fired on checkbox, prevent the parent label from seeing the event, see #501
- event.stopPropagation();
API.saveStyle({
id: handleEvent.getClickedStyleId(event),
enabled: this.matches('.enable') || this.checked,
@@ -350,9 +398,12 @@ Object.assign(handleEvent, {
box.dataset.display = true;
box.style.cssText = '';
$('b', box).textContent = $('.style-name', entry).textContent;
- $('[data-cmd="ok"]', box).focus();
- $('[data-cmd="ok"]', box).onclick = () => confirm(true);
- $('[data-cmd="cancel"]', box).onclick = () => confirm(false);
+ $('button[data-cmd="ok"]', box).focus();
+ $('button[data-cmd="ok"]', box).onclick = () => confirm(true);
+ $('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
+ $('a[data-cmd="ok"]', box).focus();
+ $('a[data-cmd="ok"]', box).onclick = () => confirm(true); event.preventDefault();
+ $('a[data-cmd="cancel"]', box).onclick = () => confirm(false); event.preventDefault();
window.onkeydown = event => {
const keyCode = event.keyCode || event.which;
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
@@ -438,7 +489,7 @@ Object.assign(handleEvent, {
event.preventDefault();
getActiveTab()
.then(activeTab => API.openURL({
- url: this.href || this.dataset.href,
+ url: this.hasAttribute('data-href') ? this.dataset.href : this.href,
index: activeTab.index + 1,
message: tryJSONparse(this.dataset.sendMessage),
}))
@@ -483,6 +534,9 @@ function handleDelete(id) {
if (!$('.entry')) {
installed.appendChild(template.noStyles.cloneNode(true));
}
+
+ var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
+ $('#installed').classList.toggle('reverse-stripe', reverseZebra);
}
diff --git a/popup/search-results.css b/popup/search-results.css
index e1c805a697..9240269804 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -1,15 +1,19 @@
+:root {
+ --search-result-meta: hsla(0, 0%, 93%, 0.75);
+}
+
body.search-results-shown {
overflow-y: auto;
overflow-x: hidden;
}
#search-results:not([data-empty]):before {
- background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px);
+ background-image: linear-gradient(transparent, var(--black-alpha-3) 200px);
content: "";
top: -50px;
left: -1000px;
right: -1000px;
- bottom: -12px;
+ bottom: 0;
position: absolute;
pointer-events: none;
animation: fadein 1s;
@@ -18,15 +22,17 @@ body.search-results-shown {
#search-results {
position: relative;
- margin-top: -1em;
}
#search-results-error {
- background-color: rgba(255, 0, 0, 0.4);
+ flex-basis: 100%;
+ background-color: var(--darkred);
+ color: var(--white);
+ text-shadow: 2px 1px 1px var(--black);
font-weight: bold;
padding: 5px;
text-align: center;
- margin: 0 0 var(--outer-padding);
+ margin: 0 var(--outer-padding) var(--outer-padding);
}
#search-results-list {
@@ -39,24 +45,29 @@ body.search-results-shown {
position: relative;
padding: 8px 8px 21px;
min-height: 160px;
+ margin: 0 2px;
}
.search-result {
- box-shadow: 1px 1px 10px rgba(0, 0, 0, .75);
+ box-shadow: 1px 1px 10px var(--black-alpha-75);
border-radius: 4px;
- border: 1px solid #555;
+ border: 1px solid var(--gray-lightness-33);
margin-bottom: 24px;
- background-color: #eee;
+ background-color: var(--gray-lightness-93);
+}
+
+.search-result:last-of-type {
+ margin-bottom: 0;
}
.search-result:hover {
- border-color: #000;
- background-color: #fff;
+ border-color: var(--black);
+ background-color: var(--white);
}
.search-result .lds-spinner {
transform: scale(.5);
- filter: invert(1) drop-shadow(1px 1px 3px #000);
+ filter: invert(1) drop-shadow(1px 1px 3px var(--black));
}
.search-result-empty .lds-spinner {
@@ -79,7 +90,7 @@ body.search-results-shown {
.search-result-title {
margin-bottom: .5em;
display: block;
- color: #555;
+ color: var(--gray-lightness-33);
overflow-wrap: break-word;
}
@@ -103,14 +114,14 @@ body.search-results-shown {
line-height: 18px;
text-align: center;
position: absolute;
- background-color: hsla(180, 100%, 27%, .75);
- color: #fff;
+ background-color: var(--darkcyan-alpha-75);
+ color: var(--white);
transition: background-color .5s;
pointer-events: none;
}
.search-result-screenshot:hover ~ .search-result-status {
- background-color: hsla(180, 100%, 27%, 1);
+ background-color: var(--darkcyan);
}
.search-result-actions {
@@ -131,13 +142,13 @@ body.search-results-shown {
}
.search-result-actions button {
- box-shadow: 2px 2px 20px #000;
+ box-shadow: 2px 2px 20px var(--black);
white-space: nowrap;
margin: 3px;
}
.search-result-meta {
- background-color: hsla(0, 0%, 93%, 0.75);
+ background-color: var(--search-result-meta);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@@ -150,7 +161,7 @@ body.search-results-shown {
}
.search-result:hover .search-result-meta {
- background-color: hsla(0, 0%, 100%, 0.75);
+ background-color: var(--white-alpha-75);
}
.search-result-meta dt {
@@ -179,16 +190,13 @@ body.search-results-shown {
font-weight: bold;
}
-.search-result-meta [data-type="rating"][data-class="good"] dd {
- color: darkgreen;
-}
-
+.search-result-meta [data-type="rating"][data-class="good"] dd,
.search-result-meta [data-type="rating"][data-class="okay"] dd {
- color: darkgreen;
+ color: var(--darkgreen);
}
.search-result-meta [data-type="rating"][data-class="bad"] dd {
- color: darkred;
+ color: var(--darkred);
}
.search-result-meta [data-type="rating"][data-class="none"] dd {
@@ -227,8 +235,7 @@ body.search-results-shown {
}
.search-results-nav[data-type="bottom"] {
- margin-top: -1em;
- margin-bottom: 1em;
+ margin: 1.25rem 0 .5rem;
}
#search-results .search-results-nav button {
@@ -249,12 +256,7 @@ body.search-results-shown {
}
#search-results .search-results-nav button:not(:disabled):hover {
- text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
-}
-
-#find-styles-inline-group label {
- position: relative;
- padding-left: 16px;
+ text-shadow: 0 1px 4px var(--black-alpha-5);
}
/* spinner: https://github.com/loadingio/css-spinner */
From e4aaa9e94f6a72904c16256d9f3d6a72c02fd8dd Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 16:35:09 -0400
Subject: [PATCH 09/32] messages
---
_locales/en/messages.json | 49 ++++++++++++++++++++++++++-------------
1 file changed, 33 insertions(+), 16 deletions(-)
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 1f2a3c1b6a..50e96dfe12 100644
--- a/_locales/en/messages.json
+++ b/_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"
@@ -1051,15 +1077,6 @@
},
"description": "Error displayed when the value of @var color is invalid"
},
- "styleMetaErrorRangeOrNumber": {
- "message": "Invalid @var $type$: value must be an array containing at least one number at index zero",
- "description": "Error displayed when the value of @var number or @var range is invalid",
- "placeholders": {
- "type": {
- "content": "$1"
- }
- }
- },
"styleMetaErrorPreprocessor": {
"message": "Unsupported @preprocessor: $preprocessor$",
"placeholders": {
@@ -1194,7 +1211,7 @@
"description": "Note in the popup when opened on addons.mozilla.org in Firefox >= 59"
},
"unreachableAMOHintNewFF": {
- "message": "In Firefox 60 and newer you'll also have to remove AMO domain from <extensions.webextensions.restrictedDomains> in <about:config>.",
+ "message": "In Firefox 60 and newer you'll also have to to remove AMO domain from <extensions.webextensions.restrictedDomains> in <about:config>.",
"description": "Note in the popup when opened on addons.mozilla.org in Firefox >= 59"
},
"unreachableAMOHintOldFF": {
@@ -1261,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:"
},
@@ -1291,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"
From 9dfafe368c3c5c22b4965757e59f2e5adcef971b Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 17:16:38 -0400
Subject: [PATCH 10/32] Reincorporate 8's updates
---
edit/edit.js | 44 ++++++++++++++------------------------------
1 file changed, 14 insertions(+), 30 deletions(-)
diff --git a/edit/edit.js b/edit/edit.js
index 44af06c1d7..377d85d0b8 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -1,13 +1,12 @@
/*
-global CodeMirror parserlib loadScript
-global CSSLint initLint linterConfig updateLintReport renderLintReport updateLinter
+global CodeMirror loadScript
global createSourceEditor
global closeCurrentTab regExpTester messageBox
global setupCodeMirror
global beautify
global initWithSectionStyle addSections removeSection getSectionsHashes
global sectionsToMozFormat
-global moveFocus
+global moveFocus editorWorker
*/
'use strict';
@@ -212,7 +211,6 @@ function beforeUnload() {
}
const isDirty = editor ? editor.isDirty() : !isCleanGlobal();
if (isDirty) {
- updateLintReportIfEnabled(null, 0);
// neither confirm() nor custom messages work in modern browsers but just in case
return t('styleChangesNotSaved');
}
@@ -228,7 +226,7 @@ function isUsercss(style) {
function initStyleData() {
// TODO: remove .replace(/^\?/, '') when minimum_chrome_version >= 52 (https://crbug.com/601425)
const params = new URLSearchParams(location.search.replace(/^\?/, ''));
- const id = params.get('id');
+ const id = Number(params.get('id'));
const createEmptyStyle = () => ({
id: null,
name: params.get('domain') ||
@@ -244,8 +242,8 @@ function initStyleData() {
)
],
});
- return API.getStyles({id: id || -1})
- .then(([style = createEmptyStyle()]) => {
+ return fetchStyle()
+ .then(style => {
styleId = style.id;
if (styleId) sessionStorage.justEditedStyleId = styleId;
// we set "usercss" class on <html> when <body> is empty
@@ -259,6 +257,13 @@ function initStyleData() {
}
return style;
});
+
+ function fetchStyle() {
+ if (id) {
+ return API.getStyleFromDB(id);
+ }
+ return Promise.resolve(createEmptyStyle());
+ }
}
function initHooks() {
@@ -276,9 +281,6 @@ function initHooks() {
$('#save-button').addEventListener('click', save, false);
$('#sections-help').addEventListener('click', showSectionHelp, false);
- // TODO: investigate why FF needs this delay
- debounce(initLint, FIREFOX ? 100 : 0);
-
if (!FIREFOX) {
$$([
'input:not([type])',
@@ -353,7 +355,6 @@ function toggleStyle() {
}
function save() {
- updateLintReportIfEnabled(null, 0);
if (!validate()) {
return;
}
@@ -414,12 +415,6 @@ function updateTitle() {
$('#save-button').disabled = clean;
}
-function updateLintReportIfEnabled(...args) {
- if (CodeMirror.defaults.lint) {
- updateLintReport(...args);
- }
-}
-
function showMozillaFormat() {
const popup = showCodeMirrorPopup(t('styleToMozillaFormatTitle'), '', {readOnly: true});
popup.codebox.setValue(toMozillaFormat());
@@ -461,16 +456,7 @@ function fromMozillaFormat() {
function doImport({replaceOldStyle = false}) {
lockPageUI(true);
- new Promise(setTimeout)
- .then(() => {
- const worker = linterConfig.worker.csslint;
- if (!worker.instance) worker.instance = new Worker(worker.path);
- })
- .then(() => linterConfig.invokeWorker({
- linter: 'csslint',
- action: 'parse',
- code: popup.codebox.getValue().trim(),
- }))
+ editorWorker.parseMozFormat({code: popup.codebox.getValue().trim()})
.then(({sections, errors}) => {
// shouldn't happen but just in case
if (!sections.length && errors.length) {
@@ -483,8 +469,7 @@ function fromMozillaFormat() {
removeOldSections(replaceOldStyle);
return addSections(sections, div => setCleanItem(div, false));
})
- .then(sectionDivs => {
- sectionDivs.forEach(div => updateLintReportIfEnabled(div.CodeMirror, 1));
+ .then(() => {
$('.dismiss').dispatchEvent(new Event('click'));
})
.catch(showError)
@@ -604,7 +589,6 @@ function showCodeMirrorPopup(title, html, options) {
foldGutter: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
matchBrackets: true,
- lint: linterConfig.getForCodeMirror(),
styleActiveLine: true,
theme: prefs.get('editor.theme'),
keyMap: prefs.get('editor.keyMap')
From 407e70b20cd8c0cd3a343d334b7f98129d5ab6c9 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 17:25:46 -0400
Subject: [PATCH 11/32] Reincorporate 8's updates
---
edit/codemirror-editing-hooks.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/edit/codemirror-editing-hooks.js b/edit/codemirror-editing-hooks.js
index 308f99e70d..b90ac995e0 100644
--- a/edit/codemirror-editing-hooks.js
+++ b/edit/codemirror-editing-hooks.js
@@ -1,5 +1,5 @@
/*
-global CodeMirror linterConfig loadScript
+global CodeMirror loadScript
global editors editor styleId ownTabId
global save toggleStyle setupAutocomplete makeSectionVisible getSectionForChild
global getSectionsHashes
@@ -8,9 +8,6 @@ global messageBox
'use strict';
onDOMscriptReady('/codemirror.js').then(() => {
-
- CodeMirror.defaults.lint = linterConfig.getForCodeMirror();
-
const COMMANDS = {
save,
toggleStyle,
@@ -43,6 +40,9 @@ onDOMscriptReady('/codemirror.js').then(() => {
});
CodeMirror.defineInitHook(cm => {
+ if (!cm.display.wrapper.closest('#sections')) {
+ return;
+ }
if (prefs.get('editor.livePreview') && styleId) {
cm.on('changes', updatePreview);
}
From f52fd0d124e5188bb13d68cc2d004f9255bcf6f6 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 17:28:47 -0400
Subject: [PATCH 12/32] Reincorporate 8's updates
---
edit/beautify.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/edit/beautify.js b/edit/beautify.js
index 830b7e714e..5be10608a5 100644
--- a/edit/beautify.js
+++ b/edit/beautify.js
@@ -40,7 +40,8 @@ function beautify(event) {
$create('.buttons', [
$create('button', {
attributes: {role: 'close'},
- onclick: showHelp.close,
+ // showHelp.close will be defined after showHelp() is invoked
+ onclick: () => showHelp.close(),
}, t('confirmClose')),
$create('button', {
attributes: {role: 'undo'},
From f76512e513806686661f9ef9d56f3e55ed02284d Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 17:38:19 -0400
Subject: [PATCH 13/32] Reincorporate 8's updates
---
msgbox/msgbox.js | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index 84070380c6..1d69dff398 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -34,7 +34,12 @@ function messageBox({
document.body.appendChild(messageBox.element);
messageBox.originalFocus = document.activeElement;
- moveFocus(messageBox.element, 1);
+ // skip external links like feedback
+ while ((moveFocus(messageBox.element, 1) || {}).target === '_blank') {/*NOP*/}
+ // suppress focus outline when invoked via click
+ if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
+ document.activeElement.dataset.focusedViaClick = '';
+ }
if (typeof onshow === 'function') {
onshow(messageBox.element);
From 0766dd7f0aedd056283c25fa7c00328f89ae7282 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 17:47:08 -0400
Subject: [PATCH 14/32] Reincorporate tophf's update
---
popup/popup.js | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/popup/popup.js b/popup/popup.js
index 90d8e91a59..ad6fdd81fe 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -356,7 +356,14 @@ function createStyleElement({
if (check) detectSloppyRegexps([style]);
const oldElement = $(ENTRY_ID_PREFIX + style.id);
- if (oldElement) {
+ if (oldElement && oldElement.contains(document.activeElement)) {
+ // preserve the focused element inside
+ const {className} = document.activeElement;
+ oldElement.parentNode.replaceChild(entry, oldElement);
+ // we're not using $() since className may contain multiple tokens
+ const el = entry.getElementsByClassName(className)[0];
+ if (el) el.focus();
+ } else if (oldElement) {
oldElement.parentNode.replaceChild(entry, oldElement);
} else {
container.appendChild(entry);
From d051bd3477415c9963803d790cf4705daef7bd82 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 19:16:11 -0400
Subject: [PATCH 15/32] Reincorporate 8's updates
---
edit.html | 15 +++++++++++++--
1 file changed, 13 insertions(+), 2 deletions(-)
diff --git a/edit.html b/edit.html
index e136d6fb39..aae592507d 100644
--- a/edit.html
+++ b/edit.html
@@ -25,7 +25,6 @@
<script src="js/script-loader.js"></script>
<script src="js/storage-util.js"></script>
<script src="content/apply.js"></script>
- <script src="edit/lint.js"></script>
<script src="edit/util.js"></script>
<script src="edit/regexp-tester.js"></script>
<script src="edit/applies-to-line-widget.js"></script>
@@ -65,6 +64,8 @@
<script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
<link href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet" />
+ <script src="vendor/codemirror/addon/lint/lint.js"></script>
+
<link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet" />
<script src="vendor/codemirror/addon/hint/show-hint.js"></script>
@@ -87,6 +88,16 @@
<link href="edit/codemirror-default.css" rel="stylesheet">
<script src="edit/codemirror-default.js"></script>
+ <script src="edit/linter.js"></script>
+ <script src="edit/linter-defaults.js"></script>
+ <script src="edit/linter-engines.js"></script>
+ <script src="edit/linter-meta.js"></script>
+ <script src="edit/linter-help-dialog.js"></script>
+ <script src="edit/linter-report.js"></script>
+ <script src="edit/linter-config-dialog.js"></script>
+
+ <script src="edit/editor-worker.js"></script>
+
<link id="cm-theme" rel="stylesheet">
<template data-id="appliesTo">
@@ -417,7 +428,7 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
</a>
</h2>
</summary>
- <div></div>
+ <div class="lint-report-container"></div>
</details>
<div id="footer" class="hidden">
<a href="https://github.com/openstyles/stylus/wiki/Usercss"
From 5d73cbf240b37d25ad1756243a9abf85d13e3e1b Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 19:25:05 -0400
Subject: [PATCH 16/32] Reincorporate an updated line I missed
From d1bc80282fe004a2d03a7ab29c435aa91b5d21a7 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Fri, 12 Oct 2018 19:27:57 -0400
Subject: [PATCH 17/32] Reincorporate a line of code I missed
---
popup/popup.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/popup/popup.js b/popup/popup.js
index ad6fdd81fe..5490fae414 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -172,7 +172,7 @@ function initPopup() {
$('label', info).textContent = t('unreachableAMO');
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
- const renderToken = s => s[0] === '<' ? $create('b', s.slice(1, -1)) : s;
+ const renderToken = s => s[0] === '<' ? $create('b', tWordBreak(s.slice(1, -1))) : s;
const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
const noteNode = $create('fragment', note.split('\n').map(renderLine));
const target = $('p', info);
From 2d28a7520d6c6813eb3257ffc57aab2a0a9ae8ba Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Sat, 13 Oct 2018 18:06:54 -0400
Subject: [PATCH 18/32] Remove usercss white styling
---
edit/applies-to-line-widget.js | 26 --------------------------
1 file changed, 26 deletions(-)
diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index fe995be71e..a031fbd73e 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -246,32 +246,6 @@ function createAppliesToLineWidget(cm) {
const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
-
- actualStyle.textContent = `
- .applies-to {
- background-color: ${color.gutter.bg};
- border-top: ${borderStyleForced};
- border-bottom: ${borderStyleForced};
- }
- .applies-to label {
- color: ${fore};
- }
- .applies-to input,
- .applies-to button,
- .applies-to select {
- background: rgba(255, 255, 255, ${
- Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
- });
- border: ${borderStyleForced};
- transition: none;
- color: ${fore};
- }
- .applies-to .svg-icon.select-arrow {
- fill: ${fore};
- transition: none;
- }
- `;
- document.documentElement.appendChild(actualStyle);
}
function doUpdate() {
From 3c1ee1cd9e9d2c390d4c677385a1ab3f94c3fc8b Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 13 Oct 2018 17:07:52 -0500
Subject: [PATCH 19/32] Tweaks
---
_locales/en/messages.json | 30 ++++++++++++++++++------------
edit/edit.css | 3 +++
options.html | 4 ++--
popup.html | 5 ++++-
popup/popup.css | 4 ++--
popup/popup.js | 31 ++++++++++++-------------------
6 files changed, 41 insertions(+), 36 deletions(-)
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 50e96dfe12..c6c443c6fd 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -771,23 +771,29 @@
"optionsOpenManager": {
"message": "Manage styles"
},
+ "optionsPopupActionElements": {
+ "message": "Action elements",
+ "description": "Label in the options page to alter the popup action elements to show either text or icons"
+ },
"optionsPopupClassicUI": {
- "message": "Text and buttons"
+ "message": "Text and buttons",
+ "description": "Tooltip displayed when hovering the popup action elements option to choose the classic text & button format"
},
"optionsPopupIconUI": {
- "message": "Vector icons"
+ "message": "Vector icons",
+ "description": "Tooltip displayed when hovering the popup action elements option to choose displaying vector icons instead of text"
},
- "optionsPopupTitleClickAction": {
- "message": "Style name click action"
+ "optionsPopupClickAction": {
+ "message": "Style name click action",
+ "description": "Label in the options page for the action performed when clicking on a style name in the popup"
},
"optionsPopupClickActionLink": {
- "message": "Edit style"
+ "message": "Edit style",
+ "description": "Tooltip displayed when hovering the popup click action option to choose to edit the style when clicking on the style name in the popup"
},
"optionsPopupClickActionToggle": {
- "message": "Toggle style"
- },
- "optionsPopupTitle": {
- "message": "Action elements"
+ "message": "Toggle style",
+ "description": "Tooltip displayed when hovering the popup click action option to choose to toggle a style (on or off) when clicking the style name in the popup"
},
"optionsPopupWidth": {
"message": "Popup width (in pixels)"
@@ -1211,7 +1217,7 @@
"description": "Note in the popup when opened on addons.mozilla.org in Firefox >= 59"
},
"unreachableAMOHintNewFF": {
- "message": "In Firefox 60 and newer you'll also have to to remove AMO domain from <extensions.webextensions.restrictedDomains> in <about:config>.",
+ "message": "In Firefox 60 and newer you'll also have to remove AMO domain from <extensions.webextensions.restrictedDomains> in <about:config>.",
"description": "Note in the popup when opened on addons.mozilla.org in Firefox >= 59"
},
"unreachableAMOHintOldFF": {
@@ -1305,8 +1311,8 @@
"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"
+ "message": "Create a new style by selecting a target URL.\nAvailable options shown in hover tooltips.",
+ "description": "Popup style creation actions tooltip to accompany icon"
},
"writeStyleForURL": {
"message": "this URL",
diff --git a/edit/edit.css b/edit/edit.css
index 9c84596d0c..32c10b5e37 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -667,6 +667,9 @@ body[data-match-highlight="selection"]:not(.find-open) .CodeMirror-selection-hig
#lint table:last-child {
margin-bottom: 0;
}
+#lint table.empty {
+ display: none;
+}
#lint caption {
text-align: left;
font-weight: bold;
diff --git a/options.html b/options.html
index ec057cd5fd..0616632e3e 100644
--- a/options.html
+++ b/options.html
@@ -106,7 +106,7 @@ <h1 i18n-text="optionsCustomizePopup"></h1>
</span>
</label>
<div class="radio-outer-wrapper action-elements">
- <div class="radio-title" i18n-text="optionsPopupTitle"></div>
+ <div class="radio-title" i18n-text="optionsPopupActionElements"></div>
<div class="radio-inner-wrapper">
<label i18n-title="optionsPopupIconUI">
<div class="popupui">
@@ -131,7 +131,7 @@ <h1 i18n-text="optionsCustomizePopup"></h1>
</div>
</div>
<div class="radio-outer-wrapper style-name-action">
- <div class="radio-title" i18n-text="optionsPopupTitleClickAction"></div>
+ <div class="radio-title" i18n-text="optionsPopupClickAction"></div>
<div class="radio-inner-wrapper">
<label i18n-title="optionsPopupClickActionLink">
<div class="popupclick ">
diff --git a/popup.html b/popup.html
index 5673946843..d54ba3626f 100644
--- a/popup.html
+++ b/popup.html
@@ -268,7 +268,10 @@
<button id="popup-wiki-button" class="classicUI-el" i18n-text="linkStylusWiki" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki"></button>
<a id="popup-wiki-icon" class="iconUI-el" href="#" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki" tabindex="0">
<svg class="svg-icon wiki" viewBox="0 0 24 24">
- <path d="M12.09 13.119c-.936 1.932-2.217 4.548-2.853 5.728-.616 1.074-1.127.931-1.532.029-1.406-3.321-4.293-9.144-5.651-12.409-.251-.601-.441-.987-.619-1.139-.181-.15-.554-.24-1.122-.271C.103 5.033 0 4.982 0 4.898v-.455l.052-.045c.924-.005 5.401 0 5.401 0l.051.045v.434c0 .119-.075.176-.225.176l-.564.031c-.485.029-.727.164-.727.436 0 .135.053.33.166.601 1.082 2.646 4.818 10.521 4.818 10.521l.136.046 2.411-4.81-.482-1.067-1.658-3.264s-.318-.654-.428-.872c-.728-1.443-.712-1.518-1.447-1.617-.207-.023-.313-.05-.313-.149v-.468l.06-.045h4.292l.113.037v.451c0 .105-.076.15-.227.15l-.308.047c-.792.061-.661.381-.136 1.422l1.582 3.252 1.758-3.504c.293-.64.233-.801.111-.947-.07-.084-.305-.22-.812-.24l-.201-.021c-.052 0-.098-.015-.145-.051-.045-.031-.067-.076-.067-.129v-.427l.061-.045c1.247-.008 4.043 0 4.043 0l.059.045v.436c0 .121-.059.178-.193.178-.646.03-.782.095-1.023.439-.12.186-.375.589-.646 1.039l-2.301 4.273-.065.135 2.792 5.712.17.048 4.396-10.438c.154-.422.129-.722-.064-.895-.197-.172-.346-.273-.857-.295l-.42-.016c-.061 0-.105-.014-.152-.045-.043-.029-.072-.075-.072-.119v-.436l.059-.045h4.961l.041.045v.437c0 .119-.074.18-.209.18-.648.03-1.127.18-1.443.421-.314.255-.557.616-.736 1.067 0 0-4.043 9.258-5.426 12.339-.525 1.007-1.053.917-1.503-.031-.571-1.171-1.773-3.786-2.646-5.71l.053-.036z"/>
+ <g fill-rule="evenodd" clip-rule="evenodd">
+ <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
+ <path d="M11.8 6.7a3.4 3.4 0 0 0-3.3 2.2l1.5.8s.3-.8.9-1.2c.5-.4 1.6-.6 2.2.1.7 1-.2 1.6-1.1 2.7-1 1.2-1 3.7-1 3.7h2s.1-2.3 1-3.4c.6-.7 1.5-1.3 1.5-2.5s-1.2-2.4-3.7-2.4zM11 16h2v2h-2z"/>
+ </g>
</svg>
</a>
</div>
diff --git a/popup/popup.css b/popup/popup.css
index ae77fb7f42..ff685797ed 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -210,8 +210,8 @@ body:not(.disabled) .toggle-all-on {
#popup-wiki-icon .svg-icon,
#find-styles-icon .svg-icon {
- height: 22px;
- width: 22px;
+ height: 20px;
+ width: 20px;
}
#find-inline-icon {
diff --git a/popup/popup.js b/popup/popup.js
index 5490fae414..221afa91b4 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -5,26 +5,19 @@
let installed;
let tabURL;
const handleEvent = {};
+const doc = document.documentElement;
const ENTRY_ID_PREFIX_RAW = 'style-';
const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
toggleSideBorders();
-if (prefs.get('popupui') === 1) {
- document.documentElement.classList.add('classicUI');
-} else {
- document.documentElement.classList.add('iconUI');
-}
+doc.classList.add(prefs.get('popupui') === 1 ? 'classicUI' : 'iconUI');
-if (prefs.get('popupclick') === 1) {
- document.documentElement.classList.add('toggleUI');
-} else {
- document.documentElement.classList.add('directLinkUI');
-}
+doc.classList.add(prefs.get('popupclick') === 1 ? 'toggleUI' : 'directLinkUI');
if (!prefs.get('popup.stylesFirst')) {
- document.documentElement.classList.add('actions-top');
+ doc.classList.add('actions-top');
}
getActiveTab().then(tab =>
@@ -122,12 +115,12 @@ function initPopup() {
oncontextmenu: handleEvent.openManager,
});
- $('#find-external-icon').onclick = () => {
+ $('#find-external-icon').onclick = event => {
event.preventDefault();
$('input.toggle-inline').click()
};
- $('#find-inline-icon').onclick = () => {
+ $('#find-inline-icon').onclick = event => {
event.preventDefault();
$('input.toggle-inline').click()
};
@@ -137,7 +130,7 @@ function initPopup() {
window.close();
};
- $('#popup-options-icon').onclick = () => {
+ $('#popup-options-icon').onclick = event => {
event.preventDefault();
chrome.runtime.openOptionsPage();
window.close();
@@ -286,7 +279,7 @@ function showStyles(styles) {
});
var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
- $('#installed').classList.toggle('reverse-stripe', reverseZebra);
+ installed.classList.toggle('reverse-stripe', reverseZebra);
}
@@ -408,9 +401,9 @@ Object.assign(handleEvent, {
$('button[data-cmd="ok"]', box).focus();
$('button[data-cmd="ok"]', box).onclick = () => confirm(true);
$('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
- $('a[data-cmd="ok"]', box).focus();
- $('a[data-cmd="ok"]', box).onclick = () => confirm(true); event.preventDefault();
- $('a[data-cmd="cancel"]', box).onclick = () => confirm(false); event.preventDefault();
+ $('.iconUI a[data-cmd="ok"]', box).focus();
+ $('a[data-cmd="ok"]', box).onclick = () => confirm(true);
+ $('a[data-cmd="cancel"]', box).onclick = () => confirm(false);
window.onkeydown = event => {
const keyCode = event.keyCode || event.which;
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
@@ -543,7 +536,7 @@ function handleDelete(id) {
}
var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
- $('#installed').classList.toggle('reverse-stripe', reverseZebra);
+ installed.classList.toggle('reverse-stripe', reverseZebra);
}
From 5df138042608da8ea33d213257d2aa5a5d515ee5 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 13 Oct 2018 17:47:27 -0500
Subject: [PATCH 20/32] Rearrange HTML & remove extra JS
---
popup.html | 34 +++++++++++++++++-----------------
popup/popup.css | 39 +++++++++++++++++++--------------------
popup/popup.js | 22 ----------------------
3 files changed, 36 insertions(+), 59 deletions(-)
diff --git a/popup.html b/popup.html
index d54ba3626f..675286bdf6 100644
--- a/popup.html
+++ b/popup.html
@@ -217,26 +217,26 @@
</div>
<div id="popup-manage-wrapper" class="action-wrapper truegray-alpha-1">
- <button id="popup-manage-button" class="classicUI-el" i18n-text="openManage" data-href="manage.html" i18n-title="popupManageTooltip"></button>
- <a id="popup-manage-icon" href="#" class="iconUI-el" data-href="manage.html" i18n-title="popupManageTooltip" tabindex="0">
- <svg class="svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <button id="popup-manage-button" data-href="manage.html" i18n-title="popupManageTooltip">
+ <span class="classicUI-el" i18n-text="openManage"></span>
+ <svg class="iconUI-el svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
</svg>
- </a>
+ </button>
</div>
<div id="popup-options-wrapper" class="action-wrapper truegray-alpha-1">
- <button id="popup-options-button" class="classicUI-el" i18n-text="openOptionsPopup"></button>
- <a id="popup-options-icon" href="#" class="iconUI-el" i18n-title="openOptionsPopup" tabindex="0">
- <svg class="svg-icon options" viewBox="0 0 16 16">
+ <button id="popup-options-button" i18n-title="openOptionsPopup">
+ <span class="classicUI-el" i18n-text="openOptionsPopup"></span>
+ <svg class="iconUI-el svg-icon options" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
</svg>
- </a>
+ </button>
</div>
<div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
<div id="find-styles">
- <a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
- <a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
- <svg class="svg-icon search" viewBox="0 0 24 24">
+ <a id="find-styles-link" i18n-title="findStylesForSite" tabindex="0">
+ <span class="classicUI-el" i18n-text="findStyles"></span>
+ <svg class="iconUI-el svg-icon search" viewBox="0 0 24 24">
<path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7 L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
</svg>
</a>
@@ -265,15 +265,15 @@
</div>
</div>
<div id="popup-wiki-wrapper" class="action-wrapper truegray-alpha-1">
- <button id="popup-wiki-button" class="classicUI-el" i18n-text="linkStylusWiki" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki"></button>
- <a id="popup-wiki-icon" class="iconUI-el" href="#" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki" tabindex="0">
- <svg class="svg-icon wiki" viewBox="0 0 24 24">
+ <button id="popup-wiki-button" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki">
+ <span class="classicUI-el" i18n-text="linkStylusWiki"></span>
+ <svg class="iconUI-el svg-icon wiki" viewBox="0 0 24 24">
<g fill-rule="evenodd" clip-rule="evenodd">
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
<path d="M11.8 6.7a3.4 3.4 0 0 0-3.3 2.2l1.5.8s.3-.8.9-1.2c.5-.4 1.6-.6 2.2.1.7 1-.2 1.6-1.1 2.7-1 1.2-1 3.7-1 3.7h2s.1-2.3 1-3.4c.6-.7 1.5-1.3 1.5-2.5s-1.2-2.4-3.7-2.4zM11 16h2v2h-2z"/>
</g>
</svg>
- </a>
+ </button>
</div>
<div id="disable-all-wrapper" class="action-wrapper truegray-alpha-1">
<div class="main-controls">
@@ -301,8 +301,8 @@
<div id="write-style-wrapper" class="truegray-alpha-1">
<div id="write-style">
<span id="write-style-for" i18n-text="writeStyleFor">
- <div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
- <svg class="svg-icon write-style iconUI-el" viewBox="0 0 1024 1024">
+ <div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
+ <svg class="svg-icon write-style iconUI-el" 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>
diff --git a/popup/popup.css b/popup/popup.css
index ff685797ed..3d6b90c5bc 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -196,26 +196,20 @@ body:not(.disabled) .toggle-all-on {
opacity: 1 !important;
}
-#popup-manage-icon,
-#popup-options-icon,
-#popup-wiki-icon,
-#disable-all-icon,
-#popup-confirm-icon {
- display: inline-flex;
- height: 30px;
- width: 30px;
- align-items: center;
- justify-content: center;
+.iconUI button {
+ cursor: pointer;
}
-#popup-wiki-icon .svg-icon,
-#find-styles-icon .svg-icon {
+.iconUI button .svg-icon {
+ display: inline-flex;
height: 20px;
width: 20px;
+ align-items: center;
+ justify-content: center;
}
-#find-inline-icon {
- display: inline-flex;
+.iconUI button:hover .svg-icon {
+ fill: var(--black);
}
#popup-confirm-icon {
@@ -223,12 +217,6 @@ body:not(.disabled) .toggle-all-on {
margin: -5px 0;
}
-#popup-options-icon .svg-icon,
-#popup-confirm-icon .svg-icon {
- height: 18px;
- width: 18px;
-}
-
#disable-all-icon .svg-icon {
height: 20px;
width: 20px;
@@ -270,6 +258,8 @@ a[target="_blank"] .svg-icon.config {
#find-styles-link,
#write-style-for {
font-size: 0;
+ display: inline-flex;
+ align-items: center;
}
#write-style-wrapper {
@@ -416,6 +406,15 @@ a:hover .svg-icon.toggled-off path:nth-child(3) {
padding: 0;
}
+.iconUI button {
+ border: 0;
+ background: none;
+}
+.iconUI button:hover {
+ background: none;
+
+}
+
body.disabled .style-name {
text-decoration: line-through;
}
diff --git a/popup/popup.js b/popup/popup.js
index 221afa91b4..6d5ad75772 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -93,14 +93,6 @@ function initPopup() {
document.body.classList.toggle('disabled', this.checked);
};
- $('#disable-all-icon').onclick = () => {
- $('#disableAll').click();
- };
-
- $('#find-styles-icon').onclick = () => {
- $('#find-styles-link').click();
- };
-
setupLivePrefs();
Object.assign($('#popup-manage-button'), {
@@ -109,12 +101,6 @@ function initPopup() {
oncontextmenu: handleEvent.openManager,
});
- Object.assign($('#popup-manage-icon'), {
- onclick: handleEvent.openManager,
- onmouseup: handleEvent.openManager,
- oncontextmenu: handleEvent.openManager,
- });
-
$('#find-external-icon').onclick = event => {
event.preventDefault();
$('input.toggle-inline').click()
@@ -130,16 +116,8 @@ function initPopup() {
window.close();
};
- $('#popup-options-icon').onclick = event => {
- event.preventDefault();
- chrome.runtime.openOptionsPage();
- window.close();
- };
-
$('#popup-wiki-button').onclick = handleEvent.openURLandHide;
- $('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
-
if (!tabURL) {
document.body.classList.add('blocked');
document.body.insertBefore(template.unavailableInfo, document.body.firstChild);
From d6104c87f7faa21a5c871fb31a947f104d7e6281 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Sat, 13 Oct 2018 20:17:25 -0400
Subject: [PATCH 21/32] Revert gutting theme detection inline styling
---
edit/applies-to-line-widget.js | 26 ++++++++++++++++++++++++++
1 file changed, 26 insertions(+)
diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index a031fbd73e..fe995be71e 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -246,6 +246,32 @@ function createAppliesToLineWidget(cm) {
const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
+
+ actualStyle.textContent = `
+ .applies-to {
+ background-color: ${color.gutter.bg};
+ border-top: ${borderStyleForced};
+ border-bottom: ${borderStyleForced};
+ }
+ .applies-to label {
+ color: ${fore};
+ }
+ .applies-to input,
+ .applies-to button,
+ .applies-to select {
+ background: rgba(255, 255, 255, ${
+ Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
+ });
+ border: ${borderStyleForced};
+ transition: none;
+ color: ${fore};
+ }
+ .applies-to .svg-icon.select-arrow {
+ fill: ${fore};
+ transition: none;
+ }
+ `;
+ document.documentElement.appendChild(actualStyle);
}
function doUpdate() {
From d2171dc0612c18076147502069fc40cebed1da1f Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Sun, 14 Oct 2018 09:42:37 -0400
Subject: [PATCH 22/32] Don't hide dummy external icon when search opens
---
popup/search-results.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/popup/search-results.js b/popup/search-results.js
index 0a7b489b7a..66c95ee927 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -94,7 +94,9 @@ window.addEventListener('showStyles:done', function _() {
function init() {
setTimeout(() => document.body.classList.add(BODY_CLASS));
- $('#find-styles-inline-group').classList.add('hidden');
+ if(prefs.get('popupui') === 1) {
+ $('#find-styles-inline-group').classList.add('hidden');
+ }
dom.container = $('#search-results');
dom.container.dataset.empty = '';
From e1af6ee60c44fc304716f3386a424a1dcba72829 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 14 Oct 2018 09:34:13 -0500
Subject: [PATCH 23/32] Fix hover, disable all & icon position
---
popup/popup.css | 13 +++++++++++--
popup/popup.js | 4 ++++
2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/popup/popup.css b/popup/popup.css
index 3d6b90c5bc..8a71df9364 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -154,6 +154,10 @@ body:not(.disabled) .toggle-all-on {
display: none;
}
+svg.svg-icon.toggle-all-on {
+ margin-top: 4px;
+}
+
#popup-write-style-icon {
display: inline-flex;
}
@@ -212,6 +216,10 @@ body:not(.disabled) .toggle-all-on {
fill: var(--black);
}
+.iconUI #popup-manage-button:hover .svg-icon {
+ stroke: var(--black);
+}
+
#popup-confirm-icon {
cursor: pointer;
margin: -5px 0;
@@ -292,7 +300,8 @@ a[target="_blank"] .svg-icon.config {
}
#find-styles-inline-group,
-#find-inline-icon {
+#find-inline-icon,
+#find-external-icon {
display: inline-flex;
height: min-content;
}
@@ -403,7 +412,7 @@ a:hover .svg-icon.toggled-off path:nth-child(3) {
}
.iconUI #disable-all-wrapper {
- padding: 0;
+ padding: 0 5px 0 0;
}
.iconUI button {
diff --git a/popup/popup.js b/popup/popup.js
index 6d5ad75772..22fe6d9f39 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -93,6 +93,10 @@ function initPopup() {
document.body.classList.toggle('disabled', this.checked);
};
+ $('#disable-all-icon').onclick = () => {
+ $('#disableAll').click();
+ };
+
setupLivePrefs();
Object.assign($('#popup-manage-button'), {
From be1d6fa45d12e53a84853b8d0f8d4755a340efcf Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 14 Oct 2018 09:36:42 -0500
Subject: [PATCH 24/32] Update hover effect
See 8cf05ee18520afc6dfb7357d967c96e63d34b8ae
---
popup/popup.css | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/popup/popup.css b/popup/popup.css
index 8a71df9364..68f0a0f993 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -483,7 +483,7 @@ html[style] .entry {
color: var(--stylename-popup-hover-text);
}
-.entry .style-name::before {
+.entry .style-name:hover::before {
content: "";
position: absolute;
top: 0;
@@ -492,10 +492,7 @@ html[style] .entry {
bottom: 0;
background: linear-gradient(to right, var(--stylename-hover-garadient-left), var(--stylename-hover-garadient-middle) 50%, transparent);
pointer-events: none;
- opacity: 0;
z-index: -1;
- transition: opacity .1s;
- will-change: opacity;
}
.entry .style-name:hover::before {
From 5ecba47e7f77494b03c4ae212b1cff8a4f8265a2 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 14 Oct 2018 09:48:43 -0500
Subject: [PATCH 25/32] Hide find styles link/icons on search
---
popup/popup.css | 1 +
popup/search-results.js | 4 ++--
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/popup/popup.css b/popup/popup.css
index 68f0a0f993..631997cb1d 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -740,6 +740,7 @@ body.disabled #disable-all-icon {
vertical-align: middle;
}
+#find-styles.hidden,
body.blocked #installed > *,
body.blocked #find-styles-wrapper,
body.blocked #write-style-wrapper {
diff --git a/popup/search-results.js b/popup/search-results.js
index 66c95ee927..320dcd869f 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -81,8 +81,8 @@ window.addEventListener('showStyles:done', function _() {
}
event.preventDefault();
- this.textContent = this.title;
- this.title = '';
+ // hide search link/icons
+ this.parentNode.classList.add('hidden');
init();
load();
From 7a8ef95a3050bd934abfd8b603a6ff13fe20c16d Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Thu, 18 Oct 2018 16:34:26 -0400
Subject: [PATCH 26/32] Popup fixup
---
popup.html | 29 +++++++++++++----------------
1 file changed, 13 insertions(+), 16 deletions(-)
diff --git a/popup.html b/popup.html
index 675286bdf6..3b035ab9d6 100644
--- a/popup.html
+++ b/popup.html
@@ -92,14 +92,14 @@
</template>
<template data-id="unavailableInfo">
- <div class="blocked-info truegray-alpha-1">
+ <div class="blocked-info">
<label i18n-text="stylusUnavailableForURL"></label>
<p i18n-text="stylusUnavailableForURLdetails"></p>
</div>
</template>
<template data-id="unreachableInfo">
- <div class="blocked-info truegray-alpha-1">
+ <div class="blocked-info">
<label i18n-text="unreachableContentScript"></label>
<p i18n-text="unreachableFileHint"></p>
</div>
@@ -187,7 +187,7 @@
<script src="js/storage-util.js" async></script>
</head>
-<body id="stylus-popup" class="truegray-alpha-15">
+<body id="stylus-popup">
<div id="confirm">
<div class="main-bg">
@@ -216,7 +216,7 @@
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
</div>
- <div id="popup-manage-wrapper" class="action-wrapper truegray-alpha-1">
+ <div id="popup-manage-wrapper" class="action-wrapper">
<button id="popup-manage-button" data-href="manage.html" i18n-title="popupManageTooltip">
<span class="classicUI-el" i18n-text="openManage"></span>
<svg class="iconUI-el svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -224,7 +224,7 @@
</svg>
</button>
</div>
- <div id="popup-options-wrapper" class="action-wrapper truegray-alpha-1">
+ <div id="popup-options-wrapper" class="action-wrapper">
<button id="popup-options-button" i18n-title="openOptionsPopup">
<span class="classicUI-el" i18n-text="openOptionsPopup"></span>
<svg class="iconUI-el svg-icon options" viewBox="0 0 16 16">
@@ -234,9 +234,9 @@
</div>
<div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
<div id="find-styles">
- <a id="find-styles-link" i18n-title="findStylesForSite" tabindex="0">
- <span class="classicUI-el" i18n-text="findStyles"></span>
- <svg class="iconUI-el svg-icon search" viewBox="0 0 24 24">
+ <a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
+ <a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
+ <svg class="svg-icon search" viewBox="0 0 24 24">
<path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7 L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
</svg>
</a>
@@ -264,18 +264,15 @@
</span>
</div>
</div>
- <div id="popup-wiki-wrapper" class="action-wrapper truegray-alpha-1">
+ <div id="popup-wiki-wrapper" class="action-wrapper">
<button id="popup-wiki-button" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki">
<span class="classicUI-el" i18n-text="linkStylusWiki"></span>
<svg class="iconUI-el svg-icon wiki" viewBox="0 0 24 24">
- <g fill-rule="evenodd" clip-rule="evenodd">
- <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
- <path d="M11.8 6.7a3.4 3.4 0 0 0-3.3 2.2l1.5.8s.3-.8.9-1.2c.5-.4 1.6-.6 2.2.1.7 1-.2 1.6-1.1 2.7-1 1.2-1 3.7-1 3.7h2s.1-2.3 1-3.4c.6-.7 1.5-1.3 1.5-2.5s-1.2-2.4-3.7-2.4zM11 16h2v2h-2z"/>
- </g>
+ <path d="M 4.2,2.4916695 C 3.097,2.4916461 3,2.5827014 3,3.748 v 16.504 c 0,1.165299 0.097,1.256331 1.2,1.256331 h 15.3 c 1.103,0 1.5,-0.09103 1.5,-1.256331 V 3.748 C 21,2.5827014 20.903,2.4920234 19.8,2.492 Z M 4.7,4.405 h 14.5 l 0.002,15.19 H 4.8 Z m 6.1,2.513 v 2.313 h 2.4 V 6.918 Z m 0,4.826 v 5.338 h 2.4 l 0.1,-5.338 z"/>
</svg>
</button>
</div>
- <div id="disable-all-wrapper" class="action-wrapper truegray-alpha-1">
+ <div id="disable-all-wrapper" class="action-wrapper">
<div class="main-controls">
<label id="disableAll-label" class="classicUI-el" i18n-text="disableAllStyles">
<input id="disableAll" type="checkbox">
@@ -298,7 +295,7 @@
</a>
</div>
- <div id="write-style-wrapper" class="truegray-alpha-1">
+ <div id="write-style-wrapper">
<div id="write-style">
<span id="write-style-for" i18n-text="writeStyleFor">
<div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
@@ -312,7 +309,7 @@
</div>
<div id="search-results-error" class="hidden"></div>
- <div id="search-results" class="hidden truegray-alpha-1">
+ <div id="search-results" class="hidden">
<div class="search-results-nav" data-type="top"></div>
<div id="search-results-list"></div>
<div class="search-results-nav" data-type="bottom"></div>
From fff1d8d057c14e8552689301f86c0dc26303e447 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Thu, 18 Oct 2018 16:35:48 -0400
Subject: [PATCH 27/32] Popup fixup
---
popup/hotkeys.js | 5 +-
popup/popup.css | 118 ++++++++++++++++++++++++----------------
popup/popup.js | 6 +-
popup/search-results.js | 5 +-
4 files changed, 82 insertions(+), 52 deletions(-)
diff --git a/popup/hotkeys.js b/popup/hotkeys.js
index b04fda727a..d96091e436 100644
--- a/popup/hotkeys.js
+++ b/popup/hotkeys.js
@@ -120,7 +120,7 @@ var hotkeys = (() => {
const container = $('#hotkey-info');
let title;
container.onclick = ({target}) => {
- if (target.localName === 'button') {
+ if (target.localName === 'button' || target.id === 'popup-confirm-icon') {
close();
} else if (!container.dataset.active) {
open();
@@ -174,10 +174,11 @@ var hotkeys = (() => {
}));
[
linesToElements(t('popupHotkeysInfo')),
- $create('button', t('confirmOK')),
+ $create('button', {className: 'classicUI-el', id: 'confirm-button'}, t('confirmOK')),
].forEach(child => {
container.appendChild($create('div', child));
});
+ $('#confirm-button').insertAdjacentElement('afterend', template.confirmHotkey);
}
}
diff --git a/popup/popup.css b/popup/popup.css
index 631997cb1d..f6ab931aeb 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -25,6 +25,7 @@ html, body {
}
body {
+ background-color: var(--truegray-alpha-15);
width: 252px;
font-size: 12px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
@@ -154,10 +155,6 @@ body:not(.disabled) .toggle-all-on {
display: none;
}
-svg.svg-icon.toggle-all-on {
- margin-top: 4px;
-}
-
#popup-write-style-icon {
display: inline-flex;
}
@@ -172,6 +169,31 @@ svg.svg-icon.toggle-all-on {
align-items: center;
}
+.iconUI body > .action-wrapper button,
+#disable-all-icon,
+#popup-confirm-icon {
+ display: inline-flex;
+ height: 30px;
+ width: 30px;
+ justify-content: center;
+ align-items: center;
+}
+
+#disable-all-icon > div {
+ display: inline-flex;
+}
+
+body:not(.disabled) #disable-all-icon > div:nth-child(2),
+body.disabled #disable-all-icon > div:first-child {
+ display: none;
+}
+
+body > .action-wrapper,
+#write-style-wrapper,
+#search-results {
+ background-color: var(--truegray-alpha-1);
+}
+
#popup-manage-wrapper {
padding-left: 4px;
}
@@ -200,10 +222,6 @@ svg.svg-icon.toggle-all-on {
opacity: 1 !important;
}
-.iconUI button {
- cursor: pointer;
-}
-
.iconUI button .svg-icon {
display: inline-flex;
height: 20px;
@@ -212,14 +230,6 @@ svg.svg-icon.toggle-all-on {
justify-content: center;
}
-.iconUI button:hover .svg-icon {
- fill: var(--black);
-}
-
-.iconUI #popup-manage-button:hover .svg-icon {
- stroke: var(--black);
-}
-
#popup-confirm-icon {
cursor: pointer;
margin: -5px 0;
@@ -230,11 +240,22 @@ svg.svg-icon.toggle-all-on {
width: 20px;
}
+.iconUI #popup-options-button .svg-icon,
+#popup-confirm-icon .svg-icon {
+ height: 18px;
+ width: 18px;
+}
+
#write-style-for .svg-icon {
height: 16px;
width: 16px;
}
+#find-styles-icon .svg-icon {
+ height: 22px;
+ width: 22px;
+}
+
#find-external-icon,
#find-external-icon-noclick,
#find-inline-icon {
@@ -244,7 +265,6 @@ svg.svg-icon.toggle-all-on {
box-sizing: border-box;
}
-#popup-manage-icon .svg-icon,
#find-external-icon .svg-icon,
#find-external-icon-noclick .svg-icon,
#find-inline-icon .svg-icon,
@@ -253,13 +273,12 @@ a[target="_blank"] .svg-icon.config {
width: 20px;
}
-#popup-manage-icon .svg-icon {
+#popup-manage-button .svg-icon {
stroke: var(--gray-lightness-40);
- fill: transparent;
- transition: stroke .5s;
+ fill: transparent !important;
}
-#popup-manage-icon:hover .svg-icon {
+#popup-manage-button:hover .svg-icon {
stroke: var(--black);
}
@@ -294,8 +313,7 @@ a[target="_blank"] .svg-icon.config {
.search-results-shown #find-external-icon,
.search-results-shown #find-inline-icon,
-.error-shown #find-external-icon,
-.error-shown #find-inline-icon {
+.error-shown #find-styles-wrapper {
display: none !important;
}
@@ -331,8 +349,6 @@ a[target="_blank"] .svg-icon.config {
.svg-icon.toggled-on path,
.svg-icon.toggled-off path {
transition: fill .5s, stroke .5s;
- height: 22px;
- width: 22px;
}
.svg-icon.toggled-on path:first-child,
@@ -415,13 +431,16 @@ a:hover .svg-icon.toggled-off path:nth-child(3) {
padding: 0 5px 0 0;
}
-.iconUI button {
+.iconUI .action-wrapper button {
+ display: inline-flex;
border: 0;
background: none;
+ padding: 0;
+ cursor: pointer;
}
-.iconUI button:hover {
- background: none;
+.iconUI .action-wrapper button:hover {
+ background: none;
}
body.disabled .style-name {
@@ -685,7 +704,7 @@ html[style*="border"] .entry:nth-child(11):before {
.svg-icon {
pointer-events: none;
- transition: fill .5s;
+ transition: fill .5s, stroke .5s;
width: 16px;
height: 16px;
fill: var(--gray-lightness-40);
@@ -693,28 +712,31 @@ html[style*="border"] .entry:nth-child(11):before {
a:hover .svg-icon,
.actions a:hover .svg-icon,
-#find-styles:hover a:hover .svg-icon.external:not(.noclick),
-#find-styles:hover a:hover .svg-icon.inline,
-a:hover .svg-icon.search {
+.iconUI button:hover .svg-icon,
+.iconUI #popup-options-button:hover .svg-icon,
+#find-inline-icon:hover .svg-icon,
+#find-external-icon:hover .svg-icon,
+#find-styles-icon:hover .svg-icon,
+#popup-wiki-button:hover .svg-icon {
fill: var(--black);
}
-.svg-icon.external,
-.svg-icon.inline {
- fill: var(--gray-lightness-65);
-}
-
.actions .svg-icon,
-.svg-icon.options {
+.iconUI #popup-options-button .svg-icon,
+#find-inline-icon .svg-icon,
+#find-external-icon .svg-icon {
fill: var(--truegray);
}
-.svg-icon.search,
-#find-styles:hover .svg-icon.external:not(.noclick),
-#find-styles:hover .svg-icon.inline {
+#find-styles-icon .svg-icon,
+#popup-wiki-button .svg-icon {
fill: var(--gray-lightness-45);
}
+.svg-icon.external.noclick {
+ fill: var(--gray-lightness-65);
+}
+
.svg-icon.remove {
height: 16px;
width: 14px;
@@ -747,18 +769,19 @@ body.blocked #write-style-wrapper {
display: none;
}
-.iconUI body.blocked #popup-options-wrapper {
+.iconUI body.blocked #popup-options-wrapper,
+.iconUI body.error-shown #popup-options-wrapper {
flex-grow: 1;
justify-content: flex-start;
}
-.iconUI body.blocked #popup-wiki-wrapper {
+.iconUI body.blocked #popup-wiki-wrapper,
+.iconUI body.error-shown #popup-wiki-wrapper {
flex-grow: 1;
justify-content: flex-end;
}
/* 'New style' links */
-
#write-style {
display: flex;
flex-direction: row;
@@ -846,9 +869,9 @@ body.blocked #write-style-wrapper {
/* action buttons */
-#popup-manage-wrapper button,
-#popup-options-wrapper button,
-#popup-wiki-wrapper button {
+.classicUI #popup-manage-wrapper button,
+.classicUI #popup-options-wrapper button,
+.classicUI #popup-wiki-wrapper button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -950,6 +973,7 @@ body.blocked #write-style-wrapper {
}
.blocked-info {
+ background-color: var(--truegray-alpha-1);
hyphens: auto;
}
diff --git a/popup/popup.js b/popup/popup.js
index 22fe6d9f39..4c8dd6bedb 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -93,6 +93,10 @@ function initPopup() {
document.body.classList.toggle('disabled', this.checked);
};
+ $('#find-styles-icon').onclick = () => {
+ $('#find-styles-link').click();
+ };
+
$('#disable-all-icon').onclick = () => {
$('#disableAll').click();
};
@@ -383,7 +387,7 @@ Object.assign(handleEvent, {
$('button[data-cmd="ok"]', box).focus();
$('button[data-cmd="ok"]', box).onclick = () => confirm(true);
$('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
- $('.iconUI a[data-cmd="ok"]', box).focus();
+ $('a[data-cmd="ok"]', box).focus();
$('a[data-cmd="ok"]', box).onclick = () => confirm(true);
$('a[data-cmd="cancel"]', box).onclick = () => confirm(false);
window.onkeydown = event => {
diff --git a/popup/search-results.js b/popup/search-results.js
index 320dcd869f..d97ae45d0d 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -81,8 +81,8 @@ window.addEventListener('showStyles:done', function _() {
}
event.preventDefault();
- // hide search link/icons
- this.parentNode.classList.add('hidden');
+ this.textContent = this.title;
+ this.title = '';
init();
load();
@@ -209,6 +209,7 @@ window.addEventListener('showStyles:done', function _() {
dom.error.classList.remove('hidden');
dom.container.classList.toggle('hidden', !processedResults.length);
document.body.classList.toggle('search-results-shown', processedResults.length > 0);
+ document.body.classList.add('error-shown');
if (dom.error.getBoundingClientRect().bottom < 0) {
dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
}
From 09496304ee1cea378d9558417ebd3b7ac5923b20 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Thu, 18 Oct 2018 16:39:38 -0400
Subject: [PATCH 28/32] Eliminate gap on top of body
---
options/options.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/options/options.css b/options/options.css
index 28d1be34fa..f4b3421bc9 100644
--- a/options/options.css
+++ b/options/options.css
@@ -10,6 +10,7 @@ html.opera body {
}
body {
+ display: flex;
background: var(--main-bg);
margin: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif;
From 27534610176a62852426115542bbb4ba61555e72 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Thu, 18 Oct 2018 20:20:00 -0500
Subject: [PATCH 29/32] Fix manage icon
---
popup.html | 4 ++--
popup/popup.css | 9 ---------
2 files changed, 2 insertions(+), 11 deletions(-)
diff --git a/popup.html b/popup.html
index 3b035ab9d6..640556d22a 100644
--- a/popup.html
+++ b/popup.html
@@ -219,8 +219,8 @@
<div id="popup-manage-wrapper" class="action-wrapper">
<button id="popup-manage-button" data-href="manage.html" i18n-title="popupManageTooltip">
<span class="classicUI-el" i18n-text="openManage"></span>
- <svg class="iconUI-el svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
- <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
+ <svg class="iconUI-el svg-icon manager" viewBox="0 0 14 14">
+ <path d="M2.33 6.33a.5.5 0 0 1-.5-.5V1.75a.5.5 0 0 1 1 0v4.08a.5.5 0 0 1-.5.5zM7 12.75a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 1 0v5.25a.5.5 0 0 1-.5.5zM11.67 7.5a.5.5 0 0 1-.5-.5V1.75a.5.5 0 0 1 1 0V7a.5.5 0 0 1-.5.5zM4.08 7.67H.58a.5.5 0 0 0 0 1h1.25v3.58a.5.5 0 0 0 1 0V8.67h1.25a.5.5 0 0 0 0-1zM8.75 4.17H7.5V1.75a.5.5 0 0 0-1 0v2.42H5.25a.5.5 0 0 0 0 1h3.5a.5.5 0 0 0 0-1zM13.42 8.83h-3.5a.5.5 0 0 0 0 1h1.25v2.42a.5.5 0 0 0 1 0V9.83h1.25a.5.5 0 0 0 0-1z"/>
</svg>
</button>
</div>
diff --git a/popup/popup.css b/popup/popup.css
index f6ab931aeb..afaaa22471 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -273,15 +273,6 @@ a[target="_blank"] .svg-icon.config {
width: 20px;
}
-#popup-manage-button .svg-icon {
- stroke: var(--gray-lightness-40);
- fill: transparent !important;
-}
-
-#popup-manage-button:hover .svg-icon {
- stroke: var(--black);
-}
-
#find-styles-link,
#write-style-for {
font-size: 0;
From 686c099dbcd0a37c607de5d741154f8782ac732d Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Thu, 18 Oct 2018 20:22:48 -0500
Subject: [PATCH 30/32] Restore original wiki icon
---
popup.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/popup.html b/popup.html
index 640556d22a..2166f9e431 100644
--- a/popup.html
+++ b/popup.html
@@ -268,7 +268,7 @@
<button id="popup-wiki-button" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki">
<span class="classicUI-el" i18n-text="linkStylusWiki"></span>
<svg class="iconUI-el svg-icon wiki" viewBox="0 0 24 24">
- <path d="M 4.2,2.4916695 C 3.097,2.4916461 3,2.5827014 3,3.748 v 16.504 c 0,1.165299 0.097,1.256331 1.2,1.256331 h 15.3 c 1.103,0 1.5,-0.09103 1.5,-1.256331 V 3.748 C 21,2.5827014 20.903,2.4920234 19.8,2.492 Z M 4.7,4.405 h 14.5 l 0.002,15.19 H 4.8 Z m 6.1,2.513 v 2.313 h 2.4 V 6.918 Z m 0,4.826 v 5.338 h 2.4 l 0.1,-5.338 z"/>
+ <path d="M12.09 13.119c-.936 1.932-2.217 4.548-2.853 5.728-.616 1.074-1.127.931-1.532.029-1.406-3.321-4.293-9.144-5.651-12.409-.251-.601-.441-.987-.619-1.139-.181-.15-.554-.24-1.122-.271C.103 5.033 0 4.982 0 4.898v-.455l.052-.045c.924-.005 5.401 0 5.401 0l.051.045v.434c0 .119-.075.176-.225.176l-.564.031c-.485.029-.727.164-.727.436 0 .135.053.33.166.601 1.082 2.646 4.818 10.521 4.818 10.521l.136.046 2.411-4.81-.482-1.067-1.658-3.264s-.318-.654-.428-.872c-.728-1.443-.712-1.518-1.447-1.617-.207-.023-.313-.05-.313-.149v-.468l.06-.045h4.292l.113.037v.451c0 .105-.076.15-.227.15l-.308.047c-.792.061-.661.381-.136 1.422l1.582 3.252 1.758-3.504c.293-.64.233-.801.111-.947-.07-.084-.305-.22-.812-.24l-.201-.021c-.052 0-.098-.015-.145-.051-.045-.031-.067-.076-.067-.129v-.427l.061-.045c1.247-.008 4.043 0 4.043 0l.059.045v.436c0 .121-.059.178-.193.178-.646.03-.782.095-1.023.439-.12.186-.375.589-.646 1.039l-2.301 4.273-.065.135 2.792 5.712.17.048 4.396-10.438c.154-.422.129-.722-.064-.895-.197-.172-.346-.273-.857-.295l-.42-.016c-.061 0-.105-.014-.152-.045-.043-.029-.072-.075-.072-.119v-.436l.059-.045h4.961l.041.045v.437c0 .119-.074.18-.209.18-.648.03-1.127.18-1.443.421-.314.255-.557.616-.736 1.067 0 0-4.043 9.258-5.426 12.339-.525 1.007-1.053.917-1.503-.031-.571-1.171-1.773-3.786-2.646-5.71l.053-.036z"/>
</svg>
</button>
</div>
From 63a6098c2a00784d5c28e093114559d6331a1aa1 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Thu, 18 Oct 2018 23:05:47 -0400
Subject: [PATCH 31/32] Fixup usercss applies-to theme detection
---
edit/applies-to-line-widget.js | 103 +++++++++++++++++----------------
edit/edit.css | 3 +
2 files changed, 57 insertions(+), 49 deletions(-)
diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index fe995be71e..0cdf721932 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -222,56 +222,61 @@ function createAppliesToLineWidget(cm) {
requestAnimationFrame(updateWidgetStyle);
return;
}
- const MIN_LUMA = .05;
- const MIN_LUMA_DIFF = .4;
- const color = {
- wrapper: colorMimicry.get(cm.display.wrapper),
- gutter: colorMimicry.get(cm.display.gutters, {
- bg: 'backgroundColor',
- border: 'borderRightColor',
- }),
- line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv),
- comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv),
- };
- const hasBorder =
- color.gutter.style.borderRightWidth !== '0px' &&
- !/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
- const diff = {
- wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
- border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
- line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
- };
- const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
- const fore = preferLine ? color.line.fore : color.wrapper.fore;
+ if (prefs.get('editor.theme') !== 'default') {
+ const MIN_LUMA = .05;
+ const MIN_LUMA_DIFF = .4;
+ const color = {
+ wrapper: colorMimicry.get(cm.display.wrapper),
+ gutter: colorMimicry.get(cm.display.gutters, {
+ bg: 'backgroundColor',
+ border: 'borderRightColor',
+ }),
+ line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv),
+ comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv),
+ };
+ const hasBorder =
+ color.gutter.style.borderRightWidth !== '0px' &&
+ !/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
+ const diff = {
+ wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
+ border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
+ line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
+ };
+ const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
+ const fore = preferLine ? color.line.fore : color.wrapper.fore;
- const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
- const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
+ const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
+ const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
- actualStyle.textContent = `
- .applies-to {
- background-color: ${color.gutter.bg};
- border-top: ${borderStyleForced};
- border-bottom: ${borderStyleForced};
- }
- .applies-to label {
- color: ${fore};
- }
- .applies-to input,
- .applies-to button,
- .applies-to select {
- background: rgba(255, 255, 255, ${
- Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
- });
- border: ${borderStyleForced};
- transition: none;
- color: ${fore};
- }
- .applies-to .svg-icon.select-arrow {
- fill: ${fore};
- transition: none;
- }
- `;
- document.documentElement.appendChild(actualStyle);
+ actualStyle.textContent = `
+ .applies-to {
+ background-color: ${color.gutter.bg};
+ border-top: ${borderStyleForced};
+ border-bottom: ${borderStyleForced};
+ }
+ .applies-to label {
+ color: ${fore};
+ }
+ .applies-to input,
+ .applies-to select {
+ background-color: rgba(255, 255, 255, ${
+ Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
+ });
+ border: ${borderStyleForced};
+ transition: none;
+ color: ${fore};
+ }
+ .applies-to .svg-icon.select-arrow {
+ fill: ${fore} !important;
+ }
+ .applies-to select option {
+ background-color: ${color.gutter.bg};
+ }
+ `;
+ document.documentElement.appendChild(actualStyle);
+ } else if (prefs.get('editor.theme') === 'default') {
+ actualStyle.textContent = '';
+ }
}
function doUpdate() {
@@ -283,7 +288,7 @@ function createAppliesToLineWidget(cm) {
if (i === -2) {
i = widgets.length - 1;
}
- if (j < 0) {
+ if (j < 0) {actualStyle
j = widgets.length;
}
diff --git a/edit/edit.css b/edit/edit.css
index 32c10b5e37..aab5407aa8 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -806,6 +806,9 @@ html:not(.usercss) .usercss-only,
margin: 1em 0;
padding: .75rem .75rem .25rem;
padding-right: calc(1em + 20px);
+}
+
+.CodeMirror.cm-s-default .CodeMirror-linewidget .applies-to {
background-color: var(--gray-lightness-90);
border-top: 1px solid var(--truegray-alpha-3);
border-bottom: 1px solid var(--truegray-alpha-3);
From 2d63d931acb6f62b75f3905483dd78b0a122b732 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Thu, 18 Oct 2018 23:11:27 -0400
Subject: [PATCH 32/32] Fixup errant paste
---
edit/applies-to-line-widget.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index 0cdf721932..33816dcb2d 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -288,7 +288,7 @@ function createAppliesToLineWidget(cm) {
if (i === -2) {
i = widgets.length - 1;
}
- if (j < 0) {actualStyle
+ if (j < 0) {
j = widgets.length;
}