Use ideditor as the container class instead of id-container

Scope all CSS to iD's container (close #7437)
Don't style html or body elements unless running standalone iD

css/00_reset.css

@@ -3,7 +3,7 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
+div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
@@ -28,9 +28,6 @@ article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
-body {
-	line-height: 1;
-}
 ol, ul {
 	list-style: none;
 }
@@ -80,19 +77,17 @@ display: none;
 }
 
 /*
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Corrects inability to style clickable `input` types in iOS.
- * 3. Improves usability and consistency of cursor style between image-type
+ * 1. Corrects inability to style clickable `input` types in iOS.
+ * 2. Improves usability and consistency of cursor style between image-type
  *    `input` and others.
  */
 
 button,
-html input[type="button"], /* 1 */
+input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
+    -webkit-appearance: button; /* 1 */
+    cursor: pointer; /* 2 */
 }
 
 /*

css/20_map.css

@@ -132,8 +132,8 @@ g.point.selected .shadow {
 g.point ellipse.stroke {
     display: none;
 }
-.mode-drag-note g.note.active ellipse.stroke,
-.mode-drag-node g.point.active ellipse.stroke {
+.ideditor.mode-drag-note g.note.active ellipse.stroke,
+.ideditor.mode-drag-node g.point.active ellipse.stroke {
     display: block;
 }
 

css/55_cursors.css

@@ -11,96 +11,96 @@
     cursor: url(img/cursor-grab.png) 9 9, auto; /* FF */
 }
 
-.mode-browse .point,
-.mode-select .point {
+.ideditor.mode-browse .point,
+.ideditor.mode-select .point {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-point.png), pointer; /* FF */
 }
 
-.mode-select .vertex,
-.mode-browse .vertex {
+.ideditor.mode-select .vertex,
+.ideditor.mode-browse .vertex {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-vertex.png), pointer; /* FF */
 }
 
-.mode-browse .line,
-.mode-select .line {
+.ideditor.mode-browse .line,
+.ideditor.mode-select .line {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-line.png), pointer; /* FF */
 }
 
-.mode-select .area,
-.mode-browse .area {
+.ideditor.mode-select .area,
+.ideditor.mode-browse .area {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-area.png), pointer; /* FF */
 }
 
-.mode-select .midpoint,
-.mode-browse .midpoint {
+.ideditor.mode-select .midpoint,
+.ideditor.mode-browse .midpoint {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-split.png), pointer; /* FF */
 }
 
-.mode-select .behavior-multiselect .point,
-.mode-select .behavior-multiselect .vertex,
-.mode-select .behavior-multiselect .line,
-.mode-select .behavior-multiselect .area {
+.ideditor.mode-select .behavior-multiselect .point,
+.ideditor.mode-select .behavior-multiselect .vertex,
+.ideditor.mode-select .behavior-multiselect .line,
+.ideditor.mode-select .behavior-multiselect .area {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-add.png), pointer; /* FF */
 }
 
-.mode-select .behavior-multiselect .selected {
+.ideditor.mode-select .behavior-multiselect .selected {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-remove.png), pointer; /* FF */
 }
 
