From c7cb4ecee0e6a4788093bef246ef0720e0b99e70 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Thu, 5 Jul 2018 15:25:35 -0700
Subject: [PATCH] Limit editor text area styles to where they are needed

Currently we load textarea styles across all pages. However, in practice
textareas only show up in the edit page and inside our JavaScript overlays

To avoid loading these styles as rendering blocking CSS

Additional changes:
* Drop css reset for textarea so that textareas where unstyled
have sensible defaults. Note given the usage of OOUI and MediaWiki UI
this should be minimal/no disruption.
* For consistency intentionally change the padding of the non-js editor
to be consistent with other textareas
* The padding-left/padding-right rules currently override the default rule
so consolidate them into one single rule

Note:
* This will not break non-JavaScript editor mode as the module
mediawiki.action.edit.styles is loaded on that page as a render blocking
style.

Bug: T199000
Depends-On: I1ab170fc4089b0c8129a3e62ee78efad1c6709fa
Change-Id: I91743fdf1942a1b1b750422e973bf98fc4d106db
---
 minerva.less/minerva.mixins.less                     | 9 +++++++++
 resources/skins.minerva.base.reset/reset.less        | 2 +-
 resources/skins.minerva.base.styles/common.less      | 8 --------
 resources/skins.minerva.base.styles/ui.less          | 1 -
 skinStyles/mediawiki.action.edit.styles/minerva.less | 5 +++++
 skinStyles/mobile.startup/Overlay.less               | 4 ++++
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/minerva.less/minerva.mixins.less b/minerva.less/minerva.mixins.less
index a7a76ed..6de0a91 100644
--- a/minerva.less/minerva.mixins.less
+++ b/minerva.less/minerva.mixins.less
@@ -2,6 +2,15 @@
 @import 'minerva.variables.less';
 @import 'mediawiki.mixins.animation.less';
 
+.editor-textarea() {
+	// stylelint-disable-next-line no-descending-specificity
+	.box-sizing( border-box );
+	width: 100%;
+	// Note if a textarea has a .mw-ui-input class, this may be overridden
+	padding: 10px @contentPadding 10px @contentPadding;
+	resize: none;
+}
+
 // Generic mixin for applying styles to text that accompanies/adds context to workflows
 .secondary-text() {
 	font-size: 0.9em;
diff --git a/resources/skins.minerva.base.reset/reset.less b/resources/skins.minerva.base.reset/reset.less
index a2e32b2..29e3210 100644
--- a/resources/skins.minerva.base.reset/reset.less
+++ b/resources/skins.minerva.base.reset/reset.less
@@ -12,7 +12,7 @@ small, strike, strong, sub, sup, tt,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
-input, textarea, button, select,
+input, button, select,
 audio, video {
 	margin: 0;
 	padding: 0;
diff --git a/resources/skins.minerva.base.styles/common.less b/resources/skins.minerva.base.styles/common.less
index 3ef7932..43507be 100644
--- a/resources/skins.minerva.base.styles/common.less
+++ b/resources/skins.minerva.base.styles/common.less
@@ -33,14 +33,6 @@
 	.box-sizing( border-box );
 }
 
-textarea {
-	padding: 5px 0 5px 5px;
-	width: 100%;
-	resize: none;
-	// stylelint-disable-next-line no-descending-specificity
-	.box-sizing( border-box );
-}
-
 // We hide the table of contents unless the user is viewing in tablet resolution or higher
 .toc-mobile,
 // Table of contents as provided by parser has no styling, this is a temporary measure until we are able
diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less
index 01fa5ed..0819e36 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -279,7 +279,6 @@ input.search {
 .overlay .content-header,
 .overlay .panel,
 .page-list.side-list .list-thumb,
-.editor-overlay .wikitext-editor,
 .page-list li,
 .topic-title-list li,
 .site-link-list li,
diff --git a/skinStyles/mediawiki.action.edit.styles/minerva.less b/skinStyles/mediawiki.action.edit.styles/minerva.less
index 03a8048..01dac35 100644
--- a/skinStyles/mediawiki.action.edit.styles/minerva.less
+++ b/skinStyles/mediawiki.action.edit.styles/minerva.less
@@ -2,6 +2,11 @@
 @import '../../minerva.less/minerva.mixins';
 
 .mw-editform {
+
+	textarea {
+		.editor-textarea();
+	}
+
 	.editHelp, .cancelLink {
 		display: none;
 	}
diff --git a/skinStyles/mobile.startup/Overlay.less b/skinStyles/mobile.startup/Overlay.less
index 7c54128..e064060 100644
--- a/skinStyles/mobile.startup/Overlay.less
+++ b/skinStyles/mobile.startup/Overlay.less
@@ -4,6 +4,10 @@
 .overlay {
 	padding-top: @headerHeight;
 
+	textarea {
+		.editor-textarea();
+	}
+
 	> ul, button {
 		width: @headerHeight;
 	}