Problem/Motivation

Created from https://www.drupal.org/project/drupal/issues/2809635#comment-12433583

The permanent message warning tone is a bit aggressive. Let's calm it down a bit.

expermiental profile warning

Proposed resolution

Some suggestions were change to the appearance and make it visible only on the /admin* pages so if the profile is being used to demo to potential clients, etc it is not visible or obstructing.

Tested on simplytest here

Remaining tasks

CommentFileSizeAuthor
#39 interdiff-2938186-34-39.txt1.22 KBsmaz
#39 2938186_39_coding_standards.patch3.63 KBsmaz
#37 Screen Shot 2018-01-29 at 21.30.52.png107.85 KBJohn Cook
#37 Screen Shot 2018-01-29 at 21.30.33.png158.72 KBJohn Cook
#35 interdiff_2938186_33_34.txt388 bytesEli-T
#35 2938186_34_coding_standards.patch4.18 KBEli-T
#33 2938186_33_move_visibility_to_own_test.patch4.18 KBJohn Cook
#33 interdiff-2938186-31-33.txt1 KBJohn Cook
#32 2938186-empty-tab.png17.71 KBsmaz
#31 interdiff-2938186-28-31.txt4.05 KBJohn Cook
#31 2938186_31_move_visibility_to_own_test.patch4.11 KBJohn Cook
#28 interdiff-2938186-25-28.txt2.88 KBEli-T
#28 2938186_28_move_visibility_to_own_test.patch4.45 KBEli-T
#25 tone-down-warning-2938186-25.patch3.32 KBnavneet0693
#25 interdiff-20-25.txt2.43 KBnavneet0693
#20 interdiff-10-19.txt258 bytesmarkconroy
#20 tone-down-warning-2938186-19.patch1.76 KBmarkconroy
#10 interdiff-8-10.txt1.21 KBnavneet0693
#10 tone-down-warning-2938186-10.patch2.14 KBnavneet0693
#8 tone-down-warning-2938186-8.patch2.04 KBnavneet0693
#8 interdiff-4-8.txt1.66 KBnavneet0693
#6 Screen Shot 2018-01-20 at 10.34.06.png41.78 KBmarkconroy
#4 tone-down-warning-2938186-4.patch397 bytesckrina
#3 Captura de pantalla 2018-01-20 a les 8.57.46.png25.2 KBckrina
Screen Shot 2018-01-19 at 23.06.23.png17.53 KBmarkconroy
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markconroy created an issue. See original summary.

webchick’s picture

Priority: Normal » Major
Issue tags: -beta blocker +Umami beta blocker

Since this is a beta blocker, escalating to major.

ckrina’s picture

Assigned: Unassigned » ckrina
FileSize
25.2 KB

I'll work on this. I'll change the colour to #78520D (with #fdf8ed in the background passes AA with 6.5:1).

Warning message

ckrina’s picture

Status: Active » Needs review
FileSize
397 bytes

And here's the small patch.

markconroy’s picture

Issue summary: View changes
Status: Needs review » Needs work

Hi Ckrina,

Thanks for this patch.

I think we should perhaps make the text not bold/strong. Also, I think there was discussion at the product owners meeting about toning down the colour of the thing, not just the text (background and border as well).

A final consideration was to make this only visible on the admin pages, so people would only see it if they try to change configuration rather than at all times.

markconroy’s picture

Issue summary: View changes
FileSize
41.78 KB

Not sure if this is any help, but I'll leave it here for discussion.

toned down umami warning message

