Commit graph

12 commits

Author SHA1 Message Date
Timo Tijhof 8475d40b77 mw.ViewPageTarget: Disable pointer events on dimmed elements
Reduces event overhead and prevents accidental interaction with
content while loading, and with content sub while editing.

Change-Id: Ief997cd4d5cf444fb2ee0d28c709301d26e814f9
2015-04-01 01:46:22 +00:00
Ed Sanders 6d8fbd8221 Make loading progress bar determinate
Estimate loading times to show smooth loading progress.

Bug: T90622
Bug: T92456
Bug: T52206
Change-Id: Ic6e31a938b474c5a11c0c12302ec6c0ebc2c414d
2015-03-20 20:08:01 +00:00
Ed Sanders ba20a26292 mw.ViewPageTarget: Grey-out body content as soon as edit is clicked
Set 've-activated' as soon as edit is clicked, with a 've-loading' state.

This necessitates moving the relevant styles to mw.ViewPageTarget.init.css.

Change-Id: Ic9757cdbf63a2f72eda0dd03ff5588d79028ba0e
2015-03-18 17:56:28 +00:00
James D. Forrester 2f8b3e0d96 build: Bump copyright notices to 2015
Change-Id: Ie92dab7411116d3410195c3fb0a3513c664c0c30
2015-01-12 20:34:19 -08:00
suchetag 5c0c117537 Make spinner appear immediately when clicking edit
Moved the spinner code from ViewPageTarget to ViewPageTarget.init to make it appear immediately on clicking edit.
Bonus: also fixes the URL to add the parameter vesection when clicking a section edit link.

Bug: 65453
Change-Id: Ica33de675203cc0f0594b8362731c4e98a644313
2014-10-22 03:20:40 +05:30
Timo Tijhof 7dae6496b3 mw.ViewPageTarget: Get rid of FOUC on edit section brackets
We don't have a FOUC on the appearing of the 'edit' link. That
one is handled quite intelligently:
* Via the stylesheet that is also loaded in noscript mode, its
  (hidden) appearance is already predetermined. So as soon as
  those elements are seen by the browser they style correctly
  for users without JavaScript (display: none).
* This same stylesheet also hides it for users with JavaScript
  but where VE is not available (e.g. due to browser support).
  While ve-not-available is added very early on (before
  document ready), it could in theory cause a short FOUC, but
  that's okay. We simply don't know that VE isn't supported
  until then. We optimise for the common case (JavaScript
  enabled, VE available), while still ensuring that it is
  always hidden in noscript, and is hidden as soon as possible
  when VE turns out not to be available.

For some reason, one small detail (the little bit of whitespace
added inside the brackets), was left out of this and was
implemented by adding the class 'mw-editsection-expanded' to them
from a document ready handler.

* First step, get rid of the script that adds this class and
  use ve-available instead. That means they're styled
  correctly much earlier (we add the class to <html> before
  document ready). This can still cause a brief FOUC, though
  in most cases they're correct from the start.

* Step two, make brackets expand by default for script users,
  and let ve-not-available reset it. This way, like with edit tabs,
  a FOUC will never happen for ve-available. And even for
  ve-not-available, a FOUC is rare since we add it before
  document ready via <html> look-ahead styling.

There was still a brief reflow jump because of negative margins
between two paint events. One was undoing the other at a later
time. These negative margins are a remnant of when we were doing
animations (follows-up I4b9c47fd65a70). They were added to reduce
reflows and content shift, but were now actually causing them.

Removed "padding-right" from mw-editsection, and negative margin
from the brackets.

Also:

* Don't add inline 'style="direction: ltr;"' on every single
  editsection throughout the DOM. This was the only operation we
  were doing unconditionally. While I doubt the need of it in
  general, we can at least allow MediaWiki to do it right, and
  only add the override if needed. This saves quite a few DOM
  operations.

Change-Id: I7a729edc2cd4a66ebc0ad6935ffd02cb9b948bff
2014-05-09 12:20:24 +02:00
Krinkle 2dd888814a Revert "Converting ViewPageTarget CSS files to LESS"
We don't yet have any way to test or verify anything with less. Not the less
syntax, not the less compilation, not the resulting css code quality.

Using it at this point doesn't seem worth the cost of not having any of that.

This reverts commit 17ddf031fe.

