Bug 1098639 - The Edit Bookmark Panel animates when opening

[Philip Chee]

Bug 1098639 - The Edit Bookmark Panel animates when opening.

STR:
1. Visit some website
2. On the right side of the location bar there is a bookmark button (some sort of diagonal ribbon-like thing).
3. Clicking on it will open a add bookmark arrow panel.

Cause: Bug 610545 (arrow panels should animate when opening and when cancelling).

To prevent panel popups from animating when opening it suffices to add |animate="false"| to the edit bookmark panel: <panel id="editBookmarkPanel">

To animate or not to animate.

For: Shiny!
Against: Nothing else in SeaMonkey browser animates so it looks out of place.

I have a patch that turns this animation off. Opinions anyone?

Phil

[therube]

2. i virtually never use that "sort of diagonal ribbon-like thing".
(i wonder how many don't even realize just what it is .)


That said, I'm against all "fancy schmancy" & want functionality first.
So if disabling animation makes it "POP" open (rather then being "drawn"), I'm all for it.
Comparing behavior of 2.30 against 2.26.1, it's like who cares.

That said, to me whether it works one or the other - in this case, is so trivial, it would make no difference to me.
The OP doesn't like it, so ...

You could add a Pref to control the behavior, but that would be asinine.

Flip a coin.
Heads it stays as it is, marking the bug as INVALID, tails, you turn off the animation & mark it as FIXED .

Better yet, can you disable the animation with userContent CSS?
If so, post the code, make no change on our end, & let whoever may not like the animation change the behavior on their end.

[smsmith]

The bookmark panel is also the only "doorhanger" style panel, so it *could* be different and animate. But, personally, I don't see a need to have it animate. And as far as I can tell, animations are shut off on Linux, so the experience isn't the same across platforms.

Out of curiosity, are you really using a 2.0.15pre build?

[patrickjdempsey]

I suppose this also means that any extension that used arrow panels would also animate in SeaMonkey? Not that I know of any extensions off-hand that use this... but I'm sure at least one has to exist.

I'm personally against animations in the UI... not because of being old fashioned, but because I think they have the opposite effect than intended and make everything look sloooow.... like the computer is having to think to draw the window. Evey time I see them it reminds me of the final stages of an out-of-memory error right before a crash.

[barbaz]

I suppose this also means that any extension that used arrow panels would also animate in SeaMonkey?

Correct

Not that I know of any extensions off-hand that use this... but I'm sure at least one has to exist.

My (personal, not published anywhere) partial SeaMonkey port of this extension uses an arrow panel, and it's animated (I didn't specify whether to animate).

[patrickjdempsey]

The default is animate=true so you don't have to specify to make it animate. There's probably not going to be any kind of platform-wide way to keep that from happening in extensions... but I think it would be preferable to most SM users if at least the internal UI was consistent and not animated.

[barbaz]

The default is animate=true so you don't have to specify to make it animate.

Upon reading this thread I've added animate=false to my "trunk".
The animation appears to have a negative effect on performance the first time I open the popup.

I think it would be preferable to most SM users if at least the internal UI was consistent and not animated.

I'm one of those SM users. I too think it would be best to have no animations in default SM, and let people make user styles / custom extensions to add whatever animations they want.

[patrickjdempsey]

Lemon Juice could maybe add animate=false for arrowpanels in his converter? I kind of doubt there are any SeaMonkey native extensions that use it.

[Philip Chee]

My (personal, not published anywhere) partial SeaMonkey port of this extension uses an arrow panel, and it's animated (I didn't specify whether to animate).

Reading through the platform bug, the original plan was to make this animation opt-in. Somewhere along the line it changed to opt-out. Just add a animate="false" to your panel.

Phil

[Lemon Juice]

My opinion is this detail is of so little importance that it's not worth discussing it here - apart from purely enjoying the discussion - tossing a coin without asking anyone would be a good option if it only sped up the decision process in either direction . There are so many more worthwhile things to improve in SM!

