Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Panel Bug Fixes #28

Merged
merged 6 commits into from Apr 9, 2018
+112 −110
Merged

Panel Bug Fixes #28

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9697aae
Panel Fixes: Fix CSS SVG encoding for FF
IAmThePan Apr 6, 2018
58e8816
Panel Fixes: HTML encode inline SVGs
IAmThePan Apr 6, 2018
bf28571
Panel Fixes: Edge bug fixes (GH-911)
IAmThePan Apr 6, 2018
08fc2da
GH-867 Alternate Summary View AB Test
IAmThePan Apr 9, 2018
0266a29
Fix overflow scroll issue
IAmThePan Apr 9, 2018
d30db63
Toggle Summary AB test off
IAmThePan Apr 9, 2018
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next

Panel Fixes: Fix CSS SVG encoding for FF

  • Loading branch information
@IAmThePan
IAmThePan committed Apr 6, 2018
commit 9697aae200e57e4d3c862413d5caeea836711b99
14 app/images/panel/right-left-moon.svg
View file
Open in desktop
@@ -1,13 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="52px" viewBox="0 0 24 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
<title>right-left-moon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="right-left-moon" transform="translate(12.000000, 26.000000) scale(-1, 1) translate(-12.000000, -26.000000) " fill-rule="nonzero">
<path d="M24,51.8484415 C10.5751046,50.8271917 0,39.6106802 0,25.9242207 C0,12.2377612 10.5751046,1.02124974 24,2.14481211e-13 L24,51.8484415 Z" id="Combined-Shape" fill="#EBEBEB"></path>
<polygon id="Shape" fill="#4A4A4A" transform="translate(13.500000, 25.500000) scale(-1, 1) rotate(-180.000000) translate(-13.500000, -25.500000) " points="10 21.2833333 11.3243243 20 17 25.5 11.3243243 31 10 29.7166667 14.3513514 25.5"></polygon>
</g>
</g>
</svg>
<svg width="24" height="52" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M0 51.848c13.425-1.02 24-12.237 24-25.924C24 12.238 13.425 1.021 0 0v51.848z" fill="#EBEBEB"/><path fill="#4A4A4A" d="M14 29.717L12.676 31 7 25.5l5.676-5.5L14 21.283 9.649 25.5z"/></g></svg>
14 app/images/panel/right-right-moon.svg
View file
Open in desktop
@@ -1,13 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="52px" viewBox="0 0 24 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
<title>right-right-moon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="right-right-moon" transform="translate(12.000000, 26.000000) scale(-1, 1) translate(-12.000000, -26.000000) " fill-rule="nonzero">
<path d="M24,51.8484415 C10.5751046,50.8271917 0,39.6106802 0,25.9242207 C0,12.2377612 10.5751046,1.02124974 24,2.14481211e-13 L24,51.8484415 Z" id="Combined-Shape" fill="#EBEBEB"></path>
<polygon id="Shape" fill="#4A4A4A" transform="translate(13.500000, 25.500000) rotate(180.000000) translate(-13.500000, -25.500000) " points="10 21.2833333 11.3243243 20 17 25.5 11.3243243 31 10 29.7166667 14.3513514 25.5"></polygon>
</g>
</g>
</svg>
<svg width="24" height="52" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M0 51.848c13.425-1.02 24-12.237 24-25.924C24 12.238 13.425 1.021 0 0v51.848z" fill="#EBEBEB"/><path fill="#4A4A4A" d="M7 29.717L8.324 31 14 25.5 8.324 20 7 21.283l4.351 4.217z"/></g></svg>
5 app/scss/panel.scss
View file
Open in desktop
@@ -26,6 +26,11 @@ html body {
}
*:focus {outline: none;}

// Function helper with color variables
@function url-friendly-colour($colour) {
@return '%23' + str-slice('#{$colour}', 2, -1)
}

// Foundation Helpers
.collapse-left {padding-left: 0;}
.collapse-right {padding-right: 0;}
10 app/scss/partials/_cliqz_features.scss
View file
Open in desktop
@@ -12,19 +12,19 @@
*/

