From f7acfddb956e5f849a50d279ccc07c9b508e53a3 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Wed, 18 Nov 2015 00:43:09 -0500 Subject: [PATCH 01/12] Update conn-degraded.svg This change makes the padlock for non-secure connections appear open. A locked gray padlock was already used for connections with only domain validation in the address bar, and they are secure. Although the green padlock is used for this in the default theme of Firefox 42 and later, the gray padlock stays in Simple White X. Showing a plain locked padlock gives the wrong impression, regardless of it being gray. --- whitefox/browser/controlcenter/conn-degraded.svg | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/whitefox/browser/controlcenter/conn-degraded.svg b/whitefox/browser/controlcenter/conn-degraded.svg index e3e82c1..a21b183 100644 --- a/whitefox/browser/controlcenter/conn-degraded.svg +++ b/whitefox/browser/controlcenter/conn-degraded.svg @@ -6,22 +6,16 @@ width="24" height="24" viewBox="0 0 24 24"> - - - + + - - - - - - - + + From 10532dfa60e369c3fc8563f762bba90e03c64106 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Wed, 18 Nov 2015 00:49:34 -0500 Subject: [PATCH 02/12] Update panel.css This eliminates incorrect messages in the identity panel. It patches Firefox bug 1221771. It corrects the position of the warning icon in some messages for rtl locales. It makes the code current with Firefox 45.0a1. --- whitefox/browser/controlcenter/panel.css | 34 +++++++++++++++++++----- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/whitefox/browser/controlcenter/panel.css b/whitefox/browser/controlcenter/panel.css index 88c2343..52758ba 100644 --- a/whitefox/browser/controlcenter/panel.css +++ b/whitefox/browser/controlcenter/panel.css @@ -24,7 +24,7 @@ /* End Firefox 41 Only */ /* Hide all conditional elements by default. */ -:-moz-any([when-connection],[when-mixedcontent],[when-ciphers]) { +:-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) { display: none; } @@ -34,6 +34,8 @@ #identity-popup[connection=secure] [when-connection~=secure], #identity-popup[connection=chrome] [when-connection~=chrome], #identity-popup[connection=file] [when-connection~=file], +/* Show insecure login forms messages when needed. */ +#identity-popup[loginforms=insecure] [when-loginforms=insecure], /* Show weak cipher messages when needed. */ #identity-popup[ciphers=weak] [when-ciphers~=weak], /* Show mixed content warnings when needed */ @@ -47,6 +49,18 @@ display: inherit; } +/* Hide redundant messages based on insecure login forms presence. */ +#identity-popup[loginforms=secure] [and-when-loginforms=insecure] { + display: none; +} +#identity-popup[loginforms=insecure] [and-when-loginforms=secure] { + display: none; +} +/* Hide contradictory messages based on insecure login forms presence. */ +#identity-popup[connection=chrome] [when-loginforms=insecure] { + display: none; +} + /* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ #identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure], /* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ @@ -189,6 +203,7 @@ #identity-popup-security-descriptions > description, #identity-popup-securityView-header > description, #identity-popup-securityView-body > description, +#identity-popup-permissions-content > description, #tracking-protection-content > label, .identity-popup-text { white-space: pre-wrap; @@ -211,6 +226,11 @@ background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%; } +.identity-popup-warning-gray:-moz-locale-dir(rtl), +.identity-popup-warning-yellow:-moz-locale-dir(rtl) { + background-position: 100% 50%; +} + /* SECURITY */ #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) { @@ -241,11 +261,6 @@ background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg); } -#identity-popup[connection=chrome] #identity-popup-securityView, -#identity-popup[connection=chrome] #identity-popup-security-content { - background-image: url(chrome://branding/content/icon48.png); -} - #identity-popup[connection^=secure] #identity-popup-securityView, #identity-popup[connection^=secure] #identity-popup-security-content { background-image: url(chrome://browser/skin/controlcenter/conn-secure.svg); @@ -266,11 +281,18 @@ background-image: url(chrome://browser/skin/controlcenter/conn-degraded.svg); } +#identity-popup[loginforms=insecure] #identity-popup-securityView, +#identity-popup[loginforms=insecure] #identity-popup-security-content, #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView, #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content { background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); } +#identity-popup[connection=chrome] #identity-popup-securityView, +#identity-popup[connection=chrome] #identity-popup-security-content { + background-image: url(chrome://branding/content/icon48.png); +} + #identity-popup-security-descriptions > description { margin-top: 6px; color: Graytext; From 05d508bc6a5ccda2a43ef6ac592c054f85a13e02 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Wed, 18 Nov 2015 01:02:28 -0500 Subject: [PATCH 03/12] Import new svg connections icons. This brings the images used in Firefox 42 and later for the connection icon. It includes an identity icon introduced in Firefox 45.0a1. --- whitefox/browser/identity-icon.svg | 31 +++++++++++++++ .../browser/identity-mixed-active-blocked.svg | 31 +++++++++++++++ .../browser/identity-mixed-active-loaded.svg | 38 +++++++++++++++++++ .../browser/identity-mixed-passive-loaded.svg | 31 +++++++++++++++ whitefox/browser/identity-not-secure.svg | 8 ++++ whitefox/browser/identity-secure.svg | 27 +++++++++++++ 6 files changed, 166 insertions(+) create mode 100644 whitefox/browser/identity-icon.svg create mode 100644 whitefox/browser/identity-mixed-active-blocked.svg create mode 100644 whitefox/browser/identity-mixed-active-loaded.svg create mode 100644 whitefox/browser/identity-mixed-passive-loaded.svg create mode 100644 whitefox/browser/identity-not-secure.svg create mode 100644 whitefox/browser/identity-secure.svg diff --git a/whitefox/browser/identity-icon.svg b/whitefox/browser/identity-icon.svg new file mode 100644 index 0000000..531aec4 --- /dev/null +++ b/whitefox/browser/identity-icon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/browser/identity-mixed-active-blocked.svg b/whitefox/browser/identity-mixed-active-blocked.svg new file mode 100644 index 0000000..8b442ba --- /dev/null +++ b/whitefox/browser/identity-mixed-active-blocked.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/browser/identity-mixed-active-loaded.svg b/whitefox/browser/identity-mixed-active-loaded.svg new file mode 100644 index 0000000..b7191a8 --- /dev/null +++ b/whitefox/browser/identity-mixed-active-loaded.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/browser/identity-mixed-passive-loaded.svg b/whitefox/browser/identity-mixed-passive-loaded.svg new file mode 100644 index 0000000..d1e9dbd --- /dev/null +++ b/whitefox/browser/identity-mixed-passive-loaded.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/browser/identity-not-secure.svg b/whitefox/browser/identity-not-secure.svg new file mode 100644 index 0000000..a57a5af --- /dev/null +++ b/whitefox/browser/identity-not-secure.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/whitefox/browser/identity-secure.svg b/whitefox/browser/identity-secure.svg new file mode 100644 index 0000000..5dad890 --- /dev/null +++ b/whitefox/browser/identity-secure.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + From b2e476ecff1922d94489fc17421385720a4bb0ae Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Wed, 18 Nov 2015 01:06:58 -0500 Subject: [PATCH 04/12] Create identity-domain-secure.svg. This makes a gray version of identity-secure.svg. The new file takes the place of identity-icons-https.png from Firefox 41 and earlier. In Firefox 42 and later it signals connections with domain validation, unlike the default theme that since Firefox 42 uses the same green icon used for extended validation. --- whitefox/browser/identity-domain-secure.svg | 27 +++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 whitefox/browser/identity-domain-secure.svg diff --git a/whitefox/browser/identity-domain-secure.svg b/whitefox/browser/identity-domain-secure.svg new file mode 100644 index 0000000..0ffffbd --- /dev/null +++ b/whitefox/browser/identity-domain-secure.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + From e83ba99d73ee20044ba10f2db4438f9e5ab319e0 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Wed, 18 Nov 2015 03:09:33 -0500 Subject: [PATCH 05/12] Update broser.css This update adopts the revised connection icons (#page-proxy-favicon) from the default theme for Firefox 42 and later, but leaves a gray padlock for connections with domain validation only. It restores showing those icons in Firefox 45.0a1 (issue #15). It changes the animation for showing the tracking protection icon. It also adds a border to the bars that may show at the top and bottom of panel that lists the matches to the entry in address bar in Firefox 44.0a2 and 45.0a1. --- whitefox/browser/browser-common.css | 188 ++++++++++++++++++++++++---- 1 file changed, 162 insertions(+), 26 deletions(-) diff --git a/whitefox/browser/browser-common.css b/whitefox/browser/browser-common.css index 90a2a41..2392d9e 100755 --- a/whitefox/browser/browser-common.css +++ b/whitefox/browser/browser-common.css @@ -2415,6 +2415,14 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, padding: 2px 2px; } +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid #CCC; +} + +#urlbar-search-footer { + border-top: 1px solid #CCC; +} + #urlbar-search-splitter { min-width: 6px; -moz-margin-start: -3px; @@ -2593,6 +2601,45 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but background-image: var(--identity-box-chrome-background-image); } +/* MAIN IDENTITY ICON */ + +#identity-icon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); + margin-inline-start: 3px; + margin-inline-end: -19px; + opacity: 0; +} + +/********* This is not in use here **********************************************************% +#identity-box:hover > #identity-icon, +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { + opacity: 0.3; +} + +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; +} + +%**********************************************************************************************/ + +#identity-box:not([open=true]):hover > #tracking-protection-icon[state]{ + opacity: .675; +} + /* TRACKING PROTECTION ICON */ #tracking-protection-icon { @@ -2610,7 +2657,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but } #tracking-protection-icon[animate] { - transition: margin-left 200ms ease-out, margin-right 200ms ease-out; + transition: margin-left 200ms ease-out, margin-right 200ms ease-out, width 200ms ease-out; } @media (min-resolution: 1.1dppx) { /* use the icon that was already in the theme --johnGraciliano */ #tracking-protection-icon { @@ -2622,61 +2669,153 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but } #tracking-protection-icon:not([state]) { - margin-inline-start: -18px; +/* margin-inline-start: -18px; */ + margin-inline-end: 0; + width: 0; pointer-events: none; opacity: 0; /* Only animate the shield in, when it disappears hide it immediately. */ transition: none; } +#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon, #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { visibility: collapse; } -/* page proxy icon */ +/* CONNECTION ICON (Firefox 45.0a1) */ -#page-proxy-favicon { +#connection-icon { width: 16px; height: 16px; - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); + margin-inline-start: 3px; + margin-inline-end: 1px; + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); + visibility: visible; } -.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { +#urlbar:not([pageproxystate="valid"]) > #identity-box > #connection-icon{ + opacity: .325; +} + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon{ + list-style-image: url(chrome://browser/skin/identity-domain-secure.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-secure.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #connection-icon { list-style-image: url(chrome://branding/content/identity-icons-brand.svg); - -moz-image-region: unset; + visibility: visible; +} + +#identity-box:not([open=true]):hover > #connection-icon{ + opacity: .675; +} + +#identity-box[open=true] > #tracking-protection-icon[state], +#identity-box[open=true] > #connection-icon{ + filter: url('data:image/svg+xml,\ + \ + \ + \ + \ + #dimLights'); +} + +/* page proxy icon (Before Firefox 45.0a1) */ + +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } + .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { list-style-image: url(chrome://branding/content/identity-icons-brand.png); } -.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { list-style-image: url(chrome://browser/skin/identity-icons-https.png); } -.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } -.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } - -.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } -.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +/* Firefox 42-44 */ +#identity-icons > #page-proxy-favicon { + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); + -moz-image-region: unset; +} + +.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + +.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-domain-secure.svg); +} + +.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-secure.svg); +} + +.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); +} + +.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); +} + +.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); +} + + #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.3; } @@ -2701,27 +2840,24 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but -moz-image-region: rect(0, 16px, 16px, 0); } - #identity-box:hover > #identity-icons > #page-proxy-favicon, #identity-box:hover > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } - #identity-box:hover > #identity-icons > #tracking-protection-icon[state], - #identity-box.chromeUI:hover > #identity-icons > #page-proxy-favicon{ - -moz-image-region: unset; - opacity: .8; - } - #identity-box:hover:active > #identity-icons > #page-proxy-favicon, - #identity-box[open=true] > #identity-icons > #page-proxy-favicon, #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } + + #identity-box:hover > #identity-icons > #tracking-protection-icon[state], + #identity-box:hover > #identity-icons > #page-proxy-favicon{ + opacity: .7; + } + #identity-box:hover:active > #identity-icons > #tracking-protection-icon[state], #identity-box[open=true] > #identity-icons > #tracking-protection-icon[state], - #identity-box.chromeUI:hover:active > #identity-icons > #page-proxy-favicon, - #identity-box.chromeUI[open=true] > #identity-icons > #page-proxy-favicon{ - -moz-image-region: unset; + #identity-box:hover:active > #identity-icons > #page-proxy-favicon, + #identity-box[open=true] > #identity-icons > #page-proxy-favicon{ opacity: 1; /* Changed filter -johnGraciliano */ filter: url('data:image/svg+xml,\ From 3f1ef606812172e8067e5ed7e0adddae26727733 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Sat, 21 Nov 2015 18:04:17 -0500 Subject: [PATCH 06/12] Update newTab.css This change revises the vertical margins among elements in about:newtab. This makes the page look more cosistent between different versions of Firefox. The change also adds a small margin to sides of the search bar so it does not touch the page borders when the window is too narrow. --- whitefox/browser/newtab/newTab.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/whitefox/browser/newtab/newTab.css b/whitefox/browser/newtab/newTab.css index e357388..fea8868 100644 --- a/whitefox/browser/newtab/newTab.css +++ b/whitefox/browser/newtab/newTab.css @@ -88,6 +88,7 @@ /* CELLS */ .newtab-cell { + margin: 20px 10px 25px; transform: rotateX(-8deg); transform-origin: 0 0; transition: 250ms; @@ -294,8 +295,13 @@ direction: inherit; /* Therefore keep the direction that from the ancestor. --johnGraciliano */ } +#newtab-search-container{ + margin-top:45px; + margin-bottom:15px; +} + #newtab-search-form { - margin-bottom: 40px; + margin: 20px 5px 15px; } #newtab-search-logo#newtab-search-logo, From 933b3217dec6cc07560a257cad320dc2e922c3a1 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Sat, 21 Nov 2015 18:14:39 -0500 Subject: [PATCH 07/12] Update identity-domain-secure.svg This changes the tone of the icon from gray60 to gray55. --- whitefox/browser/identity-domain-secure.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/whitefox/browser/identity-domain-secure.svg b/whitefox/browser/identity-domain-secure.svg index 0ffffbd..38594ad 100644 --- a/whitefox/browser/identity-domain-secure.svg +++ b/whitefox/browser/identity-domain-secure.svg @@ -6,7 +6,7 @@ width="16" height="16" viewBox="0 0 16 16"> From 7a3a5a7e234955b568f542cd483f161864fa6326 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Sat, 21 Nov 2015 18:17:54 -0500 Subject: [PATCH 08/12] Import usercontext icons This updates brings new icons introduced in Firefox 44.0a2 and 45.0a1. --- whitefox/browser/usercontext/banking.svg | 8 ++++++++ whitefox/browser/usercontext/personal.svg | 8 ++++++++ whitefox/browser/usercontext/shopping.svg | 8 ++++++++ whitefox/browser/usercontext/work.svg | 8 ++++++++ 4 files changed, 32 insertions(+) create mode 100644 whitefox/browser/usercontext/banking.svg create mode 100644 whitefox/browser/usercontext/personal.svg create mode 100644 whitefox/browser/usercontext/shopping.svg create mode 100644 whitefox/browser/usercontext/work.svg diff --git a/whitefox/browser/usercontext/banking.svg b/whitefox/browser/usercontext/banking.svg new file mode 100644 index 0000000..a1e20d8 --- /dev/null +++ b/whitefox/browser/usercontext/banking.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/whitefox/browser/usercontext/personal.svg b/whitefox/browser/usercontext/personal.svg new file mode 100644 index 0000000..861b40b --- /dev/null +++ b/whitefox/browser/usercontext/personal.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/whitefox/browser/usercontext/shopping.svg b/whitefox/browser/usercontext/shopping.svg new file mode 100644 index 0000000..e74e16d --- /dev/null +++ b/whitefox/browser/usercontext/shopping.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/whitefox/browser/usercontext/work.svg b/whitefox/browser/usercontext/work.svg new file mode 100644 index 0000000..782ad00 --- /dev/null +++ b/whitefox/browser/usercontext/work.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file From 30cc4ddd36cee4e56b874c410503cd8f4848473c Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Sat, 21 Nov 2015 18:20:05 -0500 Subject: [PATCH 09/12] Update browser-common.css This change contains adjustments for the opacity of the identity icons. With this change the developer toolbar (gcli) is no longer fixed to the dark theme, now it will show the light theme if selected in the developer tools. Also, this change adds rules for the new usercontext icons. There are some other additions for compatibility with Firefox 45.0a1. --- whitefox/browser/browser-common.css | 144 ++++++++++++++++++++++------ 1 file changed, 113 insertions(+), 31 deletions(-) diff --git a/whitefox/browser/browser-common.css b/whitefox/browser/browser-common.css index 2392d9e..355f0c7 100755 --- a/whitefox/browser/browser-common.css +++ b/whitefox/browser/browser-common.css @@ -2636,10 +2636,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but %**********************************************************************************************/ -#identity-box:not([open=true]):hover > #tracking-protection-icon[state]{ - opacity: .675; -} - /* TRACKING PROTECTION ICON */ #tracking-protection-icon { @@ -2695,7 +2691,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but } #urlbar:not([pageproxystate="valid"]) > #identity-box > #connection-icon{ - opacity: .325; + opacity: .375; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon{ @@ -2731,12 +2727,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but visibility: visible; } -#identity-box:not([open=true]):hover > #connection-icon{ +#identity-box:hover > #tracking-protection-icon[state], +#identity-box:hover > #connection-icon{ opacity: .675; } +#identity-box:hover:active > #tracking-protection-icon[state], +#identity-box:hover:active > #connection-icon, #identity-box[open=true] > #tracking-protection-icon[state], #identity-box[open=true] > #connection-icon{ + opacity: 1; filter: url('data:image/svg+xml,\ \ \ @@ -2817,7 +2817,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but #page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; + opacity: 0.375; } #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { @@ -2851,7 +2851,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but #identity-box:hover > #identity-icons > #tracking-protection-icon[state], #identity-box:hover > #identity-icons > #page-proxy-favicon{ - opacity: .7; + opacity: .675; } #identity-box:hover:active > #identity-icons > #tracking-protection-icon[state], @@ -5352,7 +5352,7 @@ svg|line.css-transform-line { :root[devtoolstheme="light"] #developer-toolbar { --gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */ --gcli-input-background: #f0f1f2; /* --theme-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */ + --gcli-input-focused-background: #f8f8f8 /* Was #f7f7f7 */; /* --theme-sidebar-background */ --gcli-input-color: #18191a; /* --theme-body-color */ --gcli-border-color: #aaaaaa; /* --theme-splitter-color */ --selection-background: #4c9ed9; /* --theme-selection-background */ @@ -5360,24 +5360,22 @@ svg|line.css-transform-line { } :root[devtoolstheme="dark"] #developer-toolbar { - --gcli-background-color: #343c45; /* --theme-toolbar-background */ - --gcli-input-background: rgba(37, 44, 51, .6); /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; /* --theme-body-color-alt */ - --gcli-border-color: black; /* --theme-splitter-color */ - --selection-background: #1d4f73; /* --theme-selection-background */ - --selection-color: #f5f7fa; /* --theme-selection-color */ + --gcli-background-color: #252c33 /* Was #343c45 */; /* --theme-toolbar-background */ /* SW had #343C45 */ + --gcli-input-background: #343c45 /* Was rgba(37, 44, 51, .6) */; /* --theme-tab-toolbar-background */ /* SW had #242b33 */ + --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */ /* SW had #232e38 */ + --gcli-input-color: #b6babf; /* --theme-body-color-alt */ /* SW had hsl(210,30%,85%) */ + --gcli-border-color: black; /* --theme-splitter-color */ /* SW had #060a0d and hsla(206,37%,4%,.2) for inset shadows */ + --selection-background: #1d4f73; /* --theme-selection-background */ /* SW had hsl(210,30%,85%) */ + --selection-color: #f5f7fa; /* --theme-selection-color */ /* SW had hsl(210,24%,16%) */ } -/* Developer toolbar */ - #developer-toolbar { -moz-appearance: none; padding: 0; min-height: 32px; - background-color: #343C45; /* Toolbars */ - border-top: 1px solid #060a0d; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset; + background-color: var(--gcli-background-color); + border-top: 1px solid var(--gcli-border-color); + /* box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset; %* Removed in 45.0a1 Merge -johnGraciliano TEST */ } #developer-toolbar > toolbarbutton { @@ -5425,7 +5423,7 @@ svg|line.css-transform-line { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); @@ -5454,7 +5452,7 @@ svg|line.css-transform-line { opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -5505,24 +5503,27 @@ html|*#gcli-output-frame { box-shadow: none; border-width: 0; background-color: transparent; + border-radius: 0; } .gclitoolbar-input-node { -moz-appearance: none; - color: hsl(210,30%,85%); - background-color: #242b33; + color: var(--gcli-input-color); + background-color: var(--gcli-input-background); background-repeat: no-repeat; background-position: 4px center; - box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset, +/*box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset, 1px 0 0 hsla(206,37%,4%,.2) inset, - -1px 0 0 hsla(206,37%,4%,.2) inset; + -1px 0 0 hsla(206,37%,4%,.2) inset; %* Changed in 45.0a1 Merge -johnGraciliano TEST */ + box-shadow: 1px 0 0 var(--gcli-border-color) inset, + -1px 0 0 var(--gcli-border-color) inset; line-height: 32px; outline-style: none; padding: 0; } .gclitoolbar-input-node[focused="true"] { - background-color: #232e38; + background-color: var(--gcli-input-focused-background); } .gclitoolbar-input-node::before { @@ -5541,15 +5542,15 @@ html|*#gcli-output-frame { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { - background-color: hsl(210,30%,85%); - color: hsl(210,24%,16%); + background-color: var(--selection-background); + color: var(--selection-color); text-shadow: none; } @@ -7072,10 +7073,12 @@ toolbarpaletteitem[place="toolbar"] { padding: 2em 15px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } +#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -7086,6 +7089,7 @@ toolbarpaletteitem[place="toolbar"] { -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -7108,6 +7112,7 @@ toolbarpaletteitem[place="toolbar"] { box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -8018,3 +8023,80 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { #theFoxOnlyBetter-slimChrome-container #nav-bar > * { background: rgba(250,250,250,1) !important; } + +/* All that follows is from the default in 44.0a2 and 45.0a1. I am not sure of its use yet... --johnGraciliano */ + +.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; + overflow: hidden; +} + +/* User Context UI browser styles */ + +#menu_newUserContextTabPersonal { + list-style-image: url("chrome://browser/skin/usercontext/personal.svg"); +} + +#menu_newUserContextTabWork { + list-style-image: url("chrome://browser/skin/usercontext/work.svg"); +} + +#menu_newUserContextTabBanking { + list-style-image: url("chrome://browser/skin/usercontext/banking.svg"); +} + +#menu_newUserContextTabShopping { + list-style-image: url("chrome://browser/skin/usercontext/shopping.svg"); +} + +/* URL Bar Decoration */ + +#userContext-indicator { + height: 16px; + width: 16px; +} + +#userContext-label { + margin-inline-end: 3px; + color: #909090; +} + +#userContext-icons:not([usercontextid]) { + display: none; +} + +#userContext-icons { + -moz-box-align: center; +} + +/* Personal User Context */ +#userContext-icons[usercontextid="1"] > #userContext-label { + color: #00a7e0; +} +#userContext-icons[usercontextid="1"] > #userContext-indicator { + list-style-image: url("chrome://browser/skin/usercontext/personal.svg"); +} + +/* Work User Context */ +#userContext-icons[usercontextid="2"] > #userContext-label { + color: #f89c24; +} +#userContext-icons[usercontextid="2"] > #userContext-indicator { + list-style-image: url("chrome://browser/skin/usercontext/work.svg"); +} + +/* Banking User Context */ +#userContext-icons[usercontextid="3"] > #userContext-label { + color: #7dc14c; +} +#userContext-icons[usercontextid="3"] > #userContext-indicator { + list-style-image: url("chrome://browser/skin/usercontext/banking.svg"); +} + +/* Shopping User Context */ +#userContext-icons[usercontextid="4"] > #userContext-label { + color: #ee5195; +} +#userContext-icons[usercontextid="4"] > #userContext-indicator { + list-style-image: url("chrome://browser/skin/usercontext/shopping.svg"); +} From bb2774457bdeb7075d149b9995d212c74ee03dce Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Sat, 21 Nov 2015 18:21:46 -0500 Subject: [PATCH 10/12] Update commandline.css This change makes the pop-up associated to the developer toolbar (gcli) adjust to the theme selected for the developer tools, dark or light, for versions of Firefox 40 and later. For earlier versions of Firefox it will use a minor variation of the light theme. This change also corrects a bug in Firefox that makes the pop-up be enclosed in a small window with scrollbars. --- whitefox/browser/devtools/commandline.css | 69 ++++++++++++++++++----- 1 file changed, 54 insertions(+), 15 deletions(-) diff --git a/whitefox/browser/devtools/commandline.css b/whitefox/browser/devtools/commandline.css index 06d7512..b983134 100644 --- a/whitefox/browser/devtools/commandline.css +++ b/whitefox/browser/devtools/commandline.css @@ -2,18 +2,49 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. + We are copy/pasting variables from light-theme and dark-theme, + since they aren't loaded in this context (within commandlineoutput.xhtml + and commandlinetooltip.xhtml). */ +:root{ /* default for Firefox 39 and earlier */ + --gcli-background-color: #f8f8f8; + --gcli-input-focused-background: #ebeced; + --gcli-input-color: #18191a; + --gcli-border-color: #aaa; + + --gcli-menu-highlight-color: hsla(0,100%,0%,.125); +} + +:root[devtoolstheme="light"] { + --gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */ + --gcli-input-focused-background: #f8f8f8 /* Was #f7f7f7 */; /* --theme-sidebar-background */ + --gcli-input-color: #18191a; /* --theme-body-color */ + --gcli-border-color: #aaaaaa; /* --theme-splitter-color */ + + --gcli-menu-highlight-color: hsla(0,100%,0%,.125); +} + +:root[devtoolstheme="dark"] { + --gcli-background-color: #343c45; /* --theme-toolbar-background */ + --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */ + --gcli-input-color: #b6babf; /* --theme-body-color-alt */ + --gcli-border-color: black; /* --theme-splitter-color */ + + --gcli-menu-highlight-color: hsla(0,100%,100%,.125); +} + .gcli-body { margin: 0; font: message-box; - color: hsl(210,30%,85%); + color: var(--gcli-input-color); } #gcli-output-root, #gcli-tooltip-root { - border: 1px solid hsl(206,37%,4%); - box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; - background-image: linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%)); + border: 1px solid var(--gcli-border-color); border-radius: 3px; + background-color: var(--gcli-input-focused-background); /* was var(--gcli-background-color) --johnGraciliano */ } #gcli-output-root { @@ -32,9 +63,9 @@ margin-left: 8px; width: 20px; height: 10px; - border-left: 1px solid hsl(206,37%,4%); - border-right: 1px solid hsl(206,37%,4%); - background-color: hsl(209,23%,18%); + border-left: 1px solid var(--gcli-border-color); + border-right: 1px solid var(--gcli-border-color); + background-color: var(--gcli-input-focused-background); /* was var(--gcli-background-color) --johnGraciliano */ } .gcli-tt-description, @@ -47,7 +78,7 @@ line-height: 1.2em; border-top: none; border-bottom: none; - color: hsl(210,30%,85%); + color: var(--gcli-input-color); } .gcli-row-out p, @@ -65,7 +96,7 @@ .gcli-row-out th, .gcli-row-out strong, .gcli-row-out pre { - color: hsl(210,30%,95%); + color: var(--gcli-input-color); } .gcli-row-out pre { @@ -83,13 +114,13 @@ font-weight: normal; font-size: 90%; border-radius: 3px; - background-color: hsl(209,23%,18%); - border: 1px solid hsl(206,37%,4%); + background-color: var(--gcli-input-focused-background); /* was var(--gcli-background-color) --johnGraciliano */ + border: 1px solid var(--gcli-border-color); } .gcli-out-shortcut:before, .gcli-help-synopsis:before { - color: hsl(210,30%,85%); + color: var(--gcli-input-color); -moz-padding-end: 2px; } @@ -111,23 +142,31 @@ margin: 10px 0 6px; } +.gcli-menu-template { + width: auto; +} + .gcli-menu-name { -moz-padding-start: 8px; } +.gcli-menu-descs { + overflow: hidden; +} + .gcli-menu-desc { -moz-padding-end: 8px; - color: hsl(210,30%,75%); + color: var(--gcli-input-color); } .gcli-menu-name:hover, .gcli-menu-desc:hover { - background-color: hsla(0,0%,0%,.3); + background-color: var(--gcli-background-color); /* was var(--gcli-input-focused-background) --johnGraciliano */ } .gcli-menu-highlight, .gcli-menu-highlight:hover { - background-color: hsla(0,100%,100%,.1); + background-color: var(--gcli-menu-highlight-color); /* was hsla(0,100%,100%,.1) --johnGraciliano */ } .gcli-menu-typed { From 9364bce4e9494070d34494c8073e52d99403c7e8 Mon Sep 17 00:00:00 2001 From: johnGraciliano Date: Sat, 21 Nov 2015 18:46:50 -0500 Subject: [PATCH 11/12] Update commandline.css This change brings from the default theme a new rule that applies when Windows 10 is not using the default theme. --- whitefox/browser/browser-common.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/whitefox/browser/browser-common.css b/whitefox/browser/browser-common.css index 355f0c7..0cb897e 100755 --- a/whitefox/browser/browser-common.css +++ b/whitefox/browser/browser-common.css @@ -7492,6 +7492,12 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { } } + @media not all and (-moz-windows-default-theme) { + #main-window { + background-color: transparent; + } + } + #titlebar-buttonbox, .titlebar-button { -moz-appearance: none !important; From 35f746b961738e926c32e5cf1b5ddbd34279d268 Mon Sep 17 00:00:00 2001 From: johngraciliano Date: Sat, 21 Nov 2015 19:27:44 -0500 Subject: [PATCH 12/12] Update install.rdf Version 2.2b18.x1.04 --- install.rdf | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/install.rdf b/install.rdf index db14982..1ed3f12 100755 --- a/install.rdf +++ b/install.rdf @@ -5,7 +5,7 @@ 4 Simple White X Paint your Firefox white. Make it look simpler, nicer. - 2.2b18.x1.03++ + 2.2b18.x1.04 Louis Chan (updated by Graciliano) Graciliano http://www.louis.hk/whitefox/