Some or all of this may not be specific to the Citation insertion tool. It might be generally applicable to the context tools and/or might even be down to OOUI, but I'll leave that for further analysis.
Below is a video capture performing the following three interactions:
* Start the editor.
* Press "Cite".
* Press "Cancel" (or escape).
### Video capture
{F18673178}
### Timeline
To notice the imperfections more easily I recommend clicking the preceding image (opens in Phabricator's lightbox) and using the arrow keys to quickly jump back and forth.
| Timepoint 0: Surface loading (initial) | Timepoint 1: Surface loading (toolbar sliding)
| {F18673333} | {F18673334}
* "View mode" content was shifted down a few pixels.
* Toolbar shadow appears.
* Progress bar progresses.
| Timepoint 2: Surface loading (background complete)
|--
| {F18673337}
* Toolbar placeholder replaced with real toolbar.
* "View mode" content swapped with "Edit mode" content, including text cursor appearing at start of content.
* Progress bar progresses.
Issues:
1. The "[edit]" section links disappear at this point. While understandable that they are absent in "edit" content, they should have been hidden from the "view" content as soon as the editor started loading. We already do this for other obvious differences between "view" and "edit" content. For example, the table of contents is already hidden as soon as the editor starts loading. Adding the section edit links to this list of hidden elements to hide from "view" content while loading the editor would reduce the visually changing steps the user sees.
2. The reference marker (e.g. [1]) grows slightly. The difference is so small that this is probably not intentional. Might require some styles to be synced somewhere.
3. The backlink in the references list has a different indicator (`^`vs `↑ `).
4. The backlink in the references list gains extra spacing/margin, shifting the text sideways.
5. The content area grows by about two lines. Unsure why.
| Timepoint 3: Surface loaded.
| {F18673339}
* The surface un-dims and the progress bar disappears.
| Timepoint 4: Text cursor moved. | Timepoint 5: Hover on "Cite".
| {F18673341} | {F18673343}
* The "Cite" button changes color for hover state (white to grey).
| Timepoint 6: "Cite" was clicked.
|--
| {F18673346}
* The "Cite" button changes color for active state (grey to blue).
* Placeholder reference is rendered in the content as pre-selected `[2]`.
Issues:
6. The text cursor now appears at the start of the document. Unclear why.
| Point 7: Cite tool prepares.
|--
| {F18673348}
* The "Cite" button changes color back to hover state (blue to grey).
* The text cursor is no longer in the document (makes sense, focus will soon move to the insertion tool).
Issues:
7. Font size of the content in the references list suddenly grows in size and gains an additional margin. Unclear why in general but also unclear why this only happens if and when the "Cite" tool is activated. When opening a page and using other tools only, the size would not change.
| Timepoint 8: Cite tool appears. | Timepoint 9: Cite tool appears (fixup).
|--|--
| {F18673350} | {F18673352}
* Text cursor now appears in the URL input field for "Automatic".
* ULS input helper appears at the bottom right of the input filed.
* Focus state of input starts appearing. (grey inner shadow)
Issues:
8. The "Cancel" button was absent from the initial rendering but appears now.
| Timepoint 10: Cite tool appears (focussed).
| {F18673354}
* Focus state of input is complete. (blue outline)
| Timepoint 11: Cancel intent given (pressed escape).
| {F18673356}
* Mouse cursor over "Cite" button disappears. (native browser behaviour)
* Text cursor in Citation tool input field disappears.
* ULS input helper disappears.
* Placeholder reference disappears from document.
* Text cursor re-appears in document where it was before pressing "Cite".
| Timepoint 12: Cite tool is deconstructing.
|--
| {F18673358}
This frame should be the same as point 11, but without the citation tool. Instead, it is taking multiple (visually distinct) stages.
Issues:
9. The "Cancel" button disappears.
10. The citation tool flickers and re-appears briefly slightly lower and to the left side of the screen. Unclear why. (might relate to issue 7, where the text cursor was at the start of the document)
| Timepoint 13: Cite tool has closed.
| {F18673360}
### Issues summary
1. [ ] The section-edit links should hide earlier. (Timepoint 2)
2. [ ] The reference marker should not grow. (Timepoint 2)
3. [ ] The backlink in the references list should not change its indicator. (Timepoint 2)
4. [ ] The backlink in the references list should not change spacing/margin. (Timepoint 2)
5. [ ] The content area should not grow again after activation has already started. (Timepoint 2)
6. [ ] The text cursor should not move to the start of the document after pressing "Cite". (Timepoint 6)
7. [ ] The font size of the references list should not change after pressing "Cite". (Timepoint 7)
8. [ ] The "Cancel" button should not appear separately from. (Timepoint 9)
9. [ ] The "Cancel" button should not disappears separately. (Timepoint 12)
10. [ ] The citation tool should not re-appear on the left side after closing. (Timepoint 12)