From b4888bae6fbc1a4e61b478a329f0dca352d0e5a7 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 12 Jun 2016 22:05:01 +0200 Subject: [PATCH] make new net/cert error pages work, remove pocket styling and let system add-on do it, make entries in bookmarks menu and in bookmarks/history/sync-tabs panel subviews looks decently and not have varying icon sizes --- LCARStrek/browser/aboutNetError.css | 193 ++++++------------ LCARStrek/browser/browser.css | 37 +--- .../browser/customizableui/panelUIOverlay.css | 24 +-- LCARStrek/browser/error-pages.css | 76 +++++++ LCARStrek/global/aboutReaderControls.css | 8 - .../icons/info.svg} | 0 LCARStrek/global/in-content/info-pages.css | 20 +- LCARStrek/global/menu.css | 7 +- LCARStrek/global/reader/pocket.svg | 22 -- 9 files changed, 167 insertions(+), 220 deletions(-) create mode 100644 LCARStrek/browser/error-pages.css rename LCARStrek/{browser/aboutNetError_info.svg => global/icons/info.svg} (100%) delete mode 100644 LCARStrek/global/reader/pocket.svg diff --git a/LCARStrek/browser/aboutNetError.css b/LCARStrek/browser/aboutNetError.css index 6f94c658..f031acaf 100644 --- a/LCARStrek/browser/aboutNetError.css +++ b/LCARStrek/browser/aboutNetError.css @@ -2,78 +2,28 @@ * 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/common.css"); +@import url("chrome://browser/skin/error-pages.css"); body { - display: flex; - box-sizing: border-box; - min-height: 100vh; - padding: 0 48px; - align-items: center; - justify-content: center; -} - -ul, ol { - margin: 0; - padding: 0; - -moz-margin-start: 1em; -} - -ul > li, ol > li { - margin-bottom: .5em; -} - -ul { - list-style: disc; + background-image: linear-gradient(-45deg, #A09090, #A09090 33%, + #000000 33%, #000000 66%, + #A09090 66%, #A09090); } -#errorPageContainer { - position: relative; - min-width: 320px; - max-width: 512px; +body.certerror { + background-image: linear-gradient(-45deg, #FFCF00, #FFCF00 33%, + #000000 33%, #000000 66%, + #FFCF00 66%, #FFCF00); } -#errorTitle { - background: url("aboutNetError_info.svg") left 0 no-repeat; - background-size: 3em; - -moz-margin-start: -5em; - -moz-padding-start: 5em; -} - -#errorTitleText { - border-bottom: 1px solid #A09090; - padding-bottom: 0.4em; -} - -#errorTitleText:-moz-dir(rtl) { - background-position: right 0; -} - -#errorTitle[sslv3=true], -#errorTitle[weakCrypto=true] { +body.certerror .title { background-image: url("cert-error.svg"); } -#errorTryAgain { - margin-top: 1.2em; - min-width: 150px -} - #errorContainer { display: none; } -@media (max-width: 675px) { - #errorTitle, - #errorTitle[sslv3=true], - #errorTitle[weakCrypto=true] { - padding-top: 0; - background-image: none; - -moz-padding-start: 0; - -moz-margin-start: 0; - } -} - /* Pressing the retry button will cause the cursor to flicker from a pointer to * not-allowed. Override the disabled cursor behaviour since we will never show * the button disabled as the initial state. */ @@ -81,110 +31,75 @@ button:disabled { cursor: pointer; } -#learnMoreContainer { +#prefChangeContainer { display: none; } -#buttonContainer { +#learnMoreContainer { display: none; - flex-flow: row wrap; } -#buttonSpacer { - flex: 1; -} - -#returnButton { - background-color: var(--in-content-primary-button-background); - border: none; - color: var(--in-content-selected-text); - min-width: 250px; - margin-inline-start: 0; +#certErrorButtonContainer { + display: none; } -#returnButton:hover { - background-color: var(--in-content-primary-button-background-hover) !important; +body.certerror #certErrorButtonContainer { + display: flex; } -#returnButton:hover:active { - background-color: var(--in-content-primary-button-background-active) !important; +body.certerror #netErrorButtonContainer { + display: none; } -#advancedButton { - display: none; +#errorTryAgain { + margin-top: 1.2em; min-width: 150px; } -#certificateErrorReporting, -#reportCertificateError, -#reportSentMessage { - display: none; +#returnButton { + min-width: 250px; } -div#weakCryptoAdvanced, -div#certificateErrorReporting { +#advancedButton { display: none; - float: right; - /* Align with the "Try Again" button */ - margin-top: 19px; - -moz-margin-end: 0; } -div#certificateErrorReporting a, -div#certificateErrorReportingPanel a { - background-color: #C09070; - color: #000000; - border-radius: 300px; - padding: 1px 6px; +body.certerror #advancedButton { + display: block; } -div#certificateErrorReporting a { +#certificateErrorReporting { + display: none; } -div#certificateErrorReporting a:hover { - text-decoration: none; - background-color: #FFCF00; +.container { + position: relative; } -span.downArrow { - display: inline-block; - vertical-align: middle; - font-size: 0.6em; - -moz-margin-start: 0.5em; - transform: scaleY(0.7); +#advancedPanelContainer { + position: absolute; + padding: 24px 0; } -div#weakCryptoAdvancedPanel, -div#certificateErrorReportingPanel { +.advanced-panel { /* Hidden until the link is clicked */ display: none; - background-color: #000000; - border: 1px #A09090 solid; + background-color: var(--in-content-box-background); + border: 1px var(--in-content-box-border-color) solid; /* Don't use top padding because the default p style has top padding, and it * makes the overall div look uneven */ padding: 0 12px 12px 12px; font-size: 0.9em; - position: absolute; - width: 75%; - margin-top: 10px; -} - -div#certificateErrorReportingPanel:-moz-dir(ltr) { - left: 34%; -} - -div#certificateErrorReportingPanel:-moz-dir(rtl) { - right: 0; } -#overrideWeakCryptoPanel, -#errorStatePanel { - display: flex; +#overrideWeakCryptoPanel { + display: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: space-between; align-items: flex-start; + margin-top: 1em; } span#hostname { @@ -195,18 +110,38 @@ span#hostname { cursor: pointer; } -#errorCode { +#errorCode:not([href]) { color: var(--in-content-page-color); cursor: text; text-decoration: none; } -#reportSendingMessage { - /* adjust the line-height to match the link */ - line-height: 22px; +#errorCode[href] { + white-space: nowrap; +} + +#badCertTechnicalInfo { + overflow: auto; + white-space: pre-wrap; +} + +#certificateErrorReporting { + display: none; +} + +#certificateErrorDebugInformation { + display: none; + background-color: var(--in-content-box-background) !important; + border-top: 1px solid var(--in-content-border-color); + position: absolute; + left: 0%; + top: 100%; + width: 65%; + padding: 1em 17.5%; } -#reportSentMessage { - /* adjust the line-height to match the link */ - line-height: 22px; +#certificateErrorText { + font-family: monospace; + white-space: pre-wrap; + padding: 1em 0; } diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 634ee1ca..a987a6c3 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -512,15 +512,10 @@ menuitem.bookmark-item { #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, - #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button, - #pocket-button), + #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button), #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/ToolbarFx.png"); } -toolbar[brighttext] #pocket-button, -#pocket-button { - list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */ -} #back-button { -moz-image-region: rect(0, 36px, 18px, 18px); @@ -956,15 +951,6 @@ toolbar[brighttext] #pocket-button, -moz-image-region: rect(18px, 738px, 36px, 720px); } -#pocket-button[cui-areatype="toolbar"] { - -moz-image-region: rect(0, 774px, 18px, 756px); -} - -#pocket-button[cui-areatype="toolbar"]:hover, -#pocket-button[cui-areatype="toolbar"][open] { - -moz-image-region: rect(18px, 774px, 36px, 756px); -} - /* === END toolbarbuttons.inc.css === */ /* === BEGIN menupanel.inc.css === */ @@ -984,16 +970,14 @@ toolbaritem[sdkstylewidget="true"] > toolbarbutton, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, - #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button, - #pocket-button)[cui-areatype="menu-panel"], + #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button)[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, - #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button, - #pocket-button) { + #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button) { list-style-image: var(--menupanel-list-style-image); } @@ -1290,15 +1274,6 @@ toolbarpaletteitem[place="palette"] > #webide-button:hover { -moz-image-region: rect(32px, 960px, 64px, 928px); } -#pocket-button[cui-areatype="menu-panel"], -toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 992px, 32px, 960px); -} - -#pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 992px, 64px, 960px); -} - toolbaritem[sdkstylewidget="true"] > toolbarbutton { -moz-image-region: rect(0, 832px, 32px, 800px); } @@ -3852,12 +3827,6 @@ notification[value="loop-sharing-notification"] .messageImage { -moz-image-region: auto; } -#panelMenu_pocket, -#menu_pocket, -#BMB_pocket { - list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); -} - /* ::::: Keyboard UI Panel ::::: */ .KUI-panel { diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index da83607c..265adf84 100644 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ b/LCARStrek/browser/customizableui/panelUIOverlay.css @@ -234,11 +234,6 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan max-width: 30em; } -/* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */ -panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) { - max-width: 33em; /* standaloneSubviewWidth + 3 */ -} - panelview:not([mainview]) .toolbarbutton-text, .cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; @@ -249,11 +244,6 @@ panelview:not([mainview]) .toolbarbutton-text, padding: 0; } -.cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent { - padding-top: 0; - padding-bottom: 0; -} - .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { padding-bottom: 0; } @@ -1272,9 +1262,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { #customizationui-widget-multiview > .panel-viewcontainer, #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack, #PanelUI-panicView > .panel-subview-body, -#PanelUI-panicView, -#PanelUI-pocketView > .panel-subview-body, -#PanelUI-pocketView { +#PanelUI-panicView { overflow: visible; color: #FF9F00; } @@ -1478,6 +1466,12 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { margin-bottom: 2px;*/ } +.subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon { + /* This catches bookmarks, history items, and sync tabs items */ + width: 16px; + height: 16px; +} + /* Disabled empty item looks too small otherwise, because it has no icon. */ menuitem.subviewbutton[disabled]:not(.menuitem-iconic), /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */ @@ -1513,11 +1507,11 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) { } .subviewbutton > .toolbarbutton-text { - -moz-padding-start: 16px; + padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */ } .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text { - -moz-padding-start: 0; + padding-inline-start: 2px; } /* subviewbutton entries for social sidebars have images that come from external diff --git a/LCARStrek/browser/error-pages.css b/LCARStrek/browser/error-pages.css new file mode 100644 index 00000000..4df4ed91 --- /dev/null +++ b/LCARStrek/browser/error-pages.css @@ -0,0 +1,76 @@ +/* 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-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; +} + +.button-container { + display: flex; + flex-flow: row wrap; +} + +.button-spacer { + flex: 1; +} + +@media only screen and (max-width: 959px) { + body { + padding: 75px 48px; + } + + .title { + background-image: none !important; + padding-inline-start: 0; + margin-inline-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +@media only screen and (max-width: 640px) { + body { + justify-content: unset; + /* Now that everything is top-aligned, we don't need the + * bottom padding for centering - though it's added back + * when the viewport height is < 480px (see below). */ + padding: 75px 20px 0; + } + + .title-text { + padding-bottom: 0; + border-bottom: none; + } +} + +@media only screen and (max-width: 480px) { + .button-container button { + /* Force buttons to display: block here to try and enforce collapsing margins */ + display: block; + width: 100%; + margin: 0.66em 0 0; + } +} + +/* 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 only screen and (max-height: 480px) { + body { + background-position: 10px -10px; + padding-top: 38px; + /* We get rid of bottom padding for width < 640px, but + * for height < 480px a bit of space between the content + * and the viewport edge is nice. */ + padding-bottom: 38px; + } +} diff --git a/LCARStrek/global/aboutReaderControls.css b/LCARStrek/global/aboutReaderControls.css index 005a3b9b..6a181143 100644 --- a/LCARStrek/global/aboutReaderControls.css +++ b/LCARStrek/global/aboutReaderControls.css @@ -379,14 +379,6 @@ background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); } -#pocket-button { - background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark"); -} - -#pocket-button:hover:active { - background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added"); -} - @media print { .toolbar { display: none !important; diff --git a/LCARStrek/browser/aboutNetError_info.svg b/LCARStrek/global/icons/info.svg similarity index 100% rename from LCARStrek/browser/aboutNetError_info.svg rename to LCARStrek/global/icons/info.svg diff --git a/LCARStrek/global/in-content/info-pages.css b/LCARStrek/global/in-content/info-pages.css index 902b1f87..ae8ae7fa 100644 --- a/LCARStrek/global/in-content/info-pages.css +++ b/LCARStrek/global/in-content/info-pages.css @@ -11,8 +11,8 @@ body { min-height: 100vh; padding-top: 0; padding-bottom: 0; - -moz-padding-start: calc(48px + 4.6em); - -moz-padding-end: 48px; + padding-inline-start: calc(48px + 4.6em); + padding-inline-end: 48px; align-items: center; justify-content: center; } @@ -31,16 +31,16 @@ body { /* Typography */ .title { - background-image: url("chrome://browser/skin/aboutNetError_info.svg"); + background-image: url("chrome://global/skin/icons/info.svg"); background-position: left 0; background-repeat: no-repeat; background-size: 1.6em; - -moz-margin-start: -2.3em; - -moz-padding-start: 2.3em; + margin-inline-start: -2.3em; + padding-inline-start: 2.3em; font-size: 2.5em; } -.title:-moz-dir(rtl) { +.title:dir(rtl) { background-position: right 0; } @@ -57,8 +57,8 @@ body { .title { background-image: none !important; - -moz-padding-start: 0; - -moz-margin-start: 0; + padding-inline-start: 0; + margin-inline-start: 0; } .title-text { @@ -69,7 +69,7 @@ body { ul, ol { margin: 0; padding: 0; - -moz-margin-start: 1em; + margin-inline-start: 1em; } ul > li, ol > li { @@ -90,7 +90,7 @@ ul { } .button-container > button:first-child { - -moz-margin-start: 0; + margin-inline-start: 0; } /* Trees */ diff --git a/LCARStrek/global/menu.css b/LCARStrek/global/menu.css index 269d8d60..698ee02c 100644 --- a/LCARStrek/global/menu.css +++ b/LCARStrek/global/menu.css @@ -136,10 +136,8 @@ menucaption > .menu-iconic-text { } .menu-iconic-icon { -/* width: 16px; height: 16px; -*/ } .menu-iconic-left { @@ -209,6 +207,11 @@ menuitem[checked="true"][disabled="true"] { list-style-image: url("chrome://global/skin/menu/menu-check-disabled.gif"); } +menuitem[checked="true"] .menu-iconic-icon { + width: auto; + height: auto; +} + /* ::::: radio menuitem ::::: */ menuitem[checked="true"][type="radio"] { diff --git a/LCARStrek/global/reader/pocket.svg b/LCARStrek/global/reader/pocket.svg deleted file mode 100644 index d93fd6a1..00000000 --- a/LCARStrek/global/reader/pocket.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - -- 2.35.3