Problem/Motivation

Within various themes in core including Starterjut and Umami, any time an "unsaved changes" warning message appears, the asterisk of the message has an unsightly dotted underline in Microsoft Edge 86.0.622.58 (Official build) (64-bit) on Windows 10.0.19041 Build 19041 and likely other browsers.

Steps to reproduce

  1. Visit /admin/structure/types/manage/page/display on a site that has a "Page" content type.
  2. Use a tabledrag grippie to re-arrange the order of the fields.
  3. Examine the message area at the top of the page.

Unsaved changes warnings have a dotted underline under the asterisk.

Proposed resolution

abbr elements in the user-agent stylesheet have a text-decoration: underline set by default. This should be overridden in the styline for abbr.tabledrag-changed and abbr.ajax-changed to be set to none.

Remaining tasks

User interface changes

See above.

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#79 interdiff-64_79.txt386 bytesgauravvvv
#79 3180992-79.patch1.82 KBgauravvvv
#75 3180992-after-patch.png197.62 KBnilesh.k
#75 3180992-before-patch.png192.54 KBnilesh.k
#74 after-patch.png198.05 KBnilesh.k
#71 after-patch-olivero.png19.91 KBdsandhya
#71 before-patch-olivero.png17.31 KBdsandhya
#71 3180992_71.patch1.13 KBdsandhya
#67 3180992-after-patch-olivero.png160.68 KBnayana_mvr
#66 3180992-after-patch.png178.32 KBnayana_mvr
#64 3180992-64.patch1.76 KBaziza_a
#62 Screenshot 2023-03-09 at 7.19.00 PM.png514.48 KBsantosh_verma
#62 Screenshot 2023-03-09 at 7.18.28 PM.png1021.65 KBsantosh_verma
#61 Screenshot 2023-03-09 at 5.12.24 PM.png941.33 KBaziza_a
#61 3180992-61.patch1.35 KBaziza_a
#59 3180992-olivero.png179.13 KBnayana_mvr
#56 Screen Recording 2023-02-27 at 10.07.50 AM.mov7.24 MBgauravvvv
#51 patch.png19.44 KBManoj Raj.R
#50 Screenshot 2023-01-04 at 4.50.37 PM.png19.44 KBgauravvvv
#50 3180992-50.patch934 bytesgauravvvv
#45 3180992-45.patch1.3 KBravi.shankar
#41 After patch Firefox US..png27.93 KBAamir M
#41 Before patch Firefox US.png48.71 KBAamir M
#41 After patch Chrome US.png30.04 KBAamir M
#41 Before patch Chrome US.png48.8 KBAamir M
#41 Patch US.png121.68 KBAamir M
#39 Before patch Safari.png21.71 KBrinku jacob 13
#39 Before patch FireFox.png17.83 KBrinku jacob 13
#39 before patch Chrome.png37.86 KBrinku jacob 13
#39 afterpatch Firefox.png19.92 KBrinku jacob 13
#39 after patch Safari.png23.77 KBrinku jacob 13
#39 after patch Chrome.png24.82 KBrinku jacob 13
#33 chrome.png3.91 KBindrajithkb
#33 mozilla.png5.08 KBindrajithkb
#28 after-patch-3180992.png209.88 KBtanmaykadam
#28 before-patch-3180992.png211.46 KBtanmaykadam
#27 interdiff_24-27.txt1.62 KBvsujeetkumar
#27 3180992-27.patch2.58 KBvsujeetkumar
#24 asterisks-properties-order-issue-3180992-24.patch419 bytestanmaykadam
#23 After patch.png44.74 KBmitthukumawat
#23 Beofe patch.png49.61 KBmitthukumawat
#21 asterisks-issue-3180992-21.patch444 bytestanmaykadam
#19 interdiff-14-18.txt586 byteskishor_kolekar
#18 interdiff-14-18.patch586 byteskishor_kolekar
#18 3180992-18.patch464 byteskishor_kolekar
#14 3180992-14.patch382 bytesdjsagar
#13 Screen Shot 2020-12-01 at 4.54.34 PM.png144.06 KBdjsagar
#11 3180992-11.patch3.31 KBkomalk
#11 Before-olivero.png79.61 KBkomalk
#11 After-olivero.png37.21 KBkomalk
#11 before-seven.png58.35 KBkomalk
#11 After-seven.png59.93 KBkomalk
#11 Before-bartik.png79.38 KBkomalk
#11 After-bartik.png75.7 KBkomalk
#11 3180992-11.patch2.58 KBkomalk
#8 interdiff_4_8.txt740 bytesanmolgoyal74
#8 drupal-remove_underline_on_unsaved_changes_messages-3180992-8-9.x.patch1.31 KBanmolgoyal74
#8 interdiff_4_8_8.x.txt740 bytesanmolgoyal74
#8 drupal-remove_underline_on_unsaved_changes_messages-3180992-8-8.x.patch1.31 KBanmolgoyal74
#4 drupal-remove_underline_on_unsaved_changes_messages-3180992-4-9.x.patch801 bytesguypaddock
#4 drupal-remove_underline_on_unsaved_changes_messages-3180992-4-8.x.patch801 bytesguypaddock
#3 drupal-remove_underline_on_unsaved_changes_messages-3180986-3-9.x.patch801 bytesguypaddock
#3 drupal-remove_underline_on_unsaved_changes_messages-3180986-3-8.x.patch801 bytesguypaddock
#2 Underline.PNG7.13 KBguypaddock

