From 3f892fe3688aa73c95616fafd008d04323f75184 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Thu, 27 Jun 2019 15:35:50 +0100
Subject: [PATCH] Simplify pulsating dot to one DOM node using :before/:after

Change-Id: I81af08d58a33b6d3751bfc5012217b9bd98e69dc
---
 .../tools/ve.ui.MWEducationPopupTool.css      | 25 +++++++++++--------
 .../ui/tools/ve.ui.MWEducationPopupTool.js    |  5 +---
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/modules/ve-mw/ui/styles/tools/ve.ui.MWEducationPopupTool.css b/modules/ve-mw/ui/styles/tools/ve.ui.MWEducationPopupTool.css
index fb84dd0d77..eac3d3af17 100644
--- a/modules/ve-mw/ui/styles/tools/ve.ui.MWEducationPopupTool.css
+++ b/modules/ve-mw/ui/styles/tools/ve.ui.MWEducationPopupTool.css
@@ -9,21 +9,27 @@
 	cursor: pointer;
 }
 
-.ve-ui-pulsatingDot,
-.ve-ui-stillDot {
+.ve-ui-pulsatingDot {
 	position: absolute;
 	bottom: 0;
 	left: 50%;
 	z-index: 1;
+}
+
+.ve-ui-pulsatingDot:before,
+.ve-ui-pulsatingDot:after {
+	content: '';
+	display: block;
+	position: absolute;
 	border-radius: 50%;
 	background-color: #36c;
 }
 
-.ve-ui-pulsatingDot {
+.ve-ui-pulsatingDot:before {
 	width: 36px;
 	height: 36px;
-	margin-bottom: -18px;
-	margin-left: -18px;
+	top: -18px;
+	left: -18px;
 	opacity: 0;
 	-webkit-animation: pulse 3s ease-out;
 	-moz-animation: pulse 3s ease-out;
@@ -33,12 +39,12 @@
 	animation-iteration-count: infinite;
 }
 
-.ve-ui-stillDot {
+.ve-ui-pulsatingDot:after {
 	/* Use whole pixel values to improve rendering (T214203) */
 	width: 12px;
 	height: 12px;
-	margin-bottom: -6px;
-	margin-left: -6px;
+	top: -6px;
+	left: -6px;
 }
 
 .ve-ui-educationPopup-shield {
@@ -49,8 +55,7 @@
 	left: 0;
 }
 
-.oo-ui-widget-disabled .ve-ui-pulsatingDot,
-.oo-ui-widget-disabled .ve-ui-stillDot {
+.oo-ui-widget-disabled .ve-ui-pulsatingDot {
 	display: none;
 }
 
diff --git a/modules/ve-mw/ui/tools/ve.ui.MWEducationPopupTool.js b/modules/ve-mw/ui/tools/ve.ui.MWEducationPopupTool.js
index 1fd75859af..77db976973 100644
--- a/modules/ve-mw/ui/tools/ve.ui.MWEducationPopupTool.js
+++ b/modules/ve-mw/ui/tools/ve.ui.MWEducationPopupTool.js
@@ -64,22 +64,19 @@ ve.ui.MWEducationPopupTool = function VeUiMwEducationPopupTool( config ) {
 
 	this.shownEducationPopup = false;
 	this.$pulsatingDot = $( '<div>' ).addClass( 've-ui-pulsatingDot' );
-	this.$stillDot = $( '<div>' ).addClass( 've-ui-stillDot' );
 	$shield = $( '<div>' ).addClass( 've-ui-educationPopup-shield' );
 	this.$element
 		.addClass( 've-ui-educationPopup' )
-		.append( $shield, this.popup.$element, this.$stillDot, this.$pulsatingDot );
+		.append( $shield, this.popup.$element, this.$pulsatingDot );
 	this.$element.children().not( this.popup.$element ).on( 'click', function () {
 		if ( !tool.shownEducationPopup ) {
 			if ( ve.init.target.openEducationPopupTool ) {
 				ve.init.target.openEducationPopupTool.popup.toggle( false );
 				ve.init.target.openEducationPopupTool.setActive( false );
 				ve.init.target.openEducationPopupTool.$pulsatingDot.removeClass( 'oo-ui-element-hidden' );
-				ve.init.target.openEducationPopupTool.$stillDot.removeClass( 'oo-ui-element-hidden' );
 			}
 			ve.init.target.openEducationPopupTool = tool;
 			tool.$pulsatingDot.addClass( 'oo-ui-element-hidden' );
-			tool.$stillDot.addClass( 'oo-ui-element-hidden' );
 			tool.popup.toggle( true );
 			$shield.remove();