Skip to content

Commit

Permalink
(JS) update all the scripts with tab tooltips
Browse files Browse the repository at this point in the history
to hide the url on customize mode tabs.
(CSS) update dark reader styles.
add icon for gitzip context menu.
  • Loading branch information
aminomancer committed May 29, 2022
1 parent d3d367d commit a939a7e
Show file tree
Hide file tree
Showing 11 changed files with 1,222 additions and 1,093 deletions.
1,698 changes: 832 additions & 866 deletions JS/allTabsMenuExpansionPack.uc.js

Large diffs are not rendered by default.

421 changes: 235 additions & 186 deletions JS/restoreTabSoundButton.uc.js

Large diffs are not rendered by default.

39 changes: 20 additions & 19 deletions JS/tooltipShadowSupport.uc.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
// ==UserScript==
// @name Tooltip Shadow Support
// @version 1.0.1
// @version 1.0.2
// @author aminomancer
// @homepage https://github.com/aminomancer/uc.css.js
// @description This script makes it easier to add box shadows and borders to tooltips without messing up some specific tooltips. Some tooltips have an awkward structure, where multiple descriptions exist within a single container, with display: -moz-popup. This means the tooltip is displayed within a restricted popup area with dimensions equal to the container, and overflow completely hidden. Box shadows on the container therefore won't be visible, since they'll fall outside of the popup box — you'd have to use a window shadow instead, but those can't be styled in a precise way. In tooltips with only 1 label we can just make the container transparent and put the background and box shadow on the label element. That way there can still be room within the popup for the box shadow to be visible. A box shadow with a 5px radius can fit well within a container with ~7px padding. Tooltips with a more elaborate structure with containers within containers, e.g. the tab tooltip, don't have this problem at all. But tooltips like the back and forward buttons' can only be given a shadow if you give each label a background color, and try to position and size them so that they perfectly overlap and create the illusion of being one element. But if you also want rounded corners and borders, that won't be an option. A good way to fix this is just to put the tooltips inside of another container, so that's what this script does. Because generic tooltips are native-anonymous, they don't inherit variables from the main window. So you have to edit userChrome.ag.css directly for some things. If you want to disable the borders, 1) don't use this script, and 2) go to about:config and set userChrome.css.remove-tooltip-borders to true.
// @license This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
// ==/UserScript==

