Merge pull request #22 from atom-ide-community/scroll

Author: aminya

.gitignore

@@ -12,3 +12,4 @@ package-lock.json
 # Build directories
 package
 commons-atom
+commons-ui

package.json

@@ -28,13 +28,16 @@
     "lint": "eslint . --fix",
     "test": "atom --test spec",
     "clean": "shx rm -rf package commons-atom",
+    "tsc.commons-ui": "tsc -p src-commons-ui/tsconfig.json || echo done",
+    "dev.commons-ui": "tsc -w -p src-commons-ui/tsconfig.json",
+    "build.commons-ui": "npm run tsc.commons-ui",
     "tsc.commons-atom": "tsc -p src-commons-atom/tsconfig.json || echo done",
     "dev.commons-atom": "tsc -w -p src-commons-atom/tsconfig.json",
     "build.commons-atom": "npm run tsc.commons-atom",
     "tsc.package": "tsc -p src-package/tsconfig.json || echo done",
     "dev.package": "npm run clean && cross-env NODE_ENV=development cross-env BABEL_KEEP_MODULES=true rollup -c -w",
     "build.package": "npm run clean && cross-env NODE_ENV=production cross-env BABEL_KEEP_MODULES=true rollup -c",
-    "build": "npm run build.package && npm run build.commons-atom",
+    "build": "npm run build.package && npm run build.commons-atom && npm run build.commons-ui",
     "build-commit": "build-commit -o dist",
     "bump": "ncu -u -x coffeescript",
     "prepare": "npm run build"

src-commons-ui/scrollIntoView.ts

@@ -0,0 +1,67 @@
+/* globals getComputedStyle */
+
+/**
+ * Use these functions instead of `Element::scrollIntoView()` and
+ * `Element::scrollIntoViewIfNeeded()`!
+ *
+ * We've had a recurring issue in Nuclide (e.g. T20028138) where the UI would shift, leaving part of
+ * the workspace element offscreen and a blank area in the window. This was caused by called to the
+ * native `scrollIntoView()` and `scrollIntoViewIfNeeded()` which, according to the spec, has two
+ * potentially surprising behaviors:
+ *
+ * 1. [It scrolls every scrollable ancestor (not just the closest)][1], where
+ * 2. "scrollable" is [explicitly defined][2] to include elements with `overflow: hidden`
+ *
+ * This is surprising because `overflow: hidden` is typically used to make elements *not
+ * scrollable*.
+ *
+ * Once the `overflow: hidden` element is scrolled, the user has no way to return it to its original
+ * position (as it has no scrollbars).
+ *
+ * Note that this API doesn't support smooth scrolling. If that becomes necessary, we'll need to
+ * come up with a better fix.
+ *
+ * It's tempting to assume that using `scrollIntoViewIfNeeded()` would fix this issue, however, if
+ * the window is small enough so that no amount of scrolling the desired scrollable element would
+ * ever reveal the element you're trying to, the browser will keep scrolling ancestors.
+ *
+ * [1]: https://drafts.csswg.org/cssom-view/#element-scrolling-members
+ * [2]: https://drafts.csswg.org/cssom-view/#scrolling-box
+ */
+
+export function scrollIntoView(el: Element, alignToTop?: boolean): void {
+  const scrollTops = getScrollTops(el)
+  el.scrollIntoView(alignToTop)
+  restoreOverflowHiddenScrollTops(scrollTops)
+}
+
+export function scrollIntoViewIfNeeded(el: Element, center?: boolean): void {
+  const scrollTops = getScrollTops(el)
+  el?.scrollIntoViewIfNeeded(center) ?? el.scrollIntoView(center)
+  restoreOverflowHiddenScrollTops(scrollTops)
+}
+
+function getScrollTops(el_: Element): Map<Element, number> {
+  let el: Element | null = el_
+  const scrollTops = new Map()
+  while (el != null) {
+    scrollTops.set(el, el.scrollTop)
+    el = el.parentElement
+  }
+  return scrollTops
+}
+
+function restoreOverflowHiddenScrollTops(scrollTops: Map<Element, number>): void {
+  scrollTops.forEach((scrollTop, el) => {
+    if (el.scrollTop !== scrollTop && isOverflowHidden(el)) {
+      el.scrollTop = scrollTop
+    }
+  })
+}
+
+function isOverflowHidden(el: HTMLElement | SVGElement | Element): boolean {
+  //@ts-ignore
+  const overflowStyle = el?.style.overflow
+  const overflow = overflowStyle ?? getComputedStyle(el).overflow
+  return overflow === "hidden"
+}

src-commons-ui/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../commons-ui"
+  }
+}