Add icons to desktop cactions and overhaul icon alignment and usage

throughout

* Still need to redo how we're using mixins, but whatever.
* Cleans up a bit from the edit/view source etc changes too, since now
  we have a little more context (oops)...
* Just hide 'view' in general because a, how much does it really add,
  and b, it doesn't fit in a lot of cases when we have the extra width
  from these icons regardless.
* Rename view and add section tabs to make more sense with icons/in
  context/whatever ('view' is now only targeted at screen readers, and
  we use a + for the new section icon, so saying 'add' is kinda...
  redundant)

Bug: T197520
Change-Id: I1ab12ccda60e51035c4adec43c42508ac297c00a

i18n/en.json

@@ -14,7 +14,8 @@
 	"timeless-sitetools": "Wiki tools",
 	"timeless-pageactions": "Page tools",
 	"timeless-userpagetools": "Userpage tools",
-	"timeless-action-addsection": "Add topic",
+	"timeless-action-addsection": "New topic",
+	"timeless-view-view": "Read",
 	"timeless-pagemisc": "More",
 	"timeless-namespaces": "Namespaces",
 	"timeless-pagetools": "Page actions",

i18n/qqq.json

@@ -22,6 +22,7 @@
 	"timeless-pageactions": "Label for some page actions",
 	"timeless-userpagetools": "Label for actions associated with a userpage",
 	"timeless-action-addsection": "Label for newsection link on talkpages",
+	"timeless-view-view": "Label for the 'view' link action tab",
 	"timeless-pagemisc": "Label for more tools\n{{Identical|More}}",
 	"timeless-namespaces": "Label for page namespaces and watch tools\n{{Identical|Namespace}}",
 	"timeless-pagetools": "Label for other page tools",

resources/extensions/VisualEditor.article.less

@@ -6,15 +6,17 @@
 			display: none;
 		}
 
+		#ca-edit a {
+			.ca-icon( '../images/pencil-source-grey' );
+		}
+
+		#ca-ve-edit a {
+			.ca-icon( '../images/pencil-grey' );
+		}
+
 		@media ( max-width: @mobile-width ) {
 			#ca-ve-edit a {
-				.ca-icon();
+				.ca-icon-only();
-				.background-image-svg( '../images/pencil-grey.svg', '../images/pencil-grey.png' );
-			}
-
-			#ca-edit a {
-				.ca-icon();
-				.background-image-svg( '../images/pencil-source-grey.svg', '../images/pencil-source-grey.png' );
 			}
 		}
 	}

resources/extensions/WikiLove.icon.less

@@ -1,18 +1,20 @@
 @import '../variables.less';
 
 @media screen {
-	// Only apply icon if setting enabled
+	#ca-wikilove a {
+		.ca-icon ( '../images/heart-grey' );
+	}
+
 	@media ( min-width: @desktop-small-floor ) {
+		// per setting icon-only
 		#ca-wikilove.icon a {
-			.ca-icon();
+			.ca-icon-only();
-			.background-image-svg( '../images/heart-grey.svg', '../images/heart-grey.png' );
 		}
 	}
 
 	@media ( max-width: @mobile-width ) {
 		#ca-wikilove a {
-			.ca-icon();
+			.ca-icon-only();
-			.background-image-svg( '../images/heart-grey.svg', '../images/heart-grey.png' );
 		}
 	}
 }

resources/images/brackets-grey.svg

@@ -1,9 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M3 4h3v1H5v11h1v1H3zM17 4v13h-3v-1h1V5h-1V4zM6.5 4H9v1H8v11h1v1H6.5zM13.5 4v13H11v-1h1V5h-1V4z" fill="#aaa"/></svg>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<g fill="#aaa" stroke="none">
-		<path d="M2 3h3v1h-1v12h1v1h-3z"/>
-		<path d="M18 3v14h-3v-1h1v-12h-1v-1z"/>
-		<path d="M6 3h3v1h-1v12h1v1h-3z"/>
-		<path d="M14 3v14h-3v-1h1v-12h-1v-1z"/>
-	</g>
-</svg>

resources/images/eyeball-grey.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M3.222 10.414c4-6 9.4-6 13.4 0-4 6-9.4 6-13.4 0z" fill="none" stroke="#aaa" stroke-width="2"/><circle r="3.344" cy="9.156" cx="9.844" fill="none" stroke="#aaa" stroke-linecap="square"/></svg>

resources/images/heart-grey.svg

