Commit graph

366 commits

Author SHA1 Message Date
James D. Forrester 23af88edc3 Create a subscript tool
Bug: 51612
Change-Id: Ia05e09a411213cbc035ad9dd3d3156d57f8e102c
2013-08-15 19:40:15 +00:00
James D. Forrester 34a37471c6 Create a superscript tool
Bug: 51611
Change-Id: I74b6418542927eeeb7e80d664a30fcaf07b93a13
2013-08-15 12:36:35 -07:00
Steven Zhang 3c65d830f2 Create an underline tool
Bug: 51609
Change-Id: I65246d7eeb154950c35a1cb70909a113080c2323
2013-08-15 12:16:01 -07:00
peter-coti 5014e122e3 Create strikethrough text style button
Experimental to avoid making toolbar too long

Bug: 51610
Change-Id: I1eb5b1361d6058a6e1533ab62c0aa7e21c9fc090
2013-08-07 16:14:19 +08:00
Trevor Parscal 2717ea1645 Add ve.ui.ToolGroup and use within toolbar setup
Objectives:

* Use a class for toolbar groups to add more functionality later
* Rename addTools method to setup

Changes:

*.php
* Add link to new file
* Move ui element classes up for more general use

ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js, ve.ui.Context.js,
ve.ui.SurfaceWidget.js
* Update use of addTools method

ve.ui.Tool.css, ve.ui.Toolbar.css
* Move styles between sheets

ve.ui.Toolbar.js
* Rename addTools to setup
* Use ve.ui.ToolGroup objects when building tools

ve.ui.ToolGroup.js
* New class, encapsulates tools

Change-Id: Ic3a643634a80a8ac7d6f6f47f031d001c7efaee7
2013-08-07 05:08:20 +00:00
Trevor Parscal a226716d70 Split ve.ui.Toolbar and ve.ui.SurfaceToolbar
Objective:

* Make it possible to make a toolbar without a surface

Changes:

*.php
* Links to new file

ve.ui.Toolbar.js, ve.ui.SurfaceToolbar.js
* Split toolbar into generic and surface specific classes

*.js
* Update symbol names

Change-Id: Ice063a2fb67b5ce5155cdc96a0d47af49eee48cb
2013-08-02 14:33:25 -07:00
jenkins-bot 6828804d27 Merge "Language Inspector UI" 2013-07-31 07:14:56 +00:00
Timo Tijhof 14343c7bf7 ve.ui.Toolbar: Refactor floating logic for performance
== Renamed methods ==

* enableFloating  -> enableFloatable
* disableFloating -> disableFloatable
* setPosition     -> float
* resetPosition   -> unfloat

== Scroll and resize event ==

Timeline for scroll event reduced from about half a dozen
"Recalculate style" and various forced "Paint" down to 0.

New timeline for scroll is clean (for me: from ~35 to ~59 fps):
* 1 Event (scroll)
* 1 Composite Layer

The composite layer action is the browser changing the viewport
to a different portion of the document drawing. Exactly the one
thing a simple scroll should do.

Timeline for resize event is still pretty crowded and low fps,
but it has improved. Further improvement would likely be around
using requestAnimation and going outside ve.ui.Toolbar.

== Changes ==

* New: ve.ui.Toolbar#initialize.
  Similar to what surface has. Users of Toolbar should decide
  whether to call enableFloatable, append it to the DOM at some
  point and then call initialize() once.

* Don't compute offset() every time.
  Eliminated by doing it once in #initialize. These 'top' and
  'left' offsets do not change.

* Don't compute outerWidth() and $window.width() every time.
  Reduced by doing it once in #initialize to compute the 'right'
  offset. Updating it only on resize.

* Don't set 'top' every time.
  This is already in the stylesheet. It was never set to anything
  else so the abstraction for it in #float has been removed.
  This also made it obvious that code for "ve-ui-toolbar-bottom"
  was unused and left behind. Tha class was only ever being
  removed from something (never added).
  The one addClass call for it was in a condition that is always
  false ("if top > 0").

* Don't set 'left' every time.
  Eliminated by doing it once in #float.

* Don't set 'right' every time.
  Reduced by no longer doing it on scroll. Done once in #float,
  and on resize after computing the new value for it.

