Bug 1220481 - New responsive styles for blockedSite.xhtml. r=Gijs
MozReview-Commit-ID: FEroDYiS53x
--- a/browser/base/content/blockedSite.xhtml
+++ b/browser/base/content/blockedSite.xhtml
@@ -12,17 +12,17 @@
]>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
<html xmlns="http://www.w3.org/1999/xhtml" class="blacklist">
<head>
- <link rel="stylesheet" href="chrome://global/skin/netError.css" type="text/css" media="all" />
+ <link rel="stylesheet" href="chrome://browser/skin/blockedSite.css" type="text/css" media="all" />
<link rel="icon" type="image/png" id="favicon" href="chrome://global/skin/icons/blacklist_favicon.png"/>
<script type="application/javascript"><![CDATA[
// Error url MUST be formatted like this:
// about:blocked?e=error_code&u=url(&o=1)?
// (o=1 when user overrides are allowed)
// Note that this file uses document.documentURI to get
@@ -160,78 +160,51 @@
}
}
// Inform the test harness that we're done loading the page
var event = new CustomEvent("AboutBlockedLoaded");
document.dispatchEvent(event);
}
]]></script>
- <style type="text/css">
- /* Style warning button to look like a small text link in the
- bottom right. This is preferable to just using a text link
- since there is already a mechanism in browser.js for trapping
- oncommand events from unprivileged chrome pages (BrowserOnCommand).*/
- #ignoreWarningButton {
- -moz-appearance: none;
- background: transparent;
- border: none;
- color: white; /* Hard coded because netError.css forces this page's background to dark red */
- text-decoration: underline;
- margin: 0;
- padding: 0;
- position: relative;
- top: 23px;
- left: 20px;
- font-size: smaller;
- }
-
- #ignoreWarningButton:-moz-dir(rtl) {
- left: auto;
- right: 20px;
- }
-
- #ignoreWarning {
- text-align: end;
- }
- </style>
</head>
<body dir="&locale.dir;">
- <div id="errorPageContainer">
-
+ <div id="errorPageContainer" class="container">
+
<!-- Error Title -->
- <div id="errorTitle">
- <h1 id="errorTitleText_phishing">&safeb.blocked.phishingPage.title2;</h1>
- <h1 id="errorTitleText_malware">&safeb.blocked.malwarePage.title;</h1>
- <h1 id="errorTitleText_unwanted">&safeb.blocked.unwantedPage.title;</h1>
+ <div id="errorTitle" class="title">
+ <h1 class="title-text" id="errorTitleText_phishing">&safeb.blocked.phishingPage.title2;</h1>
+ <h1 class="title-text" id="errorTitleText_malware">&safeb.blocked.malwarePage.title;</h1>
+ <h1 class="title-text" id="errorTitleText_unwanted">&safeb.blocked.unwantedPage.title;</h1>
<h1 id="errorTitleText_forbidden">&safeb.blocked.forbiddenPage.title2;</h1>
</div>
-
+
<div id="errorLongContent">
-
+
<!-- Short Description -->
<div id="errorShortDesc">
<p id="errorShortDescText_phishing">&safeb.blocked.phishingPage.shortDesc2;</p>
<p id="errorShortDescText_malware">&safeb.blocked.malwarePage.shortDesc;</p>
<p id="errorShortDescText_unwanted">&safeb.blocked.unwantedPage.shortDesc;</p>
<p id="errorShortDescText_forbidden">&safeb.blocked.forbiddenPage.shortDesc2;</p>
</div>
<!-- Long Description -->
<div id="errorLongDesc">
<p id="errorLongDescText_phishing">&safeb.blocked.phishingPage.longDesc2;</p>
<p id="errorLongDescText_malware">&safeb.blocked.malwarePage.longDesc;</p>
<p id="errorLongDescText_unwanted">&safeb.blocked.unwantedPage.longDesc;</p>
</div>
-
+
<!-- Action buttons -->
- <div id="buttons">
+ <div id="buttons" class="button-container">
<!-- Commands handled in browser.js -->
- <button id="getMeOutButton">&safeb.palm.accept.label;</button>
+ <button id="getMeOutButton" class="primary">&safeb.palm.accept.label;</button>
+ <div id="buttonSpacer" class="button-spacer"></div>
<button id="reportButton">&safeb.palm.reportPage.label;</button>
<button id="whyForbiddenButton">&safeb.palm.whyForbidden.label;</button>
</div>
</div>
<div id="ignoreWarning">
<button id="ignoreWarningButton">&safeb.palm.decline.label;</button>
</div>
</div>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/blockedSite.css
@@ -0,0 +1,147 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+@import url("chrome://global/skin/in-content/info-pages.css");
+
+body {
+ background-image: linear-gradient(-45deg, #9b2e2e, #9b2e2e 33%,
+ #a83232 33%, #a83232 66%,
+ #9b2e2e 66%, #9b2e2e);
+ background-size: 64px 32px;
+ background-repeat: repeat-x;
+ /* Top padding for when the window height is small.
+ Bottom padding to keep everything centered. */
+ padding: 75px 0;
+ background-color: #b14646;
+ color: white;
+}
+
+.title-text {
+ color: white;
+}
+
+.button-container {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+#buttonSpacer {
+ flex: 1;
+}
+
+#whyForbiddenButton,
+#reportButton {
+ background-color: transparent;
+ color: white;
+ border: 1px solid #9b2e2e;
+ margin-inline-end: 0;
+}
+
+#whyForbiddenButton:hover,
+#reportButton:hover {
+ background-color: #a83232;
+}
+
+#whyForbiddenButton:hover:active,
+#reportButton:hover:active {
+ background-color: #9b2e2e;
+}
+
+#getMeOutButton,
+#whyForbiddenButton,
+#reportButton {
+ margin-top: 1.2em;
+}
+
+/* Style warning button to look like a small text link in the
+ bottom right. This is preferable to just using a text link
+ since there is already a mechanism in browser.js for trapping
+ oncommand events from unprivileged chrome pages (BrowserOnCommand).*/
+#ignoreWarningButton {
+ -moz-appearance: none;
+ background: transparent;
+ border: none;
+ color: white;
+ text-decoration: underline;
+ margin: 4px 0 0 0;
+ padding: 0;
+ font-size: smaller;
+ min-width: 0;
+}
+
+#ignoreWarningButton:hover {
+ cursor: pointer;
+}
+
+#ignoreWarning {
+ margin-top: 1.2em;
+ text-align: end;
+}
+
+#errorTitle {
+ background-image: url("chrome://global/skin/icons/blocked.svg");
+}
+
+@media only screen and (max-width: 959px) {
+ body {
+ padding: 5em 3.2em;
+ }
+
+ button {
+ border: none;
+ padding: 1rem;
+ background-color: #e0e2e5;
+ font-weight: 300;
+ }
+
+ .title {
+ background-image: none !important;
+ -moz-padding-start: 0;
+ -moz-margin-start: 0;
+ }
+
+ .title > h1 {
+ padding-top: 0;
+ }
+}
+
+@media only screen and (max-width: 640px) {
+
+ body {
+ padding: 5em 1.33em 0;
+ justify-content: unset;
+ }
+
+ h1 {
+ font-size: 2.25em;
+ }
+
+ button {
+ /* Force buttons to display: block here to try and enfoce collapsing margins */
+ display: block;
+ width: 100%;
+ margin: 0.66em 0 0;
+ }
+
+ .advanced-button {
+ margin-top: 1.2em;
+ float: none !important;
+ }
+
+ .title > h1 {
+ padding-bottom: 0;
+ border-bottom: none;
+ }
+}
+
+/* For small window height, shift the stripes up by 10px.
+ * We could just change the background size, but that changes
+ * the angle of the stripes so just shifting up is easier. */
+@media (max-height: 480px) {
+ body {
+ background-position: 10px -10px;
+ padding-top: 38px;
+ padding-bottom: 38px;
+ }
+}
\ No newline at end of file
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -3,16 +3,17 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
# This is not a complete / proper jar manifest. It is included by the
# actual theme-specific manifests, so that shared resources need only
# be specified once. As a result, the source file paths are relative
# to the location of the actual manifest.
skin/classic/browser/aboutNetError.css (../shared/aboutNetError.css)
+ skin/classic/browser/blockedSite.css (../shared/blockedSite.css)
* skin/classic/browser/aboutProviderDirectory.css (../shared/aboutProviderDirectory.css)
* skin/classic/browser/aboutSessionRestore.css (../shared/aboutSessionRestore.css)
skin/classic/browser/aboutSocialError.css (../shared/aboutSocialError.css)
skin/classic/browser/aboutTabCrashed.css (../shared/aboutTabCrashed.css)
skin/classic/browser/aboutWelcomeBack.css (../shared/aboutWelcomeBack.css)
skin/classic/browser/addons/addon-install-blocked.svg (../shared/addons/addon-install-blocked.svg)
skin/classic/browser/addons/addon-install-confirm.svg (../shared/addons/addon-install-confirm.svg)
skin/classic/browser/addons/addon-install-downloading.svg (../shared/addons/addon-install-downloading.svg)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/incontent-icons/blocked.svg
@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 45 45">
+ <defs>
+ <circle id="stop-sign" cx="22.5" cy="22.5" r="20.5"/>
+ <mask id="stop-symbol">
+ <rect width="45" height="45" fill="#fff"/>
+ <line x1="10" y1="23" x2="35" y2="23" stroke="#000" stroke-width="6"/>
+ </mask>
+ </defs>
+ <use xlink:href="#stop-sign" mask="url(#stop-symbol)" fill="#fff"/>
+</svg>
\ No newline at end of file
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -20,16 +20,17 @@ toolkit.jar:
* skin/classic/global/aboutReaderControls.css (../../shared/aboutReaderControls.css)
skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css)
skin/classic/global/appPicker.css (../../shared/appPicker.css)
skin/classic/global/config.css (../../shared/config.css)
skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg)
skin/classic/global/icons/loading-inverted.png (../../shared/icons/loading-inverted.png)
skin/classic/global/icons/loading-inverted@2x.png (../../shared/icons/loading-inverted@2x.png)
skin/classic/global/icons/warning.svg (../../shared/incontent-icons/warning.svg)
+ skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg)
skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css)
skin/classic/global/narrate.css (../../shared/narrate.css)
skin/classic/global/narrateControls.css (../../shared/narrateControls.css)
skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg)
skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg)
skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg)
skin/classic/global/narrate/forward.svg (../../shared/narrate/forward.svg)
skin/classic/global/narrate/narrate.svg (../../shared/narrate/narrate.svg)