@@ -1,54 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M9.46 15.201c-4.747-3.767-5.05-4.05-5.105-4.109-1.351-1.449-1.351-3.8 0-5.245a3.416 3.416 0 0 1 2.493-1.07c.948 0 1.855.39 2.493 1.07l.659.595.702-.637a3.332 3.332 0 0 1 2.452-1.06c.941 0 1.825.392 2.491 1.101 1.351 1.445 1.351 3.798 0 5.244-.06.062-.356.341-5.106 4.11l-.539.43z" stroke-miterlimit="10" fill="none" stroke="#aaa" stroke-width="2.25"/></svg>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   id="svg12"
-   version="1.1"
-   viewBox="0 0 20 20"
-   height="20"
-   width="20">
-  <metadata
-     id="metadata18">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs16">
-    <linearGradient
-       gradientTransform="matrix(1,0,0,-1,-88,-92)"
-       y2="-105.4655"
-       x2="102.5057"
-       y1="-94.708504"
-       x1="93.4795"
-       gradientUnits="userSpaceOnUse"
-       id="SVGID_1_">
-      <stop
-         id="stop2"
-         style="stop-color:#F39C9C"
-         offset="0" />
-      <stop
-         id="stop4"
-         style="stop-color:#E97F7F"
-         offset="0.5757" />
-      <stop
-         id="stop6"
-         style="stop-color:#E36666"
-         offset="0.8252" />
-    </linearGradient>
-  </defs>
-  <path
-     id="path22"
-     d="m 9.46,15.201246 c -4.747,-3.767 -5.05,-4.051 -5.105,-4.109 -1.351,-1.449 -1.351,-3.801 0,-5.245 0.636,-0.681 1.545,-1.07 2.493,-1.07 0.948,0 1.855,0.389 2.493,1.069 l 0.659,0.596 0.702,-0.637 c 0.629,-0.676 1.509,-1.06 2.452,-1.06 0.941,0 1.825,0.392 2.491,1.101 1.351,1.445 1.351,3.798 0,5.244 -0.06,0.062 -0.356,0.341 -5.106,4.11 l -0.539,0.43 z"
-     stroke-miterlimit="10"
-     style="fill:none;stroke:#aaaaaa;stroke-width:2.25;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
-</svg>

resources/images/page-grey.svg

@@ -1,4 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M4 2v16h12V7.01L11 2zm2 2h3.994v4H14v8H6z" fill="#aaa"/></svg>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<path fill="#aaa" stroke="none" d="M3 2v16h13v-10.99l-5-5.01zm2 2h4.994v4H14v8H5z"/>
-</svg>

resources/images/page-misc-grey.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M4 2v16h4v-2H6V4h3.994v4H14v1h2V7.01L11 2z" fill="#aaa" fill-rule="evenodd"/><path d="M13.339 10a.641.641 0 0 0-.643.643v.418a3.536 3.536 0 0 0-1.064.44l-.291-.291a.64.64 0 0 0-.91 0l-.226.228a.641.641 0 0 0 0 .909l.293.293a3.536 3.536 0 0 0-.437 1.056h-.418A.641.641 0 0 0 9 14.34v.322c0 .356.286.643.643.643h.418a3.536 3.536 0 0 0 .44 1.064l-.296.297a.641.641 0 0 0 0 .91l.227.227a.642.642 0 0 0 .909 0l.3-.3a3.536 3.536 0 0 0 1.055.437v.418c0 .357.287.643.643.643h.322a.641.641 0 0 0 .643-.643v-.418a3.536 3.536 0 0 0 1.056-.436l.3.299a.642.642 0 0 0 .908 0l.228-.228a.641.641 0 0 0 0-.909l-.298-.299a3.536 3.536 0 0 0 .441-1.062h.418A.641.641 0 0 0 18 14.66v-.322a.641.641 0 0 0-.643-.643h-.418a3.536 3.536 0 0 0-.436-1.056l.293-.293a.641.641 0 0 0 0-.91l-.228-.227a.642.642 0 0 0-.909 0l-.292.292a3.536 3.536 0 0 0-1.063-.441v-.418A.641.641 0 0 0 13.66 10zm.161 2.5a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2z" fill="#aaa" fill-rule="evenodd"/></svg>

resources/images/pencil-grey.svg

@@ -1,7 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><g fill="#aaa"><path d="M12.879 2.165l-9.465 9.471 4.95 4.95 9.465-9.471zm0 2.829L15 7.115l-6.636 6.643-2.121-2.122zM6.95 18H2v-4.95z"/></g></svg>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<g fill="#aaa" stroke="none">
-		<path d="M12.314 2.736l-8.9 8.9 4.95 4.95 8.9-8.9zm0 2.829l2.121 2.121-6.071 6.072-2.121-2.122z"/>
-		<path d="M6.95 18H2v-4.95z"/>
-	</g>
-</svg>

