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 <esand...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits