Page MenuHomePhabricator
Create Task
Maniphest T158345

in notification system, please remove #id from CSS selector where not needed
Open, Needs TriagePublic
Actions

Description

the CSS for the notification system (see at the end of this whine), uses #IDs in the selectors of css rules where it's not needed, and cause difficulties to developers wanting to add a badge.

for all but 2 properties, the rules are exactly the same for #pt-notifications-alert and #pt-notifications-notice. defining these rules without including the #id in the selector would make life easier.

when some (local) user script tries to create a third badge (for instance, This script on hewiki), which adds a "you have unread watchlist items" badge), it cannot use the existing CSS, b/c it is all ID dependent, and is forced to copy the whole shebang ( like here ) . it would be cleaner and nicer if everywhere where the selector looks like so:

#pt-notifications-alert .foo .bar, #pt-notifications-notice .foo .bar

it would simply say

.foo .bar

instead, i.e., avoid specifying the #ID as part of the selector where it does not make a difference.
doing so, will basically leave 4 #ID-dependent rules: one each for the ::before { background-image }, and one each for the ::after {background-color }.

doing so would make it cleaner and nicer (and shorted...), and would also make it easier to add a new badge - only 2 new rules to add, instead of all of them, and save the need to replicate the whole bunch.

current CSS:

#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge {
    color: transparent;
    cursor: pointer;
    display: block;
    height: 24px;
    position: relative;
    text-decoration: none;
    top: -5px;
    width: 24px;
}
#pt-notifications-alert .mw-echo-notifications-badge:hover, #pt-notifications-notice .mw-echo-notifications-badge:hover, #pt-notifications-alert .mw-echo-notifications-badge:active, #pt-notifications-notice .mw-echo-notifications-badge:active, #pt-notifications-alert .mw-echo-notifications-badge:focus, #pt-notifications-notice .mw-echo-notifications-badge:focus {
    outline: medium none;
}
#pt-notifications-alert .mw-echo-notifications-badge-dimmed, #pt-notifications-notice .mw-echo-notifications-badge-dimmed {
    opacity: 0.4;
}
#pt-notifications-alert .mw-echo-notifications-badge::before, #pt-notifications-notice .mw-echo-notifications-badge::before {
    background-repeat: no-repeat;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
#pt-notifications-alert .mw-echo-notifications-badge::after, #pt-notifications-notice .mw-echo-notifications-badge::after {
    background-color: #72777d;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    content: attr(data-counter-text);
    cursor: pointer;
    display: inline-block;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0 0.3em;
    position: absolute;
    right: 55%;
    top: 9px;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after {
    right: 35%;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    opacity: 0.625;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after {
    visibility: hidden;
}
#pt-notifications-alert .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
#pt-notifications-notice .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M3%2013.35l1.8-7.2c.2-.996.81-1.8%201.8-1.8h10.8c.99%200%201.6.867%201.8%201.8l1.8%207.2v4.5c0%20.99-.81%201.8-1.8%201.8H4.8c-.99%200-1.8-.81-1.8-1.8v-4.5zm6.96%201.8h4.08c-.49.557-1.212.9-2.04.9a2.68%202.68%200%200%201-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44%207.2H9.3c0%20.702.246%201.328.66%201.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
#pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #cc3333;
}
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #3366cc;
}
#p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice {
    margin-left: 0.4em;
    margin-top: 0.3em;
}

PROPOSED/REQUESTED CSS:

.mw-echo-notifications-badge {
    color: transparent;
    cursor: pointer;
    display: block;
    height: 24px;
    position: relative;
    text-decoration: none;
    top: -5px;
    width: 24px;
}
.mw-echo-notifications-badge:hover, .mw-echo-notifications-badge:active, .mw-echo-notifications-badge:focus {
    outline: medium none;
}

.mw-echo-notifications-badge-dimmed {
    opacity: 0.4;
}
.mw-echo-notifications-badge::before {
    background-repeat: no-repeat;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.mw-echo-notifications-badge::after {
    background-color: #72777d;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    content: attr(data-counter-text);
    cursor: pointer;
    display: inline-block;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0 0.3em;
    position: absolute;
    right: 55%;
    top: 9px;
}
.mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after {
    right: 35%;
}
.mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    opacity: 0.625;
}
.mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after {
    visibility: hidden;
}
#pt-notifications-alert .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
#pt-notifications-notice .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M3%2013.35l1.8-7.2c.2-.996.81-1.8%201.8-1.8h10.8c.99%200%201.6.867%201.8%201.8l1.8%207.2v4.5c0%20.99-.81%201.8-1.8%201.8H4.8c-.99%200-1.8-.81-1.8-1.8v-4.5zm6.96%201.8h4.08c-.49.557-1.212.9-2.04.9a2.68%202.68%200%200%201-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44%207.2H9.3c0%20.702.246%201.328.66%201.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #cc3333;
}
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #3366cc;
}
#p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice {
    margin-left: 0.4em;
    margin-top: 0.3em;
}

peace.

Event Timeline

Kipod created this task.Feb 16 2017, 7:29 PM
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptFeb 16 2017, 7:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Kipod renamed this task from please remove #id from CSS where not needed to in notification system, please remove #id from CSS where not needed.Feb 16 2017, 7:29 PM
Kipod renamed this task from in notification system, please remove #id from CSS where not needed to in notification system, please remove #id from CSS selector where not needed.
Legoktm subscribed.Feb 17 2017, 6:11 AM

Kind of off-topic, but I think turning watchlist into a numerical badge is a cool idea and something echo might want to implement itself.

Kipod added a comment.Feb 17 2017, 2:53 PM
In T158345#3035702, @Legoktm wrote:

Kind of off-topic, but I think turning watchlist into a numerical badge is a cool idea and something echo might want to implement itself.

(continue off-topic): i believe it's on the wishlist somewhere, we just decided not to wait....

implemented by the "echo" team will be significantly better than our "poor-man-implementation": it can (and should) be done it "globally", like the alerts are, i.e., informing the user of updates to their watchlist in _any_ project, not just the local one.

(for now, i recommend interested users to activate it from their meta "global.js" if they want it in all projects, which is why this is not done as a gadget, and declares its dependencies in the code).

peace.

• Mattflaschen-WMF moved this task from Untriaged to Medium-Term Interest on the Collaboration-Team-Triage board.Jun 20 2017, 5:26 PM
Aklapper removed a project: Collaboration-Team-Triage.Oct 12 2019, 4:11 AM
Restricted Application added a project: Growth-Team. · View Herald TranscriptOct 12 2019, 4:11 AM
MBinder_WMF added a project: Growth-Team-Filtering.Apr 15 2021, 6:56 PM
Urbanecm_WMF removed projects: Growth-Team-Filtering, Growth-Team.Oct 27 2025, 11:57 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits