Bug 962787 - Implement New Designs for the InContent Untrusted and Attack! Pages. r=sfoster

This commit is contained in:
Aleh Zasypkin 2014-01-31 22:54:13 +01:00
Родитель 3459858562
Коммит 19f3001db5
13 изменённых файлов: 114 добавлений и 43 удалений

Просмотреть файл

@ -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);
}
}
]]></script>
</head>
<body id="errorPage" class="certerror" dir="&locale.dir;">
<div class="top-decoration"></div>
<!-- PAGE CONTAINER (for styling purposes only) -->
<div id="errorPageContainer" class="section">
@ -214,14 +216,14 @@
<!-- The following sections can be unhidden by default by setting the
"browser.xul.error_pages.expert_bad_cert" pref to true -->
<div id="technicalContent" collapsed="true">
<h2 onclick="toggle('technicalContent');" id="technicalContentHeading">&certerror.technical.heading;</h2>
<p id="technicalContentText"/>
<div id="technicalContent" class="expandable-section" collapsed="true">
<h2 onclick="toggle('technicalContent');" id="technicalContentHeading" class="expandable-heading">&certerror.technical.heading;</h2>
<p class="expandable-content" id="technicalContentText"/>
</div>
<div id="expertContent" collapsed="true">
<h2 onclick="toggle('expertContent');" id="expertContentHeading">&certerror.expert.heading;</h2>
<div>
<div id="expertContent" class="expandable-section" collapsed="true">
<h2 onclick="toggle('expertContent');" id="expertContentHeading" class="expandable-heading">&certerror.expert.heading;</h2>
<div class="expandable-content">
<p>&certerror.expert.content;</p>
<p>&certerror.expert.contentPara2;</p>
<xul:button xmlns:xul='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' id='temporaryExceptionButton' label='&certerror.addTemporaryException.label;'/>

Просмотреть файл

@ -151,7 +151,7 @@
</head>
<body id="errorPage" class="blockedsite" dir="&locale.dir;">
<div class="top-decoration"></div>
<div id="errorPageContainer" class="section">

Просмотреть файл

@ -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
%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

Двоичные данные
browser/metro/theme/images/errorpage-blocked-site.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.9 KiB

Двоичные данные
browser/metro/theme/images/errorpage-blocked-site@1.4x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.9 KiB

Двоичные данные
browser/metro/theme/images/errorpage-blocked-site@1.8x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.1 KiB

Двоичные данные
browser/metro/theme/images/errorpage-cert-untrusted.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.9 KiB

Двоичные данные
browser/metro/theme/images/errorpage-cert-untrusted@1.4x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.9 KiB

Двоичные данные
browser/metro/theme/images/errorpage-cert-untrusted@1.8x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.1 KiB

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 850 B

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 886 B

Просмотреть файл

@ -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)

Просмотреть файл

@ -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;
}