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

Duplicate for Testing — GH-1975 Theme Framework, Leaf & Palm Themes #523

Closed
wants to merge 47 commits into from
+1,705 −155
Closed

Duplicate for Testing — GH-1975 Theme Framework, Leaf & Palm Themes #523

Changes from 1 commit
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
317ab64
Replace themes toggle with radio buttons
benstrumeyer Mar 11, 2020
f050b83
Center inner circle in radio buttons
benstrumeyer Mar 11, 2020
e8d7f92
Merge branch 'develop' into GH-1967/themes-panel-update
benstrumeyer Mar 12, 2020
f9b1546
Remove console error
benstrumeyer Mar 12, 2020
a9a12aa
Testing switching between themes
benstrumeyer Mar 18, 2020
fc61494
Add configuration that points to local account server
benstrumeyer Mar 18, 2020
05a37b3
Initial checkin
zarembsky Mar 19, 2020
0e0beef
Adding local themes
zarembsky Mar 19, 2020
8a66ff9
Adding comments.
zarembsky Mar 19, 2020
1ff8eb4
Fix (sort of)
zarembsky Mar 19, 2020
60cfc91
Real fix
zarembsky Mar 19, 2020
05f8718
Remove unneeded call
zarembsky Mar 19, 2020
824b2a3
Create theme framework and palm theme
benstrumeyer Mar 26, 2020
d36fd1a
Create palm theme svgs
benstrumeyer Mar 26, 2020
260c627
Add antiTracking, adBlocking and smartBlocking tracker counts to Cliq…
benstrumeyer Mar 26, 2020
8660643
Merge branch 'develop' into palm-theme
benstrumeyer Mar 26, 2020
d22b752
Remove console logs
benstrumeyer Mar 26, 2020
0fb546b
Get theme css from account project
benstrumeyer Mar 26, 2020
2a8bce2
Clean up radio button code
benstrumeyer Mar 31, 2020
2a58c29
Use context to pass theme
benstrumeyer Mar 31, 2020
37829c9
Merge branch 'develop' into feature/palm-theme
benstrumeyer Mar 31, 2020
2e44e44
Point to regular servers
benstrumeyer Mar 31, 2020
fc1a2a3
Remove local testing code
benstrumeyer Mar 31, 2020
1bbc72d
Uncomment function
benstrumeyer Mar 31, 2020
d0ec9be
Merge branch 'develop' into GH-1967/themes-panel-update
benstrumeyer Mar 31, 2020
bc90f18
Merge branch 'GH-1967/themes-panel-update' into feature/palm-theme
benstrumeyer Apr 1, 2020
5350c2b
Get database files from develop branch
benstrumeyer Apr 1, 2020
c1748dd
Get click2play from develop branch
benstrumeyer Apr 1, 2020
feb29b0
Delete leaf svg and png
benstrumeyer Apr 1, 2020
f08ff58
Style historical stats graph for leaf theme
benstrumeyer Apr 1, 2020
6bf02dd
Add leaf-theme tracker-list icons
benstrumeyer Apr 1, 2020
233d774
Refactor tracker-count status to account for leaf theme
benstrumeyer Apr 1, 2020
02671ef
Prep branch for testing
benstrumeyer Apr 6, 2020
5bf8902
Finalize leaf theme
benstrumeyer Apr 6, 2020
9334ab7
Use theme scss files as single source of truth for icon colors
benstrumeyer Apr 10, 2020
5a348ba
Refactor trackerButtons to use css fill and stroke colors. Use absolu…
benstrumeyer Apr 10, 2020
8805349
Remove antiTracking, adBlocking, and smartBlocking tracker counts to …
benstrumeyer Apr 10, 2020
d490c4b
Delete unused svgs
benstrumeyer Apr 10, 2020
f1aae45
Prevent tracker list styling from bleeding
benstrumeyer Apr 10, 2020
10e7c01
Style subscriber badge, and caret for palm-theme
benstrumeyer Apr 13, 2020
a2c4c53
Change subscriber badge fill color
benstrumeyer Apr 13, 2020
f9eb0e1
Refactor _renderCaret
benstrumeyer Apr 13, 2020
34e1831
Move stroke and fill colors into scss and removed fill/stroke attribu…
benstrumeyer Apr 13, 2020
3c44fef
Refactor trackerButtonRenderHelpers
benstrumeyer Apr 13, 2020
95b1c13
Remove empty object in StatsContainer
benstrumeyer Apr 13, 2020
6f864d8
Use css to style statsGraph point and line
benstrumeyer Apr 13, 2020
8519747
Merge branch 'develop' into testable-theme-framework
benstrumeyer Apr 14, 2020
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next
Loading status checks…
Add leaf-theme tracker-list icons
  • Loading branch information