* Remove no-op style operations.
  Wrapped methods in if-floatable, if-floated etc. to reduce a
  fair amount of easily avoided re-paint overhead.

* Avoid double re-paint in mw.ViewPageTarget.
  Though we prevent a lot of redundant re-paints now, whenever
  we do repaint we want to do it in 1 repaint instead of 2.

  ve.ui.Toolbar emits #toolbarPosition, which tells
  mw.ViewPageTarget to update toolbarTracker which would read
  the new $bar style properties and copy them over to the
  $toolbarTracker. However, this read operation forces the browser
  to do an immediate re-paint half-way just for $bar.

  Browsers only repaint when style properties are changed and
  JS has yielded. The exception to this is JS reading style
  properties: in that case the browser is forced to do those
  deferred repaints directly and reflect the new values.

  We can avoid this double repaint by passing the updated values
  as data instead of requiring the receiver to read the DOM (and
  thus a keep the deferred repaint). Now toolbarTracker can use
  them directly whilst the browser hasn't even repainted $bar yet.

== Clean up ==

* Redundant "border-radius: 0". This would reset something, but
  it never does. None of the things it inherits from set a
  border-radius. There is one subclass where toolbar is used
  with a border-radius (".ve-ui-surfaceWidget .ve-ui-toolbar-bar"
  sets a border-radius) which overrides this on purpose, so the
  default of 0 is redundant.

* Pattern "if ( .. ) addClass() else removeClass()" changed to:
  "toggleClass( , .. )"

Bug: 52014
Change-Id: I9be855148962eee068a77fe83e98eb20bbdcfeec
2013-07-30 01:47:54 +02:00
Moriel Schottlender 59079978ff Language Inspector UI
This is the language inspector UI engine with ULS core.
The Language Inspector works alongside ULS to choose and change language
blocks in text. The inspector was based on ve.ui.TextInputWidget and
now changed to inherit ve.ui.Widget and display details in a table
instead of an input textbox.

Added jQuery.ULS module:
* Repository: https://github.com/wikimedia/jquery.uls
* Latest Commit 728f112ffc90b03b50c0109487886a2647f12020
* Taken 'src' / 'images' and 'css' folders into modules/jquery.uls

Bug: 47759
Change-Id: I3c9fd6c135c05a54f6c7fc28c5962fc0a6677806
2013-07-29 00:38:59 -04:00
Ed Sanders fadd7c46a2 Code annotation button
Pretty straightforward, although we should start thinking about
grouping/hiding 'advanced' formatting options in the toolbar.

Making this button experimental for now until we've come up with
a way to deal with this problem.

Bug: 51590
Change-Id: Ieb1935b742aced4b883d8a194e6cb69be68473d0
2013-07-26 12:36:34 -07:00
Roan Kattouw 92c38eab85 The great directory split of 2013
Move all MW-specific files into the ve-mw directory, in preparation
for moving them out into a separate repo.

All MW-specific files were moved into a parallel directory structure
in modules/ve-mw . Files with both generic and MW-specific things were
split up. Files in ve/init/mw/ were moved to ve-mw/init/ rather than
ve-mw/init/mw ; they're still named ve.init.mw.* but we should change
that. Some of the test files for core classes had MW-specific test cases,
so those were split up and the test runner was duplicated; we should
refactor our tests to use data providers so we can add cases more easily.

Split files:
* ve.ce.Node.css
* ve.ce.ContentBranchNode.test.js (MWEntityNode)
* ve.ce.Document.test.js (some core test cases genericized)
* ve.dm.InternalList.test.js (uses mwReference test document)
* ve.dm.SurfaceFragment.test.js, ve.ui.FormatAction.test.js
** Made core tests use heading instead of mwHeading
** Updated core tests because normal headings don't break out of lists
** Moved test runners into ve.test.utils.js
* ve.ui.Icons-*.css
* ve.ui.Dialog.css (MW parts into ve.ui.MWDialog.css)
* ve.ui.Tool.css
* ve.ui.Widget.css (move ve-ui-rtl and ve-ui-ltr to ve.ui.css)

ve.dm.Converter.test.js: Moved runner functions into ve.test.utils.js

