From a0d2c2497b85adba03fe551b6e8e1be6cdf3f696 Mon Sep 17 00:00:00 2001
From: Stephen Niedzielski <stephen@niedzielski.com>
Date: Mon, 1 Jun 2020 21:09:42 -0600
Subject: [PATCH] [fix][RTL] flip menu collapse button icon

Fix the icon button directionality in right-to-left languages.
Previously, the button was hardcoded to support left-to-right only.

- Replace the skin.vector.icons' `.mw-ui-icon-wikimedia-{name}:before`
  `selector` in skin.json with a placeholder, `{name}`. I don't think
  this selector should be needed but it seems to be erroneous not have
  one. I believe this issue of wanting a null selector was encountered
  in Minerva or MobileFrontend but am unable to locate the past
  discourse.

- Add check and unchecked menu button selectors to skin.json that set
  the appropriate background image. This shards some of the styles out
  of Less and into ResourceLoader-land but it's worthwhile.

- Revise the name of horizontal collapse icon to describe its form not
  function, "collapseHorizontal" to "chevronHorizontal". This has been
  an established convention that was missed a couple patches back.

- Add a flipped chevronHorizontal for RTL. I used Inkscape to do the
  flip and tried to match the style of the original by hand. Feel free
  to edit further.

- Drop the now unnecessary icon flipping JavaScript and initial Mustache
  class. This enables a real CSS-only solution for the icons.

Bug: T246419
Change-Id: I60f65b3c595bf18d309b667d9a0b066691b90c97
---
 includes/templates/Sidebar.mustache           |  8 +------
 ...rizontal.svg => chevronHorizontal-ltr.svg} |  2 +-
 .../chevronHorizontal-rtl.svg                 |  7 ++++++
 resources/skins.vector.js/skin.js             | 23 -------------------
 skin.json                                     | 11 ++++++---
 5 files changed, 17 insertions(+), 34 deletions(-)
 rename resources/skins.vector.icons/{collapseHorizontal.svg => chevronHorizontal-ltr.svg} (93%)
 create mode 100644 resources/skins.vector.icons/chevronHorizontal-rtl.svg

diff --git a/includes/templates/Sidebar.mustache b/includes/templates/Sidebar.mustache
index e4578ed..a348d2e 100644
--- a/includes/templates/Sidebar.mustache
+++ b/includes/templates/Sidebar.mustache
@@ -22,13 +22,7 @@
 		aria-controls="mw-panel">
 <label
 	id="mw-sidebar-button"
-	class="
-		mw-checkbox-hack-button
-		mw-ui-icon
-		mw-ui-icon-element
-		{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal{{/sidebar-visible}}
-		{{^sidebar-visible}}mw-ui-icon-wikimedia-menu{{/sidebar-visible}}
-	"
+	class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
 	for="mw-sidebar-checkbox"
 	data-event-name="ui.sidebar">
 	{{msg-vector-action-toggle-sidebar}}
diff --git a/resources/skins.vector.icons/collapseHorizontal.svg b/resources/skins.vector.icons/chevronHorizontal-ltr.svg
similarity index 93%
rename from resources/skins.vector.icons/collapseHorizontal.svg
rename to resources/skins.vector.icons/chevronHorizontal-ltr.svg
index 85f7ec7..87703a2 100644
--- a/resources/skins.vector.icons/collapseHorizontal.svg
+++ b/resources/skins.vector.icons/chevronHorizontal-ltr.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
 	<title>
-		collapse
+		chevron
 	</title>
 	<path d="M9 2l1.3 1.3L3.7 10l6.6 6.7L9 18l-8-8 8-8zm8.5 0L19 3.3 12.2 10l6.7 6.7-1.4 1.3-8-8 8-8z"/>
 </svg>
\ No newline at end of file
diff --git a/resources/skins.vector.icons/chevronHorizontal-rtl.svg b/resources/skins.vector.icons/chevronHorizontal-rtl.svg
new file mode 100644
index 0000000..377728a
--- /dev/null
+++ b/resources/skins.vector.icons/chevronHorizontal-rtl.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		chevron
+	</title>
+	<path d="M11 2 9.7 3.3 16.3 10 9.7 16.7 11 18 19 10ZM2.5 2 1 3.3 7.8 10 1.1 16.7 2.5 18l8-8z"/>
+</svg>
\ No newline at end of file
diff --git a/resources/skins.vector.js/skin.js b/resources/skins.vector.js/skin.js
index 4ed5737..96339d2 100644
--- a/resources/skins.vector.js/skin.js
+++ b/resources/skins.vector.js/skin.js
@@ -3,25 +3,6 @@
 var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' );
 var vector = require( '../skins.vector.legacy.js/vector.js' );
 
-/**
- * Update the state of the menu icon to be an expanded or collapsed icon.
- * @param {HTMLInputElement} checkbox
- * @param {HTMLElement} button
- * @return {void}
- */
-function updateMenuIcon( checkbox, button ) {
-	button.classList.remove(
-		checkbox.checked ?
-			'mw-ui-icon-wikimedia-menu' :
-			'mw-ui-icon-wikimedia-collapseHorizontal'
-	);
-	button.classList.add(
-		checkbox.checked ?
-			'mw-ui-icon-wikimedia-collapseHorizontal' :
-			'mw-ui-icon-wikimedia-menu'
-	);
-}
-
 /**
  * Improve the interactivity of the sidebar panel by binding optional checkbox hack enhancements
  * for focus and `aria-expanded`. Also, flip the icon image on click.
@@ -35,11 +16,7 @@ function initSidebar( document ) {
 		checkboxHack.bindToggleOnClick( checkbox, button );
 		checkboxHack.bindUpdateAriaExpandedOnInput( checkbox );
 
-		button.addEventListener( 'click', updateMenuIcon.bind( undefined, checkbox, button ) );
-		checkbox.addEventListener( 'input', updateMenuIcon.bind( undefined, checkbox, button ) );
-
 		checkboxHack.updateAriaExpanded( checkbox );
-		updateMenuIcon( checkbox, button );
 	}
 }
 
diff --git a/skin.json b/skin.json
index 8dd12fa..6afcd58 100644
--- a/skin.json
+++ b/skin.json
@@ -60,10 +60,15 @@
 		},
 		"skins.vector.icons": {
 			"class": "ResourceLoaderImageModule",
-			"selector": ".mw-ui-icon-wikimedia-{name}:before",
+			"selector": "{name}",
 			"images": {
-				"menu": "resources/skins.vector.icons/menu.svg",
-				"collapseHorizontal": "resources/skins.vector.icons/collapseHorizontal.svg"
+				"#mw-navigation .mw-checkbox-hack-button:before": {
+					"file": {
+						"ltr": "resources/skins.vector.icons/chevronHorizontal-ltr.svg",
+						"rtl": "resources/skins.vector.icons/chevronHorizontal-rtl.svg"
+					}
+				},
+				"#mw-navigation .mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-checkbox-hack-button:before": "resources/skins.vector.icons/menu.svg"
 			}
 		},
 		"skins.vector.styles.responsive": {