And other focus behavior fixes.
ve.ce.Surface.prototype.focus:
* Restore focus to the pasteTarget if a focusedNode was selected.
This function is invoked when a dialog is closed, and we were
always focusing the documentNode, which means the selection was
restored incorrectly when the selection was really in the pasteTarget.
ve.ce.Surface.prototype.documentOnFocus:
* Don't rerender the model selection if the documentNode was focused but
a focusedNode is selected. Otherwise the user can never deselect a
focusedNode.
ve.ce.Surface.prototype.onModelSelect:
* Rerender the selection even if prev === next. This function was
already called as a means to rerender a lost selection, and it didn't
work if it so happened that the selection was still the same and was
on a focusedNode.
* Clear the surfaceObserver state when moving focus from the
documentNode to the pasteTarget. If we don't do this, then placing
the selection back in the documentNode at the exact same place where
it was before will not be noticed by the observer.
ve.ui.Context.prototype.onSurfaceFocus:
* Hide the context only when an inspector is open, not just when the
context popup is visible. This ensures that the context is still
hidden when the user clicks out of an inspector, but fixes a bug
where the context was hidden when the selection was restored on
an inspectable focusedNode.
Bug: 58090
Change-Id: I0658f025a9c6005d769fd0291380fcb9c1ba4f32
Let's experiment with this via our local Gruntfile. If it works
fine we can install it in Jenkins (similar to node-csslint).
Verify through $ npm install && npm test;
Fixed all outstanding violations.
Also:
* Added syntaxhighight to ignore.
* Added imetests (which contain unformatted JSON) to ignore.
* In ve.dm.ModelRegistry#matchTypeRegExps, removed redundant
!! cast from the [+!!withFunc] statement which was hitting
a bug in node-jscs. All callers to this local private function
pass a literal boolean true/false so no need to cast it.
* Removed "/* key .. , value */" from ve.setProp, though this
wasn't caught by node-jscs, found it when searching for " , ".
* Made npm.devDependencies fixed instead of using tilde-ranges.
This too often leads to strange bugs or sudden changes. Fixed
them at the version they were currently ranging to.
Bug: 54218
Change-Id: Ib2630806f3946874c8b01e58cf171df83a28da29
It's possible for the user to put the cursor back from the inspector
in the surface without triggering a selection change, if the selection
was collapsed and they clicked in exactly the right spot.
In practice, this can happen if the link inspector is open in creation
mode and the user clicks to drop the cursor at the same position where
it was when the inspector was opened.
When this happens, the inspector wouldn't close, because it only closed
in response to selection changes. If the user then typed something,
weird things would happen.
To prevent this state (cursor is in surface but inspector is open) from
occurring, close the inspector and hide the context when the document is
focused. This fixes the link inspector creation mode issue, and it also
causes the link inspector to no longer briefly remain visible after the
user has clicked out of it.
Bug: 56976
Change-Id: Ib70fc13031873009a175e4b049a07694a87ce25d
They contain iframes and those need to not be display: none;
in order to make Firefox happy.
Bug: 57568
Change-Id: I177877bff3c3b18bfc87ee4e6afa7e60fea26ffc
There's no point in hiding the WindowSet if we've already closed the
open window in it. In fact, there's no point in hiding a WindowSet
pretty much ever.
Change-Id: I49a02b5d255b266eb9e0a537cb64082eb0ad5e4b
Using display: none; on the inspectors WindowSet causes Firefox to
neglect to load CSS in the inspectors' iframes, which means the frame
never initializes and the inspector never opens.
Bug: 57568
Change-Id: Ia1a0ce78754fa1318a7d439abe1f0e2f86420e7a
Changes:
* Cleanup the window API to use more consistent and intuitive methods - we
now use initialize/setup/teardown instead of
initialize/onSetup/onOpen/onClose as methods which are overridden, and
use open/close methods to control the window
* Change events around to have opening/open and closing/close events which
act as before/after points during the opening/closing process
* Make WindowSet and Context respond to windows being opened, rather than
opening them directly
* Fix a LinkInspector creation mode bug where the initial text doesn't get
reset
* Move inspector, a VisualEditor concept, back to VE
* Cleanup naming of SurfaceDialog, SurfaceToolbar, etc. to use shorter
names, they were given Surface* names when the generic ones were also in
VE, but now the generic ones are in OO, so they can return to their
original names
Change-Id: I82c4fed8bcb3fb5630938c8bc4dd9b2d5f1a8c1d
Objectives:
* Rename this.$ to this.$element
* Rename this.$$ to this.$
* Get rid of the need to use this.frame.$$
* Rename OO.ui.Element.get$$ to OO.ui.Element.getJQuery
Changes: (using Sublime Text regex patterns)
* Replace "get$$" with "getJQuery"
* Replace "\.(\$)([^\$a-zA-Z])" with ".$element$2"
* Replace "\.(\$\$)" with ".$"
* Replace "'$$'" with "'$'"
* Set this.$ to null in constructor of OO.ui.Window
* Set this.$ to this.frame.$ in initialize method of OO.ui.Window
* Replace "\.(frame.\$)([^\$a-zA-Z])" with ".\$$2"
Bonus:
* Use this.$() in a bunch of places where $() was erroneously used
Change-Id: If3d870124ab8d10f8223532cda95c2b2b075db94
* Move and rename generic parts of ve.ui to OO.ui
* We now have a UI test suite because ve.Element (outside ve.ui)
is now part of oojs-ui, so it needs a test suite.
* Added to the MW test run (just like we do for unicodejs).
* Updated csslint config (also added ve-mw and syntaxhighlight
which were missing).
oojs-ui still depends on the TriggerRegistry in VE, this is addressed
in a follow-up commit.
Change-Id: Iec147155c1ddf20b73a4d15d87b8742207032312
Instead, listen to 'select', or to 'transact' on the dm.Document.
This commit only fixes uses outside of the dm/ce.Surface ecosystem.
ce.Surface still listens to 'change'.
ve.init.mw.ViewPageTarget.js:
* Rename onSurfaceModelTransact to clearSaveDialogDiff and bind it to
the document's transact event instead
* Rename onSurfaceModelChange to checkForWikitextWarning and bind it
to the surface's transact event. This is needed because the function
inspects the surface's selection, which isn't yet in a consistent
state when the document's transact event fires
ve.ui.MWReferenceDialog.js:
* Rename onSurfaceChange to onDocumentTransact and rebind accordingly
ve.ce.ProtectedNode.js:
* Get rid of onSurfaceModelChange
* Instead, bind positionPhantoms to the document's transact event
directly, and only bind it while phantoms are visible
ve.ui.Context.js:
* Rename onChange to onModelSelect and rebind accordingly
* Rename afterChange to afterModelSelect
* Drop check for undefined selection, no longer needed now that we're
listening to a finer-grained event
ve.ce.Surface.test.js:
* Listen to 'select' instead of 'change'
Change-Id: Ifeb1a1fc5427696f2aae5441d4b54dde366793e0
Move selection change handling (closing the popup if open, and updating
the context toolbar) to .afterChange(). Every time .onChange() detects
a selection change, it schedules a call to afterChange(). These calls
are batched so that multiple selection changes in the same tick cause
afterChange() to be called only once.
Deferring these updates causes them to no longer occur while a 'change'
event is being emitted. This means that if an inspectors' close handler
calls .change(), that call is now no longer nested inside another
.change() call and doesn't run afoul of any render locks set by the
caller of the outer .change().
Bug: 54675
Change-Id: Iae2f41a83b5d64251a54e42303100e84a5c25561
AnnotationInspector changes the selection from both its open and close
handlers, which can cause recursive calls to .hide() and .update()
Change-Id: Ic334f9b8b335fe1aaac2dc98dc6ea9fd9d5707ff
Update checks if there's actually a context menu to show. We also need
to pass through the parameters for show.
This was causing the last-shown context menu to appears after resizing
an inline image (which has no context menu).
Change-Id: I8f46f71e2fba6896fe10054f0d2a679c6f23eb9c
The previous recursion "guard" relied on the recursion to occur for
the function to work correctly, which was very confusing. Additionally,
it didn't actually work: if the inspector's onClose handler changed
the selection (which is common), .hide() would recurse and the recursion
guard didn't catch this (inspector wasn't undefined yet). Fortunately
all that did was call .close() on the inspector again, which was caught
by .close()'s own recursion guard.
Instead, simply use this.hiding as a recursion guard, and refactor the
function so it doesn't do two different things depending on whether it's
expecting recursion or not.
Change-Id: I09eb9229530468ee319ca53b730784a3f632375d
Objective:
* Remove surface dependencies in dialogs, inspectors, windows and window sets
* Introduce surface-specific versions of dialogs, inspectors and window sets
Change-Id: I2db59127d2085b02e173a3605e174317e419e213
Objectives:
* Use widgets to render toolbar actions
* Remove labels next to help notices and edit notices buttons
* Add a close button to the help notices and edit notices
Overview:
* ve.ui.ButtonWidget is now abstract, use ve.ui.PushButtonWidget instead
* ve.ui.IconButtonWidget now inherits from ve.ui.ButtonWidget
* ve.ui.PopupWidget's display method no longer takes x and y arguments
* Fixup naming issues in MWCategoryPopupWidget
* Fixup naming issues with some ve-init-mw CSS classes
* Rename ve-mw/ui/styles/ve.ui.Widget.css to ve.ui.MWWidget.css
* Change uses of "callout" to "tail"
* Add hyperlink functionality to buttons
* Make buttons accessible through focusing, but make unfocusable by
clicking
* Add head option to popup for rendering a title and close button
Bug: 52386
Change-Id: Iea2c8df1be64d40f9c039873d89ee540cc56e687
Pass an extra parameter to show() to let it know when the menu is
just being moved, and therefore doesn't need to perform the fade-in
transition.
Change-Id: I2cf2ff07db6cc7d226f3d626755792a06dfcbe54
* Check the popup fits within the node horizontally as well
as vertically before embedding.
* Calculate the position of the node relative to the document.
Previously we assumed the parent was the document and so used
jQuery#position but this is not the case if a custom $focusable
is passed to FocusableNode.
* Forcefully re-show the context menu on resizable node mouse up.
This is apparently done automatically by a redraw event, but if
the user just clicked on a resize node without dragging the context
menu would be lost.
Change-Id: Id477a30827c9393a446e9c44466c83dabc7e0ab4
Currently, WindowSet open method uses the Window factory to call up
the instantiation of a new dialog or inspector class. This commit will
also allow sending further config options to these classes if needed.
Specifically, this will also allow the use of ve.ui.Context.js for
block inspectors that are not dependent on current selection or current
location of the cursor.
It will also let us generalize the dialog/inspector window instantiations
by adding in any needed config settings on call.
Change-Id: If14384d74ab91ef01b1c7641ff84f327f2a12112
The context menu was being positioned incorrectly for small inline
nodes, such as references or small templates. This fix moves the context
to the bottom, as well as placing it on the right or left in LTR and RTL
directions respectively.
Change-Id: I55de2a6464d0544e32118bf95dbb85c33354f025
And actually use this functionality on MWBlockImage to
highlight centred images correctly.
FocusableNode
* Actually use $focusable to render the highlight correctly
ProtectedNode
* Allow a $phantomable element to define which element to
highlight on mouseenter
* As phatoms are built off shields, make sure a shield is
given to $phantomable
RelocatableNode
* Allow a $relocatable element to define which element the
relocatable marker is measured against
ui.Context
* Use $focusable (when available) for positioning the popup
Plus some documentation fixes
Change-Id: I370337239af4fc935cd86757b3ce03011bae5ba8
The inspector popup should appear relative to the position of the related
calling method - either relative to the cursor (like in links and language)
or relative to the focusableNode (like in templates/transclusion).
Bug: 50905
Change-Id: I07f58d0c6561adecbec560fc24bcb6e590f2cd9f
Objectives:
* Make it possible to add items to toolbars without having to have all
toolbars know about the items in advance
* Make it possible to specialize an existing tool and have it be used
instead of the base implementation
Approach:
* Tools are named using a path-style category/id/ext system, making them
selectable, the latter component being used to differentiate extended
tools from their base classes, but is ignored during selection
* Toolbars have ToolGroups, which include or exclude tools by category or
category/id, and order them by promoting and demoting selections of
tools by category or category/id
Future:
* Add a way to place available but not yet placed tools in an "overflow"
group
* Add a mode to ToolGroup to make the tools a multi-column drop-down style
list with labels so tools with less obvious icons are easier to identify
- and probably use this as the overflow group
Change-Id: I7625f861435a99ce3d7a2b1ece9731aaab1776f8
Previously we assumed that embedded icons mean we weren't
dealing with an inspector, but that is not always the case
(e.g. MWExtensionInspector).
Bug: 52845
Change-Id: Ifc5b054568661cb9badf6d7991f512b81e649b36
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
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
== 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
The fix to the transclusion icon messed up the way inspectors appear in RTL
wikis. The rtl check/correction (inside 'this.embedded') seems to be the only
rtl fix necessary. Something completely different will have to be done to the
transclusion icon.
Change-Id: I2417e125c99de9b0c5fd922a47de43ed9952d6fd
Added GUI-level and Page-level "getDir()" methods to get the direction
of the GUI and Page respectively in the ve.ui.Surface and ve.ce.Surface
respectively.
The correction to the direction-test condition in ve.ui.Context reflects
the new method of getting these directions, and fixes the problem with
the transclusion icon. The icon position depends on the wiki/page-level
directionality, regardless of the GUI-level direction.
Bug: 51819
Change-Id: I36cef115017542c461e6d757f1c8bfda92074607
Objective:
* Make the inspector close and context menu reset when the selection is
changed while an inspector is open
Changes:
ve.ui.PopupWidget.js
* Add isVisible method
ve.ui.Context.js
* Check if popup is visible when the selection changes and close the
inspector and reset the context if it is
ve.ui.AnnotationInspector.js
* Don't update the selection when closing if the selection has changed
since opening
Bug: 50895
Change-Id: Ie7f0b7ac76b0460b39ec002705172376e4e602dc
Objectives:
* Make option widget icons correctly placed in RTL
* Make embedded context toolbar correctly placed in RTL
Approach:
Use separate elements for icons within option widgets which have more
flexibility when rendering in either LTR or RTL when compared to CSS
background position. The simpler approach, using CSS background
position offsets, isn't cross-browser compatible at this time.
Changes:
ve.ui.OutlineItemWidget.js
* Remove custom icon implementation, using parent class implementation
instead
ve.ui.OptionWidget.js
* Add icon option, which adds an icon element only if an icon was
specified
ve.ui.MenuItemWidget.js, ve-mw/ve.ui.MWParameterResultWidget.js
* Add override for icon config option
* Document icon config as private
ve.ui.Context.js
* Add detection and special handling for positioning embedded context
toolbar when rendering in RTL
ve.ui.Widget.css
* Add styles for option widget's new icon option
* Add styles to make indentation still work for outline item widgets
* Adjust styles for menu item widget as per changes in option widget
ve-mw/ve.ui.Widget.css
* Adjust styles for parameter result widget as per changes in option
widget
Change-Id: Ibfa4b613e0fd7902f8a2c78b5717de402c5f82b8
Just a proof-of-concept that this would work on Opera. I'm figuring out
what was this for initially...
This reverts commit 30dadb6c8c.
Bug: 47794
Change-Id: Ie4f1334e0beb7ba7d4f4aa3b42464fa219c4778c
This actually fixes a hack done in a previous commit where an undocumented
surface option was being passed, but not always. And in some cases there
were uses of the popup which didn't really have a surface to pass in.
Change-Id: I08b5dc2dc879f6abd1b16d1d66ac1d8b5624f673
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
Objectives:
* Associate models with tools, rather than dialogs and inspectors
* Move tool/model association utilities to ve.ui.ToolFactory
* Obliterate the view registry
Notes:
The only special case for leaving modelClasses definitions in place is
for the linkInspector. It uses these for selection expansion.
Because tools can now override the static canEditModel method, we can
dynamically evaluate a model, rather than be restricted to only
comparing classes. This will be useful for disabling editors for models
that are for some reason incomplete or otherwise broken and cannot be
safely edited.
Change-Id: I7adf254990112d90f1f808593a9111afc7a116b5
Previous condition was put in as part of I9ed6f9fb as a
temporary fix for bug 42842. However this code was causing
the popup widget to not appear for items at the start of
the document. It appears the bug it was put in to fix
has since been fixed elsewhere.
Bug: 49421
Change-Id: I8bcdea0f7a6951216bf8368865d23ef6246880ea
Prologue:
Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't
see you there! In a world where iframes are outlaws, and symbols like
document and window are global, there were more than a few assumptions
about which document or window was being used. But fear not - for this
commit (probably) tracks them all down, leaving a trail of
iframe-compatible awesomeness in its wake. With the great ve.ui.Surface
now able to be used inside of iframes, let the reference editing
commence. But there, lurking in the darkness is a DM issue so fierce it
may take Roan and/or Ed up to 3 whole hours to sort it out.
Note to Roan and/or Ed:
Editing references seems to work fine, but when saving the page there
are "no changes" which is a reasonable indication to the contrary.
Objectives:
* Make it possible to have multiple surfaces be instantiated, get along
nicely, and be embedded inside of iframes if needed.
* Make reference content editable within a dialog
Approach:
* Move what's left of ve.Editor to ve.ui.Surface and essentially
obliterate all use of it
* Make even more stuff inherit from ve.Element (long live this.$$)
* Use the correct document or window anywhere it was being assumed to be
the top level one
* Resolve stacking order issues by removing the excessive use of z-index
and introducing global and local overlay elements for each editor
* Add a surface to the reference dialog, load up the reference contents
and save them back on apply
* Actually destroy what we create in ce and ui surfaces
* Add recursive frame offset calculation method to ve.Element
* Moved ve.ce.Surface's getSelectionRect method to the prototype
Bonus:
* Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it
was separate in the first place, but I'm likely the one to blame)
* Fix blatant lies in documentation
* Whitespace cleanup here and there
* Get rid of ve.ui.Window overlays - not used or needed
Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
Objective:
* Context popup would stop opening sometimes "mysteriously" which ended
up having to do with the automatic closing on blur functionality
added to popups for use in the category popup widget
* Mousedown event canceling was being applied a little too widely, and
was causing popup widgets to not allow child elements to be focused
(unless they contained an iframe, like an inspector)
Changes:
ve.ui.Context.js
* Make use of the popup's show and hide methods within the inspector
ve.ui.MWCategoryPopupWidget.js
* Override autoClose option for category popup widgets
ve.ui.PopupWidget.js
* Add autoClose option to popup widgets
* Move event handler to the top of the methods (convention)
* Only bind blur event if autoClose is enabled
* Inline the getFocusedChild method
Change-Id: I22aedb5fbd51b327ea7ce2ecdd6123e79cbebb9c
