Problem/Motivation

The horizontal/vertical icons of the toolbar are not always displayed, when the toolbar has multiple items.
This happens for example when other modules like the Workbench module are installed. The module adds the toolbar item "Workbench". I can see the icons, when I click the that "Workbench" toolbar item (see missing_icon2.png), but when I switch to "Manage" I will not see the icons anymore (see missing_icon.png).
I noticed that the buttons have the value "horizontal" or "vertical" when I am on "Workbench". Those values are completely missing when I'm on the other item and since the css uses for example [value="vertical"], it will not apply the styling (in this case the background-image) to the element.

This happens due to some changes of the toolbar's javascript (Issue #3239134):

Before the changes:

const $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
$orientationToggle.find('button').val(antiOrientation).attr('title',this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);

After the changes:

var $orientationToggleButton = $orientationToggle.find('button');
$orientationToggleButton[0].value = antiOrientation;

The [0] only applies the value to the first button, which is from the Workbench tab. That is why the icons are missing for the other tab.

Steps to reproduce

1. Install drupal/workbench module
2. Click the "Manage" tab of the toolbar
3. You should not see the vertical/horizontal Icon in the toolbar
4. Click the "Workbench" tab of the toolbar
5. You should see the vertical/horizontal Icon in the toolbar

Proposed resolution

Revert the changes in the toolbar javascript back to how it was before the change.

Issue fork drupal-3334212

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

lmoeni created an issue. See original summary.

lmoeni’s picture

Issue summary: View changes
lmoeni’s picture

Issue summary: View changes
beatrizrodrigues’s picture

Assigned: Unassigned » beatrizrodrigues

I'll be working on that issue.

lmoeni’s picture

@beatrizrodrigues sorry, I did not see your comment before creating the MR.
I'm quite new to this. Could you take a look at the MR? Or do you have some other sugesstions how to solve this issue?

lmoeni’s picture

Status: Active » Needs review
beatrizrodrigues’s picture

Assigned: beatrizrodrigues » Unassigned

No problem @lmoeni. I will just send this to needs work because it seems the test failed.

Something about:

/var/www/html/core/modules/toolbar/js/views/ToolbarVisualView.es6.js
  291:9  error  Prefer value to $.val  jquery/no-val
lmoeni’s picture

@beatrizrodrigues I didn't realize that val() and text() weren't allowed anymore. I changed it so that it applies the value and text to all necessary button elements without jquery.

deepalij’s picture

StatusFileSize
new53.84 KB
new45.74 KB

Couldn't able to reproduce the issue.
Able to see the vertical/horizontal Icon in the toolbar without applying the patch
Refer to the screenshots

hosterholz’s picture

Status: Needs review » Reviewed & tested by the community

I can reproduce the issue. Proposed patch solves the problem.

jungle’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs tests

As a bug, A test is expected.

lmoeni’s picture

I added a patch for Drupal 10.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

andriic’s picture

I've also noticed this bug.
Patch #13 for Drupal 10 helped!
tnx

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

Status: Needs work » Postponed

The Toolbar Module was approved for removal in #3476882: [Policy] Move Toolbar module to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3484850: [meta] Tasks to deprecate Toolbar module and the removal work in #3488828: [meta] Tasks to remove Toolbar module.

Toolbar will be moved to a contributed project before Drupal 12.0.0 is released.

quietone’s picture

Project: Drupal core » Toolbar
Version: main » 1.x-dev
Component: toolbar.module » Code
Status: Postponed » Needs work

Toolbar has moved to contrib