resources/images/pencil-source-grey.svg

@@ -1,86 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M15.656 10l-1 1H15v5h-.5v1H17v-7zM13 12.656l-2 2V17h2.5v-1H13z" fill="#aaa"/><g fill="#aaa"><path d="M12.879 2.165l-9.465 9.471 4.95 4.95 9.465-9.471zm0 2.829L15 7.115l-6.636 6.643-2.121-2.122zM6.95 18H2v-4.95z"/></g></svg>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="20"
-   height="20"
-   viewBox="0 0 20 20"
-   version="1.1"
-   id="svg8"
-   sodipodi:docname="pencil-source-grey.svg"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14">
-  <metadata
-     id="metadata14">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs12" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1338"
-     inkscape:window-height="1032"
-     id="namedview10"
-     showgrid="true"
-     inkscape:zoom="32"
-     inkscape:cx="13.880951"
-     inkscape:cy="1.7618881"
-     inkscape:window-x="503"
-     inkscape:window-y="4"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg8">
-    <inkscape:grid
-       type="xygrid"
-       id="grid821" />
-  </sodipodi:namedview>
-  <g
-     transform="matrix(0.5,0,0,0.5,10,9.5)"
-     style="fill:#aaaaaa;stroke:none"
-     id="g10">
-    <path
-       style="stroke-width:0.5"
-       d="m 14.65625,11 -1,1 H 14 v 5 h -0.5 v 1 H 16 V 11 Z M 16.5,11 v 1 H 17 v 5 h -0.5 v 1 H 19 v -7 z m -4.5,2.65625 -2,2 V 18 h 2.5 V 17 H 12 Z"
-       transform="matrix(2,0,0,2,-20,-19)"
-       id="path4-6"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ccccccccccccccccccccccccc" />
-  </g>
-  <g
-     style="fill:#aaaaaa;stroke:#ffffff"
-     id="g6-5">
-    <path
-       inkscape:connector-curvature="0"
-       d="M 6.95,18 H 2 v -4.95 z"
-       id="path4-2"
-       style="stroke:#ffffff" />
-  </g>
-  <g
-     fill="#aaa"
-     stroke="none"
-     id="g6">
-    <path
-       d="M12.314 2.736l-8.9 8.9 4.95 4.95 8.9-8.9zm0 2.829l2.121 2.121-6.071 6.072-2.121-2.122z"
-       id="path2" />
-    <path
-       d="M6.95 18H2v-4.95z"
-       id="path4" />
-  </g>
-</svg>

resources/images/talk-grey.svg

@@ -1,9 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><g transform="matrix(.94234 0 0 1 1.033 0)" fill="none"><path d="M12.094 11.185h.031c3.2 0 5.793-1.64 5.793-3.664s-2.594-3.665-5.793-3.664c-3.2 0-5.793 1.64-5.793 3.664" stroke="#aaa" stroke-width="2.25"/><ellipse ry="3.426" rx="5" cy="11.7" cx="7.125" stroke="#aaa" stroke-width="2.25"/><path d="M4.625 15.575c.587 1.556-.104 2.537-1 3.425 3.462-.731 3.441-2.134 4-3.425zM15.625 11.642c-.587 1.557.104 2.538 1 3.426-3.462-.732-3.441-2.134-4-3.426z" fill="#aaa"/></g></svg>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<g fill="none" stroke="none">
-		<path stroke="#aaa" stroke-width="2.25" d="M12.094 11.185h.031c3.2 0 5.793-1.64 5.793-3.664s-2.594-3.665-5.793-3.664c-3.2 0-5.793 1.64-5.793 3.664"/>
-		<ellipse cx="7.125" cy="11.7" stroke="#aaa" stroke-width="2.25" rx="5" ry="3.426"/>
-		<path fill="#aaa" d="M4.625 15.575c.587 1.556-.104 2.537-1 3.425 3.462-.731 3.441-2.134 4-3.425z"/>
-		<path fill="#aaa" d="M15.625 11.642c-.587 1.557.104 2.538 1 3.426-3.462-.732-3.441-2.134-4-3.426z"/>
-	</g>
-</svg>

resources/mixins.less

@@ -18,6 +18,27 @@
 	background-repeat: no-repeat;
 }
 
