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
Roan and I think this is way too light. The only way
I can tell it's a group is by mousing over all of
the icons back and forth really quickly :)
Increasing to 10% alpha.
Change-Id: Iab55bf64921de5247d10d611318e545efe74fe4a
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
Objectives:
* Make drop down tools look more like buttons and less like inputs, since they aren't text input and are buttons
* Make context toolbars inside surface widgets render correctly
* Show outlines of groups on hover to hint tool relationships
* Make neighboring active tools look cleaner
Changes:
ve.ui.Tool.css
* Merge ButtonTool and DropdownTool styles as much as possible
* Add styles for DropdownTool active states
* Only round the corners of the first and last tool in a group
* Soften the borders between consecutive active tools
ve.ui.Toolbar.css
* Add border to groups on hover
ve.ui.Widget.css
* Isolate surface widget toolbar styles by using stricter selector
ve.ui.Tool.js
* Fix incorrect capitalization of class name
ve.ui.SurfaceWidget.js
* Add classes to toolbar and surface for better style targeting
Change-Id: Ib5ae8f705ef1e9c481e5bdf8c8dcef9c1eb22c4d
For configured wikis, show a dialog that welcomes the user to the
amazing and fantabulous world of VisualEditing, which is not only full of
wonderment and joy but also may lead to increased popularity and love.
The dialog only shows up once (uses a cookie).
Change-Id: I8e7c4dc2c63b36594378a543b9d66291395eebcf
Formerly known as "The greatest commit in the history of the world*".
* Within a 3 block radius of Drayton Park and Auburt Park, starting
from July 30th at about 9pm or so.
Bugs:
* (bug 51404) Allow escaping out of the link inspector when in creation
mode (no text is selected, text will be inserted based on link target)
and the text input is empty
* (bug 51065 and bug 51415) Keep model and view in sync when changing the
link inspector's text input value and showing options in a menu
* (bug 51523) Either restore selection at the time of close to what it was
before opening the inspector (when using back) or to what it was before
closing (might be changed by transactions processed during the close
method) - this makes it simpler and more natural when clicking away from
the link inspector, even when there are changes that must be saved by
the link inspector on close
Bonus:
* Use only the light blue highlight color for menu widget items - the
checkmark already displays the selected item, the dark blue is just
masking the current highlight position and confusing the peoples
* Remove links when the user deletes everything from the link inspector's
text input and then closes the link inspector
* Replace select menu's evil "silent" selectItem/highlightItem argument
with a new method called initializeSelection which sets both selection
and highlighting to an item without emitting events - this is needed
when synchronizing the view with the model so the model isn't
immediately told to change to a value it already has
* Make the MWTitle lookup menu not flash like crazy as you type (this was
caused by a copy-paste oversight overriding
initializeLookupMenuSelection unnecessarily)
Bug: 51404
Bug: 51065
Bug: 51415
Bug: 51523
Change-Id: I339d9253ad472c2f42c3179edc84a83d27561270
== 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
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
Due to CSS specificity rules the styles defined for
.ve-ui-panelLayout-scrollable and .ve-ui-panelLayout-padded in
ve.ui.Layout.css were being overriden by more general rules for
.ve-ui-pagedDialog-pagesPanel .ve-ui-panelLayout in ve.ui.Dialog.css.
Bug: 51739
Change-Id: If2d5ec3168a874eb4f856450583d6c89967513df
Objectives:
* Merge reference insert and edit dialogs
* Change workflow to put editing/creating a new reference first
* Add secondary page in dialog for selecting an existing reference
Changes:
*.php
* Cleanup unused files/messages
ve.ui.Dialog.css
* In the footer; make primary, constructive and destructive buttons
appear on the right; all others on the left
ve.ui.MWReferenceSearchWidget.js
* Fix documentation
* Remove create option and reuse section header items
ve.ui.MWReferenceInsertButtonTool.js,
ve.ui.MWReferenceEditButtonTool.js,
ve.ui.MWReferenceButtonTool.js
* Merge reference button tools
ve.ui.MWDialog.css
* Remove body styles, use padded option of layout instead
* Update selectors as per merging of dialogs
ve.ui.MWReferenceInsertDialog.js
ve.ui.MWReferenceEditDialog.js
ve.ui.MWReferenceDialog.js
* Merge reference dialogs
* Add buttons to switch between edit and select mode
ve.init.mw.ViewPageTarget.js
* Update reference button name as per merging of tools
ve.ui.SurfaceWidget.js
* New widget!
* Encapsulates a "sub-surface"
Bug: 51152
Bug: 50458
Change-Id: I8265febf4fd8f64d2ac40470ff033bac68b24d99
Objectives:
* Add option to layouts to control whether it's padded or not
* Rename "scroll" option to "scrollable" to better fit with it's boolean value
Changes:
ve.ui.Layout.css
* Add styles for scrollable and padded options
ve.ui.StackPanelLayout.js, ve.ui.PagedDialog.js, ve.ui.ReferenceListDialog.js
* Update use of scroll option
ve.ui.PanelLayout.js
* Add padded option
* Rename scroll option to scrollable
* Switch to using a class for scrollable option, rather than hardcoding CSS properties
Change-Id: I50e996b9d2fde361238cde75e09baa5872e12223
Objective:
* Allow fieldsets to not have labels
* Remove label from reference edit dialog field set
Changes:
ve.ui.Layout.css
* Only apply negative top margin if fieldset label is being used
ve.ui.FieldsetLayout.js
* Only add label element to DOM if icon or label are used
ve.ui.MWReferenceEditDialog.js
* Remove label from reference edit dialog's first fieldset
*.php
* Remove unused message
Change-Id: I4a36e819ec6ef73aad80d3fb2f06000cb35ec109
Objectives:
* Reduce the number of clicks and mouse maneuvers required to insert
media, references or template parameters
* Make use of highlighting with mouse movement or arrow key presses,
similar to menus, to suggest action when clicked
* Improve the way media search results look and feel
Changes:
ve.ui.SelectWidget.js
* Add mouseleave handler to un-highlight when the mouse exits the widget
* Document highlight events (already being emitted)
ve.ui.SearchWidget.js
* Propagate both select and highlight events from results widget
* Make arrow keys change highlight instead of selection
* Get rid of enter event, make enter key select highlighted item instead
* Provide direct access to results widget through getResults method
ve.ui.MenuWidget.js
* Use the selected item as a starting point if nothing is currently
highlighted when adjusting the highlight position
ve.ui.Dialog.js
* Add footless option to hide the foot element and make the body extend
all the way down to the bottom
* Remove applyButton, which only some dialogs need, and should be creating
themselves, along with other buttons as needed
ve.ui.Widget.css
* Change highlight and selected colors of option widgets to match other
selection colors used elsewhere
* Leave selected and highlighted widget looking selected
ve.ui.Frame.css
* Add background color to combat any color that might have been applied to
the frame body in the imported CSS from the parent frame
ve.ui.Dialog.css
* Add rules for footless mode
ve.ui.MWReferenceResultWidget.js,
ve.ui.MWParameterResultWidget.js,
ve.ui.MWMediaResultWidget.js
* Allow highlighting
ve.ui.MWParamterSearchWidget.js
* Switch from selecting the first item when filtering to highlighting
ve-mw/ve.ui.Widget.js
* Adjust media result widget styling to better match other elements
ve.ui.MWTransclusionDialog.js,
ve.ui.MWReferenceListDialog.js,
ve.ui.MWReferenceEditDialog.js,
ve.ui.MWMetaDialog.js
ve.ui.MWMediaEditDialog.js
* Add apply button, as per it being removed from parent class
ve.ui.MWTransclusionDialog.js,
ve.ui.MWReferenceInsertDialog.js,
ve.ui.MWMediaInsertDialog.js
* Insert parameter/reference/media on select, instead of clicking an
insert button
* Use 'insert' instead of 'apply' as argument for close method
Bug: 50774
Bug: 51143
Change-Id: Ia18e79f1f8df2540f465468edb01f5ce989bf843
Objective:
* Make outline widgets and fieldset layouts take up a little less space
Bonus:
* Fix option icons always showing up on the first item because the option
wasn't position relative
Changes:
ve.ui.Widget.css
* Add position: relative to option widgets
* Cleanup unused background properties for outline items
* Reduce padding for outline items
* Move icons to match padding changes
ve.ui.Layout.css
* Reduce margins for fieldset layouts, including using a negative top
margin to compensate for the overly tall legend
Change-Id: Ida6147b8171dcb4152ca9be0e099a5f9b81ac1c0
Objective:
* Cut off really long parameter names with ellipsis
Changes:
ve.ui.Widget.css
* Use ellipsis when option labels get too long
ve-mw/ve.ui.Widget.css
* Limit the size of a parameter result widget label - this is a hack, but
since there are strange bugs with using ellipsis together with % based
width, it's the best we can do for now
Bug: 50800
Change-Id: Idbfa336d2bba376b0d078fdd0ece65926d610d81
Objectives:
* Make context menu toolbar consistently sized and aligned, especially
in monobook
Changes:
ve.ui.Toolbar.css
* Remove vertical line between groups, just use whitespace
* Switch from padding to margins to avoid size calculation issues
ve.ui.Tool.css
* Remove tiny margin on button tools, tightening them up a bit
* Replace 50% 50% with center center
ve.ui.Context.css
* Switch from padding to margins to avoid size calculation issues
* Use different margins depending on text direction
* Reverse the 0.8em rule used in the dialog - this is a hack, it should
be cleanup up later with a better strategy for normalizing the size
of text within VE elements
Change-Id: If65f12382625efa33777e284bd23a94dc509436a
Reference counting indicates these styles are not in use, so they can now be safely garbage collected.
Change-Id: I432f73490eeb00ff414f150fcf26c718607bac95
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
We previously manually loaded CSS into these frames, which is flawed
because it completely bypasses ResourceLoader (so CSSJanus didn't flip
them, necessitating a bunch of hacks for RTL), and doesn't pull in
MediaWiki styles (so templates inside references don't render correctly).
Instead, this commit copies all styles from the main document into each
frame's document, inlining what it can.
Loading all styles in dialogs and inspectors caused some problems,
initially. We didn't namespace our styles for dialogs vs. inspectors
at all; the only reason inspector styles weren't being applied to dialogs
and vice versa was because we controlled which files were being loaded
in which context. This commit namespaces the inspector and dialog styles
where needed so they don't conflict and try to override each other.
Tested in Vector and Monobook, but not in Apex and not in RTL.
ve.init.mw.ViewPageTarget*.css:
* Namespace styles that are only intended for the main document
* Undo Monobook's font-size: x-small; in frames
*Dialog.js:
* Remove addLocalStylesheet() calls, we don't need those any more
** ve.ui.MWDialog seems to be unneeded now, we may want to remove it
*.css:
* Remove @noflip-ped RTL rules where they were just flipped versions of
their LTR counterparts
ve.ui.Dialog.css, ve.ui.Inspector.css:
* Namespace styles with .ve-ui-dialog-content / .ve-ui-inspector-content
ve.ui.Frame.css:
* Move the margin:0 and padding:0 here (were in the frame <body>'s style
attribute) and add background:none to prevent frames from getting
the skin's background (grey in Vector, a book in Monobook)
ve.ui.Dialog.js, ve.ui.Inspector.js:
* Add ve-ui-dialog-content / ve-ui-inspector-content class to the
frame's content <div> so we can restrict styles to only apply in
dialogs / inspectors
ve.ui.Frame.js:
* Replace infrastructure for @import-ing stylesheets with transplantation
* Remove code polling to see when the stylesheets were loaded
** We can't do this in the new approach AFAIK, since all styles in the
frame are either inlined or inaccessible due to the same-origin policy
** We also shouldn't need it because the browser should have cached the
styles when it loaded the main document
* Apply ve-ui-frame-body class to the frame's <body> so we can style it
** Move inline padding:0;margin:0; into ve.ui.Frame.css
** Move the ve-ltr/ve-rtl class up to the <body>
ve.ui.Window.js:
* Remove infrastructure registering stylesheet URLs to load
Change-Id: I4a37115301811ad860f4578344a04873ea8c2b69
Whoops, merged too soon. The dropdown part of it doesn't
actually work right.
This reverts commit 3c51ebad93.
Change-Id: Ieafbf18ca8a43b07e33a787772abbc77aef63e4c
This re-fixes the fix to the frame fix. fix fix.
Two things changed: Background position flipped to the right properly
(was somewhat off before) and text-alignment flipped as well.
Bug: 49613
Change-Id: I0aa317ef674537d20d7ed64e74eaa3cfe8030c8c
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
Objective:
* Allow browsing, searching and adding documented parameters
Changes:
ve.ui.MWTransclusionDialog.js
* Replace regular text input with ve.ui.ParameterSearchWidget
* Fix uses of $(), this.frame.$$ is correct
ve.ui.Dialog.css
* Change rules for addParameterFieldset to make search widget auto-size vertically
ve.ui.Widget.css
* Add styles for ve.ui.MWParameterResultWidget
ve.ui.MWParameterSearchWidget.js, ve.ui.MWParameterResultWidget.js
* New classes
* Provides a way to search and select parameter for a template
* Displays parameter label, name, aliases and description
*.php
* Links to new files and messages
Change-Id: Ie5dbe8c44ce5d64c4b49b09517fb66cd30dd7304