@benstrumeyer
benstrumeyer committed Apr 1, 2020
commit 6bf02dd4bc1c1ce7e01cfafdea37eacd389616e6
7 app/images/panel/tracker-detail-cliqz-ads-leaf-theme-icon.svg
View file
Open in desktop
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="10" height="10" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" d="M7.49 1.234L9.922 3.89l-.157 3.6L7.11 9.922l-3.6-.157L1.078 7.11l.157-3.6L3.89 1.078z"/>
<path fill="#2e3b80" stroke="#2e3b80" stroke-width=".5" d="M2.788 8.54c.315.315.628.63.944.943.023.023.067.035.103.035 1.077.001 2.153.002 3.23-.001.04 0 .09-.02.117-.048a820.63 820.63 0 0 0 2.285-2.285.184.184 0 0 0 .05-.116c.003-1.08.003-2.16.002-3.24-.001-.03-.008-.068-.026-.088-.316-.321-.635-.64-.95-.956L2.789 8.54m-.436-.433l5.754-5.754c-.308-.309-.621-.623-.937-.936a.16.16 0 0 0-.102-.036 709.213 709.213 0 0 0-3.231 0c-.04 0-.09.02-.118.048-.765.762-1.53 1.525-2.291 2.29a.16.16 0 0 0-.045.1 928.271 928.271 0 0 0 0 3.26c0 .029.01.065.03.085.314.318.631.634.94.943m7.752-2.652c0 .581-.002 1.162.002 1.743a.405.405 0 0 1-.127.31 879.44 879.44 0 0 0-2.47 2.47.398.398 0 0 1-.303.128c-1.17-.003-2.341-.003-3.512 0a.4.4 0 0 1-.302-.126A884.3 884.3 0 0 0 .915 7.503a.385.385 0 0 1-.121-.294c.002-1.17.002-2.342 0-3.513 0-.122.036-.216.123-.303.827-.824 1.653-1.65 2.477-2.477a.388.388 0 0 1 .293-.123c1.174.002 2.348.002 3.523 0 .119 0 .21.038.293.122.827.83 1.655 1.657 2.484 2.484.081.08.12.17.119.285-.004.59-.002 1.181-.002 1.771"/>
</g>
</svg>
This conversation was marked as resolved by wlycdgr
Comment on lines +1 to +7

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Apr 8, 2020
Member

Given that the only differences between these icons and the default ones are the path fill and stroke colors, let's inline one of each type in the icon render helpers in Tracker, set css classes based on the theme context value, and set the fill and stroke values in those classes.

We've been using ReactSVG components to render these icons, and previously I thought it was more or less equivalent to inlining, but I am realizing now this component is overkill - it's intended to abstract away complexity when your SVG resources lives at a remote URL and you need to make an async request for it before inserting the response.

Between the two changes, we'll save a couple dozen kilobytes and remove a 3rd party dependency from the component.

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Apr 8, 2020
Member

So, for example, _renderCliqzAdsIcon() can become something along the lines of

	_renderCliqzAdsIcon() {
		return (
			<svg className="trk-cliqz-stats-icon" width="10" height="10" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
				<g fill="none" fillRule="evenodd">
					<path fill="#FFF" d="M7.49 1.234L9.922 3.89l-.157 3.6L7.11 9.922l-3.6-.157L1.078 7.11l.157-3.6L3.89 1.078z" />
					<path className={this.context} fill="#1DAFED" stroke="#1DAFED" strokeWidth=".5" d="M2.788 8.54c.315.315.628.63.944.943.023.023.067.035.103.035 1.077.001 2.153.002 3.23-.001.04 0 .09-.02.117-.048a820.63 820.63 0 0 0 2.285-2.285.184.184 0 0 0 .05-.116c.003-1.08.003-2.16.002-3.24-.001-.03-.008-.068-.026-.088-.316-.321-.635-.64-.95-.956L2.789 8.54m-.436-.433l5.754-5.754c-.308-.309-.621-.623-.937-.936a.16.16 0 0 0-.102-.036 709.213 709.213 0 0 0-3.231 0c-.04 0-.09.02-.118.048-.765.762-1.53 1.525-2.291 2.29a.16.16 0 0 0-.045.1 928.271 928.271 0 0 0 0 3.26c0 .029.01.065.03.085.314.318.631.634.94.943m7.752-2.652c0 .581-.002 1.162.002 1.743a.405.405 0 0 1-.127.31 879.44 879.44 0 0 0-2.47 2.47.398.398 0 0 1-.303.128c-1.17-.003-2.341-.003-3.512 0a.4.4 0 0 1-.302-.126A884.3 884.3 0 0 0 .915 7.503a.385.385 0 0 1-.121-.294c.002-1.17.002-2.342 0-3.513 0-.122.036-.216.123-.303.827-.824 1.653-1.65 2.477-2.477a.388.388 0 0 1 .293-.123c1.174.002 2.348.002 3.523 0 .119 0 .21.038.293.122.827.83 1.655 1.657 2.484 2.484.081.08.12.17.119.285-.004.59-.002 1.181-.002 1.771" />
				</g>
			</svg>
		);
	}

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Apr 10, 2020
Author Contributor

Using this.context as a CSS class is a great idea. I've inlined it and removed all 6 svg files!
4 app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-leaf-theme-icon.svg
View file
Open in desktop
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFF" fill-rule="evenodd" stroke="#2e3b80" stroke-width=".96" d="M5.085 1.013a.288.288 0 0 0-.17 0l-3.66.97A.328.328 0 0 0 1 2.308c.017 2.606 1.413 5.024 3.813 6.642.05.034.119.051.187.051a.344.344 0 0 0 .187-.051C7.587 7.33 8.983 4.913 9 2.307a.328.328 0 0 0-.255-.323l-3.66-.971z"/>
</svg>
ProTip! Use n and p to navigate between commits in a pull request.