(function () {
function create(aDoc, tag, props, isHTML = false) {
let el = isHTML ? aDoc.createElement(tag) : aDoc.createXULElement(tag);
for (let prop in props) el.setAttribute(prop, props[prop]);
return el;
}
[
document.getElementById("back-button-tooltip"),
document.getElementById("forward-button-tooltip"),
].forEach((tip) => {
let box = create(document, "vbox", {
id: tip.id + "-box",
class: "uc-tooltip-box",
flex: 1,
});
[...tip.children].forEach((elt) => box.appendChild(elt));
tip.appendChild(box);
tip.setAttribute("shadow-support", true);
function create(aDoc, tag, props, isHTML = false) {
let el = isHTML ? aDoc.createElement(tag) : aDoc.createXULElement(tag);
for (let prop in props) el.setAttribute(prop, props[prop]);
return el;
}
function addShadowSupport(tip) {
let box = create(document, "vbox", {
id: tip.id + "-box",
class: "uc-tooltip-box",
flex: 1,
});
document.documentElement.setAttribute("tooltip-shadow-support", true);
[...tip.children].forEach(elt => box.appendChild(elt));
tip.appendChild(box);
tip.setAttribute("shadow-support", true);
}
[
document.getElementById("back-button-tooltip"),
document.getElementById("forward-button-tooltip"),
].forEach(addShadowSupport);
document.documentElement.setAttribute("tooltip-shadow-support", true);
})();
14 changes: 10 additions & 4 deletions JS/verticalTabsPane.uc.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// ==UserScript==
// @name Vertical Tabs Pane
// @version 1.6.2
// @version 1.6.3
// @author aminomancer
// @homepage https://github.com/aminomancer/uc.css.js
// @description Create a vertical pane across from the sidebar that functions like the vertical
Expand Down Expand Up @@ -1598,11 +1598,17 @@
e.target.moveToAnchor(row, "after_start");
}
let title = e.target.querySelector(".places-tooltip-title");
let url = e.target.querySelector(".places-tooltip-uri");
let icon = e.target.querySelector("#places-tooltip-insecure-icon");
title.textContent = label;
url.value = linkedBrowser?.currentURI?.spec.replace(/^https:\/\//, "");
if (tab.getAttribute("customizemode") === "true") {
e.target.querySelector(".places-tooltip-box").setAttribute("desc-hidden", "true");
return;
} else {
let url = e.target.querySelector(".places-tooltip-uri");
url.value = linkedBrowser?.currentURI?.spec.replace(/^https:\/\//, "");
e.target.querySelector(".places-tooltip-box").removeAttribute("desc-hidden");
}
// show a lock icon to show tab security/encryption
let icon = e.target.querySelector("#places-tooltip-insecure-icon");
let pending = tab.hasAttribute("pending") || !linkedBrowser.browsingContext;
let docURI = pending
? linkedBrowser?.currentURI
Expand Down
87 changes: 75 additions & 12 deletions resources/in-content/ext-darkreader.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
* file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
* or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* dark reader */
/* dark reader styles.
intended for the new theme, go to settings > devtools > apply new theme. */

@-moz-document regexp("^moz-extension://.*/ui/.*")
{
Expand All @@ -14,12 +15,13 @@
border-color: transparent !important;
background-color: var(--tooltip-bgcolor) !important;
border-radius: 0 !important;
border-width: 4px !important;
color: var(--uc-content-text-a80) !important;
}

:root[uc-extension-id="addon@darkreader.org"],
:root[uc-extension-id="addon@darkreader.org"] * {
scrollbar-color: var(--button-solid-active-background) var(--uc-arrowpanel-dimmed) !important;
scrollbar-color: var(--uc-panel-button-solid) var(--uc-panel-box-solid) !important;
}

@supports -moz-bool-pref("userChrome.css.mac-ui-fonts") {
Expand All @@ -34,15 +36,25 @@
background-image: url(chrome://userchrome/content/in-content/darkreader-logo.svg) !important;
}

:root[uc-extension-id="addon@darkreader.org"] .textbox,
:root[uc-extension-id="addon@darkreader.org"] .automation-page__system-dark-mode__button {
color: var(--uc-content-text-a80) !important;
:root[uc-extension-id="addon@darkreader.org"] header img#logo {
padding-left: 15rem !important;
box-sizing: border-box !important;
background-image: url(chrome://userchrome/content/in-content/darkreader-logo.svg) !important;
}

:root[uc-extension-id="addon@darkreader.org"] .page {
background-color: transparent !important;
}

:root[uc-extension-id="addon@darkreader.org"] :where(.textbox) {
background-color: var(--uc-arrowpanel-faint) !important;
transition: background-color 250ms, color 250ms, box-shadow 150ms !important;
}

:root[uc-extension-id="addon@darkreader.org"] :where(.textbox:hover) {
background-color: var(--uc-panel-button-faint-solid) !important;
}

:root[uc-extension-id="addon@darkreader.org"]
:where(.button, .multi-switch, .checkbox, .m-help-button, #editor) {
background-color: var(--uc-arrowpanel-faint) !important;
Expand All @@ -54,7 +66,6 @@
:root[uc-extension-id="addon@darkreader.org"]
:where(.multi-switch__option:hover:not(.multi-switch__option--selected), .slider__track, .slider__track::after),
:root[uc-extension-id="addon@darkreader.org"] .collapsible-panel__group__expand-button,
:root[uc-extension-id="addon@darkreader.org"] .textbox,
:root[uc-extension-id="addon@darkreader.org"] .slider__track::before,
:root[uc-extension-id="addon@darkreader.org"] .slider__track::after{
background-color: var(--uc-arrowpanel-dimmed) !important;
Expand All @@ -68,16 +79,32 @@
background-color: var(--uc-parent-primary-button-background-hover) !important;
}

:root[uc-extension-id="addon@darkreader.org"] input::placeholder,
:root[uc-extension-id="addon@darkreader.org"] .m-donate-button__icon::after {
background-color: hsl(220, 85.1%, 65.6%) !important;
}

:root[uc-extension-id="addon@darkreader.org"]
:where(.site-toggle:not(.site-toggle--active), #editor) {
:where(.site-toggle:not(.site-toggle--active)) {
color: var(--uc-content-text-a50) !important;
}

:root[uc-extension-id="addon@darkreader.org"] #editor,
:root[uc-extension-id="addon@darkreader.org"]
:where(.textbox, .automation-page__system-dark-mode__button),
:root[uc-extension-id="addon@darkreader.org"] input::placeholder {
color: var(--uc-content-text-a80) !important;
}

:root[uc-extension-id="addon@darkreader.org"] .button,
:root[uc-extension-id="addon@darkreader.org"] :where(.textbox:focus),
:root[uc-extension-id="addon@darkreader.org"] .textbox:focus::placeholder {
color: var(--uc-arrowpanel-color) !important;
}

:root[uc-extension-id="addon@darkreader.org"]
:where(.slider__track, .slider__track__fill)::before,
:root[uc-extension-id="addon@darkreader.org"]
:where(.slider__track__fill, .multi-switch__highlight, .dropdown__selected, .textbox:hover, .textbox:focus),
:where(.slider__track__fill, .multi-switch__highlight, .dropdown__selected, .textbox:focus),
:root[uc-extension-id="addon@darkreader.org"] .check-button .checkbox__checkmark {
background-color: var(--uc-panel-button-solid) !important;
}
Expand Down Expand Up @@ -156,22 +183,58 @@
background: none !important;
}

:root[uc-extension-id="addon@darkreader.org"] .news-section__main-link {
:root[uc-extension-id="addon@darkreader.org"]
:where(.news-section__main-link, a.news-section__news, #description a) {
font-weight: initial !important;
color: var(--in-content-link-color) !important;
}

:root[uc-extension-id="addon@darkreader.org"]
.news-section__main-link:is(:hover, :focus-visible) {
:where(.news-section__main-link, a.news-section__news, #description a):is(:hover, :focus-visible) {
color: var(--in-content-link-color-hover) !important;
}

:root[uc-extension-id="addon@darkreader.org"] .news-section__main-link:active {
:root[uc-extension-id="addon@darkreader.org"]
:where(.news-section__main-link, a.news-section__news, #description a):active {
color: var(--in-content-link-color-active) !important;
}

:root[uc-extension-id="addon@darkreader.org"] .m-donate-button__text {
transform: none !important;
font-style: italic !important;
}

:root[uc-extension-id="addon@darkreader.org"] .news-section {
border-radius: 0 0 4px 4px !important;
}

:root[uc-extension-id="addon@darkreader.org"] :where(.news-section__popover, .message-box) {
background-color: var(--uc-panel-box-solid) !important;
border-color: var(--uc-panel-button-solid) !important;
}

:root[uc-extension-id="addon@darkreader.org"] .news-section__popover__top {
border-color: var(--uc-panel-button-solid) !important;
padding: 8px 8px 2px 0 !important;
}

:root[uc-extension-id="addon@darkreader.org"] .news-section__title {
color: inherit !important;
margin-left: 1rem !important;
}

:root[uc-extension-id="addon@darkreader.org"] .news-section__close {
color: inherit !important;
cursor: default !important;
background: url(chrome://userchrome/content/in-content/darkreader-close.svg) center/16px no-repeat !important;
color: transparent !important;
}

:root[uc-extension-id="addon@darkreader.org"] .news-section__close:hover {
background-color: var(--uc-arrowpanel-dimmed) !important;
}

:root[uc-extension-id="addon@darkreader.org"] .overlay {
background-color: color-mix(in srgb, var(--uc-arrowpanel-background), transparent) !important;
}
}
2 changes: 1 addition & 1 deletion resources/layout/uc-low-globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ tooltip {
--uc-menu-border-color: hsl(233, 23%, 20%);
--tooltip-bgcolor: hsl(233, 36%, 11%);
--tooltip-color: white;
--tooltip-border-radius: 2px;
--tooltip-border-radius: 3px;
--tooltip-border-color: var(--uc-menu-border-color);
--tooltip-box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2);
}
8 changes: 8 additions & 0 deletions resources/material/zipper.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions uc-context-menu-icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,9 @@ menuitem#menu_openAddons .menu-text,
> .menu-text,
#private-relay_firefox_com-menuitem-_fx-private-relay-manage-aliases:not(.menuitem-iconic)
> .menu-text,
:is(#contentAreaContextMenu, #toolbar-context-menu)
menu:not(.menu-iconic, .menuitem-iconic)[id^="gitzip-firefox-addons_gitzip_org-menuitem-"]
> .menu-text,
#menu_pageInfo .menu-text,
menuitem:is(#sync-setup, #sync-unverifieditem, #sync-reauthitem) .menu-text,
menuitem:is(#sync-enable, #sync-syncnowitem) .menu-text,
Expand Down Expand Up @@ -390,6 +393,8 @@ menuitem#menu_openAddons::before,
#private-relay_firefox_com-menuitem-_fx-private-relay-generate-alias:not(.menuitem-iconic)::before,
#private-relay_firefox_com-menuitem-_fx-private-relay-use-existing-aliases:not(.menuitem-iconic)::before,
#private-relay_firefox_com-menuitem-_fx-private-relay-manage-aliases:not(.menuitem-iconic)::before,
:is(#contentAreaContextMenu, #toolbar-context-menu)
menu:not(.menu-iconic, .menuitem-iconic)[id^="gitzip-firefox-addons_gitzip_org-menuitem-"]::before,
#menu_pageInfo::before,
menuitem:is(#sync-setup, #sync-unverifieditem, #sync-reauthitem)::before,
menuitem:is(#sync-enable, #sync-syncnowitem)::before,
Expand Down Expand Up @@ -848,6 +853,11 @@ menuitem#menu_openAddons::before,
background-image: url(chrome://userchrome/content/settings.svg);
}

:is(#contentAreaContextMenu, #toolbar-context-menu)
menu:not(.menu-iconic, .menuitem-iconic)[id^="gitzip-firefox-addons_gitzip_org-menuitem-"]::before {
background-image: url(chrome://userchrome/content/material/zipper.svg);
}

menuitem:is(#sync-setup, #sync-unverifieditem)::before {
background-image: url(chrome://userchrome/content/fxa/avatar.svg);
}
Expand Down
20 changes: 20 additions & 0 deletions uc-extensions.css
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,26 @@ menupopup#viewSidebarMenu
display: none;
}

/* GitZip */
:is(.menu-iconic, .menuitem-iconic)[id^="gitzip-firefox-addons_gitzip_org-menuitem-"]
.menu-iconic-left::before {
width: 16px;
height: 16px;
margin-inline: var(--context-iconic-margin);
fill: currentColor;
-moz-context-properties: fill, fill-opacity, stroke;
content: "";
display: -moz-inline-box;
background-position: center;
background-repeat: no-repeat;
background-image: url(chrome://userchrome/content/material/zipper.svg);
}

:is(.menu-iconic, .menuitem-iconic)[id^="gitzip-firefox-addons_gitzip_org-menuitem-"]
.menu-iconic-icon {
display: none;
}

/* invert some icons in the extension options panel */
.eom-addon-button[data-extensionid="FirefoxColor@mozilla.com"] .toolbarbutton-icon,
.eom-addon-button[data-extensionid="default-bookmark-folder@gustiaux.com"] .toolbarbutton-icon,
Expand Down
6 changes: 2 additions & 4 deletions uc-globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,9 @@ but other than that these variables should be available everywhere. */
--uc-desaturate-dimmed-further: hsla(234, 60%, 83%, 0.25);
--uc-desaturate-dimmed-even-further: hsla(232, 60%, 85%, 0.3);
--uc-content-text-a50: hsla(236, 100%, 85%, 0.5);
--uc-content-text-a80: hsla(0, 0%, 100%, 0.8);
--uc-content-text-a80: hsla(236, 50%, 85%, 0.8);
--uc-panel-button-solid: hsl(234, 24%, 35%);
--uc-panel-button-faint-solid: hsl(234, 27%, 23%);
--uc-panel-box-solid: hsl(233, 29%, 18%);
--button-solid-hover-background: hsl(232, 29%, 26%);
--button-solid-active-background: hsl(234, 26%, 30%);
Expand Down Expand Up @@ -281,9 +282,6 @@ but other than that these variables should be available everywhere. */
--ebp-menulist-menuitem-hover-background-color: hsl(232, 21%, 40%);
--ebp-menulist-separator-color: hsl(232, 21%, 43%);
--ebp-favicon-background-color: var(--dialog-bgcolor);
--ui-solid-button-bgcolor: var(--uc-arrowpanel-dimmed);
--ui-solid-button-hover-bgcolor: var(--uc-arrowpanel-dimmed-further);
--ui-solid-button-active-bgcolor: var(--uc-arrowpanel-dimmed-even-further);
--ebmp-hover-bgcolor: hsl(233, 24%, 33%);
--ebmp-focus-bgcolor: hsl(233, 24%, 38%);
--ebmp-double-focus-bgcolor: hsl(233, 22%, 43%);
Expand Down
10 changes: 9 additions & 1 deletion uc-misc.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,21 @@ tooltip .uc-tooltip-box {
color: inherit !important;
}

.places-tooltip-box[desc-hidden="true"] > hbox {
display: none !important;
}

.places-tooltip-box[desc-hidden="true"] .places-tooltip-title {
margin-bottom: 1px !important;
}

#places-tooltip-insecure-icon {
-moz-context-properties: fill;
fill: currentColor;
width: 1em;
height: 1em;
margin-inline-start: 0;
margin-inline-end: .2em;
margin-inline-end: 0.25em !important;
min-width: 1em !important;
}

Expand Down

0 comments on commit a939a7e

Please sign in to comment.