Edit toolbar tab animation is distracting

Just a re-roll

Changing to new settings_tray.module component. @drpal thanks for script help! :)

Needs reroll at least for changes in #2803375: Rename Outside-in module to "Settings Tray" for real

Re-rolled.

@Jo Fitzgerald thanks for the re-roll!!!!!!!!!! 🙌

I am trying to test the patch and I don't think I see the difference with the edit button. I think we an update to describe what the patch is actually trying to fix and how to tell the difference.

Looking at this again I don't this patch fixes it.

Also if I disable the Settings Tray module and just have contextual enable I still the flicker on the edit button(on the right). It is not as noticable because the edit button is not a different color but it is still there.

I think this is because the Edit button is always loaded as hidden and then set visible if there are contextual links on the page in the core/modules/contextual/js/toolbar/views/VisualView.es6.js Drupal.contextualToolbar.VisualView.render()

It would be good to get someone else to confirm that this is the case or is there still some other flicker that I am missing.

If it is a problem with the contextual module should be change it that component and solve it there or is it only a problem because the edit button is a different color.

Here is the rerolled patch anyways. I don't think it fixes the problem but just so someone else can test it.

I pinged @webchick

Re-rolled for 9.2

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

Was previously tagged for issue summary update in #10 that still needs to happen.

Tagging for screenshots or better yet videos of the before/after.

Thanks!

This CSS no longer applies anywhere.

/* Transition the edit icon in the toolbar. */
#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
  transition: all 0.7s ease;
}

<button class="toolbar-icon toolbar-icon-edit toolbar-item is-active" aria-pressed="true" type="button" data-drupal-settingstray="toggle" data-once="settingstray">Editing</button> Button no longer has toolbar-bar ID.

<nav id="toolbar-bar" role="navigation" aria-label="Toolbar items" class="toolbar-bar clearfix js-settings-tray-edit-mode" data-offset-top="" data-once="admin-toolbar-search"> have the id="toolbar-bar" ID.

This was a bugsmash daily triage target today.

This still needs an issue summary update, taking note that #12 it is reported that the issue happens with the settings tray module enabled and questions were asked there that need to be answered. Since #12 needs to be addressed before working on a patch, I am setting the status to active. I have updated the Issue Summary with some tasks.

tried patch from #22 but not applied please share process to reproduce the issue.

i have tried to replicate the issue on 9.2 and 11.x but unable to reproduce even applied patch manually but nothing happened this css

#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit::before {
  transition: all 0.7s ease;
}

its not applying any where until i modify it like this but still no flicker issue found.

#toolbar-bar button.toolbar-icon.toolbar-icon.toolbar-icon-edit::before {
   transition: all 0.7s ease;
}

if i am doing something wrong do let me know or explain the issue with more detail so i can replicate it correctly.

@saurav-drupal-dev, thanks for testing this!

This must have been fixed sometime in the five or so years since it was opened and the manual testing. Therefor, I am closing this as outdated. I have updated credit.