.toolbar-warning {
    padding-right: 1em;
    border-radius: 4px;
    background-color: #E0E0D8; // used in seven theme
    background-position: 0.5em center;
    background-size: auto 18px;
    text-indent: 0;
    text-decoration: none;
    font-weight: bold;
    color: #000;
ckrina’s picture

Assigned: ckrina » Unassigned
Issue summary: View changes

Ok Mark! Then this visual changes need to be defined. Updating the issue and unassigning in case anyone wants to work on this before I get time.

navneet0693’s picture

Status: Needs work » Needs review
FileSize
1.66 KB
2.04 KB
andrewmacpherson’s picture

Status: Needs review » Needs work

Review of patch #8

1. Colour contrast.
The colour of the message is #78520d on #fdf8ed, which has a contrast ratio of 6.6:1, which satisifies WCAG at level AA.

However we aren't using this colour combination anywhere else in Drupal core. The existing style for warning messages in Seven and Classy is slightly stronger: #734c00 on #fdf8ed. This has a contrast ratio of 7.2:1 which satisfies WCAG at level AAA. Can we re-use this combination please?

2. Identifying an admin page
+ if (strpos(\Drupal::service('path.current')->getPath(), 'admin')) {

By testing the path like this, it doesn't match pages like the node edit form, where this message would be very useful.

Here's another way to test for admin pages. It matches the node add/edit pages, and others like devel/php too. It's done this way in the patch at #2934374: Add permanent warning message for experimental profiles to avoid its usage on production sites.

$admin_context = \Drupal::service('router.admin_context');
$route_match = \Drupal::routeMatch();
if ($admin_context->isAdminRoute($route_match->getRouteObject())) {
  drupal_set_message('route is admin route');
}

3. Something is up with caching. It might be something to do with the toolbar module itself, or maybe we can set cache metadata in individual toolbar items? The odd behaviour I found was that the message sometimes appeared on the node edit form, sometimes not. Clearing cache using Drush, then reloading the node form resulted in no message being displayed on the node edit page.

navneet0693’s picture

Status: Needs work » Needs review
FileSize
2.14 KB
1.21 KB
markconroy’s picture

Title: Tone down the visual contrast in the permanent message/warning in the toolbar » Set toolbar warning message to only appear on admin/edit pages

Tested, the message is showing on admin pages (including node edit forms).

I'm marking this as RTBC and am going to create follow up issues for the actual content and design of the warning message.

markconroy’s picture

Status: Needs review » Reviewed & tested by the community
markconroy’s picture

Follow up issue created "Finalise design for Toolbar warning message" https://www.drupal.org/project/drupal/issues/2938800

ckrina’s picture

Status: Reviewed & tested by the community » Needs work

Sorry, but I'd say to remove the color change from this issue and do it on the Design issue. I'll move Andrew's comment there.

-    color: #000;
+    color: #734c00;
markconroy’s picture

It might be quicker to leave the color change in this issue and then fix it in the follow up one.

If it’s at RTBC at the moment it’ll probably get committed tonight, and then we can sort out the exact colour over the next day or two after the UX meeting tonight.

Or else it means we have to go back to getting the patch together, and then reviewed, and then wait for a commit again. (Just my thoughts)

andrewmacpherson’s picture

Re: #14-15

I think @ckrina is right. Better to take the colour change out of scope here, rather than commiting it in haste.

Updating tasks in issue summary.

markconroy’s picture

I don't think it's being issued in haste. It's irrelevant to the issue. That could be red, blue, green, it wouldn't matter. The point of this is to set the paths that the message appears. We have another issue to decide the colour(s) to be used.

andrewmacpherson’s picture

Issue summary: View changes

At least, I thought I updated the tasks in the summary.... done now.

andrewmacpherson’s picture

Issue summary: View changes

Oops, I failed HTML 101 exam in my last edit.

markconroy’s picture

Status: Needs work » Needs review
FileSize
1.76 KB
258 bytes

Here's a patch to revert the colour back to #000

andrewmacpherson’s picture

Status: Needs review » Reviewed & tested by the community

Patch in #20 looks good to me. Manually tested umami-themed content pages, node forms, and generic admin pages. Message also devel/* routes so the is-admin test is correct.

larowlan’s picture

Issue tags: +Needs tests
+++ b/core/profiles/demo_umami/demo_umami.profile
@@ -33,19 +33,24 @@ function demo_umami_toolbar() {
+  $admin_context = \Drupal::service('router.admin_context');
+  $route_match = \Drupal::routeMatch();
+  if ($admin_context->isAdminRoute($route_match->getRouteObject())) {

I don't think we need the inline variables here, and admin context will use route match if no route is passed

so we should only need


if (\Drupal::service('router.admin_context')->isAdminRoute() {

Also, we need a test for this.

We already have an existing test that visits a node-edit form, so we can assert the message is present there.
see \Drupal\Tests\demo_umami\Functional\DemoUmamiProfileTest::testEditNodesByAdmin

webchick’s picture

Status: Reviewed & tested by the community » Needs work

Sounds like a needs work. :)

larowlan’s picture

Thanks, d.o has been eating my updates all morning

navneet0693’s picture

Eli-T’s picture

Issue summary: View changes

Edited the issue summary to mark *all* visual issues as deferred to #2938800: Finalize wording for Toolbar warning message, to make the remaining element easier to review.

John Cook’s picture

I've tested the patch by navneet0693 in #25.

The patch works as designed but we need better tests.

We should move the test for checking the "demonstation" text to a new test and test the following:

  • the message does not appear on the home page
  • the message does not appear on a recipe page
  • the message does appear on a recipe edit page
  • the message does appear on a /admin/... page
Eli-T’s picture

Added a new patch to implement tests suggested by John Cook in 27, and moved to their own test rather than reusing the edit test.

Also removed static reference to toolbar in DemoUmamiProfileTest::modules static variable; afaik that should be mandated by the umami_demo profile anyway.

andrewmacpherson’s picture

The list of assertions (pages to visit) look reasonable.

Nitpick for comment style:

/* @var $recipe_node \Drupal\node\Entity\Node */

The preferred form seems to be /* @var \Drupal\node\Entity\Node $recipe_node */. It's proposed at #2305593: [policy] Set a standard for @var inline variable type declarations, #2305641: Use the "standard" format for @var inline variable type declarations, and PSR-5, but these are all still at the draft stage. The majority of instances in D8 core already follow the proposal (type first, then name).

Status: Needs review » Needs work

The last submitted patch, 28: 2938186_28_move_visibility_to_own_test.patch, failed testing. View results

John Cook’s picture

Status: Needs work » Needs review
FileSize
4.11 KB
4.05 KB

I've got the tests passing - at least locally.

The problem was that the toolbar block was being cached when the tests were running but not when viewing the page. I've put in a cache context for the route.

I've also fixed Andrew's nitpick.

smaz’s picture

Status: Needs review » Needs work
FileSize
17.71 KB

I think this needs work:

There is an empty tab at the end of the toolbar items (noticeable due to the bug causing green hover over effects on toolbar items):

Invisible toolbar tab

I think this is because we always have:

$items['experimental-profile-warning'] = [
     '#type' => 'toolbar_item',
-    'tab' => [
+    '#weight' => 999,
+    '#cache' => [
+      'contexts' => [ 'route' ],
+    ],
+  ];

But the tab inside it is conditional:

+  // Show warning only on administration pages.
+  $admin_context = \Drupal::service('router.admin_context');
+  if ($admin_context->isAdminRoute()) {
+    $items['experimental-profile-warning']['tab'] = [
       '#type' => 'inline_template',
       '#template' => '<a class="toolbar-warning" href="{{ more_info_link }}">This installation is for demonstration purposes only.</a>',
       '#context' => [
@@ -44,8 +54,7 @@ function demo_umami_toolbar() {
       '#attached' => [
         'library' => ['demo_umami/toolbar-warning'],
       ],
-    ],
-    '#weight' => 999,
-  ];
+    ];
+  }
   return $items;

I think the whole item, not just the tab, needs to be in the check for admin route. Otherwise the toolbar item gets rendered, without the child tab content.

I haven't tested that theory though - I will if I get a chance.

John Cook’s picture

I was concentrating on getting the tests to pass.

If the ['#cache']['context'] isn't returned then the toolbar block gets cached and the tests fail.

I've moved the type into the conditional as well. This prevents the issue that @smaz found in #32.

andrewmacpherson’s picture

An empty toolbar item (role) is a no-no for accessibility

Eli-T’s picture

Found a tiny coding standards issue.

Eli-T’s picture

Installing with #35 - have successfully checked the tests pass locally, and that no html element is inserted for the empty tab on pages that do not display the warning.

I did experiment with moving the entire definition of $items['experimental-profile-warning'] but that causes a test to fail, presumably because it breaks the caching.

So this looks good - I'd set it RTBC but I've probably done too much on it myself.

John Cook’s picture

@andrewmacpherson the patch in #33 removes the empty toolbar item.

The following show the toolbar mark-up with the "admin" item selected.

/admin/content

/

So the (empty) toolbar item isn't rendered using that patch.

Eli-T’s picture

Issue tags: -Needs tests
smaz’s picture

Another nitpick:

+  $items = [];

We do not need to declare $items in advance - no other core implementations of this hook do so (example from the toolbar module).

   public function testEditNodesByAdmin() {
-    $account = $this->drupalCreateUser(['administer nodes', 'edit any recipe content']);
+    $account = $this->drupalCreateUser(['administer nodes', 'edit any recipe content', 'access toolbar']);

I don't think we need to add the 'access toolbar' permission here for just testing editing nodes - I think that should only be in testDemonstrationWarningMessage(). Unless that was needed for some reason @John Cook?

I tested the empty tab issue & can confirm this is now resolved.

markconroy’s picture

Status: Needs review » Reviewed & tested by the community

I think we are in RTBC land.

John Cook’s picture

@smaz,

@eli-t and I adapted the test from @navneet0693 in #25. We moved the assertion but didn't notice the added permission, so it's not required in that test.

larowlan’s picture

Adding credits for those who reviewed and impacted the final patch

larowlan’s picture

Status: Reviewed & tested by the community » Fixed

Committed as 41baf34 and pushed to 8.6.x

  • larowlan committed 41baf34 on 8.6.x
    Issue #2938186 by navneet0693, John Cook, Eli-T, markconroy, smaz,...

  • alexpott committed 709012d on 8.5.x authored by larowlan
    Issue #2938186 by navneet0693, John Cook, Eli-T, markconroy, smaz,...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

ahaomar’s picture

Is this via module ? i am looking for same functionalities please suggest me Module for that

markconroy’s picture

Hi @ahaomar

This is a function inside the umami profile, not a custom module. You can see the commit here: https://git.drupalcode.org/project/drupal/commit/41baf34#206167013fddf92...