ve.dm.example.js:
* Refactored createExampleDocument so mwExample can use it
* Removed wgExtensionAssetsPath detection, moved into mw-preload.js
* Genericized withMeta example document (original version copied to mwExample)
* Moved references example document to mwExample

ve.dm.mwExample.js:
* Move withMeta and references example documents from ve.dm.example.js
* Add createExampleDocument function

ve-mw/test/index.php: Runner for MW-specific tests only

ve-mw/test/mw-preload.js: Sets VE_TESTDIR for Special:JavaScriptTest only

ve.ui.Window.js:
* Remove magic path interpolation in addLocalStyleSheets()
* Pass full(er) paths to addLocalStyleSheets(), here and in subclasses

ve.ui.MWDialog.js: Subclass of Dialog that adds MW versions of stylesheets

ve.ui.MW*Dialog.js:
* Subclass MWDialog rather than Dialog
* Load both core and MW versions of stylesheets that have both

ve.ui.PagedDialog.js: Converted to a mixin rather than an abstract base class
* Don't inherit ve.ui.Dialog
* Rather than overriding initialize(), provide initializePages() which the
  host class is supposed to call from its initialize()
* Rename onOutlineSelect to onPageOutlineSelect

ve.ui.MWMetaDialog.js, ve.ui.MWTransclusionDialog.js:
* Use PagedDialog as a mixin rather than a base class, inherit MWDialog

bullet-icon.png: Unused, deleted

Stuff we should do later:
* Refactor tests to use data providers
* Write utility function for SVG compat check
* Separate omnibus CSS files such as ve.ui.Widget.css
* Separate omnibus RL modules
* Use icon classes in ViewPageTarget

Change-Id: I1b28f8ba7f2d2513e5c634927a854686fb9dd5a5
2013-07-02 20:51:38 -07:00
Rob Moen c472b2fe4a Make local overlays local to surface and remove insane z-indexes
ve.ui.Surface.js
* Make local overlay a child of ve-ui-surface and a sibling to
  ve-ce-surface elements.
** This keeps local overlays relative to their surface and eliminates the
   need for insane z-indexes.

ve.ui.PopupWidget.js
* PopupWidget boundaries are now relative to ve-ce-surface and no longer
  protrude out

ve.ce.Node.css, ve.ui.Window.css
* Removal or replacement of insane z-indexes.

ve.ce.FocusableNode.js, ve.ce.ProtectedNode.js, ve.ce.ResizableNode.js,
ve.ui.Context.js
* Translate offsets from local overlay

ve.init.mw.ViewPageTarget-monobook.css,
ve.init.mw.ViewPageTarget-vector.css
* Skin specific z-indexes for global overlay

ve.init.mw.ViewPageTarget.js
* Applied direction specific mw class to ce.Surface vs ui.Surface to
  prevent mw content styles from being applied to ui elements.

ve.ui.Dialog.css
* Adjustments to surface inside of dialog so that relative offsets for
  local overlays can be properly calculated.

ve.ui.Surface.css
* Explicitly force .ve-ui-surface to be relative so that it's children can
  be relatively positioned.

ve.ui.Widget.css
* Removal of unnecessary font-size properties now that local overlay is
  sibling of surface.

ve.js
* Added get relative position helper method to translate position offsets
  from target parent

Bug: 50241
Change-Id: Ibadce404a2286bc5dcec48f0d9da89004dbbd867
2013-07-02 19:35:43 +00:00
Moriel Schottlender e30c346d1c Fix for edit links, RTL wikis with LTR interface
Added both bidi-isolation and directionality. Since the directionality
has to come from the user interface (and not the wiki dir itself) I had
to read the $('body') direction. The other option could be adding a
mw.config.get().userLanguageDir that picks up the interface directionality
on top of the wiki directionality.

Bug: 50543
Change-Id: I9a00e9545a46f13750ab0d118b23d05573ee1a2e
2013-07-01 21:18:42 -04:00
jenkins-bot 96f8b772cf Merge "Blacklist Firefox <= 10 per reports that it's broken" 2013-07-01 23:59:23 +00:00
James D. Forrester 88a88df370 Blacklist Firefox <= 10 per reports that it's broken
Bug: 50534
Change-Id: I732a6cceb0790bf22488e4db292b62c43276783f
2013-07-01 16:52:50 -07:00
jenkins-bot 4049e35151 Merge "Per its own documentation, make showMessage()'s wrap default to 'warning'" 2013-07-01 23:18:41 +00:00
Roan Kattouw 701ebd5b9c Per its own documentation, make showMessage()'s wrap default to 'warning'
This was producing some lovely <visualeditor-savedialog-label-undefined>
garbage.