Issue fork drupal-3180992

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

GuyPaddock created an issue. See original summary.

guypaddock’s picture

Issue summary: View changes
StatusFileSize
new7.13 KB
guypaddock’s picture

The attached patch seems to fix the issue for 8.x. I've attached a patch I rolled for 9.x but have not tested it yet (we aren't running 9.x).

guypaddock’s picture

guypaddock’s picture

Title: Asterisk in "Unsaved Changes" Messages in Seven Theme have Dotted Underline » Asterisks in "Unsaved Changes" Messages in Seven Theme have Dotted Underline

Status: Needs review » Needs work
anmolgoyal74’s picture

Updating file in classy theme would also need to update the file hash.

Status: Needs review » Needs work
komalk’s picture

Assigned: Unassigned » komalk

Working on it!

komalk’s picture

Assigned: komalk » Unassigned
Status: Needs work » Needs review
StatusFileSize
new2.58 KB
new75.7 KB
new79.38 KB
new59.93 KB
new58.35 KB
new37.21 KB
new79.61 KB
new3.31 KB

Worked on the failed test case.
Attached the screenshot for reference.

pranali.lanjewar’s picture

Assigned: Unassigned » pranali.lanjewar
djsagar’s picture

Assigned: pranali.lanjewar » Unassigned
StatusFileSize
new144.06 KB

Same issue on macbook also

djsagar’s picture

StatusFileSize
new382 bytes

I hope this patch resolve this issue globally.

pranali.lanjewar’s picture

Assigned: Unassigned » pranali.lanjewar
djsagar’s picture

Assigned: pranali.lanjewar » Unassigned
kapilv’s picture

Status: Needs review » Needs work

patch Does not apply.

kishor_kolekar’s picture

Status: Needs work » Needs review
StatusFileSize
new464 bytes
new586 bytes

please review the patch.

kishor_kolekar’s picture

StatusFileSize
new586 bytes

Wrong inter-diff extension please avoid added a new one.

The last submitted patch, 18: 3180992-18.patch, failed testing. View results

tanmaykadam’s picture

Assigned: Unassigned » tanmaykadam
Status: Needs review » Needs work
StatusFileSize
new444 bytes

Please review the patch.

tanmaykadam’s picture

Assigned: tanmaykadam » Unassigned
Status: Needs work » Needs review
mitthukumawat’s picture

