From: Robert Kaiser Date: Mon, 6 Jul 2015 10:04:19 +0000 (+0200) Subject: add (preliminary) support for new FxA messages and control center X-Git-Tag: LCARStrek-2.36^0 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=470b6552308a19f556badc1b3992e976e52b4239;p=themes.git add (preliminary) support for new FxA messages and control center --- diff --git a/LCARStrek/browser/controlcenter/arrow-subview.svg b/LCARStrek/browser/controlcenter/arrow-subview.svg new file mode 100644 index 00000000..cfda7a9b --- /dev/null +++ b/LCARStrek/browser/controlcenter/arrow-subview.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + diff --git a/LCARStrek/browser/controlcenter/conn-not-secure.svg b/LCARStrek/browser/controlcenter/conn-not-secure.svg new file mode 100644 index 00000000..e43d6fbe --- /dev/null +++ b/LCARStrek/browser/controlcenter/conn-not-secure.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/LCARStrek/browser/controlcenter/conn-secure-dv.svg b/LCARStrek/browser/controlcenter/conn-secure-dv.svg new file mode 100644 index 00000000..16f48d6f --- /dev/null +++ b/LCARStrek/browser/controlcenter/conn-secure-dv.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/controlcenter/conn-secure-ev.svg b/LCARStrek/browser/controlcenter/conn-secure-ev.svg new file mode 100644 index 00000000..c03c8efc --- /dev/null +++ b/LCARStrek/browser/controlcenter/conn-secure-ev.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/controlcenter/mcb-disabled.svg b/LCARStrek/browser/controlcenter/mcb-disabled.svg new file mode 100644 index 00000000..52fb628d --- /dev/null +++ b/LCARStrek/browser/controlcenter/mcb-disabled.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/controlcenter/panel.css b/LCARStrek/browser/controlcenter/panel.css new file mode 100644 index 00000000..8a628ef4 --- /dev/null +++ b/LCARStrek/browser/controlcenter/panel.css @@ -0,0 +1,282 @@ +#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-content-owner, +#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-content-verifier, +#identity-popup-securityView:not(.unknownIdentity):not(.verifiedIdentity):not(.mixedContent) > #identity-popup-content-supplemental, +#identity-popup-security-content:not(.verifiedIdentity):not(.verifiedDomain) > .identity-popup-connection-secure, +#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-securityView-header > .identity-popup-connection-secure, +#identity-popup-securityView:not(.unknownIdentity) > #identity-popup-securityView-header > .identity-popup-connection-not-secure, +#identity-popup-securityView:not(.chromeUI) > #identity-popup-securityView-header > .identity-popup-connection-internal, +#identity-popup-security-content:not(.unknownIdentity) > .identity-popup-connection-not-secure, +#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-securityView-connection, +#identity-popup-security-content:not(.chromeUI) > .identity-popup-connection-internal, +#identity-popup-security-content.chromeUI + .identity-popup-expander { + display: none; +} + +/* PANEL */ + +#identity-popup, +.panel-viewstack[viewtype="main"]:not([transitioning]) > .panel-mainview[panelid=identity-popup] > #identity-popup-mainView { + /* Tiny hack to ensure the panel shrinks back to its original + size after closing a subview that is bigger than the main view. */ + max-height: 0; +} + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.panel-mainview[panelid=identity-popup] { + min-width: 30em; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews { + transform: translateX(100%); + box-shadow: none; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { + transform: translateX(-100%); +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + background: var(--panel-arrowcontent-background); + border-bottom-right-radius: 3.5px; + padding: 0; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) { + border-bottom-right-radius: 0; + border-bottom-left-radius: 3.5px; +} + +.identity-popup-section:not(:first-child) { + border-top: 1px solid #A09090; +} + +#identity-popup-securityView, +#identity-popup-security-content, +#identity-popup-permissions-content, +#tracking-protection-content { + padding: 0.75em 0 1em; + -moz-padding-start: calc(2em + 24px); + -moz-padding-end: 1em; + background-repeat: no-repeat; + background-position: 1em 1em; + background-size: 24px auto; +} + +#identity-popup-securityView:-moz-locale-dir(rtl), +#identity-popup-security-content:-moz-locale-dir(rtl), +#identity-popup-permissions-content:-moz-locale-dir(rtl), +#tracking-protection-content:-moz-locale-dir(rtl) { + background-position: calc(100% - 1em) 1em; +} + +/* IN-CONTENT-PREF STYLE BUTTONS */ +/* +.identity-popup-button { + -moz-appearance: none; + margin: 5px 0; + height: 30px; + color: #333; + line-height: 20px; + border: 1px solid #c1c1c1; + border-radius: 2px; + background-color: #fbfbfb; +} + +.identity-popup-button:not([disabled="true"]):hover { + background-color: #ebebeb; +} + +.identity-popup-button:not([disabled="true"]):hover:active { + background-color: #dadada; +} + +.identity-popup-button[disabled="true"] { + cursor: not-allowed; + opacity: 0.5; +} +*/ +/* EXPAND BUTTON */ + +.identity-popup-expander { + margin: 0; + min-width: auto; + width: 38px; + background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow"); + background-size: 16px, auto; + background-position: center; + background-repeat: no-repeat; + background-color: transparent; + border-radius: 0 5px 5px 0; +} + +.identity-popup-expander:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.identity-popup-expander[panel-multiview-anchor] { + transition: background-color 250ms ease-in; + background-color: #008484; + background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png"); +} + +@media (min-resolution: 1.1dppx) { + .identity-popup-expander[panel-multiview-anchor] { + background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png"); + } +} + +.identity-popup-expander > .button-box, +.identity-popup-expander > .button-box:focus { + padding: 4px 0; + border-radius: 0 5px 5px 0; +} + +.identity-popup-expander[panel-multiview-anchor] > .button-box, +.identity-popup-expander[panel-multiview-anchor] > .button-box:focus { +} + +.identity-popup-expander:hover { + background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active"); + background-color: #FFCF00; +} + +.identity-popup-expander:hover:active { + background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active"); + background-color: #FF9F00; +} + +/* CONTENT */ + +.identity-popup-text { + white-space: pre-wrap; + font-size: 110%; + margin: 0; +} + +.identity-popup-headline { + margin: 2px 0 4px; + font-size: 150%; +} + +/* SECURITY */ + +#identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) { + margin: 2px 0 4px; +} + +.identity-popup-connection-secure { + color: #008484; +} + +.identity-popup-connection-not-secure { + color: #9C9CFF; +} + +#identity-popup-security-content.chromeUI { + background-image: url(chrome://branding/content/icon48.png); +} + +/* SECURITY SUBVIEW */ + +#identity-popup-securityView { + padding-bottom: 2em; + overflow: hidden; +} + +#identity-popup-securityView, +#identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg); +} + +#identity-popup-securityView.verifiedDomain, +#identity-popup-security-content.verifiedDomain { + background-image: url(chrome://browser/skin/controlcenter/conn-secure-dv.svg); +} + +#identity-popup-securityView.verifiedIdentity, +#identity-popup-security-content.verifiedIdentity { + background-image: url(chrome://browser/skin/controlcenter/conn-secure-ev.svg); +} + +#identity-popup-securityView.mixedActiveContent, +#identity-popup-security-content.mixedActiveContent { + background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup-securityView-header { + border-bottom: 1px solid #A09090; + padding-bottom: 1em; + margin-bottom: 1em; +} + +#identity-popup-content-owner { + font-weight: 700; +} + +#identity-popup-content-verifier { + color: #A09090; +} + +#identity-popup-content-owner, +#identity-popup-securityView > #identity-popup-securityView-connection.identity-popup-text { + margin-top: 1em; +} + +/* TRACKING PROTECTION */ + +#tracking-protection-content { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg"); +} + +#tracking-protection-content[block-disabled] { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg"); +} + +#tracking-action-block, +#tracking-action-unblock { + margin: 1em 0 0; +} + +#tracking-protection-content[block-active] > #tracking-not-detected, +#tracking-protection-content[block-disabled] > #tracking-not-detected, +#tracking-protection-content:not([block-active]) > #tracking-blocked, +#tracking-protection-content:not([block-active]) #tracking-action-unblock, +#tracking-protection-content:not([block-disabled]) > #tracking-loaded, +#tracking-protection-content:not([block-disabled]) #tracking-action-block, +#tracking-protection-content:not([block-active]):not([block-disabled]) > #tracking-actions { + display: none; +} + +/* PERMISSIONS */ + +#identity-popup-permissions-content { + background-image: url(chrome://browser/skin/controlcenter/permissions.svg); +} + +#identity-popup-permission-list { + margin-top: 5px; +} + +.identity-popup-permission-label { + -moz-margin-start: 0; +} + +/* FOOTER BUTTONS */ + +#identity-popup-button-container { + background-color: #000000; + border-top: 1px solid #A09090; +} + +#identity-popup-more-info-button { +} +/* +#identity-popup-more-info-button:hover { +} + +#identity-popup-more-info-button:hover:active { +} +*/ \ No newline at end of file diff --git a/LCARStrek/browser/controlcenter/permissions.svg b/LCARStrek/browser/controlcenter/permissions.svg new file mode 100644 index 00000000..d58b18b6 --- /dev/null +++ b/LCARStrek/browser/controlcenter/permissions.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/LCARStrek/browser/controlcenter/tracking-protection-disabled.svg b/LCARStrek/browser/controlcenter/tracking-protection-disabled.svg new file mode 100644 index 00000000..4558ffaa --- /dev/null +++ b/LCARStrek/browser/controlcenter/tracking-protection-disabled.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/controlcenter/tracking-protection.svg b/LCARStrek/browser/controlcenter/tracking-protection.svg new file mode 100644 index 00000000..29af973a --- /dev/null +++ b/LCARStrek/browser/controlcenter/tracking-protection.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index f29780c5..0bbc3c29 100644 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ b/LCARStrek/browser/customizableui/panelUIOverlay.css @@ -375,8 +375,10 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]), -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) { @@ -472,28 +474,48 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { border-bottom-left-radius: 4px; } -#PanelUI-footer-inner { +#main-window[customizing] #PanelUI-footer-fxa > toolbarseparator { + display: none; +} + +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator, +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon, +#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-fxa-status { + display: flex; + flex: 1 1 0%; +} + +#PanelUI-footer-inner, +#PanelUI-footer-fxa { display: flex; border-top: 1px solid #9C9CFF; } -#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner { +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa { position: relative; } -#PanelUI-footer-inner > toolbarseparator { +#PanelUI-footer-inner > toolbarseparator, +#PanelUI-footer-fxa > toolbarseparator { border: 0; border-left: 1px solid #9C9CFF; margin: 0; } -#PanelUI-footer-inner:hover > toolbarseparator { +#PanelUI-footer-inner:hover > toolbarseparator, +#PanelUI-footer-fxa:hover > toolbarseparator { /* margin: 0;*/ } #PanelUI-update-status, #PanelUI-help, -#PanelUI-fxa-status, +#PanelUI-fxa-label, +#PanelUI-fxa-icon, #PanelUI-customize, #PanelUI-quit { margin: 0; @@ -507,15 +529,13 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { -moz-box-orient: horizontal; } -#PanelUI-update-status, -#PanelUI-fxa-status { +#PanelUI-update-status { border-top: 1px solid #9C9CFF; border-bottom: 1px solid transparent; margin-bottom: -1px; } -#PanelUI-update-status > .toolbarbutton-text, -#PanelUI-fxa-status > .toolbarbutton-text { +#PanelUI-update-status > .toolbarbutton-text { width: 0; /* Fancy cropping solution for flexbox. */ } @@ -529,7 +549,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-update-status > .toolbarbutton-text, -#PanelUI-fxa-status > .toolbarbutton-text, +#PanelUI-fxa-label > .toolbarbutton-text, #PanelUI-customize > .toolbarbutton-text { margin: 0; padding: 0 6px; @@ -537,24 +557,37 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-help > .toolbarbutton-text, -#PanelUI-quit > .toolbarbutton-text { +#PanelUI-quit > .toolbarbutton-text, +#PanelUI-fxa-avatar > .toolbarbutton-text { display: none; } #PanelUI-update-status > .toolbarbutton-icon, -#PanelUI-fxa-status > .toolbarbutton-icon, +#PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-fxa-icon > .toolbarbutton-icon, #PanelUI-customize > .toolbarbutton-icon, #PanelUI-help > .toolbarbutton-icon, #PanelUI-quit > .toolbarbutton-icon { -moz-margin-end: 0; } +#PanelUI-fxa-icon { + -moz-padding-start: 15px; + -moz-padding-end: 15px; +} + +#PanelUI-fxa-label, #PanelUI-customize { flex: 1; -moz-padding-start: 15px; -moz-border-start-style: none; } +#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label { + -moz-padding-start: 0px; +} + #PanelUI-update-status { width: calc(22.35em + 30px); -moz-padding-start: 15px; @@ -565,17 +598,17 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url(chrome://branding/content/icon16.png); } -#PanelUI-fxa-status { - -moz-padding-start: 15px; +#PanelUI-fxa-label, +#PanelUI-fxa-icon { list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png"); } -#PanelUI-fxa-status[syncstatus="active"] { +#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon { list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png"); } -#PanelUI-fxa-status[fxastatus="migrate-signup"], -#PanelUI-fxa-status[fxastatus="migrate-verify"] { +#PanelUI-fxa-icon[fxastatus="migrate-signup"], +#PanelUI-fxa-icon[fxastatus="migrate-verify"] { list-style-image: url(chrome://global/skin/warning-16.png); } @@ -596,13 +629,46 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url("chrome://browser/skin/menuPanel-exit.png"); } -#PanelUI-fxa-status, +#PanelUI-fxa-label, +#PanelUI-fxa-icon, #PanelUI-customize, #PanelUI-help, #PanelUI-quit { -moz-image-region: rect(0, 16px, 16px, 0); } +#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon { + display: none; +} + +#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-fxa-avatar[disabled], +#PanelUI-fxa-icon[disabled] { + display: none; +} + +#PanelUI-fxa-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background-repeat: no-repeat; + background-position: 0 0; + background-size: contain; + align-self: center; + margin: 0px 7px; + padding: 0px; + border: 0px none; + -moz-margin-end: 0; +} + +#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg); +} + #PanelUI-customize:hover, #PanelUI-help:not([disabled]):hover, #PanelUI-quit:not([disabled]):hover, @@ -618,12 +684,14 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-fxa-status:not([disabled]):hover, +#PanelUI-fxa-icon:not([disabled]):hover, #PanelUI-help:not([disabled]):hover, #PanelUI-customize:hover, #PanelUI-quit:not([disabled]):hover { } #PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-fxa-icon:not([disabled]):hover:active, #PanelUI-help:not([disabled]):hover:active, #PanelUI-customize:hover:active, #PanelUI-quit:not([disabled]):hover:active { @@ -633,6 +701,19 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-fxa-status:not([disabled]):hover:active { } +#PanelUI-footer-fxa[fxastatus="error"] { + background-color: #FF0000; + color: #000000; +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { + background-color: #FFCF00; +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { + background-color: #FF9F00; +} + #PanelUI-update-status { /* color: black; */ } diff --git a/LCARStrek/browser/customizableui/subView-arrow-back-inverted@2x.png b/LCARStrek/browser/customizableui/subView-arrow-back-inverted@2x.png new file mode 100644 index 00000000..903590ea Binary files /dev/null and b/LCARStrek/browser/customizableui/subView-arrow-back-inverted@2x.png differ diff --git a/LCARStrek/browser/fxa/default-profile-image.svg b/LCARStrek/browser/fxa/default-profile-image.svg new file mode 100644 index 00000000..e49d9404 --- /dev/null +++ b/LCARStrek/browser/fxa/default-profile-image.svg @@ -0,0 +1,9 @@ + + + + + + +