@function buildIconAntiTracking($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http%3A//www.w3.org/2000/svg"><g><circle stroke="#{$stroke-color}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path stroke="#{$stroke-color}" stroke-width="2" fill="none" d="M25.2126964,15.0320852 C25.0849696,14.9893049 24.9150304,14.9893049 24.7873036,15.0320852 L15.6383616,17.4588294 C15.2554536,17.5438445 15,17.8844498 15,18.2675625 C15.0427571,24.7818425 18.5319589,30.8274493 24.53185,34.8722049 C24.6595767,34.95722 24.8297884,35 25,35 C25.1702116,35 25.3404233,34.95722 25.46815,34.8722049 C31.4680411,30.8274493 34.9572429,24.7818425 35,18.2675625 C35,17.8844498 34.7445464,17.5438445 34.3616384,17.4588294 L25.2126964,15.0320852 Z"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><g stroke="#{url-friendly-colour($stroke-color)}" stroke-width="2" fill="none"><circle cx="25" cy="25" r="23"/><path d="M25.213 15.032a.721.721 0 0 0-.426 0l-9.149 2.427a.82.82 0 0 0-.638.809c.043 6.514 3.532 12.56 9.532 16.604A.859.859 0 0 0 25 35c.17 0 .34-.043.468-.128 6-4.045 9.49-10.09 9.532-16.604a.82.82 0 0 0-.638-.81l-9.15-2.426z"/></g></svg>');
}

@function buildIconAdBlocking($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http%3A//www.w3.org/2000/svg"><g><circle stroke="#{$stroke-color}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path stroke="#{$stroke-color}" stroke-width="2" fill="none" fill-rule="nonzero" transform="translate(14,14)" d="M14.873 1.312l-7.973.07-5.588 5.686.07 7.973 5.686 5.589 7.973-.07 5.589-5.687-.07-7.973-5.687-5.588z"/><path stroke="#{$stroke-color}" stroke-width="2" d="M31.5,18.5 L18.5,31.5"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><g><circle stroke="#{url-friendly-colour($stroke-color)}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path stroke="#{url-friendly-colour($stroke-color)}" stroke-width="2" fill="none" fill-rule="nonzero" transform="translate(14,14)" d="M14.873 1.312l-7.973.07-5.588 5.686.07 7.973 5.686 5.589 7.973-.07 5.589-5.687-.07-7.973-5.687-5.588z"/><path stroke="#{url-friendly-colour($stroke-color)}" stroke-width="2" d="M31.5,18.5 L18.5,31.5"/></g></svg>');
}

