Closed Acid-Crash closed 5 years ago
Neither the #urlbar
nor the #tracking-protection-icon-container
offer the tags for the corresponding identities, so CSS can not set the same colors the identity box uses.
A workaround could be placing the protections icon after the identity box and not colorizing it at all.
#tracking-protection-icon-container ~ #identity-box {
-moz-box-ordinal-group: 0 !important;
}
#tracking-protection-icon-container *,
#tracking-protection-icon-container ~ #identity-box * {
padding-inline-start: 0px !important;
padding-inline-end: 0px !important;
margin-inline-start: 0px !important;
margin-inline-end: 0px !important;
}
#tracking-protection-icon-container,
#tracking-protection-icon-container ~ #identity-box {
padding-inline-start: 4px !important;
padding-inline-end: 4px !important;
margin-inline-start: 0px !important;
margin-inline-end: 0px !important;
}
#tracking-protection-icon-container #tracking-protection-icon-box {
width: 16px !important;
}
#tracking-protection-icon-container ~ #identity-box #identity-icon-labels,
#tracking-protection-icon-container ~ #identity-box ~ .urlbar-input-box{
margin-inline-start: 4px !important;
}
Oh, I did realise that after looking at code further (). Maybe we can go with "hacky-hacky" negative margins?
#urlbar #identity-box {margin-left: -27px !important; padding-left: 31px !important;}
#urlbar #tracking-protection-icon-container {z-index: 1000 !important;}
This should work too... ;-)
Test this:
#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
margin-inline-start: 0px !important;;
}
#urlbar:not([pageproxystate="invalid"]) > #tracking-protection-icon-container ~ #identity-box {
padding-inline-start: 28px !important;
}
#urlbar:not([pageproxystate="invalid"]) > #tracking-protection-icon-container {
margin-inline-end: -28px !important;
}
All-in-All it works, small suggestion would be regarding "click" area. By defaulf Tracking Protection opens by click within the whole squared area (which is good) With this style applied Tracking Protection is executed only by click on the shield area. Is there anything we can do with this?
I see what you mean, but I haven't found a solution or workaround yet. No luck with trying different z-index values.
Not sure if this helps but maybe we can adjust margins/paddings of the inner elements (#tracking-protection-icon or #tracking-protection-icon-box), so they will take same space as the outer element (#tracking-protection-icon-container). This should mimic larger click area...
The protection icon area always causes visual glitches, when I tried to "optimize" protections icons margins/paddings, but maybe you will have more luck...
Ok, I did notice that Mozilla is still working on this block (animation added). Because on this some of my working tries are working differently now)) Maybe its worth wait for a while (close this issue) until they end active work on this element
Its up to you. ;-) You are tracking this, right?
I can add the WIP tag...
Agreed.
@Acid-Crash Looks like the icon issue is gone on recent builds. ;-)
This projects code needs to be updated too.
Yes, all-in-all we can close this.
regarding code update: at some point I've noticed that tracking-protection is not present on about:pages (about:addonts etc). not sure if this was taken into account within current project code.
If 2.6.4 code is OK in your tests too, we can close this one.
all good
Hi @Aris-t2 It looks like something has changed again. There is no hover effect on #tracking-protection-icon-container Can you look if something can be done?
If I add this
#urlbar:not([pageproxystate="invalid"]) > #tracking-protection-icon-container:not(.chromeUI) ~ #identity-box {margin-inline-start: -12px !important;}
I can partially see the hover effect it somehow appears behind #identity-box's background
Try
#tracking-protection-icon-container {
position: relative;
}
Super, this solves the issue. BTW. Mozilla has fixed separator for tracking protection https://bugzilla.mozilla.org/show_bug.cgi?id=1569872 https://hg.mozilla.org/mozilla-central/rev/ac538289e17e Not sure if you want to hide it
Current Fx70+ addition for identitybox_colors.css
:
/* Fx70+ tweaks */
#urlbar[pageproxystate="invalid"] #tracking-protection-icon-container ~ #identity-box > #identity-icon {
margin-inline-start: 0px !important;
}
#tracking-protection-icon-container ~ #identity-box,
#urlbar[pageproxystate=valid] > #identity-box.notSecureText,
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
#urlbar[pageproxystate=valid] > #identity-box.extensionPage {
padding-inline-end: 4px !important;
}
#urlbar:not([pageproxystate="invalid"]) > #tracking-protection-icon-container:not(.chromeUI) ~ #identity-box {
padding-inline-start: 24px !important;
margin-inline-start: -24px !important;
}
#tracking-protection-icon-container {
padding-inline-start: 4px !important;
padding-inline-end: 4px !important;
position: relative !important;
border-inline-end: 0 !important;
background: unset !important;
}
#tracking-protection-icon-container {background: unset !important;}
removes hover effect. Is it added on purpose?
apart from this all looks fine
Yes, hovering that area increases the opacity of the tracking protection icon. Should be enough as feedback, but this can be added too:
#tracking-protection-icon-container:hover {
background: hsla(215,54%,33%,.05) !important;
}
#tracking-protection-icon-container:-moz-any([open="true"],:hover:active) {
background: hsla(215,54%,33%,.1) !important;
}
#urlbar[pageproxystate="invalid"] #tracking-protection-icon-container ~ #identity-box > #identity-icon {
margin-inline-start: 0px !important;
}
#tracking-protection-icon-container ~ #identity-box,
#urlbar[pageproxystate=valid] > #identity-box.notSecureText,
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
#urlbar[pageproxystate=valid] > #identity-box.extensionPage {
padding-inline-end: 4px !important;
}
#urlbar:not([pageproxystate="invalid"]) > #tracking-protection-icon-container:not(.chromeUI) ~ #identity-box {
padding-inline-start: 26px !important;
margin-inline-start: -24px !important;
}
#tracking-protection-icon-container {
padding-inline-start: 4px !important;
padding-inline-end: 4px !important;
position: relative !important;
border-inline-end: 0 !important;
background: unset !important;
}
#tracking-protection-icon-container:hover {
background: hsla(215,54%,33%,.05) !important;
}
#tracking-protection-icon-container:-moz-any([open="true"],:hover:active) {
background: hsla(215,54%,33%,.1) !important;
}
Hi, all is good now (last piece of the code)
Hi,
Looks like position: relative !important;
is not needed after all. Just checked default and it's there
It was there once before and got removed. Who knows what kind of experts are playing with that rule on daily bases. ;-)
verifiedIdentity
(green box color) is now gone too on Nightly.
I believe it's under the about:config pref _security.identityblock.show_extendedvalidation Personally I didn't like blueBackground-greenPadlock combo in the first place, so I've changed it to be Gren-green at some point with the following
#urlbar[pageproxystate="valid"] .verifiedDomain {
background: linear-gradient(hsl(91,70%,90%), hsl(93,60%,81%)) !important;
box-shadow: 0 1px 0 hsla(92,81%,16%,.05) inset !important;
color: #2f6600 !important;
border-inline-end: 1px solid hsla(92,81%,16%,.2) !important;
padding-inline-end: 6px !important;
}
#urlbar[pageproxystate="valid"] .verifiedDomain:hover {
background: linear-gradient(hsl(92,69%,77%), hsl(92,44%,51%)) !important;
}
#urlbar[pageproxystate="valid"] .verifiedDomain:-moz-any([open="true"],:hover:active) {
background: linear-gradient(hsl(92,65%,70%), hsl(92,40%,48%)) !important;
box-shadow: 0 1px 1px hsla(92,81%,16%,.6) inset,
0 1px 3px 1px hsla(92,81%,16%,.5) inset !important;
}
Also they've introduced _security.secure_connection_icon_colorgray to color padlock in gray Code wise it looks like this pref adds the following piece of CSS
#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #identity-icon[lock-icon-gray], #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon[lock-icon-gray], #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #identity-icon[lock-icon-gray] {
fill-opacity: 0.6;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
}
https://www.ghacks.net/2019/08/13/mozilla-revamps-firefoxs-https-address-bar-information/
Hi, @Aris-t2 Something has changed again.
It this point I'm just wondering is it worth notifying you right away or maybe wait until next version cycle (Nightly 71)... What are your thoughts on this?
Well I can look into the changes from time to time ;-)
They change to code again just enough to break it:
/* Fx70+ tweaks */
/* recomnmended to set: about:config > security.identityblock.show_extended_validation > true */
#urlbar-input-container[pageproxystate="invalid"] #tracking-protection-icon-container:not([hidden]) + #identity-box > #identity-icon {
margin-inline-start: 0px !important;
}
#tracking-protection-icon-container:not([hidden]) + #identity-box,
#urlbar-input-container[pageproxystate=valid] > #tracking-protection-icon-container:not([hidden]) + #identity-box.notSecureText,
#urlbar-input-container[pageproxystate=valid] > #tracking-protection-icon-container:not([hidden]) + #identity-box.verifiedIdentity,
#urlbar-input-container[pageproxystate=valid] > #tracking-protection-icon-container:not([hidden]) + #identity-box.chromeUI,
#urlbar-input-container[pageproxystate=valid] > #tracking-protection-icon-container:not([hidden]) + #identity-box.extensionPage {
padding-inline-end: 4px !important;
}
#urlbar-input-container:not([pageproxystate="invalid"]) > #tracking-protection-icon-container:not([hidden]):not(.chromeUI) + #identity-box {
padding-inline-start: 26px !important;
margin-inline-start: -24px !important;
}
#tracking-protection-icon-container:not([hidden]) {
padding-inline-start: 4px !important;
padding-inline-end: 4px !important;
position: relative !important;
border-inline-end: 0 !important;
background: unset !important;
z-index: 1000 !important;
}
#tracking-protection-icon-container:not([hidden]):hover {
background: hsla(215,54%,33%,.05) !important;
}
#tracking-protection-icon-container:not([hidden]):-moz-any([open="true"],:hover:active) {
background: hsla(215,54%,33%,.1) !important;
}
Describe the issue In Nightly Propection section was modified (guess it was taken out of the #identity-box to a separate element, luckily it remained inside #urlbar). Because of this if identitybox_colors.css Propection section lacks styling
What should have happened instead? I believe it should have the same styling as identitybox. Taking into account that there are two elements that accompany each other, maybe you consider modifying some existing styling. It seems like some box-shadows (bolder one) for active state can be removed (personal opinion) in favor of background-color change Here are few examples of those shadows and a rough result after their removal https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/identitybox_colors.css#L23 https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/identitybox_colors.css#L43
Steps to reproduce the issue? Enable identitybox_colors.css, observe #tracking-protection-icon-container
SCREENSHOTS with/without this projects files (drag & drop images into this post)
System information