Update and standardise QA implementations

- ES6ify (now using class syntax to define QAItem objects)
- Fix bug with KeepRight marker rendering not updating properly
- Use `qa-` prefix for the UI element classes to differentiate from iD
validation error related UI element classes
- Move away from "error" where possible in source
- Move away from snake_case naming where possible

Note that some function/method names have been untouched to make life
easier for v3 development. Have added note comments where appropriate.

css/20_map.css

@@ -45,7 +45,7 @@
 
 /* `.target` objects are interactive */
 /* They can be picked up, clicked, hovered, or things can connect to them */
-.qa_error.target,
+.qaItem.target,
 .note.target,
 .node.target,
 .turn .target {
@@ -83,7 +83,7 @@
 /* points, notes & QA */
 
 /* points, notes, markers */
-g.qa_error .stroke,
+g.qaItem .stroke,
 g.note .stroke {
     stroke: #222;
     stroke-width: 1;
@@ -91,7 +91,7 @@ g.note .stroke {
     opacity: 0.6;
 }
 
-g.qa_error.active .stroke,
+g.qaItem.active .stroke,
 g.note.active .stroke {
     stroke: #222;
     stroke-width: 1;
@@ -106,7 +106,7 @@ g.point .stroke {
 }
 
 
-g.qa_error .shadow,
+g.qaItem .shadow,
 g.point .shadow,
 g.note .shadow {
     fill: none;
@@ -115,14 +115,14 @@ g.note .shadow {
     stroke-opacity: 0;
 }
 
-g.qa_error.hover:not(.selected) .shadow,
+g.qaItem.hover:not(.selected) .shadow,
 g.note.hover:not(.selected) .shadow,
 g.point.related:not(.selected) .shadow,
 g.point.hover:not(.selected) .shadow {
     stroke-opacity: 0.5;
 }
 
-g.qa_error.selected .shadow,
+g.qaItem.selected .shadow,
 g.note.selected .shadow,
 g.point.selected .shadow {
     stroke-opacity: 0.7;
@@ -430,4 +430,4 @@ g.vertex.highlighted .shadow {
 .highlight-edited path.line.shadow.geometry-edited,
 .highlight-edited path.area.shadow.geometry-edited {
     stroke: rgb(255, 126, 46);
-}
+}

css/55_cursors.css

@@ -98,10 +98,10 @@
 }
 
 .mode-browse .note,
-.mode-browse .qa_error,
+.mode-browse .qaItem,
 .mode-select .note,
-.mode-select .qa_error,
+.mode-select .qaItem,
 .turn rect,
 .turn circle {
     cursor: pointer;
-}
+}

css/65_data.css

@@ -1,10 +1,10 @@
 
-/* OSM Notes and KeepRight Layers */
+/* OSM Notes and QA Layers */
 
-.error-header-icon .qa_error-fill,
-.layer-keepRight .qa_error .qa_error-fill,
-.layer-improveOSM .qa_error .qa_error-fill,
-.layer-osmose .qa_error .qa_error-fill {
+.qa-header-icon .qaItem-fill,
+.layer-keepRight .qaItem .qaItem-fill,
+.layer-improveOSM .qaItem .qaItem-fill,
+.layer-osmose .qaItem .qaItem-fill {
     stroke: #333;
     stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
 }
@@ -43,113 +43,111 @@
     height: 15px;
 }
 
-/* adjustment for error icon */
-
-.error-header-icon .preset-icon-28 {
+/* adjustment to center QA icons */
+.qa-header-icon .preset-icon-28 {
     top: auto;
     left: auto;
 }
-
-.error-header-icon {
+.qa-header-icon {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-/* Keep Right Errors
+/* Keep Right Issues
 ------------------------------------------------------- */
-.keepRight.error_type-20,     /* multiple nodes on same spot */
-.keepRight.error_type-40,     /* impossible oneways */
-.keepRight.error_type-210,    /* self intersecting ways */
-.keepRight.error_type-270,    /* unusual motorway connection */
-.keepRight.error_type-310,    /* roundabout issues */
-.keepRight.error_type-320,    /* improper _link */
-.keepRight.error_type-350 {   /* improper bridge tag */
+.keepRight.itemType-20,     /* multiple nodes on same spot */
+.keepRight.itemType-40,     /* impossible oneways */
+.keepRight.itemType-210,    /* self intersecting ways */
+.keepRight.itemType-270,    /* unusual motorway connection */
+.keepRight.itemType-310,    /* roundabout issues */
+.keepRight.itemType-320,    /* improper _link */
+.keepRight.itemType-350 {   /* improper bridge tag */
     color: #ff9;
 }
 
-.keepRight.error_type-50 {    /* almost junctions */
+.keepRight.itemType-50 {    /* almost junctions */
     color: #88f;
 }
 
-.keepRight.error_type-60,     /* deprecated tags */
-.keepRight.error_type-70,     /* tagging issues */
-.keepRight.error_type-90,     /* motorway without ref */
-.keepRight.error_type-100,    /* place of worship without religion */
-.keepRight.error_type-110,    /* poi without name */
-.keepRight.error_type-150,    /* railway crossing without tag */
-.keepRight.error_type-220,    /* misspelled tag */
-.keepRight.error_type-380 {   /* non-physical sport tag */
+.keepRight.itemType-60,     /* deprecated tags */
+.keepRight.itemType-70,     /* tagging issues */
+.keepRight.itemType-90,     /* motorway without ref */
+.keepRight.itemType-100,    /* place of worship without religion */
+.keepRight.itemType-110,    /* poi without name */
+.keepRight.itemType-150,    /* railway crossing without tag */
+.keepRight.itemType-220,    /* misspelled tag */
+.keepRight.itemType-380 {   /* non-physical sport tag */
     color: #5d0;
 }
 
-.keepRight.error_type-130 {   /* disconnected ways */
+.keepRight.itemType-130 {   /* disconnected ways */
     color: #fa3;
 }
 
-.keepRight.error_type-170 {   /* FIXME tag */
+.keepRight.itemType-170 {   /* FIXME tag */
     color: #ff0;
 }
 
-.keepRight.error_type-190 {   /* intersection without junction */
+.keepRight.itemType-190 {   /* intersection without junction */
     color: #f33;
 }
 
-.keepRight.error_type-200 {   /* overlapping ways */
+.keepRight.itemType-200 {   /* overlapping ways */
     color: #fdbf6f;
 }
 
-.keepRight.error_type-160,    /* railway layer conflict */
-.keepRight.error_type-230 {   /* layer conflict */
+.keepRight.itemType-160,    /* railway layer conflict */
+.keepRight.itemType-230 {   /* layer conflict */
     color: #b60;
 }
 
-.keepRight.error_type-280 {   /* boundary issues */
+.keepRight.itemType-280 {   /* boundary issues */
     color: #5f47a0;
 }
 
-.keepRight.error_type-180,    /* relation without type */
-.keepRight.error_type-290 {   /* turn restriction issues */
+.keepRight.itemType-180,    /* relation without type */
+.keepRight.itemType-290 {   /* turn restriction issues */
     color: #ace;
 }
 
-.keepRight.error_type-300,    /* missing maxspeed */
-.keepRight.error_type-390 {   /* missing tracktype */
+.keepRight.itemType-300,    /* missing maxspeed */
+.keepRight.itemType-390 {   /* missing tracktype */
     color: #090;
 }
 
-.keepRight.error_type-360,    /* language unknown */
-.keepRight.error_type-370,    /* doubled places */
-.keepRight.error_type-410 {   /* website issues */
+.keepRight.itemType-360,    /* language unknown */
+.keepRight.itemType-370,    /* doubled places */
+.keepRight.itemType-410 {   /* website issues */
     color: #f9b;
 }
 
-.keepRight.error_type-120,    /* way without nodes */
-.keepRight.error_type-400 {   /* geometry / turn angles */
+.keepRight.itemType-120,    /* way without nodes */
+.keepRight.itemType-400 {   /* geometry / turn angles */
     color: #c35;
 }
 
-/* ImproveOSM Errors
+/* ImproveOSM Issues
 ------------------------------------------------------- */
 
-.improveOSM.error_type-ow {   /* missing one way */
+.improveOSM.itemType-ow {   /* missing one way */
     color: #1E90FF;
 }
 
-.improveOSM.error_type-mr-road {   /* missing road */
+.improveOSM.itemType-mr-road {   /* missing road */
     color: #B452CD;
 }
-.improveOSM.error_type-mr-path {   /* missing path */
+.improveOSM.itemType-mr-path {   /* missing path */
     color: #A0522D;
 }
-.improveOSM.error_type-mr-parking {   /* missing parking */
+.improveOSM.itemType-mr-parking {   /* missing parking */
     color: #EEEE00;
 }
-.improveOSM.error_type-mr-both {   /* missing road+parking */
+.improveOSM.itemType-mr-both {   /* missing road+parking */
     color: #FFA500;
 }
 
-.improveOSM.error_type-tr {   /* missing turn restriction */
+.improveOSM.itemType-tr {   /* missing turn restriction */
     color: #EC1C24;
 }
 

css/80_app.css

@@ -649,7 +649,7 @@ button.add-note svg.icon {
 .field-help-title button.close,
 .sidebar-component .header button.data-editor-close,
 .sidebar-component .header button.note-editor-close,
-.sidebar-component .header button.error-editor-close,
+.sidebar-component .header button.qa-editor-close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
@@ -659,7 +659,7 @@ button.add-note svg.icon {
 [dir='rtl'] .field-help-title button.close,
 [dir='rtl'] .sidebar-component .header button.data-editor-close,
 [dir='rtl'] .sidebar-component .header button.note-editor-close,
-[dir='rtl'] .sidebar-component .header button.error-editor-close,
+[dir='rtl'] .sidebar-component .header button.qa-editor-close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
@@ -2607,10 +2607,10 @@ input.key-trap {
 }
 
 
-/* OSM Note / KeepRight Editors
+/* OSM Note / QA Editors
 ------------------------------------------------------- */
 .note-header,
-.error-header {
+.qa-header {
     background-color: #f6f6f6;
     border-radius: 5px;
     border: 1px solid #ccc;
@@ -2620,7 +2620,7 @@ input.key-trap {
 }
 
 .note-header-icon,
-.error-header-icon {
+.qa-header-icon {
     background-color: #fff;
     padding: 10px;
     flex: 0 0 62px;
@@ -2631,14 +2631,14 @@ input.key-trap {
     border-radius: 5px 0 0 5px;
 }
 [dir='rtl'] .note-header-icon,
-[dir='rtl'] .error-header-icon {
+[dir='rtl'] .qa-header-icon {
     border-right: unset;
     border-left: 1px solid #ccc;
     border-radius: 0 5px 5px 0;
 }
 
 .note-header-icon .icon-wrap,
-.error-header-icon .icon-wrap {
+.qa-header-icon .icon-wrap {
     position: absolute;
     top: 0px;
 }
@@ -2654,7 +2654,7 @@ input.key-trap {
 }
 
 .note-header-label,
-.error-header-label {
+.qa-header-label {
     background-color: #f6f6f6;
     padding: 0 15px;
     flex: 1 1 100%;
@@ -2663,7 +2663,7 @@ input.key-trap {
     border-radius: 0 5px 5px 0;
 }
 [dir='rtl'] .note-header-label,
-[dir='rtl'] .error-header-label {
+[dir='rtl'] .qa-header-label {
     border-radius: 5px 0 0 5px;
 }
 
@@ -2730,11 +2730,11 @@ input.key-trap {
 }
 
 .note-save,
-.error-save {
+.qa-save {
     padding-top: 20px;
 }
 
-.error-details-container {
+.qa-details-container {
     background: #ececec;
     padding: 10px;
     margin-top: 20px;
@@ -2743,22 +2743,22 @@ input.key-trap {
     display: flex;
     flex-direction: column;
 }
-.error-details-description {
+.qa-details-description {
     margin-bottom: 10px;
     display: flex;
     flex-direction: column;
 }
-.error-details-description-text::first-letter {
+.qa-details-description-text::first-letter {
     text-transform: capitalize;
 }
-[dir='rtl'] .error-details-description-text::first-letter {
+[dir='rtl'] .qa-details-description-text::first-letter {
     text-transform: none;  /* #5877 */
 }
-.error-details-subsection h4 {
+.qa-details-subsection h4 {
     padding-top: 10px;
     padding-bottom: 0;
 }
-.error-details code {
+.qa-details-container code {
     padding: .2em .4em;
     margin: 0;
     font-size: 85%;
@@ -2766,7 +2766,7 @@ input.key-trap {
     background-color: rgba(27,31,35,.05);
     border-radius: 3px;
 }
-.error-details + .translation-link {
+.qa-details-container + .translation-link {
     margin-top: 5px;
     display: flex;
     flex-direction: row;
@@ -2774,7 +2774,7 @@ input.key-trap {
 }
 
 .note-save .new-comment-input,
-.error-save .new-comment-input {
+.qa-save .new-comment-input {
     width: 100%;
     height: 100px;
     max-height: 300px;
@@ -2782,7 +2782,7 @@ input.key-trap {
 }
 
 .note-save .detail-section,
-.error-save .detail-section {
+.qa-save .detail-section {
     margin: 10px 0;
 }