@function buildIconSmartBlocking($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http%3A//www.w3.org/2000/svg"><g><circle stroke="#{$stroke-color}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path fill="#{$stroke-color}" d="M31.9766215,20.2390509 C31.8801207,21.9165559 31.2802076,23.3962344 30.3232416,24.7536786 C29.8922048,25.3648501 29.456343,25.9711966 29.038173,26.5936266 C28.4414766,27.4814337 27.9637978,28.4255329 27.7804463,29.4918664 C27.7498877,29.6671761 27.6389118,29.6543094 27.5166775,29.6543094 C26.6755125,29.652701 25.8343474,29.652701 24.991574,29.652701 C24.1600591,29.652701 23.3285441,29.647876 22.4954208,29.6559177 C22.3136776,29.6575261 22.2493438,29.606059 22.2123518,29.4178825 C22.0145253,28.3869326 21.5545383,27.4637419 20.9707086,26.60006 C20.4737296,25.8666541 19.9558422,25.146115 19.4572548,24.4127092 C18.5501476,23.0826069 18.0756855,21.6109701 18.0113516,20.0010156 C17.8987674,17.1815848 19.4974635,14.7224235 22.1962684,13.5804977 C25.6542127,12.118511 29.7426286,13.5853227 31.3622332,16.8743907 C31.8833374,17.9358991 32.044172,19.0633498 31.9766215,20.2390509 Z M22.352278,32.3000388 L22.352278,31.6695671 L27.6566037,31.6695671 L27.6566037,32.3000388 L22.352278,32.3000388 Z M27.1113743,34.9811519 L22.895899,34.9811519 C22.3876616,34.9811519 22.2943775,34.8733927 22.3603197,34.3281634 L27.6405202,34.3281634 C27.7145041,34.865351 27.6180033,34.9811519 27.1113743,34.9811519 Z M33.3501491,16.4047536 C31.9010292,13.2363116 29.3839675,11.4767809 25.9646235,11.0698693 C23.0519085,10.7224665 20.5187633,11.6794325 18.4536468,13.7429406 C16.1488868,16.0493091 15.5956157,18.8671316 16.2646877,21.9841065 C16.6153071,23.6133611 17.4130468,25.0303141 18.3684045,26.3732832 C18.8058746,26.9908881 19.2369114,27.6165348 19.638998,28.2566565 C20.0105259,28.8501363 20.2742947,29.4982998 20.3000282,30.2027554 C20.3305868,31.0165786 20.30807,31.8304018 20.30807,32.6442249 L20.3402369,32.6442249 C20.3402369,33.3197303 20.3386285,33.9952357 20.3418452,34.6707411 C20.3482786,35.8753924 21.2939862,36.8918672 22.4922041,36.9706761 C22.649822,36.9819346 22.7028974,37.0269683 22.7414977,37.1845862 C22.9972248,38.242878 23.9268489,38.9746755 24.991574,38.9762838 C26.0772077,38.9778922 27.0003984,38.2541364 27.2657755,37.1781528 C27.2995508,37.0382267 27.3381511,36.9835429 27.490944,36.9722845 C28.7325872,36.8790004 29.6622113,35.8753924 29.665428,34.6353575 C29.665428,33.3776308 29.6750781,32.1199041 29.6622113,30.860569 C29.6509529,29.9196865 29.869688,29.0447462 30.3682753,28.2502232 C30.7703619,27.6101014 31.1997903,26.9828464 31.6420855,26.3700665 C32.9046372,24.6137525 33.7972694,22.7175123 33.9645374,20.5269448 C34.0739049,19.1035585 33.9468456,17.7107307 33.3501491,16.4047536 Z"/><path stroke="#{$stroke-color}" stroke-width="1.5" fill="none" d="M25.0957134,18.2144383 C25.0382363,18.1951872 24.9617637,18.1951872 24.9042866,18.2144383 L20.7872627,19.3064732 C20.6149541,19.34473 20.5,19.4980024 20.5,19.6704031 C20.5192407,22.6018291 22.0893815,25.3223522 24.7893325,27.1424922 C24.8468095,27.180749 24.9234048,27.2 25,27.2 C25.0765952,27.2 25.1531905,27.180749 25.2106675,27.1424922 C27.9106185,25.3223522 29.4807593,22.6018291 29.5,19.6704031 C29.5,19.4980024 29.3850459,19.34473 29.2127373,19.3064732 L25.0957134,18.2144383 Z"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><circle stroke="#{url-friendly-colour($stroke-color)}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path fill="#{url-friendly-colour($stroke-color)}" d="M31.977 20.24c-.097 1.677-.697 3.156-1.654 4.514-.43.61-.867 1.217-1.285 1.84-.597.887-1.074 1.832-1.258 2.898-.03.175-.141.162-.263.162l-2.525-.001c-.832 0-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257 8.257 0 0 1 18.011 20c-.112-2.82 1.486-5.279 4.185-6.42 3.458-1.462 7.547.004 9.166 3.293.521 1.062.682 2.19.615 3.365zM22.352 32.3v-.63h5.305v.63h-5.305zm4.76 2.681h-4.216c-.508 0-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511 2.673-2.305 2.306-2.858 5.124-2.19 8.241.351 1.63 1.149 3.046 2.104 4.39.438.617.869 1.243 1.271 1.883.372.593.635 1.241.661 1.946.03.814.008 1.627.008 2.441h.032c0 .676-.001 1.351.002 2.027.006 1.204.952 2.22 2.15 2.3.158.01.21.056.25.214a2.322 2.322 0 0 0 4.524-.007c.034-.14.072-.194.225-.206a2.329 2.329 0 0 0 2.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268 1.274-1.88 1.263-1.757 2.155-3.653 2.323-5.844.109-1.423-.018-2.816-.615-4.122z"/><path stroke="#{url-friendly-colour($stroke-color)}" stroke-width="1.5" fill="none" d="M25.096 18.214a.324.324 0 0 0-.192 0l-4.117 1.092a.37.37 0 0 0-.287.364c.02 2.932 1.59 5.652 4.29 7.472a.387.387 0 0 0 .21.058c.077 0 .153-.02.21-.058 2.7-1.82 4.27-4.54 4.29-7.472a.37.37 0 0 0-.287-.364l-4.117-1.092z"/></svg>');
}

