Bug 1583034 - Fix markup view root padding and content width; r=gl

- Add box-sizing:border-box to root container to avoid horizontal scrollbar.
- Control indent size from CSS only, using calc() and a custom property for the indent count.
- Set indent size explicitly to 11px instead of 1em, since our other metrics are in px.
- Remove padding-left from tag lines, so that left padding is a combination of root padding + indents only.

Differential Revision: https://phabricator.services.mozilla.com/D47134

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/markup/views/markup-container.js

@@ -111,7 +111,7 @@ MarkupContainer.prototype = {
 
     this.mutationMarker = this.win.document.createElement("div");
     this.mutationMarker.classList.add("markup-tag-mutation-marker");
-    this.mutationMarker.style.left = `-${this.level}em`;
+    this.mutationMarker.style.setProperty("--markup-level", this.level);
     this.tagLine.appendChild(this.mutationMarker);
 
     this.tagState = this.win.document.createElement("span");

devtools/client/themes/markup.css

@@ -42,8 +42,10 @@ body {
 #root {
   float: left;
   min-width: 100%;
-  /* Accommodates for DOM mutation breakpoint and pseudo icons */
-  padding-left: 5px;
+  /* Reserve extra space (in addition to the indent size) for DOM mutation
+   * breakpoint and pseudo icons. */
+  padding-left: 6px;
+  box-sizing: border-box;
 }
 
 /* Reset the global rotation of the icon done for RTL layout.
@@ -111,8 +113,8 @@ body.dragging .tag-line {
  * A very large padding is used in combination with a slightly smaller margin
  * to make sure childs actually span from edge-to-edge. */
 .child {
-  margin-left: -1000em;
-  padding-left: 1001em;
+  margin-left: -10000px;
+  padding-left: 10011px;
 }
 
 /* Normally this element takes space in the layout even if it's position: relative
@@ -156,19 +158,19 @@ ul.children + .tag-line::before {
   font-size: var(--theme-code-font-size);
   min-height: 1.2727em;
   line-height: 1.2727em;
+  padding-block: 1px;
   position: relative;
   cursor: default;
-  padding: 1px 0 1px 2px;
 }
 
 .tag-line[selected] + .children,
 .tag-line[selected] ~ .tag-line {
   background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
-  background-position-x: -6px;
+  background-position: 0 0;
   background-repeat: no-repeat;
   background-size: 1.5px 100%;
-  border-left: 6px solid transparent;
-  margin-left: -6px;
+  padding-left: 8px;
+  margin-left: -8px;
 }
 
 .tag-line[selected] + .children {
@@ -181,16 +183,23 @@ ul.children + .tag-line::before {
   transition-property: none;
 }
 
+/**
+ * Positioning the mutation marker on the viewport's left edge:
+ * - left: walk back the indentation level up
+ * - margin-left: walk back the #root's 6px padding-left
+ *   (plus hide the leftmost 2px of the icon outside the viewport)
+ */
 .markup-tag-mutation-marker {
   display: none;
   position: absolute;
   top: 2px;
+  left: calc(var(--markup-level, 1) * -11px);
+  margin-left: -8px;
   height: 12px;
   width: 12px;
   background-image: url(resource://devtools/client/debugger/images/markup-breakpoint.svg);
   background-repeat: no-repeat;
   background-size: 12px 12px;
-  margin-left: -7px;
   background-position: right center;
   -moz-context-properties: fill, stroke;
   fill: var(--blue-50);