diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index fecb719b6ca5..20a9a79c88bb 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -591,7 +591,9 @@ #ifdef XP_WIN - + + + #endif @@ -649,7 +651,7 @@ collapsed="true"> #if defined(MOZ_WIDGET_GTK) - #endif diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index bf4158082955..a81800358ca8 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -721,6 +721,12 @@ html|span.ac-emphasize-text-url { /* End customization mode */ + +#main-window[privatebrowsingmode=temporary] #private-browsing-indicator { + background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat; + width: 40px; +} + %include ../shared/UITour.inc.css #UITourHighlight { diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn index 9335a657a8bf..2adb9e9b52d0 100644 --- a/browser/themes/linux/jar.mn +++ b/browser/themes/linux/jar.mn @@ -22,6 +22,7 @@ browser.jar: * skin/classic/browser/pageInfo.css skin/classic/browser/pageInfo.png skin/classic/browser/page-livemarks.png + skin/classic/browser/privatebrowsing-mask.png skin/classic/browser/searchbar.css skin/classic/browser/setDesktopBackground.css skin/classic/browser/slowStartup-16.png diff --git a/browser/themes/linux/privatebrowsing-mask.png b/browser/themes/linux/privatebrowsing-mask.png new file mode 100644 index 000000000000..9eaf3aec7e71 Binary files /dev/null and b/browser/themes/linux/privatebrowsing-mask.png differ diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 1def9f66beb4..361bb9a588b2 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -53,11 +53,6 @@ /** Begin titlebar **/ -#titlebar-content { - /* Ensure the the content part of the titlebar does not shrink. */ - min-height: inherit; -} - #titlebar-buttonbox > .titlebar-button { display: none; } @@ -69,13 +64,10 @@ margin-left: 7px; } -.titlebar-placeholder[type="fullscreen-button"] { - margin-right: 4px; -} - +.titlebar-placeholder[type="fullscreen-button"], #titlebar-secondary-buttonbox { - align-items: center; - display: flex; + margin-right: 7px; + margin-left: 7px; } #main-window:not(:-moz-lwtheme) > #titlebar { @@ -1232,18 +1224,66 @@ html|*.addon-webext-perm-list { /* End customization mode */ -/* Private browsing indicator */ +.private-browsing-indicator { + background-image: url("chrome://browser/skin/privatebrowsing-mask.png"); + background-repeat: no-repeat; + background-size: 100% auto; + width: 38px; + height: 28px; + /** + * The private browsing mask graphic has a 3px flare at the top. The distance + * we want between the mask and items on either side is 7px, so we use 4px, + * since the other 3px is accounted for by the empty space on either side. + */ + margin-left: 4px; + margin-right: 4px; +} -:root[privatebrowsingmode=temporary][tabsintitlebar]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator, -:root[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator { +#titlebar-secondary-buttonbox > .private-browsing-indicator { + position: relative; +} + +#main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator { + background-image: url("chrome://browser/skin/privatebrowsing-mask-short.png"); + height: 20px; +} + +#main-window:not([privatebrowsingmode=temporary]) .private-browsing-indicator, +#main-window[privatebrowsingmode=temporary][inFullscreen] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator, +#main-window[privatebrowsingmode=temporary]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator { display: none; } -#TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl), - -moz-box-ordinal-group: 0; +@media (min-resolution: 2dppx) { + .private-browsing-indicator { + background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png"); + } + #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator { + background-image: url("chrome://browser/skin/privatebrowsing-mask-short@2x.png"); + } } -/* End private browsing indicator */ +#TabsToolbar > .private-browsing-indicator { + /* We offset by 38px for mask graphic, plus 4px to account for the + * margin-left, which sums to 42px. + */ + margin-right: -42px; +} + +#main-window[privatebrowsingmode=temporary] .titlebar-placeholder[type="fullscreen-button"], +#main-window[privatebrowsingmode=temporary] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button { + margin-left: 0px; +} + +#main-window[privatebrowsingmode=temporary][inFullscreen] .titlebar-placeholder[type="fullscreen-button"] { + /* Override display:none for .titlebar-placeholder in fullscreen so we can have consistent + position and padding for the private browsing indicator. */ + display: -moz-box; +} + +#TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl) { + -moz-box-ordinal-group: 0; +} %include ../shared/UITour.inc.css diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn index d728427e204a..a9118ce7c893 100644 --- a/browser/themes/osx/jar.mn +++ b/browser/themes/osx/jar.mn @@ -27,6 +27,10 @@ browser.jar: skin/classic/browser/page-livemarks.png skin/classic/browser/page-livemarks@2x.png skin/classic/browser/pageInfo.css + skin/classic/browser/privatebrowsing-mask.png + skin/classic/browser/privatebrowsing-mask@2x.png + skin/classic/browser/privatebrowsing-mask-short.png + skin/classic/browser/privatebrowsing-mask-short@2x.png skin/classic/browser/searchbar.css skin/classic/browser/slowStartup-16.png skin/classic/browser/toolbarbutton-dropmarker.png diff --git a/browser/themes/osx/privatebrowsing-mask-short.png b/browser/themes/osx/privatebrowsing-mask-short.png new file mode 100644 index 000000000000..92f60e29f9fd Binary files /dev/null and b/browser/themes/osx/privatebrowsing-mask-short.png differ diff --git a/browser/themes/osx/privatebrowsing-mask-short@2x.png b/browser/themes/osx/privatebrowsing-mask-short@2x.png new file mode 100644 index 000000000000..ec1cf7452ef6 Binary files /dev/null and b/browser/themes/osx/privatebrowsing-mask-short@2x.png differ diff --git a/browser/themes/osx/privatebrowsing-mask.png b/browser/themes/osx/privatebrowsing-mask.png new file mode 100644 index 000000000000..586d3d9f0a4b Binary files /dev/null and b/browser/themes/osx/privatebrowsing-mask.png differ diff --git a/browser/themes/osx/privatebrowsing-mask@2x.png b/browser/themes/osx/privatebrowsing-mask@2x.png new file mode 100644 index 000000000000..efb6d9b8070f Binary files /dev/null and b/browser/themes/osx/privatebrowsing-mask@2x.png differ diff --git a/browser/themes/shared/browser.inc.css b/browser/themes/shared/browser.inc.css index ca812f1eb5be..a92eedb53439 100644 --- a/browser/themes/shared/browser.inc.css +++ b/browser/themes/shared/browser.inc.css @@ -70,24 +70,3 @@ display: -moz-box; } -/* Private browsing indicator */ - -.private-browsing-indicator { - background-repeat: no-repeat; - background-size: 100% auto; - background-position: center; - width: 24px; - height: 24px; - margin-left: 8px; - margin-right: 8px; -} - -.private-browsing-indicator { - background-image: url("chrome://browser/skin/private-browsing.svg"); -} - -:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator { - display: none; -} - -/* End private browsing indicator */ diff --git a/browser/themes/shared/icons/private-browsing.svg b/browser/themes/shared/icons/private-browsing.svg deleted file mode 100644 index f01428c73c26..000000000000 --- a/browser/themes/shared/icons/private-browsing.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index 24e387754de2..5d34ab489e1a 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/browser/themes/shared/jar.inc.mn @@ -152,7 +152,6 @@ skin/classic/browser/open.svg (../shared/icons/open.svg) skin/classic/browser/page-action.svg (../shared/icons/page-action.svg) skin/classic/browser/print.svg (../shared/icons/print.svg) - skin/classic/browser/private-browsing.svg (../shared/icons/private-browsing.svg) skin/classic/browser/privateBrowsing.svg (../shared/icons/privateBrowsing.svg) skin/classic/browser/restore-session.svg (../shared/icons/restore-session.svg) skin/classic/browser/quit.svg (../shared/icons/quit.svg) diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index f0f2ed4ec200..710c00afc6e1 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -234,12 +234,6 @@ z-index: 1; } -#titlebar-buttonbox, -#titlebar-buttonbox-container { - display: flex; - align-items: center; -} - .titlebar-placeholder[type="caption-buttons"] { margin-left: 22px; /* space needed for Aero Snap */ } @@ -1087,22 +1081,89 @@ notification[value="translation"] { /* End customization mode */ -/* Private browsing indicator */ +/* Private browsing indicators */ -:root:-moz-any([tabsintitlebar], [inFullscreen]) .private-browsing-indicator { - margin-inline-end: 12px; -} - -.private-browsing-indicator, - margin-inline-start: 12px; -} - -:root[privatebrowsingmode=temporary][tabsintitlebar]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator, -:root[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator { +/** + * Currently, we have two places where we put private browsing indicators on + * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar. + * When tabsintitlebar is disabled, we draw the indicator at the end of the + * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we + * want the bottom border of the image to line up with the bottom of the window + * caption buttons. That's why there's so much special-casing going on in here. + */ +.private-browsing-indicator { display: none; + pointer-events: none; } -/* End private browsing indicator */ +#private-browsing-indicator-titlebar { + display: block; + position: absolute; +} + +#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator { + display: block; +} + +#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator { + display: -moz-box; +} + +#TabsToolbar > .private-browsing-indicator { + background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px; + margin-inline-start: 4px; + width: 48px; +} + +/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen + * mode, since the tabstrip "mimics" the titlebar in that case with its own + * min/max/close window buttons. + */ +#private-browsing-indicator-titlebar > .private-browsing-indicator, +#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator { + background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px; + margin-inline-end: 4px; + width: 40px; + height: 20px; + position: relative; +} + +@media (-moz-windows-classic) { + /** + * We have to use top instead of background-position in this case, otherwise + * the bottom of the indicator would get cut off by the bounds of the + * private-browsing-indicator element. + */ + #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator { + top: 4px; + } +} + +@media (-moz-os-version: windows-win7) { + @media (-moz-windows-glass) { + #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator { + top: 1px; + } + #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator { + top: -1px; + } + } + + /** + * This next block targets Aero Basic, which has different positioning for the + * window caption buttons, and therefore needs to be special-cased. + */ + @media (-moz-windows-default-theme) { + @media (-moz-windows-compositor: 0) { + #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator { + background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-win7-tall.png"); + height: 28px; + } + } + } +} + +/* End private browsing indicators */ %include ../shared/UITour.inc.css diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn index 514e27e41bf5..e907eebc40f3 100644 --- a/browser/themes/windows/jar.mn +++ b/browser/themes/windows/jar.mn @@ -23,6 +23,11 @@ browser.jar: skin/classic/browser/monitor_16-10.png skin/classic/browser/pageInfo.css skin/classic/browser/pageInfo.png + skin/classic/browser/privatebrowsing-mask-tabstrip.png + skin/classic/browser/privatebrowsing-mask-tabstrip-win7.png + skin/classic/browser/privatebrowsing-mask-titlebar.png + skin/classic/browser/privatebrowsing-mask-titlebar-win7.png + skin/classic/browser/privatebrowsing-mask-titlebar-win7-tall.png skin/classic/browser/searchbar.css skin/classic/browser/setDesktopBackground.css skin/classic/browser/slowStartup-16.png @@ -89,4 +94,6 @@ browser.jar: % override chrome://browser/skin/feeds/videoFeedIcon.png chrome://browser/skin/feeds/feedIcon.png % override chrome://browser/skin/feeds/videoFeedIcon16.png chrome://browser/skin/feeds/feedIcon16.png +% override chrome://browser/skin/privatebrowsing-mask-tabstrip.png chrome://browser/skin/privatebrowsing-mask-tabstrip-win7.png os=WINNT osversion<=6.1 +% override chrome://browser/skin/privatebrowsing-mask-titlebar.png chrome://browser/skin/privatebrowsing-mask-titlebar-win7.png os=WINNT osversion<=6.1 % override chrome://browser/skin/toolbarbutton-dropdown-arrow.png chrome://browser/skin/toolbarbutton-dropdown-arrow-win7.png os=WINNT osversion<=6.1 diff --git a/browser/themes/windows/privatebrowsing-mask-tabstrip-win7.png b/browser/themes/windows/privatebrowsing-mask-tabstrip-win7.png new file mode 100644 index 000000000000..bd5d46a76a8d Binary files /dev/null and b/browser/themes/windows/privatebrowsing-mask-tabstrip-win7.png differ diff --git a/browser/themes/windows/privatebrowsing-mask-tabstrip.png b/browser/themes/windows/privatebrowsing-mask-tabstrip.png new file mode 100644 index 000000000000..e2eba8b89e4f Binary files /dev/null and b/browser/themes/windows/privatebrowsing-mask-tabstrip.png differ diff --git a/browser/themes/windows/privatebrowsing-mask-titlebar-win7-tall.png b/browser/themes/windows/privatebrowsing-mask-titlebar-win7-tall.png new file mode 100644 index 000000000000..4a723c54e231 Binary files /dev/null and b/browser/themes/windows/privatebrowsing-mask-titlebar-win7-tall.png differ diff --git a/browser/themes/windows/privatebrowsing-mask-titlebar-win7.png b/browser/themes/windows/privatebrowsing-mask-titlebar-win7.png new file mode 100644 index 000000000000..835912b534b2 Binary files /dev/null and b/browser/themes/windows/privatebrowsing-mask-titlebar-win7.png differ diff --git a/browser/themes/windows/privatebrowsing-mask-titlebar.png b/browser/themes/windows/privatebrowsing-mask-titlebar.png new file mode 100644 index 000000000000..111dc7d04167 Binary files /dev/null and b/browser/themes/windows/privatebrowsing-mask-titlebar.png differ