Lemon Juice could maybe add animate=false for arrowpanels in his converter?

Hm, I'm not convinced it's worth it for such a minor thing, especially that the number of possible affected SM-convertible extensions is probably close to zero. And any change in the converter has a potential (however small) of negatively affecting other extensions (because there is no real code parser in the converter that can ensure with full certainly that animate=false is added to or changed in an arrow panel) so I prefer to stay on the conservative side if not really necessary.

I kind of doubt there are any SeaMonkey native extensions that use it.

Actually, Mouse Gestures Suite uses it indirectly The Add Bookmark gesture causes the arrow panel to pop up (pop down?) and in SM 2.30 this happens with an animation. In this case I think the animation has a positive effect because the appearing arrow panel may be quite far from the mouse cursor and it draws attention to were it shows up. When normally clicking the bookmark icon I think the animation is redundant because the panel appears just next to the cursor so there is no need for any effects to draw our attention there. But either way, the difference is very subtle.

[Frank Lion]

Bug 1098639 - The Edit Bookmark Panel animates when opening.

To animate or not to animate.

Design-wise there are no strict rules on transitions. It's generally accepted that you don't use them on often used areas, such as tabs, sidebars, menus, etc. as they quickly become tiresome. It's unlikely that they actually impede 'productivity' but they feel as if they do, so that's a good enough reason not to use them in those areas.

Where they are acceptable is on one-off or rare use events and also on stuff that overlays content. An example of rare use would be how the Firefox 0.8 Customise Window used to slide into view and you really can toss a coin to decide on doing those or not.

The overlaying content stuff (which this one falls under) transitions are to avoid startling the user, even if the user initiated the action. I use a transition effect on the Find bar, for example, for that very reason. Informational notification bars can slide into view, but anything security related is in stronger colours and appears instantly, as you actually want to startle the user there.

The proper design world has far more 'rules' and is far less 'subjective' than users realise. It also has given a lot more thought to 'function over form' than people think.

In this case, with the Edit Bookmark Panel, I would leave the transition in.

[patrickjdempsey]

I just noticed that the Findbar also animates now when opened and closed thanks to code from Firefox. It would be pretty trivial to fork the findbar XML and restore it's old appearance and simply remove the reference to the Firefox-specific CSS file.

Although Frank has an argument for it. I'm just personally not interested in animations. Those are processing cycles I'd rather have rendering the page.

[Philip Chee]

I just noticed that the Findbar also animates now when opened and closed thanks to code from Firefox. It would be pretty trivial to fork the findbar XML and restore it's old appearance and simply remove the reference to the Firefox-specific CSS file.

Code: Select all

  <binding id="findbar"
           extends="chrome://global/content/bindings/toolbar.xml#toolbar">
    <resources>
      <stylesheet src="chrome://global/skin/findBar.css"/>
    </resources>

The animation is all in the skin findBar.css
http://mxr.mozilla.org/comm-central/find?text=&string=%2Ffindbar.css

Code: Select all

/mozilla/toolkit/themes/linux/global/findBar.css
/mozilla/toolkit/themes/osx/global/findBar.css
/mozilla/toolkit/themes/windows/global/findBar.css
/suite/themes/modern/global/findBar.css

http://mxr.mozilla.org/comm-central/source/mozilla/toolkit/themes/windows/global/findBar.css

Code: Select all

findbar {
  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
  background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  min-width: 1px;
  transition-property: margin-bottom, opacity, visibility;
  transition-duration: 150ms, 150ms, 0s;
  transition-timing-function: ease-in-out, ease-in-out, linear;
}

findbar[hidden] {
  /* Override display:none to make the transition work. */
  display: -moz-box;
  visibility: collapse;
  margin-bottom: -1em;
  opacity: 0;
  transition-delay: 0s, 0s, 150ms;
}

Phil