StatusFileSize
new49.61 KB
new44.74 KB

I have tested the patch #22 manually and is applied cleanly in drupal 9.3.x-dev version. This has fixed the issue of dotted underline under an asterisks sign in seven theme.
Adding screenshots for reference.

tanmaykadam’s picture

Assigned: Unassigned » tanmaykadam
Status: Needs review » Needs work
StatusFileSize
new419 bytes

Fixed asterisks issue and properties order issue.
Please review the Patch

tanmaykadam’s picture

Assigned: tanmaykadam » Unassigned
Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 24: asterisks-properties-order-issue-3180992-24.patch, failed testing. View results

vsujeetkumar’s picture

Status: Needs work » Needs review
StatusFileSize
new2.58 KB
new1.62 KB

Fixing the fail tests.

tanmaykadam’s picture

Assigned: Unassigned » tanmaykadam
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new211.46 KB
new209.88 KB

Verified and tested patch #27.
Patch applied successfully and looks good to me.

tanmaykadam’s picture

Assigned: tanmaykadam » Unassigned
alexpott’s picture

Version: 8.9.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Needs work

This needs to be fixed in 9.x.

8.x is only open for security fixes at this point and will not be getting normal bug fixes.

A change like this needs testing in multiple browsers and consideration of the impacts on existing devices.

Indrajith KB made their first commit to this issue’s fork.

indrajithkb’s picture

Status: Needs work » Needs review
StatusFileSize
new5.08 KB
new3.91 KB

HI @alexpott added the patch with 9.x. Tested with multiple browsers.

Adding SS:

Chrome:
image

Firefox:
image

Moving to NR

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Beanjammin made their first commit to this issue’s fork.

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

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

rinku jacob 13’s picture

StatusFileSize
new24.82 KB
new23.77 KB
new19.92 KB
new37.86 KB
new17.83 KB
new21.71 KB

Reviewed and tested last MR 826! , for drupal version 9.5.x. Adding screenshots for the reference

Aamir M’s picture

Assigned: Unassigned » Aamir M
Aamir M’s picture

Assigned: Aamir M » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new121.68 KB
new48.8 KB
new30.04 KB
new48.71 KB
new27.93 KB

Verified and tested MR 826 on Drupal 9.5.x-dev. Patch applied successfully and looks good to me.

Testing steps:
1. Go to Appearance and select Seven theme (Scroll down and see theme selection filed)> Save configuration
2. Go to Structure> Content Type
3. Click on Manage fields button in front of the Article
4. Select the Manage display tab
5. Rearrange the filed sequence by drag and drop
6. Observe the unsaved message
7. Apply the patch in the Core folder which is available where the drupal 9.5 folder saved
8. Again follow 1-5 steps and observed. Now the dotted line is removed

Testing Result:
1. After applying the patch the dotted line is removed

Can be moved to RTBC

catch’s picture

Status: Reviewed & tested by the community » Postponed

Postponing on #3304285: Remove Seven from core, this should probably move to the contributed project once that issue has been committed.

longwave’s picture

Component: Seven theme » CSS
Status: Postponed » Needs work

The Seven project has been removed from Drupal core. However, it looks like other core CSS including the starter kit and Umami have the same CSS rules in place, so retargeting this issue to the core CSS component.

Marking needs work as the following CSS would appear to need changing here:

profiles/demo_umami/themes/umami/css/classy/components/form.css
86:abbr.ajax-changed {
87-  border-bottom: none;
88-}

themes/starterkit_theme/css/components/form.css
86:abbr.ajax-changed {
87-  border-bottom: none;
88-}

themes/classy/css/components/form.css
86:abbr.ajax-changed {
87-  border-bottom: none;
88-}
longwave’s picture

Title: Asterisks in "Unsaved Changes" Messages in Seven Theme have Dotted Underline » Asterisks in "Unsaved Changes" Messages have Dotted Underline
ravi.shankar’s picture