Change-Id: I0852fea9088738d9a93e25bd3b104b9aa07c256d
2013-07-01 16:00:43 -07:00
jenkins-bot 518dd6247c Merge "Add GuidedTour survey about user gender" 2013-07-01 22:46:52 +00:00
Matthew Flaschen 3b4b0c3c89 Add GuidedTour survey about user gender
Disabled by default, enabled with $wgVisualEditorEnableGenderSurvey.

Change-Id: I2b4aba6a95a33474c3e68423d478aa78e57d86ad
2013-07-02 00:13:38 +02:00
Roan Kattouw c41f96cf6b Some basic async code in the initialization
Break setUpSurface into a bunch of parts that setTimeout() each other.
This breaks the initialization of the editor as a whole up into the
following phases:
0) Receive AJAX response, parse HTML
1) Build linear model data
2) Build DM tree
3) Build CE tree, CE DOM, create surface
4) Initialize surface, some UI initialization
5) Launch sanity check, remaining setup, unlock editor

This is a bit hacky right now, we'll probably want to refactor later.

ve.dm.InternalList.js:
* Allow construction without a dm.Document

ve.ui.Surface.js:
* Allow construction based on a dm.Document

Change-Id: Ibf48a7e85cd7376c8f6205ed165ff57e71e34c35
2013-07-01 13:02:10 -07:00
jenkins-bot 770dbaef8f Merge "Don't underline the 'user guide' link when hovering the tool menu" 2013-07-01 18:54:29 +00:00
James D. Forrester f06ab8b263 Don't underline the 'user guide' link when hovering the tool menu
There are wider issues about sub-tools here, but this fixes the most glaring issue
for now.