@function buildIconDash($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="15px" height="10px" viewBox="0 0 10 10" xmlns="http%3A//www.w3.org/2000/svg"><g><path stroke="#{$stroke-color}" stroke-width="3" d="M1,5 L9,5"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><path stroke="#{url-friendly-colour($stroke-color)}" stroke-width="3" d="M1 5h8"/></svg>');
}

.sub-component.cliqz-features {
@@ -60,7 +60,7 @@

background-repeat: no-repeat;
background-position: center center;
background-size: 15px 10px;
background-size: 10px 10px;
transition: background-image 0.25s ease-out;
background-image: buildIconDash(#c8c7c2);
}
4 app/scss/partials/_ghostery_features.scss
View file
Open in desktop
@@ -12,11 +12,11 @@
*/

@function buildIconTrust($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http%3A//www.w3.org/2000/svg"><g stroke="#{$stroke-color}" fill="none"><circle cx="7" cy="7" r="6" stroke-width="2"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="14" xmlns="http%3A//www.w3.org/2000/svg"><circle cx="7" cy="7" r="6" stroke-width="2" stroke="#{url-friendly-colour($stroke-color)}" fill="none"/></svg>');
}

@function buildIconRestrict($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http%3A//www.w3.org/2000/svg"><g stroke="#{$stroke-color}" fill="none"><circle cx="7" cy="7" r="6" stroke-width="2"/><path d="M3,3 L11,11" stroke-width="2"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="14" xmlns="http%3A//www.w3.org/2000/svg"><g stroke="#{url-friendly-colour($stroke-color)}" fill="none" stroke-width="2"><circle cx="7" cy="7" r="6"/><path d="M3 3l8 8"/></g></svg>');
}

.sub-component.ghostery-features {
10 app/scss/partials/_pause_button.scss
View file
Open in desktop
@@ -12,19 +12,19 @@
*/

@function buildIconPause($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="16" viewBox="0 0 14 16" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><path d="M1,15 L4,15 L4,1 L1,1 L1,15 L1,15 Z M9,1 L9,15 L12,15 L12,1 L9,1 L9,1 Z"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="16" xmlns="http%3A//www.w3.org/2000/svg"><path d="M1 15h3V1H1v14zM9 1v14h3V1H9z" fill="#{url-friendly-colour($stroke-color)}"/></svg>');
}

@function buildIconPlay($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="16" viewBox="0 0 14 16" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><path d="M12.739453,7.542901 C13.012591,7.683981 13.153986,8.172646 12.739453,8.458306 L1.78263,14.919992 C1.460969,15.141574 1,14.87503 1,14.46229 L1,1.538918 C1,1.16064 1.440099,0.845632 1.78263,1.081215 L12.739453,7.542901 Z M2.043507,13.546884 L11.435069,8.000604 L2.043507,2.454323 L2.043507,13.546884 Z"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="16" xmlns="http%3A//www.w3.org/2000/svg"><path d="M12.74 7.543a.532.532 0 0 1 0 .915L1.782 14.92c-.322.222-.783-.045-.783-.458V1.54c0-.378.44-.693.783-.458l10.956 6.462zM2.043 13.547L11.435 8 2.044 2.454v11.093z" fill="#{url-friendly-colour($stroke-color)}"/></svg>');
}

@function buildIconCaretDown($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="9" height="5" viewBox="0 0 9 5" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><path d="M0 0 L9 0 L 4.5 5 L 0 0"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="9" height="5" xmlns="http%3A//www.w3.org/2000/svg"><path d="M0 0h9L4.5 5 0 0" fill="#{url-friendly-colour($stroke-color)}"/></svg>');
}

@function buildIconCircle($stroke-color) {
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="4" height="4" viewBox="0 0 4 4" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><circle cx="2" cy="2" r="2"/></g></svg>');
@return url('data:image/svg+xml;charset=US-ASCII,<svg width="4" height="4" xmlns="http%3A//www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#{url-friendly-colour($stroke-color)}"/></svg>');
}

.sub-component.pause-button {
@@ -143,7 +143,7 @@
}
.dropdown-item.selected {
background-color: #ebebeb;
.pause-button-icon {
.dropdown-clickable {
padding: 0 0 0 10px;
background-repeat: no-repeat;
background-position: 0 center;
ProTip! Use n and p to navigate between commits in a pull request.