Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-11 08:13:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Florens Verschelde 2019-10-02 16:58:46 +00:00
parent e4347a245f
commit 4f70dd7655
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/inspector/markup/views/markup-container.js
View File

@ -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");

27
devtools/client/themes/markup.css
View File

@ -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);