[History] Show URL tooltips in side panel

Grouped History side panel에서 URL 길이와 관계없이 전체 주소를 확인할 수 있도록 native tooltip 동작을 개선했습니다.

문제 설명

Grouped History side panel의 폭이 좁으면 방문 기록의 URL이 말줄임표로 잘려 전체 주소를 확인하기 어려웠습니다.

초기 구현에서는 URL이 실제로 잘렸을 때만 tooltip을 표시하기 위해 다음 로직을 사용했습니다.

mouseenter 이벤트에서 tooltip 설정
scrollWidth > clientWidth로 overflow 여부 확인
overflow된 URL에만 title 속성 설정
visit 변경 시 이전 title 속성 제거

하지만 코드 리뷰 과정에서 Chromium History의 Date view는 항목이 잘렸는지와 관계없이 모든 항목에 native tooltip을 제공한다는 피드백을 받았습니다.

Date view 구현을 확인한 결과, 별도의 hover event나 DOM width 측정 없이 template에서 native title 속성을 직접 binding하고 있었습니다.

Date view와 Grouped History에서 tooltip에 사용하는 문자열은 서로 다릅니다.

Date view: 페이지 제목인 item.title
Grouped History: 화면에 표시되는 URL인 visit.urlForDisplay

표시 내용은 다르지만, 현재 화면에 표시되는 정보를 native title attribute로 제공한다는 UI pattern은 동일합니다.

해결 내용

Date view의 기존 tooltip 구현을 조사했습니다.

Date view는 URL의 truncation 여부를 검사하지 않고 링크와 제목 요소에 item.title을 직접 binding합니다.

Grouped History side panel URL에도 같은 native title binding pattern을 적용했습니다.

<span id="url" class="truncate"
    title="${this.inSidePanel_ && this.visit ?
        this.visit.urlForDisplay :
        nothing}"></span>

다음 imperative logic을 제거했습니다.
- mouseenter event handler
- scrollWidth와 clientWidth 비교
- overflow 여부에 따른 title 추가 및 제거
- visit 변경 시 stale title을 별도로 정리하는 코드
Lit의 declarative rendering을 사용해 visit이 변경되면 tooltip도 새로운 urlForDisplay 값으로 자동 갱신되도록 했습니다.
변경 범위는 이슈가 발생한 Grouped History side panel로 한정했습니다. 같은 component가 사용되는 full-page Grouped History의 기존 동작은 변경하지 않았습니다.
WebUI 회귀 테스트를 추가하고 browser test target에 등록했습니다.

테스트 방법

다음 target을 빌드했습니다.

autoninja -C out/Default browser_tests chrome

개발용 SUID sandbox와 Xvfb 환경에서 browser test를 실행했습니다.

CHROME_DEVEL_SANDBOX=/usr/local/sbin/chrome-devel-sandbox \
  xvfb-run -a out/Default/browser_tests \
  --gtest_filter='CrComponentsHistoryClustersTest.UrlVisit'

다음 동작을 검증하는 WebUI 테스트를 추가했습니다.

ShowsTooltipForShortUrl
- 짧아서 잘리지 않는 URL에도 전체 URL tooltip이 표시되는지 확인
ShowsTooltipForLongUrl
- 긴 URL에도 전체 URL tooltip이 표시되는지 확인
UpdatesTooltipWhenVisitChanges
- visit 데이터가 변경되면 tooltip도 새로운 URL로 갱신되는지 확인

새 정책에 맞춘 테스트를 production code보다 먼저 실행했을 때 기존 구현에서 3개 테스트가 모두 실패하는 것을 확인했습니다.

구현 변경 후에는 다음 결과를 확인했습니다.

WebUI tests: 3/3 PASS
CrComponentsHistoryClustersTest.UrlVisit: 1/1 PASS

이번 변경은 별도의 성능 benchmark를 수행하지 않았습니다. 기존 hover-time DOM width 측정과 event handler를 제거하고 native title binding만 사용하므로 추가적인 layout 측정도 발생하지 않습니다.

배운 점

UI 일관성을 맞출 때 새로운 tooltip component나 전역 스타일을 만드는 것보다 기존 화면이 사용하는 native mechanism을 먼저 확인하는 것이 중요하다는 점을 배웠습니다.
Lit component에서는 event handler로 DOM 상태를 직접 관리하는 것보다 template에 상태를 declarative하게 binding하는 방식이 더 단순하고 데이터 변경에도 안전하다는 점을 확인했습니다.
scrollWidth와 clientWidth 같은 구현 세부사항을 mocking하는 테스트보다 짧은 URL, 긴 URL, 데이터 갱신처럼 사용자에게 보장할 동작을 직접 검증하는 테스트가 유지보수에 유리하다는 점을 배웠습니다.
서로 다른 화면의 tooltip 내용이 완전히 같지 않더라도 native title binding과 표시 정책을 동일하게 적용해 일관된 UX를 제공할 수 있었습니다.
리뷰 피드백을 구현하기 전에 관련 source를 조사하면 변경 범위를 줄이면서 기존 Chromium UI pattern에 맞는 해결책을 선택할 수 있었습니다.

문제 설명

해결 내용

테스트 방법

배운 점

참고 자료