diff --git a/popup/hotkeys.js b/popup/hotkeys.js index b04fda72..48f5357c 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 15e11918..618c1663 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -24,6 +24,8 @@ body { font-size: 12px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin: 0; + display: flex; + flex-wrap: wrap; } .firefox body { @@ -31,7 +33,7 @@ body { background-color: #fff; } -body > div:not(#installed):not(#message-box):not(.colorpicker-popup) { +#confirm { margin-left: var(--outer-padding); margin-right: var(--outer-padding); } @@ -58,15 +60,15 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) { pointer-events: none; } -#installed.disabled + .actions #disableAll:checked + .svg-icon.checked { +body.disabled #disableAll:checked + .svg-icon.checked { fill: hsl(0, 68%, 42%); } -#installed.disabled + .actions #disableAll:checked { +body.disabled #disableAll:checked { border-color: hsl(0, 68%, 50%); } -#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked { +body.disabled #disableAll:checked:hover + .svg-icon.checked { fill: #fff; } @@ -79,7 +81,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) { color: hsl(0, 68%, 42%); } -#installed.disabled + .actions #disableAll:checked:hover { +body.disabled #disableAll:checked:hover { border-color: hsl(0, 50%, 56%); background-color: hsl(0, 50%, 56%); } @@ -132,34 +134,308 @@ a:hover { color: #666; } -.actions > .main-controls { - padding-left: 16px; -} - -.main-controls { - display: table-cell; -} - -body > DIV:last-of-type, -body.blocked > DIV { +body > div:last-of-type, +body.blocked > div { border-bottom: none; } +body > div:not(#installed):not(#search-results-error) { + background: hsl(0, 0%, 95%); +} + +#search-results { + display: flex; + flex-direction: column; + justify-content: center; + flex-basis: 100%; +} + #installed { - border-bottom: 1px solid black; - padding-bottom: 2px; - padding-top: 2px; + border-bottom: 1px solid hsl(0, 0%, 80%); max-height: 445px; overflow-y: auto; counter-reset: style-number; position: relative; + flex-basis: 100%; } -#installed.disabled .style-name { +#write-styles-wrapper, +.classicUI #disable-all-wrapper { + flex-basis: 100%; +} + +body.disabled .toggle-all-off, +body:not(.disabled) .toggle-all-on { + display: none; +} + +#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: #666; + fill: transparent; + transition: stroke .5s; +} + +#popup-manage-icon:hover .svg-icon { + stroke: #000; +} + +#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: #666; + 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: hsl(0, 0%, 94%); +} + +a:hover .svg-icon.toggled-on path:first-child, +a:hover .svg-icon.toggled-on path:nth-child(2) { + fill: #fff; +} + +.svg-icon.toggled-off path:first-child, +.svg-icon.toggled-off path:nth-child(2) { + fill: hsl(0, 0%, 84%); +} + +a:hover .svg-icon.toggled-off path:first-child, +a:hover .svg-icon.toggled-off path:nth-child(2) { + fill: hsl(0, 0%, 90%); +} + +.svg-icon.toggled-on path:nth-child(2), +.svg-icon.toggled-off path:nth-child(2) { + stroke: hsl(0, 0%, 50%); + 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: #000; +} + +a:hover .svg-icon.toggled-on path:nth-child(3), +a:hover .svg-icon.toggled-off path:nth-child(3) { + fill: #000; +} + + +.svg-icon.toggled-on path:nth-child(3), +.svg-icon.toggled-off path:nth-child(3) { + fill: hsl(0, 0%, 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; +} + +.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; } @@ -204,8 +480,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: hsl(180, 100%, 20%); } .entry .style-name::before { @@ -218,6 +500,7 @@ html[style] .entry { background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent); pointer-events: none; opacity: 0; + z-index: -1; transition: opacity .1s; will-change: opacity; } @@ -226,16 +509,66 @@ 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: .35; + 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: .3; +} + +.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:nth-child(even) { +.entry .actions { + padding-left: 5px; +} + +.entry:nth-child(odd), +.reverse-stripe .entry:nth-child(even) { + background-color: transparent; +} + +.entry:nth-child(even), +.reverse-stripe .entry:nth-child(odd) { background-color: rgba(0, 0, 0, 0.05); } @@ -265,9 +598,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, @@ -301,6 +649,7 @@ html[style*="border"] .entry:nth-child(11):before { box-sizing: border-box; cursor: pointer; font-size: 90%; + flex-shrink: 0; } .regexp-partial .actions, @@ -342,15 +691,55 @@ html[style*="border"] .entry:nth-child(11):before { .svg-icon { pointer-events: none; transition: fill .5s; - width: 14px; + width: 16px; height: 16px; fill: #666; } -a:hover .svg-icon { +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: #000; } +.svg-icon.external, +.svg-icon.inline { + fill: hsl(0, 0%, 65%); +} + +.actions .svg-icon, +.svg-icon.options { + fill: hsl(0, 0%, 50%); +} + +.svg-icon.search, +#find-styles:hover .svg-icon.external:not(.noclick), +#find-styles:hover .svg-icon.inline { + fill: hsl(0, 0%, 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: hsl(0, 100%, 42%); +} + +body.disabled #disable-all-icon { + transform: rotate(180deg); + transform-origin: 50% 50%; +} + body > .actions { margin-top: 0.5em; /* raise the actions above the hotkey-info */ @@ -369,15 +758,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 +778,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 +794,17 @@ 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; +} + +#match > .breadcrumbs > * { + word-break: break-all; } /* "breadcrumbs" 'new style' links */ @@ -457,27 +857,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 { @@ -516,9 +907,9 @@ body.blocked .actions > .main-controls { max-height: 80%; min-height: 6em; padding: 1em; - background-color: #fff; display: flex; flex-direction: column; + background: hsl(0, 0%, 95%); border: solid 2px rgba(0, 0, 0, 0.5); } @@ -526,10 +917,35 @@ body.blocked .actions > .main-controls { 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: 1rem; +} + +#popup-cancel-icon { + margin-left: 1rem; +} + .non-windows #confirm > div > div { direction: rtl; text-align: right; @@ -541,12 +957,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 hsl(0, 0%, 80%); } .blocked-info { @@ -554,13 +966,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; @@ -608,10 +1020,11 @@ body.blocked .actions > .main-controls { #hotkey-info div { padding: 1em; border-top: 1px solid #ddd; - background-color: white; + background-color: hsl(0, 0%, 95%); } #hotkey-info div:last-child { + background-color: hsl(0, 0%, 85%); box-shadow: 0 0 90px rgba(0, 0, 0, .25); position: relative; } @@ -636,6 +1049,187 @@ body.blocked .actions > .main-controls { white-space: nowrap; } +/***** icon UI actions on top *****/ + +.actions-top #confirm { + order: 1; +} + +.actions-top #installed { + order: 8; + border-top: 1px solid hsl(0, 0%, 80%); +} + +.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: #000; +} + +.toggleUI .entry .style-name::before { + background: linear-gradient(to right, hsla(0, 0%, 0%, 0.15), hsla(0, 0%, 0%, 0.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 { diff --git a/popup/popup.js b/popup/popup.js index 5db20042..8d060e64 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,35 @@ 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 = () => { + 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'); @@ -241,6 +283,11 @@ function showStyles(styles) { } window.dispatchEvent(new Event('showStyles:done')); }); + + var reverseZebra = $('.entry:last-child:nth-of-type(odd)'); + if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) { + $('#installed').classList.add('reverse-stripe'); + } } @@ -272,6 +319,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, @@ -323,7 +376,11 @@ Object.assign(handleEvent, { }, name(event) { - this.checkbox.dispatchEvent(new MouseEvent('click')); + if (prefs.get('popupclick') === 1) { + this.checkbox.dispatchEvent(new MouseEvent('click')); + } else { + $('.style-edit-link').click(); + } event.preventDefault(); }, @@ -341,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 @@ -429,7 +489,7 @@ Object.assign(handleEvent, { event.preventDefault(); getActiveTab() .then(activeTab => API.openURL({ - url: this.href || this.dataset.href, + url: this.hasAttribute('href') && this.hasAttribute('data-href') === true ? this.dataset.href : this.href || this.dataset.href, index: activeTab.index + 1, message: tryJSONparse(this.dataset.sendMessage), })) @@ -474,6 +534,13 @@ function handleDelete(id) { if (!$('.entry')) { installed.appendChild(template.noStyles.cloneNode(true)); } + + var reverseZebra = $('.entry:last-child:nth-of-type(odd)'); + if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) { + $('#installed').classList.add('reverse-stripe'); + } else { + $('#installed').classList.remove('reverse-stripe'); + } } diff --git a/popup/search-results.css b/popup/search-results.css index e1c805a6..0275181e 100755 --- a/popup/search-results.css +++ b/popup/search-results.css @@ -18,15 +18,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: hsla(0, 100%, 30%, .8); + color: #fff; + text-shadow: 2px 1px 1px #000; 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 { @@ -49,6 +51,10 @@ body.search-results-shown { background-color: #eee; } +.search-result:last-of-type { + margin-bottom: 0; +} + .search-result:hover { border-color: #000; background-color: #fff; @@ -227,8 +233,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 { @@ -252,11 +257,6 @@ body.search-results-shown { text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } -#find-styles-inline-group label { - position: relative; - padding-left: 16px; -} - /* spinner: https://github.com/loadingio/css-spinner */ .lds-spinner { -webkit-user-select: none; diff --git a/popup/search-results.js b/popup/search-results.js index 0a7b489b..8326e570 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 = ''; @@ -207,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.documentElement.classList.add('error-shown'); if (dom.error.getBoundingClientRect().bottom < 0) { dom.error.scrollIntoView({behavior: 'smooth', block: 'start'}); }