Status: Needs work » Needs review
StatusFileSize
new1.3 KB

Made changes as per comment #43, please reivew.

Status: Needs review » Needs work

The last submitted patch, 45: 3180992-45.patch, failed testing. View results

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

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mherchel’s picture

Project: Drupal core » Seven
Version: 10.1.x-dev » 1.0.0-alpha1
Component: CSS » Code

The Seven theme has now moved to contrib. Moving this issue over there.

mherchel’s picture

Project: Seven » Drupal core
Version: 1.0.0-alpha1 » 10.1.x-dev
Component: Code » CSS
Issue summary: View changes

Oops. Seeing @longwave's comment in #43, this is happening in several themes.

Moving back to core and updating issue summary

gauravvvv’s picture

Status: Needs work » Needs review
StatusFileSize
new934 bytes
new19.44 KB

I can confirm this is still happening in D10 in umami and starterkit_theme.
Patch #45 no longer applies to d10. As Classy in no more part of Drupal core.

I have added a patch with required changes, Adding an after patch screenshot for reference. Please review

Manoj Raj.R’s picture

StatusFileSize
new19.44 KB

The Patch looks good for umami and starterkit_theme.

Looks good to me.

Can be moved to RTBC.
+1 RTBC

sonam.chaturvedi’s picture

Patch #50 applied successfully on 10.1.x-dev. Patch fixes the issue.
Screenshot same as #51.

RTBC+1

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs Review Queue Initiative, +Needs steps to reproduce

Can the issue summary steps be updated?

Tried testing on drupal 10.1 with an Umani theme and could not replicate.

gauravvvv’s picture

Status: Needs work » Needs review

Tried testing on drupal 10.1 with an Umani theme and could not replicate.

Use starterkit_theme or Umami as admin theme & Visit /admin/structure/types/manage/page/display

Try to re-arrange the order then you will see Asterisks in "Unsaved Changes" Messages have Dotted Underline

smustgrave’s picture

Status: Needs review » Needs work

Just tested on a fresh install of umami at the exact url provided. No underline.

gauravvvv’s picture

Status: Needs work » Needs review
StatusFileSize
new7.24 MB

I have added a screen-recording for reference. please check if it helps.

I am using Umami as admin theme here.

smustgrave’s picture

Component: CSS » Umami demo
Issue tags: -Needs steps to reproduce +Needs framework manager review

Since this seems to only seems to trigger when umami is used as an admin theme, will lean on the framework manager to decide.

gauravvvv’s picture

Since this seems to only seems to trigger when umami is used as an admin theme, will lean on the framework manager to decide.

This is happening with Starterkit theme as well.

nayana_mvr’s picture

StatusFileSize
new179.13 KB

Hi, I couldn't verify this issue in Umami or Starterkit theme but I am able to reproduce it in Olivero theme. And the patch #50 doesn't fix the issue in Olivero. Attaching screenshot for reference. Maybe someone else can also verify this.

Olivero

santosh_verma’s picture

Assigned: Unassigned » santosh_verma
aziza_a’s picture

Assigned: santosh_verma » Unassigned
StatusFileSize
new1.35 KB
new941.33 KB

As per comment #59 updating the patch for Olivero theme as well

santosh_verma’s picture

I have reviewed the patch on comment number #61 working fine attaching the screenshot of that but test cases are getting failed @aziza_a can you please check and fix it.

santosh_verma’s picture

Status: Needs review » Needs work

test cases are getting failed @aziza_a can you please check and fix it.

aziza_a’s picture

StatusFileSize
new1.76 KB

Updated as per comment #63

aziza_a’s picture

Status: Needs work » Needs review
nayana_mvr’s picture

StatusFileSize
new178.32 KB

Verified the patch #64 on Drupal version 10.1.x with Olivero theme. Patch applied cleanly and can confirm that the issue is fixed for Olivero theme. Screenshot attached for reference.
After-patch

