Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-11 04:15:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1244481 - ensure Synced Tabs sidebar and its twisties work with rtl layouts. r=Gijs

Browse Source
This commit is contained in:
Mark Hammond 2016-02-18 18:16:11 +11:00
parent a9c4e505e2
commit af962a11c4
11 changed files with 62 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
browser/components/syncedtabs/sidebar.xhtml
View File

@ -7,10 +7,12 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [
<!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
%browserDTD;
<!ENTITY % globalDTD
SYSTEM "chrome://global/locale/global.dtd">
%globalDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xml:lang="en" lang="en">
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
<script src="chrome://browser/content/syncedtabs/sidebar.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>
@ -21,7 +23,7 @@
<title>&syncedTabs.sidebar.label;</title>
</head>
<body role="application">
<body dir="&locale.dir;" role="application">
<template id="client-template">
<div class="item client" role="option" tabindex="-1">
<div class="item-title-container">

9
browser/themes/linux/syncedtabs/sidebar.css
View File

@ -56,3 +56,12 @@ html {
.textbox-search-clear:not([disabled]) {
cursor: pointer;
}
.item.client .item-twisty-container {
-moz-appearance: treetwistyopen;
margin-top: 3px;
}
.item.client.closed .item-twisty-container {
-moz-appearance: treetwisty;
}

2
browser/themes/osx/jar.mn
View File

@ -9,8 +9,6 @@ browser.jar:
skin/classic/browser/aboutSessionRestore-window-icon.png
skin/classic/browser/aboutSyncTabs.css
* skin/classic/browser/syncedtabs/sidebar.css (syncedtabs/sidebar.css)
skin/classic/browser/syncedtabs/arrow-open.svg (syncedtabs/arrow-open.svg)
skin/classic/browser/syncedtabs/arrow-closed.svg (syncedtabs/arrow-closed.svg)
skin/classic/browser/actionicon-tab.png
skin/classic/browser/actionicon-tab@2x.png
* skin/classic/browser/browser.css

7
browser/themes/osx/syncedtabs/arrow-closed.svg
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18">
<path id="arrow" d="M14.999,9.006 L-0.001,17.998 L-0.001,0.013 L14.999,9.006 z" fill="#8C8C8C" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 472 B

7
browser/themes/osx/syncedtabs/arrow-open.svg
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15">
<path id="arrow-down" d="M8.994,14.999 L0.002,-0.001 L17.987,-0.001 L8.994,14.999 z" fill="#8C8C8C" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 477 B

16
browser/themes/osx/syncedtabs/sidebar.css
View File

@ -26,14 +26,22 @@ html {
background: linear-gradient(to bottom, rgba(95,144,209,1) 0%, rgba(39,90,173,1) 100%);
}
/* Using '-moz-appearance: twistytree[open];' seems to force the twisty to
be 20px high and max-height etc doesn't adjust it. So we set the max-height
on the container and a negative margin-top on the twisty itself to keep things
aligned.
*/
.item-title-container {
max-height: 16px;
}
.item.client .item-twisty-container {
background-image: url(arrow-open.svg);
background-size: 9px 8px;
margin-top: -2px;
-moz-appearance: treetwistyopen;
}
.item.client.closed .item-twisty-container {
background-image: url(arrow-closed.svg);
background-size: 7px 9px;
-moz-appearance: treetwisty;
}
.sidebar-search-container {

2
browser/themes/shared/jar.inc.mn
View File

@ -83,8 +83,6 @@
skin/classic/browser/fxa/android@2x.png (../shared/fxa/android@2x.png)
skin/classic/browser/fxa/ios.png (../shared/fxa/ios.png)
skin/classic/browser/fxa/ios@2x.png (../shared/fxa/ios@2x.png)
skin/classic/browser/syncedtabs/twisty-closed.svg (../shared/syncedtabs/twisty-closed.svg)
skin/classic/browser/syncedtabs/twisty-open.svg (../shared/syncedtabs/twisty-open.svg)
skin/classic/browser/search-pref.png (../shared/search/search-pref.png)
skin/classic/browser/search-indicator.png (../shared/search/search-indicator.png)
skin/classic/browser/search-indicator@2x.png (../shared/search/search-indicator@2x.png)

24
browser/themes/shared/syncedtabs/sidebar.inc.css
View File

@ -74,27 +74,13 @@ body {
min-height: 16px;
max-height: 16px;
margin-right: 5px;
margin-left: 5px;
background-size: 16px 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.item-twisty-container {
min-width: 16px;
max-width: 16px;
min-height: 16px;
max-height: 16px;
margin-right: 5px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.item-icon-container {
margin-left: 5px;
}
.item-title-container {
display: flex;
flex-flow: row;
@ -177,14 +163,6 @@ body {
opacity: 100;
}
.item.client .item-twisty-container {
background-image: url(twisty-open.svg);
}
.item.client.closed .item-twisty-container {
background-image: url(twisty-closed.svg);
}
.textbox-search-clear:not([disabled]) {
cursor: default;
}

59
browser/themes/shared/syncedtabs/twisty-closed.svg
View File

@ -1,59 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 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:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="11"
height="11">
<defs>
<linearGradient
id="linearGradient3792">
<stop
style="stop-color:#c3baaa;stop-opacity:1"
offset="0" />
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="6.0530181"
y1="7.092885"
x2="2.8882971"
y2="1.7999334"
xlink:href="#linearGradient3792"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0256411,0,0,1.0256411,-0.11538478,1.8846152)" />
<linearGradient
x1="6.0530181"
y1="7.092885"
x2="2.8882971"
y2="1.7999334"
xlink:href="#linearGradient3792"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0256411,0,0,1.0256411,-0.11538478,1.8846152)" />
<linearGradient
x1="6.0530181"
y1="7.092885"
x2="2.8882971"
y2="1.7999334"
id="linearGradient2996"
xlink:href="#linearGradient3792"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0256411,0,0,1.0256411,0.88461522,0.8846152)" />
</defs>
<rect
width="8"
height="8"
rx="1"
ry="1"
x="1.5"
y="1.5"
style="fill:url(#linearGradient2996);fill-opacity:1;stroke:#7898b5;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="M 5,3 5,5 3,5 3,6 5,6 5,8 6,8 6,6 8,6 8,5 6,5 6,3 5,3 z"
style="fill:#000000;fill-opacity:1;stroke:none" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

62
browser/themes/shared/syncedtabs/twisty-open.svg
View File

@ -1,62 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 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:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="11"
height="11">
<defs>
<linearGradient
id="linearGradient3792">
<stop
style="stop-color:#c3baaa;stop-opacity:1"
offset="0" />
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="6.0530181"
y1="7.092885"
x2="2.8882971"
y2="1.7999334"
xlink:href="#linearGradient3792"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0256411,0,0,1.0256411,-0.11538478,1.8846152)" />
<linearGradient
x1="6.0530181"
y1="7.092885"
x2="2.8882971"
y2="1.7999334"
xlink:href="#linearGradient3792"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0256411,0,0,1.0256411,-0.11538478,1.8846152)" />
<linearGradient
x1="6.0530181"
y1="7.092885"
x2="2.8882971"
y2="1.7999334"
id="linearGradient2996"
xlink:href="#linearGradient3792"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0256411,0,0,1.0256411,0.88461522,0.8846152)" />
</defs>
<rect
width="8"
height="8"
rx="1"
ry="1"
x="1.5"
y="1.5"
style="fill:url(#linearGradient2996);fill-opacity:1;stroke:#7898b5;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<rect
width="5"
height="1"
x="3"
y="5"
style="fill:#000000;fill-opacity:1;stroke:none" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

41
browser/themes/windows/syncedtabs/sidebar.css
View File

@ -91,13 +91,42 @@ html {
}
.item-twisty-container {
min-width: 12px;
max-width: 12px;
min-height: 12px;
max-height: 12px;
margin: 0 1px;
background-size: 16px 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding-top: 5px;
width: 9px; /* The image's width is 9 pixels */
height: 9px;
}
.item.client .item-twisty-container {
background-image: url("chrome://global/skin/tree/twisty.svg#open");
}
.item.client.closed .item-twisty-container {
background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
}
.item.client .item-twisty-container:hover {
background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
}
.item.client.closed .item-twisty-container:hover {
background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
}
.item.client .item-twisty-container:-moz-dir(rtl) {
background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
}
.item.client.closed .item-twisty-container:-moz-dir(rtl) {
background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
}
.item.client .item-twisty-container:hover:-moz-dir(rtl) {
background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
}
.item.client.closed .item-twisty-container:hover:-moz-dir(rtl) {
background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");
}