From 1dd617e09146409fd1742d2b0594658771779512 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 11 Mar 2020 13:52:26 +0100 Subject: [PATCH] Remove transition effects from toolbar buttons/fields While Firefox originally used transition effects for browser UI toolbar buttons, that was removed years ago in https://bugzilla.mozilla.org/show_bug.cgi?id=1393057 Since the PDF.js viewer toolbar transitions were likely based on the Firefox ones, it seems reasonable that these transition effects are removed from PDF.js as well. Besides removing a bunch of CSS, this also makes the toolbar feel ever so slightly more "snappy" without these delays on mouse interaction. (In order to make it more feasible to modernize/improve the viewer UI, trying to clean-up/simplify existing rules iteratively seems like the most reasonble way to make any progress here w.r.t. being able to test/review things.) --- web/viewer.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 2e15975ee..290192103 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -546,10 +546,6 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 0 rgba(255, 255, 255, 0.05); - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; - } .splitToolbarButton > .toolbarButton:hover, .splitToolbarButton > .toolbarButton:focus, @@ -608,9 +604,6 @@ html[dir='rtl'] .splitToolbarButtonSeparator { padding: 12px 0; margin: 1px 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03); - transition-property: padding; - transition-duration: 10ms; - transition-timing-function: ease; } .toolbarButton, @@ -627,9 +620,6 @@ html[dir='rtl'] .splitToolbarButtonSeparator { user-select: none; /* Opera does not support user-select, use <... unselectable="on"> instead */ cursor: default; - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; } html[dir='ltr'] .toolbarButton, @@ -669,9 +659,6 @@ html[dir='rtl'] .dropdownToolbarButton { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.05); - transition-property: background-color, border-color, box-shadow; - transition-duration: 10ms; - transition-timing-function: linear; } .toolbarButton.toggled, @@ -683,9 +670,6 @@ html[dir='rtl'] .dropdownToolbarButton { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.05); - transition-property: background-color, border-color, box-shadow; - transition-duration: 10ms; - transition-timing-function: linear; } .toolbarButton.toggled:hover:active, @@ -1041,9 +1025,6 @@ html[dir='rtl'] .verticalToolbarSeparator { font-size: 12px; line-height: 14px; outline-style: none; - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; } .toolbarField[type=checkbox] {