-.mode-add-preset .main-map,
-.mode-draw-line .main-map,
-.mode-draw-area .main-map,
-.mode-add-line  .main-map,
-.mode-add-area  .main-map,
-.mode-drag-node .main-map,
-.mode-drag-note .main-map {
+.ideditor.mode-add-preset .main-map,
+.ideditor.mode-draw-line .main-map,
+.ideditor.mode-draw-area .main-map,
+.ideditor.mode-add-line  .main-map,
+.ideditor.mode-add-area  .main-map,
+.ideditor.mode-drag-node .main-map,
+.ideditor.mode-drag-note .main-map {
     cursor: crosshair; /* Opera */
     cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
 }
 
-.mode-draw-line .way.target,
-.mode-draw-area .way.target,
-.mode-add-line  .way.target,
-.mode-add-area  .way.target,
-.mode-drag-node .way.target {
+.ideditor.mode-draw-line .way.target,
+.ideditor.mode-draw-area .way.target,
+.ideditor.mode-add-line  .way.target,
+.ideditor.mode-add-area  .way.target,
+.ideditor.mode-drag-node .way.target {
     cursor: crosshair; /* Opera */
     cursor: url(img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
 }
 
-.mode-draw-line .vertex.target,
-.mode-draw-area .vertex.target,
-.mode-add-line  .vertex.target,
-.mode-add-area  .vertex.target,
-.mode-drag-node .vertex.target {
+.ideditor.mode-draw-line .vertex.target,
+.ideditor.mode-draw-area .vertex.target,
+.ideditor.mode-add-line  .vertex.target,
+.ideditor.mode-add-area  .vertex.target,
+.ideditor.mode-drag-node .vertex.target {
     cursor: crosshair; /* Opera */
     cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
 }
 
-.mode-add-point .main-map,
-.mode-add-note .main-map,
-.mode-browse.lasso .main-map,
-.mode-browse.lasso .way,
-.mode-browse.lasso .vertex,
-.mode-browse.lasso .midpoint,
-.mode-select.lasso .main-map,
-.mode-select.lasso .way,
-.mode-select.lasso .vertex,
-.mode-select.lasso .midpoint {
+.ideditor.mode-add-point .main-map,
+.ideditor.mode-add-note .main-map,
+.ideditor.mode-browse.lasso .main-map,
+.ideditor.mode-browse.lasso .way,
+.ideditor.mode-browse.lasso .vertex,
+.ideditor.mode-browse.lasso .midpoint,
+.ideditor.mode-select.lasso .main-map,
+.ideditor.mode-select.lasso .way,
+.ideditor.mode-select.lasso .vertex,
+.ideditor.mode-select.lasso .midpoint {
     cursor: crosshair; /* Opera */
     cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
 }
 
-.mode-browse .note,
-.mode-browse .qaItem,
-.mode-select .note,
-.mode-select .qaItem,
+.ideditor.mode-browse .note,
+.ideditor.mode-browse .qaItem,
+.ideditor.mode-select .note,
+.ideditor.mode-select .qaItem,
 .turn rect,
 .turn circle {
     cursor: pointer;

css/60_photos.css

@@ -99,8 +99,8 @@
 .viewfield-group {
     pointer-events: none;
 }
-.mode-browse .viewfield-group,
-.mode-select .viewfield-group {
+.ideditor.mode-browse .viewfield-group,
+.ideditor.mode-select .viewfield-group {
     pointer-events: visible;
     cursor: pointer;
 }

css/70_fills.css

@@ -46,7 +46,7 @@
 .fill-partial path.area.fill.tag-indoor {
     stroke-width: 20px;
 }
-.mode-browse .fill-partial path.area.fill,
-.mode-select .fill-partial path.area.fill {
+.ideditor.mode-browse .fill-partial path.area.fill,
+.ideditor.mode-select .fill-partial path.area.fill {
     pointer-events: visibleStroke;
 }

dist/index.html

@@ -6,8 +6,17 @@
     <link rel='stylesheet' href='iD.css'>
     <link rel='icon' type='image/png' href='data:image/png;base64,iVBORw0KGgo='>
     <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
-    <meta name='apple-mobile-web-app-capable' content='yes' />
-    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
+    <meta name='apple-mobile-web-app-capable' content='yes'/>
+    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
+    <style type='text/css'>
+      /* apply document-level styling to standalone iD only */
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
   </head>
 
   <body>
@@ -30,7 +39,7 @@
       function checkScript() {
         if (typeof iD === 'undefined' || !iD.utilDetect().support) {
           container.innerHTML = 'Sorry, your browser is not currently supported. Please use Potlatch 2 to edit the map.';
-          container.className = 'unsupported';
+          container.style.padding = '20px';
 
         } else {
           var context = iD.coreContext();

index.html

@@ -8,6 +8,15 @@
     <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
     <meta name='apple-mobile-web-app-capable' content='yes'/>
     <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
+    <style type='text/css'>
+      /* apply document-level styling to standalone iD only */
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
   </head>
 
   <body>
@@ -29,7 +38,7 @@
       function checkScript() {
         if (typeof iD === 'undefined' || !iD.utilDetect().support) {
           container.innerHTML = 'Sorry, your browser is not currently supported. Please use Potlatch 2 to edit the map.';
-          container.className = 'unsupported';
+          container.style.padding = '20px';
 
         } else {
           var context = iD.coreContext().assetPath('dist/');

modules/core/context.js

@@ -363,7 +363,7 @@ export function coreContext() {
   context.container = function(val) {
     if (!arguments.length) return _container;
     _container = val;
-    _container.classed('id-container', true);
+    _container.classed('ideditor', true);
     return context;
   };
   let _embed;

modules/ui/edit_menu.js

@@ -106,7 +106,7 @@ export function uiEditMenu(context, operations) {
             .classed('disabled', function(d) { return d.disabled(); });
 
 
-        tooltip = d3_select('#id-container')
+        tooltip = d3_select('.ideditor')
             .append('div')
             .attr('class', 'popover tooltip edit-menu-tooltip');
 

modules/ui/intro/area.js

@@ -470,11 +470,11 @@ export function uiIntroArea(context, reveal) {
 
     function play() {
         dispatch.call('done');
-        reveal('#id-container',
+        reveal('.ideditor',
             t('intro.areas.play', { next: t('intro.lines.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-line',
                 buttonText: t('intro.ok'),
-                buttonCallback: function() { reveal('#id-container'); }
+                buttonCallback: function() { reveal('.ideditor'); }
             }
         );
     }

modules/ui/intro/building.js

@@ -757,11 +757,11 @@ export function uiIntroBuilding(context, reveal) {
 
     function play() {
         dispatch.call('done');
-        reveal('#id-container',
+        reveal('.ideditor',
             t('intro.buildings.play', { next: t('intro.startediting.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-startEditing',
                 buttonText: t('intro.ok'),
-                buttonCallback: function() { reveal('#id-container'); }
+                buttonCallback: function() { reveal('.ideditor'); }
             }
         );
     }

modules/ui/intro/line.js

@@ -1036,11 +1036,11 @@ export function uiIntroLine(context, reveal) {
 
     function play() {
         dispatch.call('done');
-        reveal('#id-container',
+        reveal('.ideditor',
             t('intro.lines.play', { next: t('intro.buildings.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-building',
                 buttonText: t('intro.ok'),
-                buttonCallback: function() { reveal('#id-container'); }
+                buttonCallback: function() { reveal('.ideditor'); }
             }
         );
    }

modules/ui/intro/navigation.js

@@ -530,11 +530,11 @@ export function uiIntroNavigation(context, reveal) {
 
     function play() {
         dispatch.call('done');
-        reveal('#id-container',
+        reveal('.ideditor',
             t('intro.navigation.play', { next: t('intro.points.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-point',
                 buttonText: t('intro.ok'),
-                buttonCallback: function() { reveal('#id-container'); }
+                buttonCallback: function() { reveal('.ideditor'); }
             }
         );
     }

modules/ui/intro/point.js

@@ -476,11 +476,11 @@ export function uiIntroPoint(context, reveal) {
 
     function play() {
         dispatch.call('done');
-        reveal('#id-container',
+        reveal('.ideditor',
             t('intro.points.play', { next: t('intro.areas.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-area',
                 buttonText: t('intro.ok'),
-                buttonCallback: function() { reveal('#id-container'); }
+                buttonCallback: function() { reveal('.ideditor'); }
             }
         );
     }

package.json

@@ -97,6 +97,8 @@
     "object-inspect": "0.4.0",
     "osm-community-index": "2.0.0",
     "phantomjs-prebuilt": "~2.1.11",
+    "postcss": "^7.0.27",
+    "postcss-selector-prepend": "^0.5.0",
     "request": "^2.88.0",
     "rollup": "~1.31.1",
     "rollup-plugin-includepaths": "~0.2.3",

scripts/build_css.js

@@ -2,6 +2,9 @@
 const colors = require('colors/safe');
 const concat = require('concat-files');
 const glob = require('glob');
+const fs = require('fs');
+const postcss = require('postcss');
+const prepend = require('postcss-selector-prepend');
 
 let _currBuild = null;
 
@@ -27,6 +30,12 @@ function buildCSS() {
     Promise.resolve()
       .then(() => doGlob('css/**/*.css'))
       .then(files => doConcat(files, 'dist/iD.css'))
+      .then(() => {
+        const css = fs.readFileSync('dist/iD.css', 'utf8');
+        return postcss([prepend({ selector: '.ideditor ' })])
+          .process(css, { from: 'dist/iD.css', to: 'dist/iD.css' });
+      })
+      .then(result => fs.writeFileSync('dist/iD.css', result.css))
       .then(() => {
         console.timeEnd(END);
         console.log('');
@@ -58,4 +67,3 @@ function doConcat(files, output) {
     });
   });
 }
-

test/spec/ui/combobox.js

@@ -65,7 +65,7 @@ describe('uiCombobox', function() {
 
     beforeEach(function() {
         body = d3.select('body');
-        container = body.append('div').attr('class', 'id-container');
+        container = body.append('div').attr('class', 'ideditor');
         context = iD.coreContext().container(container).init();
         content = container.append('div');
         input = content.append('input');
@@ -92,7 +92,7 @@ describe('uiCombobox', function() {
         input.call(combobox.data(data));
         focusTypeahead(input);
         simulateKeypress('↓');
-        expect(d3.select('.id-container > div.combobox').nodes().length).to.equal(1);
+        expect(d3.select('.ideditor > div.combobox').nodes().length).to.equal(1);
     });
 
     it('filters entries to those matching the value', function() {