refactor(core): ♻️ handle VE merged edit buttons better

includes/Hooks/SkinHooks.php

@@ -261,8 +261,12 @@ class SkinHooks implements
 			'addsection' => 'speechBubbleAdd'
 		];
 
-		// If a VE edit button is present, use wikiText icon for source edit
-		if ( isset( $links['views']['ve-edit'] ) ) {
+		// If both visual edit and source edit buttons are present
+		if ( isset( $links['views']['ve-edit'] ) && isset( $links['views']['edit'] ) ) {
+			// Add a class so that we can make a merged button through CSS
+			$links['views']['ve-edit']['class'] = 'citizen-ve-edit-merged';
+			$links['views']['edit']['class'] = 'citizen-ve-edit-merged';
+			// Use wikiText icon instead of edit icon for source edit
 			$iconMap['edit'] = 'wikiText';
 		}
 

resources/skins.citizen.styles/Pagetools.less

@@ -202,14 +202,10 @@
 }
 
 // VE styles shouldn't be core but it is just a few lines :/
-#ca-ve-edit:not( .selected ) {
+#ca-ve-edit {
 	order: 98; // Before source edit
 
 	> a {
-		border-bottom-right-radius: 0;
-		border-top-right-radius: 0;
-
-		/* Non-WMUI icons */
 		// See SkinHooks.php for why VE is here
 		&:before {
 			width: var( --size-icon );
@@ -218,13 +214,25 @@
 			background-repeat: no-repeat;
 			background-size: var( --size-icon );
 			content: '';
-			opacity: var( --opacity-icon-base );
 			transition: @transition-opacity;
 		}
 	}
+}
 
-	// Merge two buttons together
-	+ #ca-edit {
+#ca-edit {
+	order: 99; // Align to last
+}
+
+// Merge two buttons together
+.citizen-ve-edit-merged {
+	&#ca-ve-edit {
+		> a {
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+	}
+
+	&#ca-edit {
 		border-left: 1px solid var( --color-primary--hover );
 		margin-left: ~'calc( var( --space-xxs ) * -1 )';
 
@@ -238,10 +246,6 @@
 	}
 }
 
-#ca-edit {
-	order: 99; // Align to last
-}
-
 .skin-citizen-dark {
 	#ca-ve-edit > a:before {
 		filter: invert( 1 );

skinStyles/extensions/VisualEditor/ext.visualEditor.less

@@ -16,6 +16,12 @@
 		pointer-events: auto;
 	}
 
+	// Hide edit buttons since it is handled by the editing mode dropdown in the toolbar
+	#ca-ve-edit,
+	#ca-edit {
+		display: none;
+	}
+
 	.mw-body-header {
 		z-index: 0; // Reset z-index so toolbar won't clip
 		// Reset VE disabled style to allow page action buttons to work
@@ -28,7 +34,7 @@
 		opacity: 0.5;
 	}
 
-	.toc {
+	.citizen-toc {
 		display: none; // Hide ToC
 	}
 }