+// Icons for the page actions menus
+.ca-icon( @icon: '' ) {
+	.background-image-svg( '@{icon}.svg', '@{icon}.png' );
+	border: 0;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-position: left top;
+	display: inline-block;
+	margin-bottom: -0.35em;
+	padding: 0 2px 0 20px;
+}
+
+// For use after .ca-icon() ...
+.ca-icon-only() {
+	text-indent: -99999px;
+	width: 20px;
+	overflow: hidden; // T174314
+	box-sizing: border-box;
+	padding: 0;
+}
+
 .box() {
 	background: @base90;
 	border: solid @base80;
@@ -33,18 +54,6 @@
 	box-shadow: none;
 }
 
-// Icons for the page actions menus
-.ca-icon() {
-	.icon;
-	display: inline-block;
-	width: 20px;
-	box-sizing: border-box;
-	margin-bottom: -0.5em;
-	overflow: hidden;
-}
-
-// Navigation column blocks
-
 .nav-block() {
 	.box();
 	padding: 1.5em 1.5em 0;

resources/screen-common.less

@@ -229,6 +229,10 @@ body {
 			color: @text;
 		}
 	}
+
+	a {
+		.ca-icon( 'images/page-misc-grey' );
+	}
 }
 
 #p-namespaces {
@@ -249,13 +253,50 @@ body {
 }
 
 #ca-watch a {
-	.ca-icon();
+	.ca-icon( 'images/star' );
-	.background-image-svg( 'images/star.svg', 'images/star.png' );
+	.ca-icon-only();
 }
 
 #ca-unwatch a {
-	.ca-icon();
+	.ca-icon( 'images/star-filled' );
-	.background-image-svg( 'images/star-filled.svg', 'images/star-filled.png' );
+	.ca-icon-only();
+}
+
+#ca-edit a {
+	.ca-icon( 'images/pencil-grey' );
+}
+
+#ca-history a {
+	.ca-icon( 'images/clock-grey' );
+}
+
+#ca-talk a {
+	.ca-icon( 'images/talk-grey' );
+}
+
+#t-contributions a {
+	.ca-icon( 'images/puzzle-grey' );
+}
+
+#ca-addsection a {
+	.ca-icon( 'images/plus-grey' );
+}
+
+#ca-viewsource a {
+	.ca-icon( 'images/brackets-grey' );
+}
+
+#ca-view {
+	.hidden();
+
+	// Let's give anyone who forcibly brings it back a creepy eyeball
+	a {
+		.ca-icon( 'images/eyeball-grey' );
+	}
+}
+
+.tools-inline li[ id^='ca-nstab-' ] a {
+	.ca-icon( 'images/page-grey' );
 }
 
 #ca-languages {
@@ -264,6 +305,7 @@ body {
 
 	h2 {
 		.dropdown-header();
+		.ca-icon( 'images/languages-grey' );
 		font-size: 1em;
 		font-family: @fonts;
 		border-bottom: transparent;

resources/screen-mobile.less

@@ -175,39 +175,8 @@ h1.firstHeading {
 	}
 }
 
-#ca-edit a {
+.tools-inline li a {
-	.ca-icon();
+	.ca-icon-only();
-	.background-image-svg( 'images/pencil-grey.svg', 'images/pencil-grey.png' );
-}
-
-#ca-history a {
-	.ca-icon();
-	.background-image-svg( 'images/clock-grey.svg', 'images/clock-grey.png' );
-}
-
-#ca-talk a {
-	.ca-icon();
-	.background-image-svg( 'images/talk-grey.svg', 'images/talk-grey.png' );
-}
-
-#t-contributions a {
-	.ca-icon();
-	.background-image-svg( 'images/puzzle-grey.svg', 'images/puzzle-grey.png' );
-}
-
-#ca-addsection a {
-	.ca-icon();
-	.background-image-svg( 'images/plus-grey.svg', 'images/plus-grey.png' );
-}
-
-#ca-viewsource a {
-	.ca-icon();
-	.background-image-svg( 'images/brackets-grey.svg', 'images/brackets-grey.png' );
-}
-
-*[ id^='ca-nstab-' ] a {
-	.ca-icon();
-	.background-image-svg( 'images/page-grey.svg', 'images/page-grey.png' );
 }
 
 #ca-more,
@@ -219,7 +188,9 @@ h1.firstHeading {
 
 #ca-more span,
 #ca-languages h2 span {
-	.ca-icon();
+	.ca-icon-only();
+	display: inline-block;
+	overflow: visible;
 }
 
 #ca-more span {
@@ -237,10 +208,6 @@ h1.firstHeading {
 		border-bottom-color: @base70;
 	}
 
-	span {
-		.background-image-svg( 'images/languages-grey.svg', 'images/languages-grey.png' );
-	}
-
 	&:after {
 		width: 16px;
 	}