Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/290653
Change subject: Genericise target initialisation across namespaces
......................................................................
Genericise target initialisation across namespaces
Define $editableContent on target construction, and mark
all non-ancestor nodes between that at the target container
as uneditable (50% opacity, no pointer events).
Bug: T58289
Change-Id: I7fe51104bd5aa1bd53ffc604e5f02752c7553578
---
M extension.json
M modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
M modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
M modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
M modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-monobook.css
M modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-vector.css
M modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.init.js
M modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
M modules/ve-mw/init/ve.init.mw.ArticleTarget.js
9 files changed, 101 insertions(+), 95 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/53/290653/1
diff --git a/extension.json b/extension.json
index ab5838d..2a6206c 100644
--- a/extension.json
+++ b/extension.json
@@ -99,6 +99,8 @@
"VisualEditorTransitionDefault": false,
"VisualEditorAvailableNamespaces": {
"User": true,
+ "File": true,
+ "Category": true,
"_merge_strategy": "array_plus"
},
"VisualEditorSkinToolbarScrollOffset": [],
diff --git
a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
index e1a0208..3fb1da0 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
@@ -5,24 +5,19 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
-.ve-init-mw-desktopArticleTarget {
+.ve-init-mw-desktopArticleTarget-toolbar {
/* Enforce different font-size for all UI elements of VisualEditor. The
difference is tiny, but
enough to make the icon containers 23.813px rather than 24px and
thus the icons blurry */
- font-size: 1.00787401575em; /* 0.8em / x-small / 127% */
-}
-
-.ve-init-mw-desktopArticleTarget .mw-body-content,
-.ve-ui-overlay-global .mw-body-content {
- /* Match skin's font-size for the surface content */
- font-size: 0.9921875em; /* 1/1.00787401575 */
-}
-
-.ve-init-mw-desktopArticleTarget-toolbar {
- /* 1/1.00787401575 */
+ /* 1/ ( 0.8em / x-small / 127% ) */
margin: -0.9921875em;
margin-bottom: 0;
}
+.ve-ui-overlay .mw-body-content {
+ /* Fix font-size for surfaces inside UI overlays */
+ font-size: 0.9921875em; /* 1/ ( 0.8em / x-small / 127% ) */
+}
+
.ve-active .ve-init-mw-desktopArticleTarget-originalContent {
padding-top: 0.9921875em;
}
diff --git
a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
index f8fdd60..63452e8 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
@@ -19,23 +19,19 @@
part of it instead of its parent, thus making it treat the area as part
of content editable.
*/
- /* 0.8/0.8, 1/0.8 */
- margin: 0 -1.25em -1.25em -1.25em;
- padding-bottom: 1.25em;
+ /* 1/0.875 */
+ margin: 0 -1.14286em -1.14286em -1.14286em;
+ padding-bottom: 1.14286em;
}
-.ve-active .ve-init-mw-desktopArticleTarget-originalContent {
- padding-top: 1.25em;
-}
-
-.ve-active .ve-init-mw-target-surface
.ve-init-mw-desktopArticleTarget-originalContent {
- padding-left: 1.25em;
- padding-right: 1.25em;
+.ve-deactivating .ve-init-mw-desktopArticleTarget-originalContent,
+.ve-activated .ve-init-mw-desktopArticleTarget-originalContent {
+ padding-top: 1em;
}
.ve-init-mw-target-surface .ve-ce-documentNode,
.ve-init-mw-target-surface .ve-ui-surface-placeholder {
- padding: 0 1.143em; /* surface-margin-left (1em) / (mw-body-content
font-size) 0.875em */
+ padding: 0 1.14286em; /* 1/0.875 */
}
.mw-body .ve-init-mw-target-surface .ve-ui-surface-placeholder > * {
@@ -45,19 +41,8 @@
border: 0;
}
-.ve-init-mw-desktopArticleTarget {
- /* Enforce different font-size for all UI elements of VisualEditor */
- font-size: 0.8em;
-}
-
-.ve-init-mw-desktopArticleTarget .firstHeading {
- /* Restore 1.8em font size of page title */
- font-size: 2.25em; /* 1.8/0.8 */
-}
-
-.ve-init-mw-desktopArticleTarget .mw-body-content,
-.ve-ui-overlay-global .mw-body-content {
- /* Match skin's font-size for the surface content */
+.ve-ui-overlay .mw-body-content {
+ /* Fix font-size for surfaces inside UI overlays */
font-size: 1.09375em; /* 0.875/0.8 */
}
@@ -96,23 +81,19 @@
/* High-definition-specific styles (because Vector adds 1em to the leftNav if
width is 982px+ */
@media screen and ( min-width: 982px ) {
.ve-init-mw-target-surface {
- /* 0.8/0.8, 1.5/0.8 */
- margin: 0 -1.875em -1.875em -1.875em;
- padding-bottom: 1.875em;
+ /* 1.5/0.875 */
+ margin: 0 -1.71429em -1.71429em -1.71429em;
+ padding-bottom: 1.71429em;
}
- .ve-active .ve-init-mw-desktopArticleTarget-originalContent {
- padding-top: 1.875em;
- }
-
- .ve-active .ve-init-mw-target-surface
.ve-init-mw-desktopArticleTarget-originalContent {
- padding-left: 1.875em;
- padding-right: 1.875em;
+ .ve-deactivating .ve-init-mw-desktopArticleTarget-originalContent,
+ .ve-activated .ve-init-mw-desktopArticleTarget-originalContent {
+ padding-top: 1.25em;
}
.ve-init-mw-target-surface .ve-ce-documentNode,
.ve-init-mw-target-surface .ve-ui-surface-placeholder {
- padding: 0 1.714em; /* surface-margin-left (1.5em) /
(mw-body-content font-size) 0.875em */
+ padding: 0 1.71429em; /* surface-margin-left (1.5em) /
(mw-body-content font-size) 0.875em */
}
.ve-init-mw-desktopArticleTarget-toolbar {
diff --git a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
index ae7f264..30f812c 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
@@ -22,16 +22,12 @@
.ve-activated #toc,
.ve-activated #siteNotice,
.ve-activated .mw-indicators,
-/* Most of bodyContent can be hidden as VE has an equivalent of most children
- in ve-init-target (sibling of #bodyContent). However, we can't hide it
- completely as subs should remain visible (for persistence with read mode),
- and ve-ui-mwTocWidget is also part of #bodyContent. */
-.ve-active #bodyContent > :not( #siteSub ):not( #contentSub ):not(
.ve-ui-mwTocWidget ),
.ve-activated #t-print,
.ve-activated #t-permalink,
.ve-activated #p-coll-print_export,
.ve-activated #t-cite,
-.ve-deactivating .ve-ui-surface {
+.ve-deactivating .ve-ui-surface,
+.ve-active .ve-init-mw-desktopArticleTarget-editableContent {
display: none;
}
@@ -43,11 +39,13 @@
overflow: hidden;
}
-.ve-activated #bodyContent,
-.ve-activated #firstHeading {
- opacity: 0.6;
- /* TODO: Support IE9 with JS events */
+/* While loading, everything except the progress bar */
+.ve-loading #content > :not( .ve-init-mw-desktopArticleTarget-loading-overlay
),
+/* Once activated, everything except the progress bar and the edit target */
+.ve-activated .ve-init-mw-desktopArticleTarget-uneditableContent {
+ /* IE9 is supported with JS events */
/* stylelint-disable no-unsupported-browser-features */
+ opacity: 0.5;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
diff --git a/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-monobook.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-monobook.css
index cf28eb4..f10931c 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-monobook.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-monobook.css
@@ -5,8 +5,16 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
+.ve-init-mw-desktopArticleTarget-toolbar,
+.ve-ui-debugBar,
.ve-ui-overlay-global {
- /* Enforce different font-size for all UI elements of VisualEditor */
+ /* Enforce different font-size for all UI elements of VisualEditor. The
difference is tiny, but
+ enough to make the icon containers 23.813px rather than 24px and
thus the icons blurry */
+ font-size: 1.00787401575em; /* 0.8em / x-small / 127% */
+}
+
+/* Global overlay is outside the #globalWrapper so apply the 127% font size
fix */
+.ve-ui-overlay-global {
font-size: 1.28em; /* 0.8em / x-small */
}
diff --git a/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-vector.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-vector.css
index d471c07..7f1f050 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-vector.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-vector.css
@@ -5,11 +5,19 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
-.ve-ui-overlay-global {
+.ve-init-mw-desktopArticleTarget-toolbar,
+.ve-ui-debugBar,
+.ve-ui-overlay {
/* Enforce different font-size for all UI elements of VisualEditor */
font-size: 0.8em;
}
+/* Fix font styles for overlays inside mw-body-content */
+.mw-body-content .ve-ui-overlay {
+ font-size: 0.914286em; /* 0.8/0.875 */
+ line-height: normal;
+}
+
/* Slug animation needs more specific rules and skin-specific target margins */
.mw-body p.ve-ce-branchNode-newSlug {
margin: -0.3em 0 -0.1em 0;
diff --git a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.init.js
b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.init.js
index 53cae13..40ec83f 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.init.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.init.js
@@ -158,7 +158,7 @@
}
}
} );
- $( '#content' ).append( target.$element
);
+ target.setContainer( $( '#content' ) );
return target;
}, function ( e ) {
mw.log.warn( 'VisualEditor failed to
load: ' + e );
diff --git a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
index 5a4e023..1687e5b 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
@@ -17,8 +17,10 @@
* @param {Object} config Configuration options
*/
ve.init.mw.DesktopArticleTarget = function VeInitMwDesktopArticleTarget(
config ) {
- // A workaround, as default URI does not get updated after pushState
(bug 72334)
- var currentUri = new mw.Uri( location.href );
+ var $content,
+ // A workaround, as default URI does not get updated after
pushState (bug 72334)
+ currentUri = new mw.Uri( location.href ),
+ namespaceIds = mw.config.get( 'wgNamespaceIds' );
// Parent constructor
ve.init.mw.DesktopArticleTarget.super.call(
@@ -73,9 +75,27 @@
this.events = new ve.init.mw.ArticleTargetEvents( this );
this.$originalContent = $( '<div>' ).addClass(
've-init-mw-desktopArticleTarget-originalContent' );
+ switch ( mw.config.get( 'wgNamespaceNumber' ) ) {
+ case namespaceIds[ '' ]:
+ this.$editableContent = $( '#mw-content-text' );
+ break;
+ case namespaceIds.category:
+ // Put contents in a single wrapper
+ // TODO: Fix upstream
+ $content = $( '#mw-content-text > :not(
.mw-category-generated )' );
+ this.$editableContent = $( '<div>' ).prependTo( $(
'#mw-content-text' ) ).append( $content );
+ break;
+ case namespaceIds.file:
+ this.$editableContent = $( '#mw-imagepage-content' );
+ break;
+ }
+ this.$editableContent.addClass(
've-init-mw-desktopArticleTarget-editableContent' );
+
// Initialization
this.$element
.addClass( 've-init-mw-desktopArticleTarget' )
+ // The following classes can be used here:
+ .addClass( 've-init-mw-desktopArticleTarget-ns-' + (
mw.config.get( 'wgCanonicalNamespace' ).toLowerCase() || 'main' ) )
.append( this.$originalContent );
if ( history.replaceState ) {
@@ -166,6 +186,16 @@
*/
/* Methods */
+
+/**
+ * Set the container for the target, appending the target to it
+ *
+ * @param {jQuery} $container Container
+ */
+ve.init.mw.DesktopArticleTarget.prototype.setContainer = function (
$container ) {
+ $container.append( this.$element );
+ this.$container = $container;
+};
/**
* Verify that a PopStateEvent correlates to a state we created.
@@ -455,8 +485,7 @@
*/
ve.init.mw.DesktopArticleTarget.prototype.afterActivate = function () {
$( 'html' ).removeClass( 've-activating' ).addClass( 've-active' );
- // Move original content inside the surface for viewport calculations
- this.getSurface().$element.prepend( this.$originalContent );
+ this.$editableContent.after( this.getSurface().$element );
if ( !this.editingTabDialog ) {
// We have to focus the page after hiding the original content,
otherwise
// in firefox the contentEditable container was below the view
page, and
@@ -564,9 +593,6 @@
this.getToolbar().$actions.empty();
}
- // Move original content back out of the surface
- this.$element.prepend( this.$originalContent );
-
// Check we got as far as setting up the surface
if ( this.getSurface() ) {
if ( this.active ) {
@@ -593,6 +619,9 @@
// Move original content back out of the target
target.$element.parent().append(
target.$originalContent.children() );
+ $( '.ve-init-mw-desktopArticleTarget-uneditableContent' )
+ .off( '.ve-target' )
+ .removeClass(
've-init-mw-desktopArticleTarget-uneditableContent' );
mw.hook( 've.deactivationComplete' ).fire( target.edited );
} );
@@ -1102,7 +1131,7 @@
* Page modifications for switching to edit mode.
*/
ve.init.mw.DesktopArticleTarget.prototype.transformPage = function () {
- var uri;
+ var uri, $content;
// Deselect current mode (e.g. "view" or "history"). In skins like
monobook that don't have
// separate tab sections for content actions and namespaces the below
is a no-op.
@@ -1114,6 +1143,16 @@
// Move all native content inside the target
this.$originalContent.append( this.$element.siblings() );
+
+ // Mark every non-direct ancestor between editableContent and the
container as uneditable
+ $content = this.$editableContent;
+ while ( $content && !$content.parent().is( this.$container ) ) {
+ $content.prevAll().addClass(
've-init-mw-desktopArticleTarget-uneditableContent' );
+ $content.nextAll().addClass(
've-init-mw-desktopArticleTarget-uneditableContent' );
+ $content = $content.parent();
+ }
+ // Support IE9: Disable links
+ $( '.ve-init-mw-desktopArticleTarget-uneditableContent' ).on(
'click.ve-target', function () { return false; } );
// Push veaction=edit url in history (if not already. If we got here by
a veaction=edit
// permalink then it will be there already and the constructor called
#activate)
@@ -1226,8 +1265,7 @@
ve.init.mw.DesktopArticleTarget.prototype.replacePageContent = function (
html, categoriesHtml, displayTitle, lastModified, contentSub
) {
- var $editableContent, $imgContent,
- $content = $( $.parseHTML( html ) );
+ var $content = $( $.parseHTML( html ) );
if ( lastModified ) {
// If we were not viewing the most recent revision before (a
requirement
@@ -1245,23 +1283,6 @@
) );
}
- $imgContent = $( '#mw-imagepage-content' );
- if ( $imgContent.length ) {
- // On file pages, we only want to replace the (local)
description.
- $editableContent = $imgContent;
- } else if ( $( '#mw-pages' ).length ) {
- // It would be nice if MW core did this for us...
- if ( !$( '#ve-cat-description' ).length ) {
- $( '#mw-content-text > :not(div:has(#mw-pages))'
).wrapAll(
- $( '<div>' )
- .attr( 'id', 've-cat-description' )
- );
- }
- $editableContent = $( '#ve-cat-description' );
- } else {
- $editableContent = $( '#mw-content-text' );
- }
-
// Remove any VE-added redirectMsg
$( '.redirectMsg' ).remove();
@@ -1275,7 +1296,7 @@
.on( 'click', mw.libs.ve.onEditSectionLinkClick );
}
- mw.hook( 'wikipage.content' ).fire( $editableContent.empty().append(
$content ) );
+ mw.hook( 'wikipage.content' ).fire(
this.$editableContent.empty().append( $content ) );
if ( displayTitle ) {
$( '#content #firstHeading' ).html( displayTitle );
}
diff --git a/modules/ve-mw/init/ve.init.mw.ArticleTarget.js
b/modules/ve-mw/init/ve.init.mw.ArticleTarget.js
index 44c6fff..73001f7 100644
--- a/modules/ve-mw/init/ve.init.mw.ArticleTarget.js
+++ b/modules/ve-mw/init/ve.init.mw.ArticleTarget.js
@@ -1462,13 +1462,6 @@
surface.$element.addClass( this.protectedClasses );
- // Apply mw-body-content to the view (ve-ce-surface).
- // Not to surface (ve-ui-surface), since that contains both the view
- // and the overlay container, and we don't want inspectors to
- // inherit skin typography styles for wikipage content.
- surface.getView().$element.addClass( 'mw-body-content' );
- surface.$placeholder.addClass( 'mw-body-content' );
-
return surface;
};
--
To view, visit https://gerrit.wikimedia.org/r/290653
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7fe51104bd5aa1bd53ffc604e5f02752c7553578
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