nayana_mvr’s picture

StatusFileSize
new160.68 KB
markconroy’s picture

Status: Needs review » Reviewed & tested by the community

This patch seems to fix the issue, however are we _sure_ we want to fix the issue?

If you check in /core/themes/stable9/css/core/assets/vendor/normalize-css/normalize.css on lines 80-89, we have this:

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

For me, this seems like we are making a deliberate decision to override normalize.css and remove their suggestion of underlining the title. Honestly, i don't have a problem with this and it certainly seems to look much better with the patch from #64 applied. I guess in our case we are deciding to use an * instead of an underline.

I'm going to RTBC this for now, while we wait for a framework manager to make the final decision.

larowlan’s picture

Fixing tag.

If this only happens when you're using frontend themes as admin themes, my inclination is to mark it as closed works as designed, but will defer to frontend framework managers.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 64: 3180992-64.patch, failed testing. View results

dsandhya’s picture

StatusFileSize
new1.13 KB
new17.31 KB
new19.91 KB

I have created this patch for 10.1.x-dev olivero theme and its working fine. Please verify.

Version: 10.1.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, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

markconroy’s picture

Status: Needs work » Needs review

Setting back to 'Needs review' to see if #64 passes, but also so we might get some feedback from a frontend framework manager given our concerns from #68 and #69

nilesh.k’s picture

StatusFileSize
new198.05 KB

Hi,

Verified patch #64 on Drupal version 10.1.x with the Olivero theme. The patch applied cleanly, and I can confirm that the issue is fixed for the Olivero theme. I have attached a screenshot for reference.

Before patch
After patch

nilesh.k’s picture

StatusFileSize
new192.54 KB
new197.62 KB

Added wrong SS replacing new SS

markconroy’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs Review Queue Initiative

Great, thanks @nilesh.k

Let's move this back to RTBC pending a frontend framework manager review to check the comments in #68 and #69

markconroy’s picture

xjm’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: -Needs frontend framework manager review +Needs subsystem maintainer review

Thanks folks for working on this. It is a bug and I don't think it needs to be wontfix. I also don't think we need the FEFMs to tell us whether such a small bug should be fixed or not. I think what we actually need is an Olivero maintainer's review. :)

Also, we shouldn't RTBC things that aren't actually committable. It's okay to RTBC it with "Needs X manager review" if it is otherwise committable (passing tests, peer-reviewed, has consensus, etc.).

The patch in #71 has real failures and does not need to be retested a thousand times; it needs to update the PostCSS and have the CSS recompiled.

The merge request also appears to be older than most of the patches, and should be closed if it is outdated. We really shouldn't post patches, then merge requests, then more patches. It creates a lot of confusion.

Thanks!

gauravvvv’s picture

Status: Needs work » Needs review
StatusFileSize
new1.82 KB
new386 bytes

Fixed the build error in #64, attached interdiff for same.

xjm’s picture

Thanks @Gauravvvv!

I still need someone to close the merge request if it's irrelevant, or if they don't have permission, to state unequivocally that the MR is defunct (and why we switched back to patches) so that I can close it myself. Thanks!

smustgrave’s picture

Believe the MR is probably stale at this point.

But how come #71 was skipped for #64?

Also @larowlan posted

If this only happens when you're using frontend themes as admin themes, my inclination is to mark it as closed works as designed, but will defer to frontend framework managers.

markconroy’s picture

Just a note for anyone reading this/working on this. The conversation seems to have moved towards talking about Olivero, but this issue/patch is for Olivero and Umami theme and starterkit_theme.

That said, "works as designed" seems the right status for this.

smustgrave’s picture

Status: Needs review » Closed (works as designed)

Both @larowlan (Framework manager) and @markcontroy (Umami submaintainer) both seemed to think this is working as designed.

If any strong disagreement please reopen explaining why.