github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-01-23 22:08:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15580 from atom/as-update-scrollbars-on-detach-reattach

Browse Source 
Flush scroll position to dummy scrollbar components on re-attach
This commit is contained in:
Antonio Scandurra
2017-09-07 16:39:16 +02:00
committed by GitHub
parent e90323765c 806b652da4
commit 4b3fa34d4e
2 changed files with 44 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
spec/text-editor-component-spec.js
View File

@@ -378,35 +378,50 @@ describe('TextEditorComponent', () => {
expect(horizontalScrollbar.style.visibility).toBe('')
})
it('updates the bottom/right of dummy scrollbars and client height/width measurements without forgetting the previous scroll top/left when scrollbar styles change', async () => {
const {component, element, editor} = buildComponent({height: 100, width: 100})
expect(getHorizontalScrollbarHeight(component)).toBeGreaterThan(10)
expect(getVerticalScrollbarWidth(component)).toBeGreaterThan(10)
setScrollTop(component, 20)
setScrollLeft(component, 10)
await component.getNextUpdatePromise()
describe('when scrollbar styles change or the editor element is detached and then reattached', () => {
it('updates the bottom/right of dummy scrollbars and client height/width measurements', async () => {
const {component, element, editor} = buildComponent({height: 100, width: 100})
expect(getHorizontalScrollbarHeight(component)).toBeGreaterThan(10)
expect(getVerticalScrollbarWidth(component)).toBeGreaterThan(10)
setScrollTop(component, 20)
setScrollLeft(component, 10)
await component.getNextUpdatePromise()
const style = document.createElement('style')
style.textContent = '::-webkit-scrollbar { height: 10px; width: 10px; }'
jasmine.attachToDOM(style)
// Updating scrollbar styles.
const style = document.createElement('style')
style.textContent = '::-webkit-scrollbar { height: 10px; width: 10px; }'
jasmine.attachToDOM(style)
TextEditor.didUpdateScrollbarStyles()
await component.getNextUpdatePromise()
TextEditor.didUpdateScrollbarStyles()
await component.getNextUpdatePromise()
expect(getHorizontalScrollbarHeight(component)).toBe(10)
expect(getVerticalScrollbarWidth(component)).toBe(10)
expect(component.refs.horizontalScrollbar.element.style.right).toBe('10px')
expect(component.refs.verticalScrollbar.element.style.bottom).toBe('10px')
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBe(10)
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(20)
expect(component.getScrollContainerClientHeight()).toBe(100 - 10)
expect(component.getScrollContainerClientWidth()).toBe(100 - component.getGutterContainerWidth() - 10)
expect(getHorizontalScrollbarHeight(component)).toBe(10)
expect(getVerticalScrollbarWidth(component)).toBe(10)
expect(component.refs.horizontalScrollbar.element.style.right).toBe('10px')
expect(component.refs.verticalScrollbar.element.style.bottom).toBe('10px')
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBe(10)
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(20)
expect(component.getScrollContainerClientHeight()).toBe(100 - 10)
expect(component.getScrollContainerClientWidth()).toBe(100 - component.getGutterContainerWidth() - 10)
// Detaching and re-attaching the editor element.
element.remove()
jasmine.attachToDOM(element)
// Ensure we don't throw an error trying to remeasure non-existent scrollbars for mini editors.
await editor.update({mini: true})
TextEditor.didUpdateScrollbarStyles()
component.scheduleUpdate()
await component.getNextUpdatePromise()
expect(getHorizontalScrollbarHeight(component)).toBe(10)
expect(getVerticalScrollbarWidth(component)).toBe(10)
expect(component.refs.horizontalScrollbar.element.style.right).toBe('10px')
expect(component.refs.verticalScrollbar.element.style.bottom).toBe('10px')
expect(component.refs.horizontalScrollbar.element.scrollLeft).toBe(10)
expect(component.refs.verticalScrollbar.element.scrollTop).toBe(20)
expect(component.getScrollContainerClientHeight()).toBe(100 - 10)
expect(component.getScrollContainerClientWidth()).toBe(100 - component.getGutterContainerWidth() - 10)
// Ensure we don't throw an error trying to remeasure non-existent scrollbars for mini editors.
await editor.update({mini: true})
TextEditor.didUpdateScrollbarStyles()
component.scheduleUpdate()
await component.getNextUpdatePromise()
})
})
it('renders cursors within the visible row range', async () => {
@@ -1142,7 +1157,7 @@ describe('TextEditorComponent', () => {
expect(component.getScrollTopRow()).toBe(4)
expect(component.getScrollTop()).toBe(Math.round(4 * component.getLineHeight()))
// Preserves the scrollTopRow when sdetached
// Preserves the scrollTopRow when detached
element.remove()
expect(component.getScrollTopRow()).toBe(4)
expect(component.getScrollTop()).toBe(Math.round(4 * component.getLineHeight()))

3
src/text-editor-component.js
View File

@@ -1403,6 +1403,9 @@ class TextEditorComponent {
if (this.isVisible()) {
this.didShow()
if (this.refs.verticalScrollbar) this.refs.verticalScrollbar.flushScrollPosition()
if (this.refs.horizontalScrollbar) this.refs.horizontalScrollbar.flushScrollPosition()
} else {
this.didHide()
}