Backed out changeset 23c40e8dac0f (bug 1336198) for timeouts in devtools' boxmodel tests, e.g. browser_boxmodel_editablemodel_stylerules.js. r=backout

This commit is contained in:
Sebastian Hengst 2017-02-16 23:44:53 +01:00
parent 9fa453eb86
commit b35eaa5cbb
3 changed files with 261 additions and 0 deletions

View File

@ -14,6 +14,7 @@
<link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/deprecated-boxmodel.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/>
<link rel="stylesheet" href="resource://devtools/client/shared/components/sidebar-toggle.css"/>

View File

@ -177,6 +177,7 @@ devtools.jar:
skin/images/noise.png (themes/images/noise.png)
skin/images/dropmarker.svg (themes/images/dropmarker.svg)
skin/boxmodel.css (themes/boxmodel.css)
skin/deprecated-boxmodel.css (themes/deprecated-boxmodel.css)
skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
skin/images/pause.svg (themes/images/pause.svg)
skin/images/play.svg (themes/images/play.svg)

View File

@ -0,0 +1,259 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/ */
/**
* THIS STYLESHEET IS FOR THE DEPRECATED BOX MODEL MODULE (deprecated-box-model.js) AND
* SHOULD NO LONGER BE MODIFIED.
*/
#old-boxmodel-wrapper {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: var(--theme-splitter-color);
-moz-user-select: none;
}
#old-boxmodel-container {
/* The view will grow bigger as the window gets resized, until 400px */
max-width: 400px;
margin: 0px auto;
padding: 0;
}
/* Header */
#old-boxmodel-header,
#old-boxmodel-info {
display: flex;
align-items: center;
padding: 4px 17px;
}
#old-layout-geometry-editor {
visibility: hidden;
}
#old-layout-geometry-editor::before {
background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
}
/* Main: contains the box-model regions */
#old-boxmodel-main {
position: relative;
box-sizing: border-box;
/* The regions are semi-transparent, so the white background is partly
visible */
background-color: white;
color: var(--theme-selection-color);
/* Make sure there is some space between the window's edges and the regions */
margin: 0 14px 4px 14px;
width: calc(100% - 2 * 14px);
}
.old-boxmodel-margin,
.old-boxmodel-size {
color: var(--theme-highlight-blue);
}
/* Regions are 3 nested elements with wide borders and outlines */
#old-boxmodel-content {
height: 18px;
}
#old-boxmodel-margins,
#old-boxmodel-borders,
#old-boxmodel-padding {
border-color: hsla(210,100%,85%,0.2);
border-width: 18px;
border-style: solid;
outline: dotted 1px hsl(210,100%,85%);
}
#old-boxmodel-margins {
/* This opacity applies to all of the regions, since they are nested */
opacity: .8;
}
/* Regions colors */
#old-boxmodel-margins {
border-color: #edff64;
}
#old-boxmodel-borders {
border-color: #444444;
}
#old-boxmodel-padding {
border-color: #6a5acd;
}
#old-boxmodel-content {
background-color: #87ceeb;
}
.theme-firebug #old-boxmodel-main,
.theme-firebug #old-boxmodel-borders,
.theme-firebug #old-boxmodel-content {
border-style: solid;
}
.theme-firebug #old-boxmodel-main,
.theme-firebug #old-boxmodel-header {
font-family: var(--proportional-font-family);
}
.theme-firebug #old-boxmodel-main {
color: var(--theme-body-color);
font-size: var(--theme-toolbar-font-size);
}
.theme-firebug #old-boxmodel-header {
font-size: var(--theme-toolbar-font-size);
}
/* Editable region sizes are contained in absolutely positioned <p> */
#old-boxmodel-main > p {
position: absolute;
pointer-events: none;
margin: 0;
text-align: center;
}
#old-boxmodel-main > p > span,
#old-boxmodel-main > p > input {
vertical-align: middle;
pointer-events: auto;
}
/* Coordinates for the region sizes */
.old-boxmodel-top,
.old-boxmodel-bottom {
width: calc(100% - 2px);
text-align: center;
}
.old-boxmodel-padding.old-boxmodel-top {
top: 37px;
}
.old-boxmodel-padding.old-boxmodel-bottom {
bottom: 38px;
}
.old-boxmodel-border.old-boxmodel-top {
top: 19px;
}
.old-boxmodel-border.old-boxmodel-bottom {
bottom: 20px;
}
.old-boxmodel-margin.old-boxmodel-top {
top: 1px;
}
.old-boxmodel-margin.old-boxmodel-bottom {
bottom: 2px;
}
.old-boxmodel-size,
.old-boxmodel-margin.old-boxmodel-left,
.old-boxmodel-margin.old-boxmodel-right,
.old-boxmodel-border.old-boxmodel-left,
.old-boxmodel-border.old-boxmodel-right,
.old-boxmodel-padding.old-boxmodel-left,
.old-boxmodel-padding.old-boxmodel-right {
top: 22px;
line-height: 80px;
}
.old-boxmodel-size {
width: calc(100% - 2px);
}
.old-boxmodel-margin.old-boxmodel-right,
.old-boxmodel-margin.old-boxmodel-left,
.old-boxmodel-border.old-boxmodel-left,
.old-boxmodel-border.old-boxmodel-right,
.old-boxmodel-padding.old-boxmodel-right,
.old-boxmodel-padding.old-boxmodel-left {
width: 21px;
}
.old-boxmodel-padding.old-boxmodel-left {
left: 35px;
}
.old-boxmodel-padding.old-boxmodel-right {
right: 35px;
}
.old-boxmodel-border.old-boxmodel-left {
left: 16px;
}
.old-boxmodel-border.old-boxmodel-right {
right: 17px;
}
.old-boxmodel-margin.old-boxmodel-right {
right: 0;
}
.old-boxmodel-margin.old-boxmodel-left {
left: 0;
}
.old-boxmodel-rotate.old-boxmodel-left:not(.old-boxmodel-editing) {
transform: rotate(-90deg);
}
.old-boxmodel-rotate.old-boxmodel-right:not(.old-boxmodel-editing) {
transform: rotate(90deg);
}
/* Legend: displayed inside regions */
.old-boxmodel-legend {
position: absolute;
margin: 2px 6px;
z-index: 1;
}
.old-boxmodel-legend[data-box="margin"] {
color: var(--theme-highlight-blue);
}
/* Editable fields */
.old-boxmodel-editable {
border: 1px dashed transparent;
-moz-user-select: none;
}
.old-boxmodel-editable:hover {
border-bottom-color: hsl(0, 0%, 50%);
}
/* Make sure the content size doesn't appear as editable like the other sizes */
.old-boxmodel-size > span {
cursor: default;
}
/* Box Model Info: contains the position and size of the element */
#old-boxmodel-element-size {
flex: 1;
}
#old-boxmodel-position-group {
display: flex;
align-items: center;
}