Change-Id: I5ff2d67642daea2f84ccc56fe391eee9ca01d099
2013-07-01 11:48:21 -07:00
jenkins-bot 3b6b29c1a5 Merge "mw.ViewPageTarget: Show save errors in save dialog instead of alert" 2013-07-01 18:38:23 +00:00
James D. Forrester 662d35178f Add user guide link to beta icon drop down
As part of this, put the 'help' icon next to the beta icon, make the
text not greyed-out (now that it's an actual action) and provide the
link.

On hover, all three items get underlined, which is irritating, however.

Bug: 50476
Change-Id: Id65968072b7134f5864bbd96acf34fd0c23fe17c
2013-07-01 11:07:08 -07:00
Timo Tijhof 1f1a1970be mw.ViewPageTarget: Show save errors in save dialog instead of alert
To trigger a save rejection from the api, set:
 $wgSpamRegex = '/spam/i';
and making an edit adding the word "spam" to a page.

Class changes:
* Rename message system in the save dialog from "warning" to
  "message" as it will now contain both warnings and errors.
  (css class, class property, method names, ..)

Localisation:
* Remove ugly hardcoded and wikitext-requiring "'''Warning:'''"
  prefix from the warning message, instead have a message for the
  word "Warning" and re-use this in #showMessage for each message
  of type "warning" (bolding applied in code instead of in i18n).
* Rename visualeditor-savedialog-dirtywarning to
  visualeditor-savedialog-warning-dirty and remove from
  VisualEditorMessagesModule.php as it no longer requires pre-
  processing from the server.

Clean up:
* Re-alphabetise the order of some messages.
* Clean up duplication and redundant logic in mw.Target#onSaveError
  and mw.ViewPageTarget#onSaveError.

Bug: 50350
Change-Id: I3daf631fb0d62ba88e05aa50c77c9940d61395a0
2013-07-01 16:41:12 +02:00
Timo Tijhof 4e546796aa mw: Implement support for ConfirmEdit and FancyCaptcha
* 'captcha' property from ConfirmEdit API is already exposed
  in ApiEdit and ApiVisualEditor through the 'edit' property
  in our response data.
* Add parameters 'captchaid' and 'captchaword' to ApiVisualEditor
  and mw.ViewPageTarget#getSaveOptions. ApiVisualEditor will
  forward these to ApiEdit which forwards them to FancyCaptcha.
* We display the captcha through a saveDialog warning.

Bug: 50356
Change-Id: Ia7d2102cba89d00ec8508e846061023b330ece4f
2013-06-29 20:42:23 -07:00
Timo Tijhof 656fd2ffd4 mw.ViewPageTarget: Support for non-paragraphs in #showWarning
We need this for captcha's. They'll be added and displayed as
a warning, and cleared like all others. But they shouldn't be
wrapped in a paragraph and aren't delivered as html text but
as a jQuery object (can't serialise to static html since we'll
have to keep a reference to the TextInputWidget and what not).

Change-Id: I3734fbd3c6f0270094db014bbc76d065a73ab918
2013-06-29 19:44:15 -07:00
Timo Tijhof 32b6729ce6 mw.Target: Use saveError's third parameter for response data
This parameter was documented as "HTTP status text" but this
was incorrectly copied from other events. The actual code
never passed anything other than null.

Now documenting it as API response data (if available, else null)

Change-Id: I88c8c525f3ca53fd47de634aec469be372884cfc
2013-06-30 02:01:35 +00:00
Roan Kattouw f538fcf6be mw.ViewPageTarget: Add sanity check for DOM roundtrip
The sanity check converts the linear model back to DOM, then
compares this DOM to the original DOM and rejects the deferred
if they are not equal.

The DOM creation has to be done synchronously (before we unlock
the surface), but the actual comparsion can be (and is) done
asynchronously.

To make the UI flow of the save dialog easier we just keep the
save button on the toolbar itself disabled until the sanity
check is done. Though this should finish before the user starts
editing the document (let alone start saving), we do add a class
to the button to indicate a progress cursor.

To simulate a slow sanity check, set the setTimeout in
startSanityCheck to 5000, load VE, make a change, hover the
button, and see it change from disabled + progress-cursor to
enabled after 5 seconds.

To simulate the sanity check failing, change !== to === in
the first "if" in startSanityCheck.

Bug: 47521
Bug: 50067
Change-Id: I04f71fe8e00c6257fbc953cc9de3323e24709b0f
2013-06-27 19:20:14 -07:00
Trevor Parscal 0aac4c7e60 Reference insertion, new and existing
Objectives:

* Split reference dialog (at least for now) an edit and an insert dialog
* Add reference search widget for selecting an existing source, or
  choosing to add a new one
* Abstract reference names, don't allow editing them and generate them
  when needed
* When editing groups, move the internal item and update all references
  to it
* Resolve name conflicts when moving a reference to a new group by
  generating a new list key

Bonus:

* Add getNodeGroups method to internal list
* Add getUniqueListKey method to internal list
* Add destroy functionality to ce.node to release events and references

Bug: 49733
Change-Id: Ib244ff6ad9b4cee1decfd9b9e1d3d4e9cdcfb78c
2013-06-27 18:11:31 -07:00
Roan Kattouw d6594dd612 Fix edit | edit source link tabbing in Firefox
When you selected the "edit" link by tabbing, the links would expand.
In Chrome, you could then tab to the "edit source" link, but in Firefox,
the links would just contract back and you couldn't reach "edit source".

This happened because in Chrome, the "edit source" link is already
considered to be focused when the blur event happens on the "edit" link.
But in Firefox, this is not the case: the blur fires first, and only
after that does Firefox determine what to focus next.

Fixed by waiting 100ms to contract after blur, just like we do on
mouseleave.

Change-Id: I9a38b629ca5e580003d82a3dca8dbf7564486fa0
2013-06-27 17:39:11 -07:00
jenkins-bot efd5882f88 Merge "Fix bug where the floating toolbar was on top of the save dialog" 2013-06-28 00:23:15 +00:00
Trevor Parscal 20585c956a Close dialogs on escape
Objective:

* Make the escape key close dialogs, like pressing the X button
* Auto-focus the iframe on window open

Bonus:

* Add ESCAPE and SHIFT to ve.Keys and use instead of hardcoding numbers
* Use ve.Keys in some other places too

Bug: 49809
Change-Id: Ibf1fce5e24efcd83d9e1465c3cdaac24ff3fb45d
2013-06-27 17:00:35 -07:00
Rob Moen 5046ff8e75 Init surface after toolbar is setup vs. before.
This fixes all tools being loaded with proper state on mw integration.

Bug: 50141
Change-Id: I501b1efec2a2eedbf16a191a8be6b96b02290e09
2013-06-27 16:18:27 -07:00
Roan Kattouw c219771a34 Fix bug where the floating toolbar was on top of the save dialog
The save dialog has z-index: 3;, which succeeds in overlaying it on the
toolbar in its normal position, but fails once the toolbar starts
floating, because the floating toolbar has z-index: 100;

In practice this meant that if you were scrolled down and the toolbar
was floating, you could open the save dialog just fine, but you
couldn't close it because its controls were below rather than on top of
the toolbar.

Hacked around this by detecting the floating-ness in the toolbarPosition
handler and setting a class on the toolbar tracker accordingly.
There may be a more elegant way to fix this; an actual UI engineer
should figure that out, not me :)