Change-Id: I7e8ab90f7a9f77f5cf6d7baeab586d4e0332042e
2014-02-20 22:55:49 +00:00
kaldari 17ddf031fe Converting ViewPageTarget CSS files to LESS
Just doing simple nesting for now. No mix-ins or variables.

There are no actual style changes in this commit.

Change-Id: Ied29358d39703ca6d2c896c2d44d9cf397d51d4e
2014-02-20 13:55:29 -08:00
James D. Forrester 0ffd654bed Bump copyright like it's 2014
Change-Id: Ic469ebda2c061dc7da0b4c1625f43a7be55da4fa
2014-01-05 20:06:50 +08:00
Timo Tijhof 31e6950af0 Fix csslint warnings
Also:
* Added modules/syntaxhighlight to csslintignore because
  it is broken right now, so it's hard to fix those warnings
  without being able to verify it.
* Fixed a typo in the grunt-watch config that accessed an
  inexistent property.

Change-Id: Ib81572506786b6a1203c454d1b2b91bb6ae2a3de
2013-12-03 23:09:56 +01:00
Roan Kattouw ced2a8aa59 Move edit tab generation into PHP and make it more configurable
* Generate the edit tabs and the section edit links in PHP, with a
  fallback in JS for cases where we don't have them yet due to
  caching. But only change things if VE is enabled, and have the JS
  correct the state if the wrong cached HTML comes through.
* Make the order of the tabs/links and the messages to use as captions
  configurable
* Make the edit tabs and section edit links always be present in the
  page (regardless of namespace, user prefs, etc.) but be hidden and
  have JS unhide them (using html.ve-available) if appropriate
* Add appendix messages so we can do a superscript "beta" even in places
  where we can't use HTML in the message

VisualEditor.php:
* Add new hook registrations
* Remove edit link caption messages from the init init module because
  they're now added dynamically in VisualEditor.hooks.php
* Add a noscript CSS module so we can hide some things in JS-less
  environments
* Remove $wgVisualEditorTabLayout and replace it with
  $wgVisualEditorPosition
* Add config vars for link captions, with null causing us to use
  the default caption
* Add config vars for link caption appendices. Too many config vars
  but we'll clean that up later

VisualEditor.hooks.php:
* Dynamically add tab messages to the init init module
* Remove unused globals in onBeforePageDisplay()
* Add noscript CSS module
* Add a SkinTemplateNavigation hook that changes and reorders the edit
  tabs as appropriate
* Add a DoEditSectionLink hook that overwrites the edit section links
* Export the new config variables to JS

VisualEditor.i18n.php:
* Add beta appendix message
* Add a message for the default VE edit section link

ve.init.mw.ViewPageTarget.init.css:
* Remove the animation on the edit section links
* Darken the color of the brackets and the pipe from #ccc to #555
* Style the beta message to be superscript-like (but not real <sup> to
  avoid moving the baseline)

ve.init.mw.ViewPageTarget.noscript.css:
* Hide the VE edit tab, the pipe and the VE edit section link initally
  unless and until JS unhides

ve.init.mw.ViewPageTarget.init.js:
* Toggle .ve-not-available / .ve-available
* Edit tabs
** Only generate the the edit tabs if they're not already there from PHP
** Rewrite the edit tab generation to mirror what's being done in PHP
* Section edit links
** Same as for edit tabs
** Also add mw-visualeditor-expanded to pad the brackets

ve.init.mw.ViewPageTarget.js:
* #ca-ve-edit is now always the VE tab (and #ca-edit always the
  edit source tab) so update the .selected behavior accordingly

Change-Id: Idcb15faea7fabe5fe7578b1508079969b27d2469
2013-08-01 21:08:13 -07:00
Timo Tijhof eddd0b384a mw.ViewPageTarget.init: Move edit section to top init
Since we're now only loading the light-weight init on page load,
the section editing wasn't just deferred to after page load (like
it was before), but wasn't happening at all until you clicked
"Edit" (at which point the library loads). It only worked when
going back to "View" after "Edit".

Contrary to tab layout, edit section handling needs to be
accessible both in the top init and in the main target class
because we need to run it both at run time and after the user
has saved a page when we show them the updated page without
refresh. This is why we need to transfer the method at run time
and give the main class access to it as well.
Can't wait for bug 50707 to get rid of this mess...

Bug: 50731
Bug: 49993
Change-Id: Iab9c81222df7f1084179c3643d158374a89ca14b
2013-07-05 18:29:12 +00:00