(JS) update clearDownloadsButton.uc.js

(CSS) overhaul appearance of downloads panel summary/overflow block. fix the focus style on app menu zoom buttons.
aminomancer · Feb 11, 2022 · a7387d3 · a7387d3
1 parent bb8d76b
commit a7387d3
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 20 deletions.
diff --git a/JS/clearDownloadsButton.uc.js b/JS/clearDownloadsButton.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Clear Downloads Panel Button
-// @version        1.3.2
+// @version        1.4.0
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer/uc.css.js
 // @description    Place a "Clear Downloads" button in the downloads panel, right next to the "Show all downloads" button.
@@ -44,6 +44,10 @@
                 this.clearPanelButton.setAttribute(key, val);
             DownloadsView.downloadsHistory.after(this.clearPanelButton);
             this.clearPanelButton.hidden = !DownloadsView._visibleViewItems?.size > 0;
+            this.clearPanelButton
+                ?.closest("#downloadsFooter")
+                .prepend(document.createXULElement("toolbarseparator"));
+            this.clearPanelButton?.parentElement.setAttribute("uc-hbox", "true");
         }
         sentenceCase(str) {
             return str

diff --git a/resources/in-content/downloads.css b/resources/in-content/downloads.css
@@ -24,21 +24,40 @@
         padding-inline: 16px 20px !important;
     }
 
-    #downloadsFooterButtons:not([hidden]) {
+    #downloadsFooter > stack {
+        margin: 0 var(--uc-arrowpanel-menuitem-inline-margin) !important;
+        padding-block: 0 var(--uc-arrowpanel-menuitem-inline-margin) !important;
+    }
+
+    #downloadsFooterButtons[uc-hbox]:not([hidden]) {
         display: flex !important;
         flex-flow: row nowrap;
-        padding-block: var(--uc-arrowpanel-menuitem-inline-margin) !important;
-        margin: 0 var(--uc-arrowpanel-menuitem-inline-margin) !important;
-        border-top: 1px solid var(--uc-desaturate-dimmed) !important;
-        gap: var(--uc-arrowpanel-menuitem-inline-margin) !important;
+        column-gap: var(--uc-arrowpanel-menuitem-inline-margin) !important;
     }
 
+    #downloadsFooter > toolbarseparator,
     #downloadsFooterButtons > toolbarseparator {
+        appearance: none !important;
+        min-height: 0 !important;
+        border-top: 1px solid var(--panel-separator-color) !important;
+        border-bottom: none !important;
+        margin: var(--panel-separator-margin) !important;
+        margin-top: 0 !important;
+        padding: 0 !important;
+    }
+
+    #downloadsFooterButtons > toolbarseparator {
+        margin-inline: 0 !important;
+    }
+
+    #downloadsFooter[showingsummary] > toolbarseparator,
+    #downloadsFooter:not([showingsummary]) #downloadsFooterButtons[uc-hbox] > toolbarseparator {
         display: none !important;
     }
 
     #downloadsFooterButtons > button {
         border-radius: var(--context-menuitem-border-radius) !important;
+        min-height: var(--subviewbutton-height) !important;
         margin: 0 !important;
         flex-grow: 1;
         padding: 6px 8px !important;
@@ -66,6 +85,11 @@
         list-style-image: url(chrome://userchrome/content/skin/close-window.svg);
     }
 
+    #downloadsFooter[showingsummary] #downloadsFooterButtons {
+        flex-direction: column !important;
+        border-top: 0 !important;
+    }
+
     richlistitem.download-state > toolbarseparator {
         visibility: collapse !important;
     }
@@ -82,13 +106,12 @@
     }
 
     #downloadsSummary {
-        border-radius: var(--context-menuitem-border-radius) !important;
-        margin: 0 var(--uc-arrowpanel-menuitem-inline-margin) !important;
-        margin-inline-end: 52px !important;
+        height: auto !important;
+        border-radius: 0 !important;
+        margin: 0 !important;
         padding: 8px 4px !important;
-        border: 0 !important;
-        outline: 0 !important;
-        background: none !important;
+        padding-inline-end: calc(4px + 8px + 8px + 32px) !important;
+        gap: var(--uc-arrowpanel-menuitem-inline-margin) !important;
     }
 
     #downloadsPanel-blockedSubview > vbox {
@@ -277,7 +300,7 @@
     }
 
     #downloadsSummaryDescription {
-        color: var(--attention-color) !important;
+        color: inherit !important;
     }
 
     .downloadBlockedBadge {
@@ -375,7 +398,8 @@
     }
 }
 
-@-moz-document url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("about:downloads") {
+@-moz-document url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("about:downloads")
+{
     #downloadsListBox {
         border: none !important;
         outline: none !important;
@@ -391,11 +415,11 @@
     richlistitem.download-state:is([verdict], .openWhenFinished):is(:hover, :focus-within),
     richlistitem.download-state[state="1"][exists]:hover:active,
     richlistitem.download-state:is([verdict], .openWhenFinished):hover:active {
-        background: var(--uc-content-button-background-hover) !important
+        background: var(--uc-content-button-background-hover) !important;
     }
 
     richlistitem.download-state[selected]:not(:hover, :focus-within) {
-        background: var(--uc-content-button-background) !important
+        background: var(--uc-content-button-background) !important;
     }
 
     richlistitem.download-state[state="1"]:not([exists]) .downloadTarget {

diff --git a/uc-app-menu.css b/uc-app-menu.css
@@ -495,6 +495,10 @@
     height: 12px !important;
 }
 
+#appMenu-zoom-controls2 :where(.toolbarbutton-icon, .toolbarbutton-text) {
+    outline: none !important;
+}
+
 #appMenu-zoom-controls2 #appMenu-zoomReset-button2 {
     border: 1px solid var(--desaturate-dimmed) !important;
     height: 20px !important;
@@ -581,7 +585,7 @@ toolbarseparator.proton-zap {
 #appMenu-fxa-status2:not([fxastatus]) {
     margin-inline-end: 0 !important;
     padding-inline-end: var(--arrowpanel-menuitem-inline-margin) !important;
-	padding-block: 0 !important;
+    padding-block: 0 !important;
 }
 
 #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {

diff --git a/userChrome.au.css b/userChrome.au.css
@@ -1789,11 +1789,13 @@ animation-duration of 730ms, 71% is the point where we start the fade out. */
         padding: 30px 30px 20px 30px;
     }
 
-    #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::part(icon) {
+    #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::part(icon)
+    {
         display: none;
     }
 
-    #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before {
+    #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before
+    {
         width: 16px;
         height: 16px;
         margin-inline: 11px 8px;
@@ -1806,7 +1808,8 @@ animation-duration of 730ms, 71% is the point where we start the fade out. */
         background-image: url(chrome://userchrome/content/shortcut.svg);
     }
 
-    #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"] {
+    #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"]
+    {
         width: 16px;
         height: 16px;
         margin-inline: 11px 8px;