Bug: 50324
Change-Id: I8c6ab1026705d00baa20f115255d0d7e74ee72bf
2013-06-27 22:45:50 +00:00
Timo Tijhof e3cdfaa9fe mw.ViewPageTarget: Performance improvements for section edit links
Follows-up I4b9c47fd65a700a:
* Remove unused closingBracketSymbol.
* Moving veSectionEditUri and sectionEditUri inline as it is
  only used once. This will allow it to be easily dereferenced
  (instead of likely staying in memory due to being claimed by
  remaining closures "expand" and "expandSoon" which will
  continue to claim and enjoy access to this scope.
  Also changed it to use the attr() callback so that we
  don't access `$editLink.attr( 'href' )` twice.
* Add various comments explaining this non-obvious approach.
  Though it makes sense (eventually) and more elaborate details
  are in the original commitmsg, that is no excuse for a 100 line
  function without a single comment, especially with all these
  things going on.
* Use "shrink" instead of "contract" (seems more common in
  context of web UI elements and less ambgiuous in English).
* Remove redundant toString in `new mw.Uri( veEditUri )`.
  Aside from redundant, it also had more overhead (serialising
  uri object to string and re-parsing). It revoked its ability
  to make an efficient clone by taking the mw.Uri object as input
  as opposed to having to parse it again. mw.Uri#clone does the
  same internally.
* Avoid variable names like $this, that or self. Using a more
  descriptive name instead.
* Re-use $closingBracket instead of using last() 3 times which
  makes 3 clones of the jQuery object with the same last element
  in it.
* Refactor odd swapping of closingBracket-hide and
  middleBracket-clone-show.
  It now keeps the original opening/edit/closing in tact and adds
  devider/hidden/edit-source/outerClosing at the end.

Change-Id: I5f093f2927b769fed0c6d1a40f99e73f9b653b9a
2013-06-27 13:11:38 -07:00
Roan Kattouw cfc65ae9e5 Followup to 39fdb135f8: not everyone has a Mac, so check e.ctrlKey too
Bug: 49993
Change-Id: I5245ab19ae16b79d2c562c05b94649a58e04a4fd
2013-06-26 16:35:18 -07:00
jenkins-bot 1a0fe26819 Merge "mw.ViewPageTarget: Don't handle edt tab clicks from special mouse buttons" 2013-06-26 21:09:36 +00:00
Timo Tijhof 39fdb135f8 mw.ViewPageTarget: Don't handle edt tab clicks from special mouse buttons
Regular mouse button click is normalised to which=1 by jQuery.

Change-Id: I08a711d8251613144ba6b463d4d240aedd98bb2a
2013-06-26 13:56:25 -07:00
jenkins-bot 3b0d5734fb Merge "Remove the preference to use the wikitext editor for editing sections" 2013-06-26 20:48:49 +00:00
jenkins-bot d323477b21 Merge "Show "edit source" section edit links in addition to VE ones" 2013-06-26 20:43:03 +00:00
MatmaRex 7a2811b6de Remove the preference to use the wikitext editor for editing sections
No longer useful now that I4b9c47fd exposes both ways of section
editing.

Change-Id: I93958413b4b6ad870306d9f06f540cdde47f7499
2013-06-26 19:25:29 +00:00
Trevor Parscal c1ea21739f Show "edit source" section edit links in addition to VE ones
Objective:

* Provide quick access to section edit links for both source and visual
  editing

Story:

After using this prototype of my mockup, I realized how bad my mockup
was. Hooray for prototyping!

The issues were twofold:

1. Adding down-arrows to the edit links made the page look worse, and
was sure to incite rage and panic throughout the community.
2. The menu was just too heavy. Matmarex made an observation early on
after seeing it, that it wasn't very "Vector", and while I agreed, at
the time I didn't have any better ideas.

Thank you to Matma Rex for prototyping this feature. Aparently there was
also a previous attempt (I13bbb9549). We appreciate your help.

The new design is simple.

* Section edit links look normal
* On hover or focus, the edit source link also appears next to it

To make the two links look separate, we needed a divider. To make the
divider look good we needed to add space around it. To balance the
space, we needed to add space to the brackets. To avoid changing the
view, we needed to only add space to the brackets on hover. To avoid
the text moving around, we needed to make the brackets move away from
the text, rather than the text move away from the brackets. To make
this change smooth, we needed to use transitions. To make the links not
force the heading to wrap in one state but not the other, we needed to
reserve the space, using visibility rather than display. To reserve the
space we had to use closing brackets as spacers, hiding/showing one of
them on mouse enter/leave and leaving the other always hidden. To avoid
the right bracket from getting clipped by the edge of the screen when in
expanded mode, we needed to add a bit of padding to the right side of the
section edit link top level span. To prevent the extra links from
flashing as you move your mouse down the page, we needed to wait 100ms
before showing or hiding them due to mouse enter/leave.

We use negative margins to move the brackets. Animation implemented
using CSS transitions. We bring the pipe divider in from the core
'pipe-separator' message.

To style the brackets independently we needed to wrap them in spans and
add classes to them. Change Id27555c6 in core will make the wrapping
unnecessary, but the two should still get along just fine.

Interestingly, we needed to @noflip the bracket styles because CSS
Janus flipping is triggered on UI language, but the brackets need to be
styled according to the content language.

Changes:

ve.init.mw.ViewPageTarget.css
* Add styles for extra section edit link components

ve.init.mw.ViewPageTarget.js
* Add edit source link, and make it visible when the mouse is over the
heading or either section edit link is focused

*.php
* Links to new messages

Bug: 48429
Change-Id: I4b9c47fd65a700a81c880144247fec524edff7e5
2013-06-26 12:13:44 -07:00
Trevor Parscal c2196b1fe7 Remove use of filter property for CSS opacity
Was used for IE8 support, no longer needed.

Change-Id: I1e7a1e676022dd7607c808bd44848cbf22a9e958
2013-06-25 16:44:06 -07:00
jenkins-bot 0c094837fb Merge "Place cursor at start of paragraph, not heading, when section-editing" 2013-06-24 21:30:18 +00:00
jenkins-bot 488664e3d2 Merge "Scroll to correct offset after using a section edit link" 2013-06-24 21:29:31 +00:00
Ed Sanders 138b9365c2 Place cursor at start of paragraph, not heading, when section-editing
Also checks for subheadings, i.e. we keep moving forward one sibling
as long as the next sibling is a heading of higher order than the
previous one. If the heading is of the same or lower order then we
assume there is an empty section, so we just stop.

Bug: 49563
Change-Id: I6fcc463aeeae40278f5caf04ae251c8ecfe65472
2013-06-24 22:27:01 +01:00
Ed Sanders 983847bfbc Setup section edit links again after page save
Bug: 49620
Change-Id: Idf938c0dc8535c30ce63a05d56abeee210a67380
2013-06-24 22:22:54 +01:00
Ed Sanders 1889495aa2 Scroll to correct offset after using a section edit link
Needs to wait 200ms so it account for toolbar height.

Bug: 49563
Change-Id: I3a57e64f54289a3263814b4fbfe00c63de4a490b
2013-06-24 19:52:24 +01:00
Ed Sanders 2352613b66 Code style fix: (X) -> ( X )
Change-Id: I7f3ac95621f70d9a89e70e9a51905673240cb51f
2013-06-24 18:51:59 +01:00