diff --git a/browser/metro/base/content/pages/aboutCertError.xhtml b/browser/metro/base/content/pages/aboutCertError.xhtml index 80623fc0dfd7..d425fffb0ebe 100644 --- a/browser/metro/base/content/pages/aboutCertError.xhtml +++ b/browser/metro/base/content/pages/aboutCertError.xhtml @@ -178,16 +178,18 @@ } function toggle(id) { - var el = document.getElementById(id); - if (el.getAttribute("collapsed")) - el.setAttribute("collapsed", false); - else - el.setAttribute("collapsed", true); + var element = document.getElementById(id); + if (element.hasAttribute("collapsed")) { + element.removeAttribute("collapsed"); + } else { + element.setAttribute("collapsed", true); + } } ]]> +
@@ -214,14 +216,14 @@ -
-

&certerror.technical.heading;

-

+

+

&certerror.technical.heading;

+

-
-

&certerror.expert.heading;

-
+
+

&certerror.expert.heading;

+

&certerror.expert.content;

&certerror.expert.contentPara2;

diff --git a/browser/metro/base/content/pages/blockedSite.xhtml b/browser/metro/base/content/pages/blockedSite.xhtml index 9387b667352f..6745ab59b327 100644 --- a/browser/metro/base/content/pages/blockedSite.xhtml +++ b/browser/metro/base/content/pages/blockedSite.xhtml @@ -151,7 +151,7 @@ - +
diff --git a/browser/metro/theme/defines.inc b/browser/metro/theme/defines.inc index 3bfc76950187..b094e6493fcf 100644 --- a/browser/metro/theme/defines.inc +++ b/browser/metro/theme/defines.inc @@ -115,4 +115,9 @@ % XXX currently, there's some weirdness with the dppx unit, as documented in % bug 895277. Because of that, we have to use 1.39dppx instead of 1.4dppx. %define min_res_140pc 1.39dppx -%define min_res_180pc 1.8dppx \ No newline at end of file +%define min_res_180pc 1.8dppx + +% error page style constants +%define error_page_background_color #eee +%define error_page_warning_color #efd400 +%define error_page_error_color #bf0000 \ No newline at end of file diff --git a/browser/metro/theme/images/errorpage-blocked-site.png b/browser/metro/theme/images/errorpage-blocked-site.png new file mode 100644 index 000000000000..f93727cf7281 Binary files /dev/null and b/browser/metro/theme/images/errorpage-blocked-site.png differ diff --git a/browser/metro/theme/images/errorpage-blocked-site@1.4x.png b/browser/metro/theme/images/errorpage-blocked-site@1.4x.png new file mode 100644 index 000000000000..a5a8aa6a5a3d Binary files /dev/null and b/browser/metro/theme/images/errorpage-blocked-site@1.4x.png differ diff --git a/browser/metro/theme/images/errorpage-blocked-site@1.8x.png b/browser/metro/theme/images/errorpage-blocked-site@1.8x.png new file mode 100644 index 000000000000..28c45f2ba4c9 Binary files /dev/null and b/browser/metro/theme/images/errorpage-blocked-site@1.8x.png differ diff --git a/browser/metro/theme/images/errorpage-cert-untrusted.png b/browser/metro/theme/images/errorpage-cert-untrusted.png new file mode 100644 index 000000000000..b4ebcfdce4c2 Binary files /dev/null and b/browser/metro/theme/images/errorpage-cert-untrusted.png differ diff --git a/browser/metro/theme/images/errorpage-cert-untrusted@1.4x.png b/browser/metro/theme/images/errorpage-cert-untrusted@1.4x.png new file mode 100644 index 000000000000..fbd442041ed3 Binary files /dev/null and b/browser/metro/theme/images/errorpage-cert-untrusted@1.4x.png differ diff --git a/browser/metro/theme/images/errorpage-cert-untrusted@1.8x.png b/browser/metro/theme/images/errorpage-cert-untrusted@1.8x.png new file mode 100644 index 000000000000..cb76cbd97f29 Binary files /dev/null and b/browser/metro/theme/images/errorpage-cert-untrusted@1.8x.png differ diff --git a/browser/metro/theme/images/errorpage-larry-black.png b/browser/metro/theme/images/errorpage-larry-black.png deleted file mode 100644 index 9f2e4a6e7366..000000000000 Binary files a/browser/metro/theme/images/errorpage-larry-black.png and /dev/null differ diff --git a/browser/metro/theme/images/errorpage-larry-white.png b/browser/metro/theme/images/errorpage-larry-white.png deleted file mode 100644 index fc153c7314e8..000000000000 Binary files a/browser/metro/theme/images/errorpage-larry-white.png and /dev/null differ diff --git a/browser/metro/theme/jar.mn b/browser/metro/theme/jar.mn index 5ac73dc17ff6..f906a4685584 100644 --- a/browser/metro/theme/jar.mn +++ b/browser/metro/theme/jar.mn @@ -119,8 +119,12 @@ chrome.jar: skin/images/errorpage-warning.png (images/errorpage-warning.png) skin/images/errorpage-warning@1.4x.png (images/errorpage-warning@1.4x.png) skin/images/errorpage-warning@1.8x.png (images/errorpage-warning@1.8x.png) - skin/images/errorpage-larry-white.png (images/errorpage-larry-white.png) - skin/images/errorpage-larry-black.png (images/errorpage-larry-black.png) + skin/images/errorpage-cert-untrusted.png (images/errorpage-cert-untrusted.png) + skin/images/errorpage-cert-untrusted@1.4x.png (images/errorpage-cert-untrusted@1.4x.png) + skin/images/errorpage-cert-untrusted@1.8x.png (images/errorpage-cert-untrusted@1.8x.png) + skin/images/errorpage-blocked-site.png (images/errorpage-blocked-site.png) + skin/images/errorpage-blocked-site@1.4x.png (images/errorpage-blocked-site@1.4x.png) + skin/images/errorpage-blocked-site@1.8x.png (images/errorpage-blocked-site@1.8x.png) skin/images/alert-downloads-30.png (images/alert-downloads-30.png) skin/images/search-glass-30.png (images/search-glass-30.png) skin/images/play-hdpi.png (images/play-hdpi.png) diff --git a/browser/metro/theme/netError.css b/browser/metro/theme/netError.css index e1a076c38e79..9a93b14461e3 100644 --- a/browser/metro/theme/netError.css +++ b/browser/metro/theme/netError.css @@ -65,13 +65,48 @@ li { padding: 8px 0px; } -#errorPage.certerror { - background-color: #EFD400; +#errorPage.certerror, #errorPage.blockedsite { + background-color: @error_page_background_color@; } -#errorPage.blockedsite { - background-color: #BF0000; - color: #fff; +#errorPage button { + margin: 5px 10px 5px 0; +} + +#errorPage > .top-decoration { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 25px; +} + +#errorPage.certerror > .top-decoration { + background: linear-gradient(-45deg, + @error_page_background_color@ 25%, + @error_page_warning_color@ 25%, + @error_page_warning_color@ 50%, + @error_page_background_color@ 50%, + @error_page_background_color@ 75%, + @error_page_warning_color@ 75%, + @error_page_warning_color@) repeat scroll 0% 0% / + 80px 80px transparent; +} + +#errorPage.blockedsite > .top-decoration { + background: linear-gradient(-45deg, + @error_page_background_color@ 25%, + @error_page_error_color@ 25%, + @error_page_error_color@ 50%, + @error_page_background_color@ 50%, + @error_page_background_color@ 75%, + @error_page_error_color@ 75%, + @error_page_error_color@) repeat scroll 0% 0% / + 80px 80px transparent; +} + +#errorPage #cert_domain_link { + color: #0095dd; } #errorPage.certerror #errorPageContainer > .section-header, @@ -88,9 +123,6 @@ li { -moz-padding-end: 24px; } -#errorTitle { -} - #errorTitleIcon { background-image: url("chrome://browser/skin/images/errorpage-warning.png"); background-position: center center; @@ -105,11 +137,35 @@ li { width: 40px; } +#errorPage.certerror #errorTitleIcon, #errorPage.blockedsite #errorTitleIcon { + background-size: 60px 60px; + width: 60px; + height: 60px; + -moz-margin-start: -80px; + -moz-margin-end: 10px; +} + +#errorPage.certerror #errorTitleIcon { + background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted.png"); +} + +#errorPage.blockedsite #errorTitleIcon { + background-image: url("chrome://browser/skin/images/errorpage-blocked-site.png"); +} + @media (min-resolution: @min_res_140pc@) { /* Load 140% image when scaled by 140% */ #errorTitleIcon { background-image: url("chrome://browser/skin/images/errorpage-warning@1.4x.png"); } + + #errorPage.certerror #errorTitleIcon { + background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.4x.png"); + } + + #errorPage.blockedsite #errorTitleIcon { + background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.4x.png"); + } } @media (min-resolution: @min_res_180pc@) { @@ -117,15 +173,22 @@ li { #errorTitleIcon { background-image: url("chrome://browser/skin/images/errorpage-warning@1.8x.png"); } + + #errorPage.certerror #errorTitleIcon { + background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.8x.png"); + } + + #errorPage.blockedsite #errorTitleIcon { + background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.8x.png"); + } } -#errorPage.certerror #errorTitleIcon { - background-image: url("chrome://browser/skin/images/errorpage-larry-black.png"); -} - -#errorPage.blockedsite #errorTitleIcon { - background-image: url("chrome://browser/skin/images/errorpage-larry-white.png"); - color: white; +@media (max-width: 760px) { + #errorPage.certerror #errorTitleIcon, #errorPage.blockedsite #errorTitleIcon { + display: block; + -moz-margin-start: 0; + -moz-margin-end: 0; + } } .errorTitleText { @@ -188,28 +251,25 @@ li { padding-right: 8px; } - #securityOverrideDiv { padding-top: 10px; } -div[collapsed] { - padding-left: 15px; - background-image: url("chrome://browser/skin/images/arrowright-16.png"); +.expandable-section { + background: url("chrome://browser/skin/images/arrowdown-16.png") no-repeat left 0.6em; background-size: 11px 11px; - background-repeat: no-repeat; - background-position: left 0.6em; } -div[collapsed="true"] { +.expandable-section[collapsed] { background-image: url("chrome://browser/skin/images/arrowright-16.png"); } -div[collapsed="false"] { - background-image: url("chrome://browser/skin/images/arrowdown-16.png"); -} - -div[collapsed="true"] > p, -div[collapsed="true"] > div { +.expandable-section[collapsed] > .expandable-content { display: none; } + +.expandable-section > .expandable-heading { + cursor: pointer; + -moz-padding-start: 15px; + -moz-user-select: none; +}