Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 09:45:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1289995 - Implement the basic design spec of the box model in the computed view r=bgrins

Browse Source 
- Moves the computed view toolbar back to the top
- Removes the outline to the property name and values and the arrow beside the
property values in the computed view
- Use the compact form of the box model
- Hide the box model when filtering the computed view
This commit is contained in:
Gabriel Luong 2016-07-29 15:05:54 -04:00
parent 64e8b494ae
commit 90e500675b
8 changed files with 62 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/inspector/computed/computed.js
View File

@ -555,8 +555,10 @@ CssComputedView.prototype = {
this._filterChangedTimeout = setTimeout(() => {
if (this.searchField.value.length > 0) {
this.searchField.setAttribute("filled", true);
this.inspector.emit("computed-view-filtered", true);
} else {
this.searchField.removeAttribute("filled");
this.inspector.emit("computed-view-filtered", false);
}
this.refreshPanel();

4
devtools/client/inspector/computed/test/browser_computed_search-filter.js
View File

@ -33,6 +33,8 @@ function* testToggleDefaultStyles(inspector, computedView) {
function* testAddTextInFilter(inspector, computedView) {
info("setting filter text to \"color\"");
let doc = computedView.styleDocument;
let layoutWrapper = doc.querySelector("#layout-wrapper");
let searchField = computedView.searchField;
let onRefreshed = inspector.once("computed-view-refreshed");
let win = computedView.styleWindow;
@ -51,6 +53,8 @@ function* testAddTextInFilter(inspector, computedView) {
synthesizeKeys("color", win);
yield onRefreshed;
ok(layoutWrapper.hidden, "Layout view is hidden");
info("check that the correct properties are visible");
let propertyViews = computedView.propertyViews;

4
devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
View File

@ -49,6 +49,8 @@ function* testClearSearchFilter(inspector, computedView) {
info("Clearing the search filter");
let win = computedView.styleWindow;
let doc = computedView.styleDocument;
let layoutWrapper = doc.querySelector("#layout-wrapper");
let propertyViews = computedView.propertyViews;
let searchField = computedView.searchField;
let searchClearButton = computedView.searchClearButton;
@ -57,6 +59,8 @@ function* testClearSearchFilter(inspector, computedView) {
EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
yield onRefreshed;
ok(!layoutWrapper.hidden, "Layout view is displayed");
info("Check that the correct properties are visible");
ok(!searchField.value, "Search filter is cleared");

2
devtools/client/inspector/inspector-panel.js
View File

@ -79,6 +79,8 @@ loader.lazyGetter(this, "clipboardHelper", () => {
* - computed-view-sourcelinks-updated
* Fired when the stylesheet source links have been updated (when switching
* to source-mapped files)
* - computed-view-filtered
* Fired when the computed rules view is filtered
* - rule-view-refreshed
* Fired when the rule view updates to a new node
* - rule-view-sourcelinks-updated

30
devtools/client/inspector/inspector.xul
View File

@ -97,6 +97,21 @@
</html:div>
<html:div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div id="computedview-toolbar" class="devtools-toolbar">
<html:div class="devtools-searchbox">
<html:input id="computedview-searchbox"
class="devtools-filterinput devtools-rule-searchbox"
type="search"
placeholder="&filterStylesPlaceholder;"/>
<html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
</html:div>
<html:label id="browser-style-checkbox-label" for="browser-style-checkbox">
<html:input id="browser-style-checkbox"
type="checkbox"
class="includebrowserstyles"
label="&browserStylesLabel;"/>&browserStylesLabel;</html:label>
</html:div>
<html:div id="computedview-container">
<html:div id="computedview-container-focusable" tabindex="-1">
<html:div id="layout-wrapper" tabindex="0">
@ -151,21 +166,6 @@
</html:div>
</html:div>
<html:div id="computedview-toolbar" class="devtools-toolbar">
<html:div class="devtools-searchbox">
<html:input id="computedview-searchbox"
class="devtools-filterinput devtools-rule-searchbox"
type="search"
placeholder="&filterStylesPlaceholder;"/>
<html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
</html:div>
<html:label id="browser-style-checkbox-label" for="browser-style-checkbox">
<html:input id="browser-style-checkbox"
type="checkbox"
class="includebrowserstyles"
label="&browserStylesLabel;"/>&browserStylesLabel;</html:label>
</html:div>
<html:div id="propertyContainer" class="theme-separator" tabindex="0">
</html:div>

15
devtools/client/inspector/layout/layout.js
View File

@ -221,6 +221,10 @@ LayoutView.prototype = {
let header = this.doc.getElementById("layout-header");
header.addEventListener("dblclick", this.onToggleExpander);
this.onFilterComputedView = this.onFilterComputedView.bind(this);
this.inspector.on("computed-view-filtered",
this.onFilterComputedView);
this.onPickerStarted = this.onPickerStarted.bind(this);
this.onMarkupViewLeave = this.onMarkupViewLeave.bind(this);
this.onMarkupViewNodeHover = this.onMarkupViewNodeHover.bind(this);
@ -471,6 +475,7 @@ LayoutView.prototype = {
this.inspector.selection.off("new-node-front", this.onNewSelection);
this.inspector.sidebar.off("select", this.onSidebarSelect);
this.inspector._target.off("will-navigate", this.onWillNavigate);
this.inspector.off("computed-view-filtered", this.onFilterComputedView);
this.inspector = null;
this.doc = null;
@ -568,6 +573,16 @@ LayoutView.prototype = {
this._geometryEditorHighlighter = null;
},
/**
* Event handler that responds to the computed view being filtered
* @param {String} reason
* @param {Boolean} hidden
* Whether or not to hide the layout wrapper
*/
onFilterComputedView: function (reason, hidden) {
this.wrapper.hidden = hidden;
},
/**
* Stop tracking reflows and hide all values when no node is selected or the
* layout-view is hidden, otherwise track reflows and show values.

9
devtools/client/themes/computed.css
View File

@ -89,17 +89,17 @@
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
outline: 0;
outline: 0 !important;
}
.property-value, .other-property-value {
.other-property-value {
background-image: url(images/arrow-e.png);
background-repeat: no-repeat;
background-size: 5px 8px;
}
@media (min-resolution: 1.1dppx) {
.property-value, .other-property-value {
.other-property-value {
background-image: url(images/arrow-e@2x.png);
}
}
@ -108,9 +108,8 @@
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-position: 2px center;
padding-left: 10px;
outline: 0;
outline: 0 !important;
}
.other-property-value {

116
devtools/client/themes/layout.css
View File

@ -42,7 +42,7 @@
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 10px 14px;
margin: 0 14px 4px 14px;
width: calc(100% - 2 * 14px);
}
@ -54,14 +54,14 @@
/* Regions are 3 nested elements with wide borders and outlines */
#layout-content {
height: 25px;
height: 18px;
}
#layout-margins,
#layout-borders,
#layout-padding {
border-color: hsla(210,100%,85%,0.2);
border-width: 25px;
border-width: 18px;
border-style: solid;
outline: dotted 1px hsl(210,100%,85%);
}
@ -71,20 +71,6 @@
opacity: .8;
}
/* Respond to window size change by changing the size of the regions */
@media (max-height: 250px) {
#layout-content {
height: 18px;
}
#layout-margins,
#layout-borders,
#layout-padding {
border-width: 18px;
}
}
/* Regions colors */
#layout-margins {
@ -147,27 +133,27 @@
}
.layout-padding.layout-top {
top: 55px;
top: 37px;
}
.layout-padding.layout-bottom {
bottom: 57px;
bottom: 38px;
}
.layout-border.layout-top {
top: 30px;
top: 19px;
}
.layout-border.layout-bottom {
bottom: 31px;
bottom: 20px;
}
.layout-margin.layout-top {
top: 5px;
top: 1px;
}
.layout-margin.layout-bottom {
bottom: 6px;
bottom: 2px;
}
.layout-size,
@ -178,7 +164,7 @@
.layout-padding.layout-left,
.layout-padding.layout-right {
top: 22px;
line-height: 132px;
line-height: 80px;
}
.layout-size {
@ -191,23 +177,23 @@
.layout-border.layout-right,
.layout-padding.layout-right,
.layout-padding.layout-left {
width: 25px;
width: 21px;
}
.layout-padding.layout-left {
left: 52px;
left: 35px;
}
.layout-padding.layout-right {
right: 51px;
right: 35px;
}
.layout-border.layout-left {
left: 26px;
left: 16px;
}
.layout-border.layout-right {
right: 26px;
right: 17px;
}
.layout-margin.layout-right {
@ -226,75 +212,11 @@
transform: rotate(90deg);
}
/* Coordinates should be different when the window is small, because we make
the regions smaller then */
@media (max-height: 250px) {
.layout-padding.layout-top {
top: 37px;
}
.layout-padding.layout-bottom {
bottom: 38px;
}
.layout-border.layout-top {
top: 19px;
}
.layout-border.layout-bottom {
bottom: 20px;
}
.layout-margin.layout-top {
top: 1px;
}
.layout-margin.layout-bottom {
bottom: 2px;
}
.layout-size,
.layout-margin.layout-left,
.layout-margin.layout-right,
.layout-border.layout-left,
.layout-border.layout-right,
.layout-padding.layout-left,
.layout-padding.layout-right {
line-height: 80px;
}
.layout-margin.layout-right,
.layout-margin.layout-left,
.layout-border.layout-left,
.layout-border.layout-right,
.layout-padding.layout-right,
.layout-padding.layout-left {
width: 21px;
}
.layout-padding.layout-left {
left: 35px;
}
.layout-padding.layout-right {
right: 35px;
}
.layout-border.layout-left {
left: 16px;
}
.layout-border.layout-right {
right: 17px;
}
}
/* Legend: displayed inside regions */
.layout-legend {
position: absolute;
margin: 5px 6px;
margin: 2px 6px;
z-index: 1;
}
@ -302,12 +224,6 @@
color: var(--theme-highlight-blue);
}
@media (max-height: 250px) {
.layout-legend {
margin: 2px 6px;
}
}
/* Editable fields */
.layout-editable {