update urlbar results styles.

adjust downloads panel focus styles.
aminomancer · Feb 9, 2022 · 23eb92c · 23eb92c
1 parent f775cf4
commit 23eb92c
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 56 deletions.
diff --git a/resources/in-content/downloads.css b/resources/in-content/downloads.css
@@ -201,6 +201,38 @@
         background: var(--uc-content-button-background-active) !important;
     }
 
+    #downloadsHistory:focus {
+        background-color: revert;
+    }
+
+    #downloadsPanel:not([keyfocus]) .downloadsPanelFooterButton:focus-visible {
+        outline: none;
+    }
+
+    #downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover,
+    #downloadsListBox > richlistitem:is(.openWhenFinished).hoveringMainArea:hover,
+    #downloadsListBox > richlistitem[verdict]:hover,
+    #downloadsListBox > richlistitem:hover:is(.openWhenFinished),
+    .downloadsPanelFooterButton:not([disabled]):hover,
+    #downloadsHistory:not([disabled]):hover,
+    #downloadsPanel[keyfocus] .downloadsPanelFooterButton:not([disabled]):focus-visible,
+    #downloadsPanel[keyfocus] #downloadsListBox:focus-visible > richlistitem[selected],
+    #downloadsPanel[keyfocus] #downloadsHistory:not([disabled]):focus-visible {
+        background-color: var(--download-button-hover-bg) !important;
+    }
+
+    #downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active,
+    #downloadsListBox > richlistitem:is(.openWhenFinished).hoveringMainArea:hover:active,
+    #downloadsListBox > richlistitem[verdict]:hover:active,
+    .downloadsPanelFooterButton:not([disabled]):is([open="true"], :hover:active),
+    #downloadsHistory:not([disabled]):is([open], :hover:active) {
+        background-color: var(--download-button-active-bg) !important;
+    }
+
+    #downloadsListBox richlistitem {
+        color: inherit !important;
+    }
+
     richlistitem.download-state > .downloadButton .button-box {
         width: 32px !important;
         height: 32px !important;

diff --git a/uc-misc.css b/uc-misc.css
@@ -466,7 +466,8 @@ toolbar:not(#PersonalToolbar) .toolbarbutton-1:focus-visible > .toolbarbutton-te
 toolbar:not(#PersonalToolbar) .toolbarbutton-1:focus-visible > .toolbarbutton-badge-stack,
 .urlbar-page-action:focus-visible,
 #appMenu-zoomReduce-button2:focus-visible > .toolbarbutton-icon,
-#appMenu-zoomEnlarge-button2:focus-visible > .toolbarbutton-icon {
+#appMenu-zoomEnlarge-button2:focus-visible > .toolbarbutton-icon,
+#downloadsFooterButtons button:focus-visible {
     color: inherit;
     outline: unset !important;
     -moz-outline-radius: unset !important;
@@ -581,6 +582,19 @@ toolbar:not(#PersonalToolbar) .toolbarbutton-1:focus-visible > .toolbarbutton-ba
             font-size: 11.5px !important;
         }
 
+        .urlbarView-row .urlbarView-tag,
+        .urlbarView-row:is([type="switchtab"], [type="remotetab"])
+            > .urlbarView-row-inner
+            > .urlbarView-no-wrap
+            > .urlbarView-action {
+            line-height: 16px !important;
+            font-weight: var(--uc-font-weight-thin, 400) !important;
+        }
+
+        .urlbarView-row .urlbarView-tag strong {
+            font-weight: inherit !important;
+        }
+
         .urlbarView-row[dynamicType="onboardTabToSearch"]
             .urlbarView-title
             strong.urlbarView-dynamic-onboardTabToSearch-titleStrong {

diff --git a/uc-panels.css b/uc-panels.css
@@ -7,6 +7,13 @@
 /* controls just about every aspect of panelmultiview panels.
 includes general rules as well as rules for specific panels, e.g. tracking protection panel. */
 
+panel {
+    --panel-separator-color: var(--desaturate-dimmed) !important;
+    --uc-content-button-background: var(--uc-arrowpanel-faint);
+    --uc-content-button-background-hover: var(--uc-arrowpanel-dimmed);
+    --uc-content-button-background-active: var(--uc-arrowpanel-dimmed-further);
+}
+
 /* hide the stupid outline shown on panels when transitioning from subview to subview */
 /* see here: https://searchfox.org/mozilla-central/source/browser/components/customizableui/PanelMultiView.jsm#1037 */
 panelview {
@@ -608,10 +615,6 @@ popupnotificationcontent {
     opacity: 1 !important;
 }
 
-panel {
-    --panel-separator-color: var(--desaturate-dimmed) !important;
-}
-
 popupnotification checkbox .checkbox-check {
     margin-inline-end: var(--context-checkbox-margin-end) !important;
     border-radius: 2px !important;
@@ -866,7 +869,7 @@ popupnotificationcontent label[control]:not([hidden]) + menulist {
     margin-bottom: calc(0px - var(--arrowpanel-menuitem-padding-block)) !important;
 }
 
-#identity-popup-securityView .identity-popup-security-connection description {
+#identity-popup-securityView .identity-popup-security-connection :where(description, label) {
     margin-inline-start: calc(16px + var(--arrowpanel-subviewbutton-iconic-gap, 8px)) !important;
 }
 

diff --git a/uc-urlbar-results.css b/uc-urlbar-results.css
@@ -93,7 +93,8 @@
     margin: 0 !important;
     border-color: var(--panel-separator-color) !important;
     padding: 2px 7px !important;
-    max-height: 20px !important;
+    line-height: 14px !important;
+    height: 20px !important;
     box-sizing: border-box !important;
     border-radius: 10px !important;
     background-color: var(--arrowpanel-faint) !important;
@@ -261,18 +262,23 @@
     > .urlbarView-row-inner
     > .urlbarView-no-wrap
     > .urlbarView-action {
-    background-color: transparent !important;
-    border-radius: unset !important;
+    /* background-color: transparent !important;
+    border-radius: unset !important; */
+    margin: 0 !important;
+    border: 1px solid var(--panel-separator-color) !important;
+    padding: 2px 7px !important;
+    height: 20px !important;
+    line-height: 14px !important;
+    box-sizing: border-box !important;
+    border-radius: 10px !important;
+    background-color: var(--arrowpanel-faint) !important;
+    color: var(--uc-arrowpanel-color) !important;
 }
 
 .urlbarView-row:not([selected]) .urlbarView-action {
     color: var(--urlbar-popup-action-color) !important;
 }
 
-.urlbarView-row[type="switchtab"]:not([selected], :hover) .urlbarView-action {
-    display: none;
-}
-
 .urlbarView[actionoverride]
     .urlbarView-row[type="switchtab"]
     > .urlbarView-row-inner
@@ -316,7 +322,11 @@
 .urlbarView-url,
 .urlbarView-tags,
 .urlbarView-dynamic-calculator-action,
-.urlbarView-dynamic-unitConversion-action {
+.urlbarView-dynamic-unitConversion-action,
+.urlbarView-row:is([type="switchtab"], [type="remotetab"])
+    > .urlbarView-row-inner
+    > .urlbarView-no-wrap
+    > .urlbarView-action {
     margin-inline: 8px 0 !important;
 }
 
@@ -471,7 +481,8 @@
 .urlbarView-row .urlbarView-tag,
 .urlbarView-row:where([type="tabtosearch"], [type="tokenaliasengine"]) .urlbarView-title,
 .urlbarView-row:not([has-url])
-    .urlbarView-title[data-l10n-id="urlbar-result-action-search-w-engine"] {
+    .urlbarView-title[data-l10n-id="urlbar-result-action-search-w-engine"],
+.urlbarView-tail-prefix {
     font-weight: var(--urlbar-result-strong-font-weight, 500) !important;
     font-style: normal !important;
     color: var(--panel-shortcut-color);
@@ -489,6 +500,7 @@
 .urlbarView-row[selected] .urlbarView-tag,
 .urlbarView-row[selected]:not([has-url])
     .urlbarView-title[data-l10n-id="urlbar-result-action-search-w-engine"],
+.urlbarView-row[selected] .urlbarView-tail-prefix,
 .urlbarView-row-inner[selected] .urlbarView-dynamic-calculator-input,
 .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-output {
     color: var(--panel-shortcut-focus);
@@ -533,25 +545,28 @@
     display: none;
 }
 
-/* I think the slide-in animation looks pretty corny honestly */
-.urlbarView-action[slide-in] {
-    animation: none !important;
+/* tail suggestions */
+.urlbarView-tail-prefix {
+    margin-inline-end: calc(0px - var(--urlbar-icon-padding) - 2px) !important;
 }
 
+/* get rid of the ... and show the original string */
 .urlbarView-tail-prefix > .urlbarView-tail-prefix-string {
     visibility: visible !important;
 }
 
 .urlbarView-tail-prefix > .urlbarView-tail-prefix-char {
-    display: none !important;
+    visibility: collapse !important;
 }
 
-.urlbarView-tail-prefix {
-    margin-top: -1px !important;
-    margin-bottom: -0.3px !important;
-    padding-top: 2px !important;
-    padding-bottom: 2px !important;
-    align-self: center !important;
+/* instead, replace the favicon with a ... icon */
+.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+    visibility: visible !important;
+    box-sizing: border-box !important;
+    background: url(chrome://global/skin/icons/more.svg) no-repeat !important;
+    width: 16px !important;
+    height: 16px !important;
+    padding-inline-start: 16px;
 }
 
 .urlbarView-url > strong {
@@ -627,6 +642,11 @@
     display: none;
 }
 
+/* I think the slide-in animation looks pretty corny honestly */
+.urlbarView-action[slide-in] {
+    animation: none !important;
+}
+
 #urlbar[breakout][breakout-extend] > #urlbar-input-container,
 #urlbar-input-container {
     height: var(--urlbar-height) !important;
@@ -682,8 +702,6 @@
     animation-timing-function: var(--animation-easing-function) !important;
     animation-duration: 0.1s !important;
     transform-origin: top !important;
-    transform-style: flat !important;
-    backface-visibility: hidden !important;
     margin: calc(0px - (var(--urlbar-container-height) - var(--urlbar-height)) / 2) -5px !important;
     box-shadow: var(--searchbar-popup-box-shadow) !important;
     clip-path: inset(
@@ -697,11 +715,8 @@
 
 #urlbar[breakout][breakout-extend] .urlbarView {
     animation-name: urlbar-grow-results !important;
-    animation-timing-function: var(--animation-easing-function) !important;
-    animation-duration: 0.3s !important;
-    transform-origin: top !important;
-    transform-style: preserve-3d !important;
-    backface-visibility: visible !important;
+    animation-timing-function: ease-out !important;
+    animation-duration: 0.1s !important;
 }
 
 @keyframes urlbar-grow-bg {
@@ -717,11 +732,9 @@
 
 @keyframes urlbar-grow-results {
     0% {
-        transform: scaleY(0.95);
         opacity: 0;
     }
     100% {
-        transform: none;
         opacity: 1;
     }
 }

diff --git a/userChrome.au.css b/userChrome.au.css
@@ -246,28 +246,6 @@ the last 75% or so of this stylesheet is dedicated to restoring pre-proton conte
         background-color: var(--button-primary-hover-bgcolor);
     }
 
-    #downloadsHistory:focus {
-        background-color: revert;
-    }
-
-    #downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover,
-    #downloadsListBox > richlistitem:is(.openWhenFinished).hoveringMainArea:hover,
-    #downloadsListBox > richlistitem[verdict]:hover,
-    #downloadsListBox > richlistitem:hover:is(.openWhenFinished),
-    .downloadsPanelFooterButton:is(:hover, :focus-visible),
-    #downloadsPanel[keyfocus] #downloadsListBox:focus-visible > richlistitem[selected],
-    #downloadsHistory:is(:hover, :focus-visible) {
-        background-color: var(--panel-item-hover-bgcolor);
-    }
-
-    #downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active,
-    #downloadsListBox > richlistitem:is(.openWhenFinished).hoveringMainArea:hover:active,
-    #downloadsListBox > richlistitem[verdict]:hover:active,
-    .downloadsPanelFooterButton:not([disabled]):is([open="true"], :hover:active),
-    #downloadsHistory:not([disabled]):is([open], :hover:active) {
-        background-color: var(--panel-item-active-bgcolor);
-    }
-
     menupopup::part(drop-indicator-bar) {
         margin-block: -14px;
         margin-inline: -5px 5px;