Chrome-style tracking icon

See muckSponge#147

chrome/icons/icons.css

@@ -179,6 +179,16 @@
 	list-style-image: url(incognito.svg) !important;
 }
 
+#tracking-protection-icon
+{
+	list-style-image: url(content-blocker-inactive.svg) !important;
+}
+
+#tracking-protection-icon-box[active] #tracking-protection-icon
+{
+	list-style-image: url(content-blocker-active.svg) !important;
+}
+
 #pageActionButton
 {
 	list-style-image: url(menu.svg) !important;

chrome/urlbar/urlbar.css

@@ -381,7 +381,7 @@
 .urlbar-icon,
 .searchbar-search-button,
 #identity-box,
-#tracking-protection-icon-container
+#tracking-protection-icon-box
 {
 	min-width: 32px !important;
 	height: 24px !important;
@@ -395,10 +395,54 @@
 	background-color: transparent !important;
 }
 
+#tracking-protection-icon-container
+{
+	background: 0 !important;
+	border: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	width: auto !important;
+	order: 97 !important;
+}
+
 #tracking-protection-icon-box
 {
-	position: relative !important;
 	display: block !important;
+	width: 32px !important;
+}
+
+#tracking-protection-icon-box
+{
+	transition:
+		background-color .2s var(--ease-basic),
+		width .15s var(--ease-in),
+		opacity .15s var(--ease-basic),
+		visibility 0s .2s !important;
+	opacity: 0 !important;
+	visibility: hidden !important;
+	width: 0 !important;
+}
+
+#urlbar:hover #tracking-protection-icon-box,
+#tracking-protection-icon-box[active]
+{
+	transition:
+		background-color .2s var(--ease-basic),
+		width .3s var(--ease-out),
+		opacity .3s var(--ease-basic) !important;
+	opacity: 1 !important;
+	visibility: visible !important;
+	width: 32px !important;
+}
+
+#tracking-protection-icon
+{
+	display: block !important;
+}
+
+#tracking-protection-icon-animatable-box
+{
+	display: none !important;
 }
 
 #identity-box #notification-popup-box
@@ -410,6 +454,8 @@
 #page-action-buttons
 {
 	height: 24px !important;
+	display: flex !important;
+	order: 99 !important;
 }
 
 #urlbar[open] #page-action-buttons
@@ -420,7 +466,7 @@
 .urlbar-icon:hover:not([disabled]),
 .searchbar-search-button:hover,
 #identity-box:hover:not(.no-hover),
-#tracking-protection-icon-container:hover
+#tracking-protection-icon-container:hover #tracking-protection-icon-box
 {
 	background-color: var(--toolbarbutton-hover-background) !important;
 }
@@ -430,25 +476,25 @@
 .searchbar-search-button:hover:active,
 #identity-box:hover:active:not(.no-hover),
 #identity-box[open]:not(.no-hover),
-#tracking-protection-icon-container[open]
+#tracking-protection-icon-container[open] #tracking-protection-icon-box
 {
 	background-color: var(--toolbarbutton-active-background) !important;
 	transition-duration: 0 !important;
 }
 
 #star-button-box
 {
-	-moz-box-ordinal-group: 99 !important;
+	order: 99 !important;
 }
 
 #pageActionButton
 {
-	-moz-box-ordinal-group: 98 !important;
+	order: 98 !important;
 }
 
 #contextual-feature-recommendation
 {
-	-moz-box-ordinal-group: 97 !important;
+	order: 96 !important;
 	width: auto !important;
 }