JSDuck: Generated code documentation!
See CODING.md for how to run it.
Mistakes fixed:
* Warning: Unknown type function
-> Function
* Warning: Unknown type DOMElement
-> HTMLElement
* Warning: Unknown type DOM Node
-> HTMLElement
* Warning: Unknown type Integer
-> Mixed
* Warning: Unknown type Command
-> ve.Command
* Warning: Unknown type any
-> number
* Warning: Unknown type ve.Transaction
-> ve.dm.Transaction
* Warning: Unknown type ve.dm.AnnotationSet
-> ve.AnnotationSet
* Warning: Unknown type false
-> boolean
* Warning: Unknown type ve.dm.AlienNode
ve.dm doesn't have a generic AlienNode like ve.ce
-> Unknown type ve.dm.AlienInlineNode|ve.dm.AlienBlockNode
* Warning: Unknown type ve.ve.Surface
-> ve.ce.Surface
* ve.example.lookupNode:
-> Last @param should be @return
* ve.dm.Transaction.prototype.pushReplace:
-> @param {Array] should be @param {Array}
* Warning: ve.BranchNode.js:27: {@link ve.Node#hasChildren} links to non-existing member
-> (removed)
* Warning: ve.LeafNode.js:21: {@link ve.Node#hasChildren} links to non-existing member
-> (removed)
Differences fixed:
* Variadic arguments are like @param {Type...} [name]
instead of @param {Type} [name...]
* Convert all file headers from /** to /*! because JSDuck tries
to parse all /** blocks and fails to parse with all sorts of
errors for "Global property", "Unnamed property", and
"Duplicate property".
Find: \/\*\*([^@]+)(@copyright)
Replace: /*!$1$2
* Indented blocks are considered code examples.
A few methods had documentation with numbered lists that were
indented, which have now been updated to not be intended.
* The free-form text descriptions are parsed with Markdown,
which requires lists to be separated from paragraphs by an
empty line.
And we should use `backticks` instead of {braces} for inline
code in text paragraphs.
* Doc blocks for classes and their constructor have to be
in the correct order (@constructor, @param, @return must be
before @class, @abstract, @extends etc.)
* `@extends Class` must not have Class {wrapped}
* @throws must start with a {Type}
* @example means something else. It is used for an inline demo
iframe, not code block. For that simply indent with spaces.
* @member means something else.
Non-function properties are marked with @property, not @member.
* To create a link to a class or member, in most cases the name
is enough to create a link. E.g. Foo, Foo.bar, Foo.bar#quux,
where a hash stands for "instance member", so Foo.bar#quux,
links to Foo.bar.prototype.quux (the is not supported, as
"prototype" is considered an implementation detail, it only
indexes class name and method name).
If the magic linker doesn't work for some case, the
verbose syntax is {@link #target label}.
* @property can't have sub-properties (nested @param and @return
values are supported, only @static @property can't be nested).
We only have one case of this, which can be worked around by
moving those in a new virtual class. The code is unaltered
(only moved down so that it isn't with the scope of the main
@class block). ve.dm.TransactionProcessor.processors.
New:
* @mixins: Classes mixed into the current class.
* @event: Events that can be emitted by a class. These are also
inherited by subclasses. (+ @param, @return and @preventable).
So ve.Node#event-attach is inherited to ve.dm.BreakNode,
just like @method is.
* @singleton: Plain objects such as ve, ve.dm, ve.ce were missing
documentation causing a tree error. Documented those as a
JSDuck singleton, which they but just weren't documented yet.
NB: Members of @singleton don't need @static (if present,
triggers a compiler warning).
* @chainable: Shorthand for "@return this". We were using
"@return {classname}" which is ambiguous (returns the same
instance or another instance?), @chainable is specifically
for "@return this". Creates proper labels in the generated
HTML pages.
Removed:
* @mixin: (not to be confused with @mixins). Not supported by
JSDuck. Every class is standalone anyway. Where needed marked
them @class + @abstract instead.
Change-Id: I6a7c9e8ee8f995731bc205d666167874eb2ebe23
2013-01-04 08:54:17 +00:00
|
|
|
/*!
|
2013-01-15 23:38:49 +00:00
|
|
|
* VisualEditor UserInterface Toolbar class.
|
2012-07-19 21:25:16 +00:00
|
|
|
*
|
2013-02-19 23:37:34 +00:00
|
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
2012-07-19 00:11:26 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
2013-01-15 23:38:49 +00:00
|
|
|
* UserInterface toolbar.
|
2012-07-19 00:11:26 +00:00
|
|
|
*
|
|
|
|
|
* @class
|
2013-05-14 23:45:42 +00:00
|
|
|
* @extends ve.Element
|
2013-05-01 22:21:32 +00:00
|
|
|
* @mixins ve.EventEmitter
|
|
|
|
|
*
|
2012-07-19 00:11:26 +00:00
|
|
|
* @constructor
|
2013-05-14 23:45:42 +00:00
|
|
|
* @param {Object} [config] Config options
|
|
|
|
|
* @cfg {boolean} [actions] Add an actions section opposite to the tools
|
|
|
|
|
* @cfg {boolean} [shadow] Add a shadow below the toolbar
|
2012-07-19 00:11:26 +00:00
|
|
|
*/
|
2013-08-01 22:01:43 +00:00
|
|
|
ve.ui.Toolbar = function VeUiToolbar( options ) {
|
2013-05-14 23:45:42 +00:00
|
|
|
// Configuration initialization
|
|
|
|
|
options = options || {};
|
|
|
|
|
|
|
|
|
|
// Parent constructor
|
|
|
|
|
ve.Element.call( this, options );
|
|
|
|
|
|
2013-05-01 22:21:32 +00:00
|
|
|
// Mixin constructors
|
2012-02-06 23:50:56 +00:00
|
|
|
ve.EventEmitter.call( this );
|
Object management: Object create/inherit/clone utilities
* For the most common case:
- replace ve.extendClass with ve.inheritClass (chose slightly
different names to detect usage of the old/new one, and I
like 'inherit' better).
- move it up to below the constructor, see doc block for why.
* Cases where more than 2 arguments were passed to
ve.extendClass are handled differently depending on the case.
In case of a longer inheritance tree, the other arguments
could be omitted (like in "ve.ce.FooBar, ve.FooBar,
ve.Bar". ve.ce.FooBar only needs to inherit from ve.FooBar,
because ve.ce.FooBar inherits from ve.Bar).
In the case of where it previously had two mixins with
ve.extendClass(), either one becomes inheritClass and one
a mixin, both to mixinClass().
No visible changes should come from this commit as the
instances still all have the same visible properties in the
end. No more or less than before.
* Misc.:
- Be consistent in calling parent constructors in the
same order as the inheritance.
- Add missing @extends and @param documentation.
- Replace invalid {Integer} type hint with {Number}.
- Consistent doc comments order:
@class, @abstract, @constructor, @extends, @params.
- Fix indentation errors
A fairly common mistake was a superfluous space before the
identifier on the assignment line directly below the
documentation comment.
$ ack "^ [^*]" --js modules/ve
- Typo "Inhertiance" -> "Inheritance".
- Replacing the other confusing comment "Inheritance" (inside
the constructor) with "Parent constructor".
- Add missing @abstract for ve.ui.Tool.
- Corrected ve.FormatDropdownTool to ve.ui.FormatDropdownTool.js
- Add function names to all @constructor functions. Now that we
have inheritance it is important and useful to have these
functions not be anonymous.
Example of debug shot: http://cl.ly/image/1j3c160w3D45
Makes the difference between
< documentNode;
> ve_dm_DocumentNode
...
: ve_dm_BranchNode
...
: ve_dm_Node
...
: ve_dm_Node
...
: Object
...
without names (current situation):
< documentNode;
> Object
...
: Object
...
: Object
...
: Object
...
: Object
...
though before this commit, it really looks like this
(flattened since ve.extendClass really did a mixin):
< documentNode;
> Object
...
...
...
Pattern in Sublime (case-sensitive) to find nameless
constructor functions:
"^ve\..*\.([A-Z])([^\.]+) = function \("
Change-Id: Iab763954fb8cf375900d7a9a92dec1c755d5407e
2012-09-05 06:07:47 +00:00
|
|
|
|
2011-11-30 23:51:06 +00:00
|
|
|
// Properties
|
2013-05-14 23:45:42 +00:00
|
|
|
this.$bar = this.$$( '<div>' );
|
|
|
|
|
this.$tools = this.$$( '<div>' );
|
2013-05-15 23:31:02 +00:00
|
|
|
this.$actions = this.$$( '<div>' );
|
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-25 02:36:01 +00:00
|
|
|
this.initialized = false;
|
2013-05-14 23:45:42 +00:00
|
|
|
|
2013-05-15 23:31:02 +00:00
|
|
|
// Events
|
|
|
|
|
this.$
|
|
|
|
|
.add( this.$bar ).add( this.$tools ).add( this.$actions )
|
|
|
|
|
.on( 'mousedown', false );
|
|
|
|
|
|
2013-05-14 23:45:42 +00:00
|
|
|
// Initialization
|
|
|
|
|
this.$tools.addClass( 've-ui-toolbar-tools' );
|
|
|
|
|
this.$bar.addClass( 've-ui-toolbar-bar' ).append( this.$tools );
|
|
|
|
|
if ( options.actions ) {
|
|
|
|
|
this.$actions.addClass( 've-ui-toolbar-actions' );
|
|
|
|
|
this.$bar.append( this.$actions );
|
|
|
|
|
}
|
|
|
|
|
this.$bar.append( '<div style="clear:both"></div>' );
|
|
|
|
|
if ( options.shadow ) {
|
|
|
|
|
this.$bar.append( '<div class="ve-ui-toolbar-shadow"></div>' );
|
|
|
|
|
}
|
|
|
|
|
this.$.addClass( 've-ui-toolbar' ).append( this.$bar );
|
2011-11-30 23:51:06 +00:00
|
|
|
};
|
2011-11-29 21:34:56 +00:00
|
|
|
|
Object management: Object create/inherit/clone utilities
* For the most common case:
- replace ve.extendClass with ve.inheritClass (chose slightly
different names to detect usage of the old/new one, and I
like 'inherit' better).
- move it up to below the constructor, see doc block for why.
* Cases where more than 2 arguments were passed to
ve.extendClass are handled differently depending on the case.
In case of a longer inheritance tree, the other arguments
could be omitted (like in "ve.ce.FooBar, ve.FooBar,
ve.Bar". ve.ce.FooBar only needs to inherit from ve.FooBar,
because ve.ce.FooBar inherits from ve.Bar).
In the case of where it previously had two mixins with
ve.extendClass(), either one becomes inheritClass and one
a mixin, both to mixinClass().
No visible changes should come from this commit as the
instances still all have the same visible properties in the
end. No more or less than before.
* Misc.:
- Be consistent in calling parent constructors in the
same order as the inheritance.
- Add missing @extends and @param documentation.
- Replace invalid {Integer} type hint with {Number}.
- Consistent doc comments order:
@class, @abstract, @constructor, @extends, @params.
- Fix indentation errors
A fairly common mistake was a superfluous space before the
identifier on the assignment line directly below the
documentation comment.
$ ack "^ [^*]" --js modules/ve
- Typo "Inhertiance" -> "Inheritance".
- Replacing the other confusing comment "Inheritance" (inside
the constructor) with "Parent constructor".
- Add missing @abstract for ve.ui.Tool.
- Corrected ve.FormatDropdownTool to ve.ui.FormatDropdownTool.js
- Add function names to all @constructor functions. Now that we
have inheritance it is important and useful to have these
functions not be anonymous.
Example of debug shot: http://cl.ly/image/1j3c160w3D45
Makes the difference between
< documentNode;
> ve_dm_DocumentNode
...
: ve_dm_BranchNode
...
: ve_dm_Node
...
: ve_dm_Node
...
: Object
...
without names (current situation):
< documentNode;
> Object
...
: Object
...
: Object
...
: Object
...
: Object
...
though before this commit, it really looks like this
(flattened since ve.extendClass really did a mixin):
< documentNode;
> Object
...
...
...
Pattern in Sublime (case-sensitive) to find nameless
constructor functions:
"^ve\..*\.([A-Z])([^\.]+) = function \("
Change-Id: Iab763954fb8cf375900d7a9a92dec1c755d5407e
2012-09-05 06:07:47 +00:00
|
|
|
/* Inheritance */
|
|
|
|
|
|
2013-05-14 23:45:42 +00:00
|
|
|
ve.inheritClass( ve.ui.Toolbar, ve.Element );
|
|
|
|
|
|
2013-05-01 22:21:32 +00:00
|
|
|
ve.mixinClass( ve.ui.Toolbar, ve.EventEmitter );
|
Object management: Object create/inherit/clone utilities
* For the most common case:
- replace ve.extendClass with ve.inheritClass (chose slightly
different names to detect usage of the old/new one, and I
like 'inherit' better).
- move it up to below the constructor, see doc block for why.
* Cases where more than 2 arguments were passed to
ve.extendClass are handled differently depending on the case.
In case of a longer inheritance tree, the other arguments
could be omitted (like in "ve.ce.FooBar, ve.FooBar,
ve.Bar". ve.ce.FooBar only needs to inherit from ve.FooBar,
because ve.ce.FooBar inherits from ve.Bar).
In the case of where it previously had two mixins with
ve.extendClass(), either one becomes inheritClass and one
a mixin, both to mixinClass().
No visible changes should come from this commit as the
instances still all have the same visible properties in the
end. No more or less than before.
* Misc.:
- Be consistent in calling parent constructors in the
same order as the inheritance.
- Add missing @extends and @param documentation.
- Replace invalid {Integer} type hint with {Number}.
- Consistent doc comments order:
@class, @abstract, @constructor, @extends, @params.
- Fix indentation errors
A fairly common mistake was a superfluous space before the
identifier on the assignment line directly below the
documentation comment.
$ ack "^ [^*]" --js modules/ve
- Typo "Inhertiance" -> "Inheritance".
- Replacing the other confusing comment "Inheritance" (inside
the constructor) with "Parent constructor".
- Add missing @abstract for ve.ui.Tool.
- Corrected ve.FormatDropdownTool to ve.ui.FormatDropdownTool.js
- Add function names to all @constructor functions. Now that we
have inheritance it is important and useful to have these
functions not be anonymous.
Example of debug shot: http://cl.ly/image/1j3c160w3D45
Makes the difference between
< documentNode;
> ve_dm_DocumentNode
...
: ve_dm_BranchNode
...
: ve_dm_Node
...
: ve_dm_Node
...
: Object
...
without names (current situation):
< documentNode;
> Object
...
: Object
...
: Object
...
: Object
...
: Object
...
though before this commit, it really looks like this
(flattened since ve.extendClass really did a mixin):
< documentNode;
> Object
...
...
...
Pattern in Sublime (case-sensitive) to find nameless
constructor functions:
"^ve\..*\.([A-Z])([^\.]+) = function \("
Change-Id: Iab763954fb8cf375900d7a9a92dec1c755d5407e
2012-09-05 06:07:47 +00:00
|
|
|
|
2011-12-06 23:48:47 +00:00
|
|
|
/* Methods */
|
|
|
|
|
|
2012-10-24 21:49:08 +00:00
|
|
|
/**
|
2013-01-15 23:38:49 +00:00
|
|
|
* Initialize all tools and groups.
|
2012-10-24 21:49:08 +00:00
|
|
|
*/
|
2013-05-14 23:45:42 +00:00
|
|
|
ve.ui.Toolbar.prototype.addTools = function ( tools ) {
|
2012-10-24 21:49:08 +00:00
|
|
|
var i, j, group, $group, tool;
|
2013-05-14 23:45:42 +00:00
|
|
|
|
|
|
|
|
for ( i = 0; i < tools.length; i++ ) {
|
|
|
|
|
group = tools[i];
|
2012-10-24 21:49:08 +00:00
|
|
|
// Create group
|
2013-05-14 23:45:42 +00:00
|
|
|
$group = this.$$( '<div class="ve-ui-toolbar-group"></div>' )
|
2013-05-24 15:17:07 +00:00
|
|
|
.on( 'mousedown', false );
|
2012-10-24 21:49:08 +00:00
|
|
|
if ( group.label ) {
|
2013-05-14 23:45:42 +00:00
|
|
|
$group.append(
|
|
|
|
|
this.$$( '<div class="ve-ui-toolbar-label"></div>' ).html( group.label )
|
|
|
|
|
);
|
2011-11-30 23:40:33 +00:00
|
|
|
}
|
2012-10-24 21:49:08 +00:00
|
|
|
// Add tools
|
|
|
|
|
for ( j = 0; j < group.items.length; j++ ) {
|
2013-05-24 15:43:58 +00:00
|
|
|
tool = false;
|
|
|
|
|
try {
|
|
|
|
|
tool = ve.ui.toolFactory.create( group.items[j], this );
|
2013-06-24 17:51:59 +00:00
|
|
|
} catch( e ) {}
|
2013-05-24 15:43:58 +00:00
|
|
|
if ( tool ) {
|
|
|
|
|
$group.append( tool.$ );
|
2011-11-30 23:05:06 +00:00
|
|
|
}
|
2011-11-29 21:34:56 +00:00
|
|
|
}
|
2012-10-24 21:49:08 +00:00
|
|
|
// Append group
|
2013-05-14 23:45:42 +00:00
|
|
|
this.$tools.append( $group );
|
2011-11-29 21:34:56 +00:00
|
|
|
}
|
2011-11-30 07:35:59 +00:00
|
|
|
};
|
Death and/or destruction
So. It turns out that the design of SurfaceFragment is a little -
shall we say - wonky.
One of the best things about ve.dm.SurfaceFragment is its magical
ability to retain the intention of its range, even as transactions
are being processed. This ability is granted by each fragment
listening to the surface's change event, and responding by using
translateRange for each transaction that gets processed. Surface
fragments also have these clever methods that allow you to get a
fragment based on another, which makes adjusting the range easy to do
inline without having to manually store multiple fragments or
modifying the original.
This sounded good, and we seemed to all be convinced it was well
designed. But if you add a console.log( 'hello' ); to the first line
of ve.dm.SurfaceFragment.prototype.onTransact, and then start using
the bold tool on various selections of text, you will find that there
may indeed be a flaw. What you will probably realize is that the
number of times that particular line of code is being called is
disturbingly large, and increases each time you do just about anything
in the editor. What's going on? How did we get here? Read on…
It turns out that fragments are immortal. We create them, they listen
to the surface's transact event, we are done with them, but the
surface keeps on emitting events to the now long forgotten about
fragments. They continue to build up over time, never go out of scope,
and bloat the hell out of our program.
The same ended up being true of toolbars - and each time the context
menu fired up a new one the old one was left in limbo, still
responding to events, still taking up memory, but not being visible to
the user.
All of this immortality was causing strange and difficult to track
down problems. This patch fixes this by introducing a destroy method.
This method unbinds events, allowing the object to finally fall out of
scope and die - and more importantly stop receiving notifications of
changes.
This is a hack, but Ed will no doubt get this situation sorted out
properly by making fragments lazy-evaluate their selections by only
storing an identifier of the most recent transaction they were based
on, see bug 47343.
Change-Id: I18bb986001a44732a7871b9d79dc3015eedfb168
2013-04-18 18:44:40 +00:00
|
|
|
|
|
|
|
|
/**
|
2013-08-01 22:01:43 +00:00
|
|
|
* Sets up handles and preloads required information for the toolbar to work.
|
|
|
|
|
* This must be called immediately after it is attached to a visible document.
|
2013-05-14 23:45:42 +00:00
|
|
|
*/
|
2013-08-01 22:01:43 +00:00
|
|
|
ve.ui.Toolbar.prototype.initialize = function () {
|
|
|
|
|
this.initialized = true;
|
2013-05-14 23:45:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
2013-08-01 22:01:43 +00:00
|
|
|
* Destroys toolbar, removing event handlers and DOM elements.
|
2013-05-14 23:45:42 +00:00
|
|
|
*
|
2013-08-01 22:01:43 +00:00
|
|
|
* Call this whenever you are done using a toolbar.
|
2013-05-14 23:45:42 +00:00
|
|
|
*/
|
2013-08-01 22:01:43 +00:00
|
|
|
ve.ui.Toolbar.prototype.destroy = function () {
|
|
|
|
|
this.$.remove();
|
2013-05-14 23:45:42 +00:00
|
|
|
};
|