Merge m-c to inbound.

This commit is contained in:
Ryan VanderMeulen 2013-12-05 17:56:44 -05:00
commit f006eb0ddb
267 changed files with 6170 additions and 3515 deletions

View File

@ -18,4 +18,4 @@
# Modifying this file will now automatically clobber the buildbot machines \o/
#
Bug 915533 - Remove unused files under dom/bluetooth.
Bug 585122 - New file added for xpcshell test not always being copied.

View File

@ -65,7 +65,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=483573
var audioElm = getAccessible("audio");
var playBtn = audioElm.firstChild;
var scrubber = playBtn.nextSibling.nextSibling.nextSibling;
var muteBtn = audioElm.lastChild;
var muteBtn = audioElm.lastChild.previousSibling;
var actions = [
{

View File

@ -49,7 +49,11 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=483573
role: ROLE_PUSHBUTTON,
name: "Mute",
children: []
}
},
{ // slider of volume bar
role: ROLE_SLIDER,
children: []
},
]
};
testAccessibleTree("audio", accTree);

View File

@ -28,5 +28,9 @@
<true/>
<key>CGDisableCoalescedUpdates</key>
<true/>
<key>NSHighResolutionCapable</key>
<true/>
<key>NSPrincipalClass</key>
<string>GeckoNSApplication</string>
</dict>
</plist>

View File

@ -1346,7 +1346,7 @@ window.addEventListener('ContentStart', function update_onContentStart() {
break;
case 'content-shutdown':
// iterate through all the existing active processes
Object.keys(gRecordingActiveProcesses[processId]).foreach(function(requestURL) {
Object.keys(gRecordingActiveProcesses[processId]).forEach(function(requestURL) {
commandHandler(requestURL, { type: aData,
isAudio: true,
isVideo: true});

View File

@ -54,7 +54,7 @@
* is hidden by videocontrols.xml, and that alters the position of the
* play button. This workaround moves it back to center.
*/
.controlBar.audio .playButton {
.controlBar.audio-only .playButton {
transform: translateX(28px);
}

View File

@ -1,4 +1,4 @@
{
"revision": "adb7896ababd1ccb828e11b05909c0e9ca22594e",
"revision": "2f52419acd2edacec369138b143454dd8afccebd",
"repo_path": "/integration/gaia-central"
}

View File

@ -1090,7 +1090,7 @@ pref("devtools.commands.dir", "");
// Enable the app manager
pref("devtools.appmanager.enabled", true);
pref("devtools.appmanager.lastTab", "help");
pref("devtools.appmanager.manifestEditor.enabled", false);
pref("devtools.appmanager.manifestEditor.enabled", true);
// Toolbox preferences
pref("devtools.toolbox.footer.height", 250);

View File

@ -4194,8 +4194,8 @@ function onViewToolbarsPopupShowing(aEvent, aInsertPoint) {
return;
}
// The explicitOriginalTarget can be a nested child element of a toolbaritem.
let toolbarItem = aEvent.explicitOriginalTarget;
// triggerNode can be a nested child element of a toolbaritem.
let toolbarItem = popup.triggerNode;
if (toolbarItem && toolbarItem.localName == "toolbarpaletteitem") {
toolbarItem = toolbarItem.firstChild;

View File

@ -48,7 +48,7 @@ function setAttributes(aNode, aAttrs) {
function updateCombinedWidgetStyle(aNode, aArea, aModifyAutoclose) {
let inPanel = (aArea == CustomizableUI.AREA_PANEL);
let cls = inPanel ? "panel-combined-button" : null;
let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
let attrs = {class: cls};
if (aModifyAutoclose) {
attrs.noautoclose = inPanel ? true : null;
@ -305,7 +305,7 @@ const CustomizableWidgets = [{
const kPanelId = "PanelUI-popup";
let inPanel = (this.currentArea == CustomizableUI.AREA_PANEL);
let noautoclose = inPanel ? "true" : null;
let cls = inPanel ? "panel-combined-button" : null;
let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
if (!this.currentArea)
cls = null;
@ -449,7 +449,7 @@ const CustomizableWidgets = [{
defaultArea: CustomizableUI.AREA_PANEL,
onBuild: function(aDocument) {
let inPanel = (this.currentArea == CustomizableUI.AREA_PANEL);
let cls = inPanel ? "panel-combined-button" : null;
let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
if (!this.currentArea)
cls = null;
@ -799,6 +799,8 @@ const CustomizableWidgets = [{
if (isWin8OrHigher()) {
CustomizableWidgets.push({
id: "switch-to-metro-button",
label: "switch-to-metro-button2.label",
tooltiptext: "switch-to-metro-button2.tooltiptext",
removable: true,
defaultArea: CustomizableUI.AREA_PANEL,
onCommand: function(aEvent) {

View File

@ -6,7 +6,7 @@
JS_MODULES_PATH = 'modules/devtools/debugger'
EXTRA_JS_MODULES += [
'debugger-panel.js'
'panel.js'
]
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']

View File

@ -0,0 +1,59 @@
/* 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/. */
#options-panel-container {
overflow: auto;
}
#options-panel {
overflow-y: auto;
display: block;
}
.options-vertical-pane {
display: inline;
float: left;
}
.options-vertical-pane > label {
display: block;
}
.options-vertical-pane {
margin: 5px;
width: calc(50% - 30px);
min-width: 400px;
-moz-padding-start: 5px;
}
.options-vertical-pane > label {
padding: 2px 0;
font-size: 1.4rem;
}
.options-groupbox {
-moz-margin-start: 15px;
padding: 2px;
}
.options-groupbox > * {
padding: 2px;
}
.options-citation-label {
font-size: 1rem !important;
/* !important is required otherwise font-size will still be 1.4rem */
font-style: italic;
padding: 4px 0 0; /* To align it with the checkbox */
}
.options-citation-label + label {
padding: 3px 0 0 !important; /* To align it with the checkbox */
font-style: italic;
}
.hidden-labels-box:not(.visible) > label,
.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
display: none;
}

View File

@ -7,8 +7,7 @@
%toolboxDTD;
]>
<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
<?xml-stylesheet rel="stylesheet" href="chrome://browser/content/devtools/framework/toolbox.css" type="text/css"?>
<?xml-stylesheet rel="stylesheet" href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
<?xml-stylesheet rel="stylesheet" href="chrome://browser/content/devtools/framework/options-panel.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

View File

@ -1,32 +0,0 @@
/* 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/. */
.devtools-tab {
-moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
-moz-box-align: center;
}
#toolbox-controls > toolbarbutton > .toolbarbutton-text,
#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
.command-button > .toolbarbutton-text {
display: none;
}
#options-panel-container {
overflow: auto;
}
#options-panel {
overflow-y: auto;
display: block;
}
.options-vertical-pane {
display: inline;
float: left;
}
.options-vertical-pane > label {
display: block;
}

View File

@ -7,9 +7,7 @@
%toolboxDTD;
]>
<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://browser/content/devtools/framework/toolbox.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

View File

@ -75,7 +75,7 @@ browser.jar:
content/browser/devtools/framework/toolbox-options.xul (framework/toolbox-options.xul)
content/browser/devtools/framework/toolbox-options.js (framework/toolbox-options.js)
* content/browser/devtools/framework/toolbox.xul (framework/toolbox.xul)
content/browser/devtools/framework/toolbox.css (framework/toolbox.css)
content/browser/devtools/framework/options-panel.css (framework/options-panel.css)
content/browser/devtools/framework/toolbox-process-window.xul (framework/toolbox-process-window.xul)
content/browser/devtools/framework/toolbox-process-window.js (framework/toolbox-process-window.js)
content/browser/devtools/inspector/inspector.xul (inspector/inspector.xul)

View File

@ -25,11 +25,11 @@ let events = require("sdk/system/events");
loader.lazyGetter(this, "OptionsPanel", () => require("devtools/framework/toolbox-options").OptionsPanel);
loader.lazyGetter(this, "InspectorPanel", () => require("devtools/inspector/inspector-panel").InspectorPanel);
loader.lazyGetter(this, "WebConsolePanel", () => require("devtools/webconsole/panel").WebConsolePanel);
loader.lazyGetter(this, "DebuggerPanel", () => require("devtools/debugger/debugger-panel").DebuggerPanel);
loader.lazyGetter(this, "DebuggerPanel", () => require("devtools/debugger/panel").DebuggerPanel);
loader.lazyImporter(this, "StyleEditorPanel", "resource:///modules/devtools/StyleEditorPanel.jsm");
loader.lazyGetter(this, "ShaderEditorPanel", () => require("devtools/shadereditor/panel").ShaderEditorPanel);
loader.lazyGetter(this, "ProfilerPanel", () => require("devtools/profiler/panel"));
loader.lazyGetter(this, "NetMonitorPanel", () => require("devtools/netmonitor/netmonitor-panel").NetMonitorPanel);
loader.lazyGetter(this, "NetMonitorPanel", () => require("devtools/netmonitor/panel").NetMonitorPanel);
loader.lazyGetter(this, "ScratchpadPanel", () => require("devtools/scratchpad/scratchpad-panel").ScratchpadPanel);
// Strings

View File

@ -8,5 +8,5 @@ TEST_DIRS += ['test']
JS_MODULES_PATH = 'modules/devtools/netmonitor'
EXTRA_JS_MODULES += [
'netmonitor-panel.js'
'panel.js'
]

View File

@ -203,7 +203,7 @@ function ResponsiveUI(aWindow, aTab)
// Touch events support
this.touchEnableBefore = false;
this.touchEventHandler = new TouchEventHandler(this.browser.contentWindow);
this.touchEventHandler = new TouchEventHandler(this.browser);
this.browser.addEventListener("load", this.bound_onPageLoad, true);
this.browser.addEventListener("unload", this.bound_onPageUnload, true);
@ -232,7 +232,7 @@ ResponsiveUI.prototype = {
* Window onload / onunload
*/
onPageLoad: function() {
this.touchEventHandler = new TouchEventHandler(this.browser.contentWindow);
this.touchEventHandler = new TouchEventHandler(this.browser);
if (this.touchEnableBefore) {
this.enableTouch();
}

View File

@ -31,3 +31,4 @@ support-files =
[browser_toolbar_tooltip.js]
[browser_toolbar_webconsole_errors_count.js]
[browser_spectrum.js]
[browser_csstransformpreview.js]

View File

@ -0,0 +1,139 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
// Tests that the spectrum color picker works correctly
const TEST_URI = "data:text/html;charset=utf-8,<div></div>";
const {CSSTransformPreviewer} = devtools.require("devtools/shared/widgets/CSSTransformPreviewer");
let doc, root;
function test() {
waitForExplicitFinish();
addTab(TEST_URI, () => {
doc = content.document;
root = doc.querySelector("div");
startTests();
});
}
function endTests() {
doc = root = null;
gBrowser.removeCurrentTab();
finish();
}
function startTests() {
testCreateAndDestroyShouldAppendAndRemoveElements();
}
function testCreateAndDestroyShouldAppendAndRemoveElements() {
ok(root, "We have the root node to append the preview to");
is(root.childElementCount, 0, "Root node is empty");
let p = new CSSTransformPreviewer(root);
p.preview("matrix(1, -0.2, 0, 1, 0, 0)");
ok(root.childElementCount > 0, "Preview has appended elements");
ok(root.querySelector("canvas"), "Canvas preview element is here");
p.destroy();
is(root.childElementCount, 0, "Destroying preview removed all nodes");
testCanvasDimensionIsConstrainedByMaxDim();
}
function testCanvasDimensionIsConstrainedByMaxDim() {
let p = new CSSTransformPreviewer(root);
p.MAX_DIM = 500;
p.preview("scale(1)", "center", 1000, 1000);
let canvas = root.querySelector("canvas");
is(canvas.width, 500, "Canvas width is correct");
is(canvas.height, 500, "Canvas height is correct");
p.destroy();
testCallingPreviewSeveralTimesReusesTheSameCanvas();
}
function testCallingPreviewSeveralTimesReusesTheSameCanvas() {
let p = new CSSTransformPreviewer(root);
p.preview("scale(1)", "center", 1000, 1000);
let canvas = root.querySelector("canvas");
p.preview("rotate(90deg)");
let canvases = root.querySelectorAll("canvas");
is(canvases.length, 1, "Still one canvas element");
is(canvases[0], canvas, "Still the same canvas element");
p.destroy();
testCanvasDimensionAreCorrect();
}
function testCanvasDimensionAreCorrect() {
// Only test a few simple transformations
let p = new CSSTransformPreviewer(root);
// Make sure we have a square
let w = 200, h = w;
p.MAX_DIM = w;
// We can't test the content of the canvas here, just that, given a max width
// the aspect ratio of the canvas seems correct.
// Translate a square by its width, should be a rectangle
p.preview("translateX(200px)", "center", w, h);
let canvas = root.querySelector("canvas");
is(canvas.width, w, "width is correct");
is(canvas.height, h/2, "height is half of the width");
// Rotate on the top right corner, should be a rectangle
p.preview("rotate(-90deg)", "top right", w, h);
is(canvas.width, w, "width is correct");
is(canvas.height, h/2, "height is half of the width");
// Rotate on the bottom left corner, should be a rectangle
p.preview("rotate(90deg)", "top right", w, h);
is(canvas.width, w/2, "width is half of the height");
is(canvas.height, h, "height is correct");
// Scale from center, should still be a square
p.preview("scale(2)", "center", w, h);
is(canvas.width, w, "width is correct");
is(canvas.height, h, "height is correct");
// Skew from center, 45deg, should be a rectangle
p.preview("skew(45deg)", "center", w, h);
is(canvas.width, w, "width is correct");
is(canvas.height, h/2, "height is half of the height");
p.destroy();
testPreviewingInvalidTransformReturnsFalse();
}
function testPreviewingInvalidTransformReturnsFalse() {
let p = new CSSTransformPreviewer(root);
ok(!p.preview("veryWow(muchPx) suchTransform(soDeg)"), "Returned false for invalid transform");
ok(!p.preview("rotae(3deg)"), "Returned false for invalid transform");
// Verify the canvas is empty by checking the image data
let canvas = root.querySelector("canvas"), ctx = canvas.getContext("2d");
let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
for (let i = 0, n = data.length; i < n; i += 4) {
// Let's not log 250*250*4 asserts! Instead, just log when it fails
let red = data[i];
let green = data[i + 1];
let blue = data[i + 2];
let alpha = data[i + 3];
if (red !== 0 || green !== 0 || blue !== 0 || alpha !== 0) {
ok(false, "Image data is not empty after an invalid transformed was previewed");
break;
}
}
is(p.preview("translateX(30px)"), true, "Returned true for a valid transform");
endTests();
}

View File

@ -0,0 +1,389 @@
/* 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/. */
"use strict";
/**
* The CSSTransformPreview module displays, using a <canvas> a rectangle, with
* a given width and height and its transformed version, given a css transform
* property and origin. It also displays arrows from/to each corner.
*
* It is useful to visualize how a css transform affected an element. It can
* help debug tricky transformations. It is used today in a tooltip, and this
* tooltip is shown when hovering over a css transform declaration in the rule
* and computed view panels.
*
* TODO: For now, it multiplies matrices itself to calculate the coordinates of
* the transformed box, but that should be removed as soon as we can get access
* to getQuads().
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
/**
* The TransformPreview needs an element to output a canvas tag.
*
* Usage example:
*
* let t = new CSSTransformPreviewer(myRootElement);
* t.preview("rotate(45deg)", "top left", 200, 400);
* t.preview("skew(19deg)", "center", 100, 500);
* t.preview("matrix(1, -0.2, 0, 1, 0, 0)");
* t.destroy();
*
* @param {nsIDOMElement} parentEl
* Where the canvas will go
*/
function CSSTransformPreviewer(parentEl) {
this.parentEl = parentEl;
this.doc = this.parentEl.ownerDocument;
this.canvas = null;
this.ctx = null;
}
module.exports.CSSTransformPreviewer = CSSTransformPreviewer;
CSSTransformPreviewer.prototype = {
/**
* The preview look-and-feel can be changed using these properties
*/
MAX_DIM: 250,
PAD: 5,
ORIGINAL_FILL: "#1F303F",
ORIGINAL_STROKE: "#B2D8FF",
TRANSFORMED_FILL: "rgba(200, 200, 200, .5)",
TRANSFORMED_STROKE: "#B2D8FF",
ARROW_STROKE: "#329AFF",
ORIGIN_STROKE: "#329AFF",
ARROW_TIP_HEIGHT: 10,
ARROW_TIP_WIDTH: 8,
CORNER_SIZE_RATIO: 6,
/**
* Destroy removes the canvas from the parentelement passed in the constructor
*/
destroy: function() {
if (this.canvas) {
this.parentEl.removeChild(this.canvas);
}
if (this._hiddenDiv) {
this.parentEl.removeChild(this._hiddenDiv);
}
this.parentEl = this.canvas = this.ctx = this.doc = null;
},
_createMarkup: function() {
this.canvas = this.doc.createElementNS(HTML_NS, "canvas");
this.canvas.setAttribute("id", "canvas");
this.canvas.setAttribute("width", this.MAX_DIM);
this.canvas.setAttribute("height", this.MAX_DIM);
this.canvas.style.position = "relative";
this.parentEl.appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");
},
_getComputed: function(name, value, width, height) {
if (!this._hiddenDiv) {
// Create a hidden element to apply the style to
this._hiddenDiv = this.doc.createElementNS(HTML_NS, "div");
this._hiddenDiv.style.visibility = "hidden";
this._hiddenDiv.style.position = "absolute";
this.parentEl.appendChild(this._hiddenDiv);
}
// Camelcase the name
name = name.replace(/-([a-z]{1})/g, (m, letter) => letter.toUpperCase());
// Apply width and height to make sure computation is made correctly
this._hiddenDiv.style.width = width + "px";
this._hiddenDiv.style.height = height + "px";
// Show the hidden div, apply the style, read the computed style, hide the
// hidden div again
this._hiddenDiv.style.display = "block";
this._hiddenDiv.style[name] = value;
let computed = this.doc.defaultView.getComputedStyle(this._hiddenDiv);
let computedValue = computed[name];
this._hiddenDiv.style.display = "none";
return computedValue;
},
_getMatrixFromTransformString: function(transformStr) {
let matrix = transformStr.substring(0, transformStr.length - 1).
substring(transformStr.indexOf("(") + 1).split(",");
matrix.forEach(function(value, index) {
matrix[index] = parseFloat(value, 10);
});
let transformMatrix = null;
if (matrix.length === 6) {
// 2d transform
transformMatrix = [
[matrix[0], matrix[2], matrix[4], 0],
[matrix[1], matrix[3], matrix[5], 0],
[0, 0, 1, 0],
[0, 0, 0, 1]
];
} else {
// 3d transform
transformMatrix = [
[matrix[0], matrix[4], matrix[8], matrix[12]],
[matrix[1], matrix[5], matrix[9], matrix[13]],
[matrix[2], matrix[6], matrix[10], matrix[14]],
[matrix[3], matrix[7], matrix[11], matrix[15]]
];
}
return transformMatrix;
},
_getOriginFromOriginString: function(originStr) {
let offsets = originStr.split(" ");
offsets.forEach(function(item, index) {
offsets[index] = parseInt(item, 10);
});
return offsets;
},
_multiply: function(m1, m2) {
let m = [];
for (let m1Line = 0; m1Line < m1.length; m1Line++) {
m[m1Line] = 0;
for (let m2Col = 0; m2Col < m2.length; m2Col++) {
m[m1Line] += m1[m1Line][m2Col] * m2[m2Col];
}
}
return [m[0], m[1]];
},
_getTransformedPoint: function(matrix, point, origin) {
let pointMatrix = [point[0] - origin[0], point[1] - origin[1], 1, 1];
return this._multiply(matrix, pointMatrix);
},
_getTransformedPoints: function(matrix, rect, origin) {
return rect.map(point => {
let tPoint = this._getTransformedPoint(matrix, [point[0], point[1]], origin);
return [tPoint[0] + origin[0], tPoint[1] + origin[1]];
});
},
/**
* For canvas to avoid anti-aliasing
*/
_round: x => Math.round(x) + .5,
_drawShape: function(points, fillStyle, strokeStyle) {
this.ctx.save();
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = strokeStyle;
this.ctx.fillStyle = fillStyle;
this.ctx.beginPath();
this.ctx.moveTo(this._round(points[0][0]), this._round(points[0][1]));
for (var i = 1; i < points.length; i++) {
this.ctx.lineTo(this._round(points[i][0]), this._round(points[i][1]));
}
this.ctx.lineTo(this._round(points[0][0]), this._round(points[0][1]));
this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
},
_drawArrow: function(x1, y1, x2, y2) {
// do not draw if the line is too small
if (Math.abs(x2-x1) < 20 && Math.abs(y2-y1) < 20) {
return;
}
this.ctx.save();
this.ctx.strokeStyle = this.ARROW_STROKE;
this.ctx.fillStyle = this.ARROW_STROKE;
this.ctx.lineWidth = 1;
this.ctx.beginPath();
this.ctx.moveTo(this._round(x1), this._round(y1));
this.ctx.lineTo(this._round(x2), this._round(y2));
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.translate(x2, y2);
let radians = Math.atan((y1 - y2) / (x1 - x2));
radians += ((x1 >= x2) ? -90 : 90) * Math.PI / 180;
this.ctx.rotate(radians);
this.ctx.moveTo(0, 0);
this.ctx.lineTo(this.ARROW_TIP_WIDTH / 2, this.ARROW_TIP_HEIGHT);
this.ctx.lineTo(-this.ARROW_TIP_WIDTH / 2, this.ARROW_TIP_HEIGHT);
this.ctx.closePath();
this.ctx.fill();
this.ctx.restore();
},
_drawOrigin: function(x, y) {
this.ctx.save();
this.ctx.strokeStyle = this.ORIGIN_STROKE;
this.ctx.fillStyle = this.ORIGIN_STROKE;
this.ctx.beginPath();
this.ctx.arc(x, y, 4, 0, 2 * Math.PI, false);
this.ctx.stroke();
this.ctx.fill();
this.ctx.restore();
},
/**
* Computes the largest width and height of all the given shapes and changes
* all of the shapes' points (by reference) so they fit into the configured
* MAX_DIM - 2*PAD area.
* @return {Object} A {w, h} giving the size the canvas should be
*/
_fitAllShapes: function(allShapes) {
let allXs = [], allYs = [];
for (let shape of allShapes) {
for (let point of shape) {
allXs.push(point[0]);
allYs.push(point[1]);
}
}
let minX = Math.min.apply(Math, allXs);
let maxX = Math.max.apply(Math, allXs);
let minY = Math.min.apply(Math, allYs);
let maxY = Math.max.apply(Math, allYs);
let spanX = maxX - minX;
let spanY = maxY - minY;
let isWide = spanX > spanY;
let cw = isWide ? this.MAX_DIM :
this.MAX_DIM * Math.min(spanX, spanY) / Math.max(spanX, spanY);
let ch = !isWide ? this.MAX_DIM :
this.MAX_DIM * Math.min(spanX, spanY) / Math.max(spanX, spanY);
let mapX = x => this.PAD + ((cw - 2 * this.PAD) / (maxX - minX)) * (x - minX);
let mapY = y => this.PAD + ((ch - 2 * this.PAD) / (maxY - minY)) * (y - minY);
for (let shape of allShapes) {
for (let point of shape) {
point[0] = mapX(point[0]);
point[1] = mapY(point[1]);
}
}
return {w: cw, h: ch};
},
_drawShapes: function(shape, corner, transformed, transformedCorner) {
this._drawOriginal(shape);
this._drawOriginalCorner(corner);
this._drawTransformed(transformed);
this._drawTransformedCorner(transformedCorner);
},
_drawOriginal: function(points) {
this._drawShape(points, this.ORIGINAL_FILL, this.ORIGINAL_STROKE);
},
_drawTransformed: function(points) {
this._drawShape(points, this.TRANSFORMED_FILL, this.TRANSFORMED_STROKE);
},
_drawOriginalCorner: function(points) {
this._drawShape(points, this.ORIGINAL_STROKE, this.ORIGINAL_STROKE);
},
_drawTransformedCorner: function(points) {
this._drawShape(points, this.TRANSFORMED_STROKE, this.TRANSFORMED_STROKE);
},
_drawArrows: function(shape, transformed) {
this._drawArrow(shape[0][0], shape[0][1], transformed[0][0], transformed[0][1]);
this._drawArrow(shape[1][0], shape[1][1], transformed[1][0], transformed[1][1]);
this._drawArrow(shape[2][0], shape[2][1], transformed[2][0], transformed[2][1]);
this._drawArrow(shape[3][0], shape[3][1], transformed[3][0], transformed[3][1]);
},
/**
* Draw a transform preview
*
* @param {String} transform
* The css transform value as a string, as typed by the user, as long
* as it can be computed by the browser
* @param {String} origin
* Same as above for the transform-origin value. Defaults to "center"
* @param {Number} width
* The width of the container. Defaults to 200
* @param {Number} height
* The height of the container. Defaults to 200
* @return {Boolean} Whether or not the preview could be created. Will return
* false for instance if the transform is invalid
*/
preview: function(transform, origin="center", width=200, height=200) {
// Create/clear the canvas
if (!this.canvas) {
this._createMarkup();
}
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Get computed versions of transform and origin
transform = this._getComputed("transform", transform, width, height);
if (transform && transform !== "none") {
origin = this._getComputed("transform-origin", origin, width, height);
// Get the matrix, origin and width height data for the previewed element
let originData = this._getOriginFromOriginString(origin);
let matrixData = this._getMatrixFromTransformString(transform);
// Compute the original box rect and transformed box rect
let shapePoints = [
[0, 0],
[width, 0],
[width, height],
[0, height]
];
let transformedPoints = this._getTransformedPoints(matrixData, shapePoints, originData);
// Do the same for the corner triangle shape
let cornerSize = Math.min(shapePoints[2][1] - shapePoints[1][1],
shapePoints[1][0] - shapePoints[0][0]) / this.CORNER_SIZE_RATIO;
let cornerPoints = [
[shapePoints[1][0], shapePoints[1][1]],
[shapePoints[1][0], shapePoints[1][1] + cornerSize],
[shapePoints[1][0] - cornerSize, shapePoints[1][1]]
];
let transformedCornerPoints = this._getTransformedPoints(matrixData, cornerPoints, originData);
// Resize points to fit everything in the canvas
let {w, h} = this._fitAllShapes([
shapePoints,
transformedPoints,
cornerPoints,
transformedCornerPoints,
[originData]
]);
this.canvas.setAttribute("width", w);
this.canvas.setAttribute("height", h);
this._drawShapes(shapePoints, cornerPoints, transformedPoints, transformedCornerPoints)
this._drawArrows(shapePoints, transformedPoints);
this._drawOrigin(originData[0], originData[1]);
return true;
} else {
return false;
}
}
};

View File

@ -12,6 +12,7 @@ const {Spectrum} = require("devtools/shared/widgets/Spectrum");
const EventEmitter = require("devtools/shared/event-emitter");
const {colorUtils} = require("devtools/css-color");
const Heritage = require("sdk/core/heritage");
const {CSSTransformPreviewer} = require("devtools/shared/widgets/CSSTransformPreviewer");
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@ -100,7 +101,6 @@ let PanelFactory = {
panel.setAttribute("hidden", true);
panel.setAttribute("ignorekeys", true);
// Prevent the click used to close the panel from being consumed
panel.setAttribute("consumeoutsideclicks", options.get("consumeOutsideClick"));
panel.setAttribute("noautofocus", options.get("noAutoFocus"));
panel.setAttribute("type", "arrow");
@ -229,6 +229,10 @@ Tooltip.prototype = {
return this.panel.state !== "closed" && this.panel.state !== "hiding";
},
setSize: function(width, height) {
this.panel.sizeTo(width, height);
},
/**
* Empty the tooltip's content
*/
@ -304,7 +308,8 @@ Tooltip.prototype = {
* The container for all target nodes
* @param {Function} targetNodeCb
* A function that accepts a node argument and returns true or false
* to signify if the tooltip should be shown on that node or not.
* (or a promise that resolves or rejects) to signify if the tooltip
* should be shown on that node or not.
* Additionally, the function receives a second argument which is the
* tooltip instance itself, to be used to add/modify the content of the
* tooltip if needed. If omitted, the tooltip will be shown everytime.
@ -312,7 +317,7 @@ Tooltip.prototype = {
* An optional delay that will be observed before showing the tooltip.
* Defaults to this.defaultShowDelay.
*/
startTogglingOnHover: function(baseNode, targetNodeCb, showDelay = this.defaultShowDelay) {
startTogglingOnHover: function(baseNode, targetNodeCb, showDelay=this.defaultShowDelay) {
if (this._basedNode) {
this.stopTogglingOnHover();
}
@ -357,7 +362,12 @@ Tooltip.prototype = {
},
_showOnHover: function(target) {
if (this._targetNodeCb(target, this)) {
let res = this._targetNodeCb(target, this);
if (res && res.then) {
res.then(() => {
this.show(target);
});
} else if (res) {
this.show(target);
}
},
@ -527,6 +537,8 @@ Tooltip.prototype = {
let w = options.naturalWidth || imgObj.naturalWidth;
let h = options.naturalHeight || imgObj.naturalHeight;
label.textContent = w + " x " + h;
this.setSize(vbox.width, vbox.height);
}
},
@ -583,6 +595,54 @@ Tooltip.prototype = {
// Put the iframe in the tooltip
this.content = iframe;
return def.promise;
},
/**
* Set the content of the tooltip to be the result of CSSTransformPreviewer.
* Meaning a canvas previewing a css transformation.
*
* @param {String} transform
* The CSS transform value (e.g. "rotate(45deg) translateX(50px)")
* @param {PageStyleActor} pageStyle
* An instance of the PageStyleActor that will be used to retrieve
* computed styles
* @param {NodeActor} node
* The NodeActor for the currently selected node
* @return A promise that resolves when the tooltip content is ready, or
* rejects if no transform is provided or is invalid
*/
setCssTransformContent: function(transform, pageStyle, node) {
let def = promise.defer();
if (transform) {
// Look into the computed styles to find the width and height and possibly
// the origin if it hadn't been provided
pageStyle.getComputed(node, {
filter: "user",
markMatched: false,
onlyMatched: false
}).then(styles => {
let origin = styles["transform-origin"].value;
let width = parseInt(styles["width"].value);
let height = parseInt(styles["height"].value);
let root = this.doc.createElementNS(XHTML_NS, "div");
let previewer = new CSSTransformPreviewer(root);
this.content = root;
if (!previewer.preview(transform, origin, width, height)) {
// If the preview didn't work, reject the promise
def.reject();
} else {
// Else, make sure the tooltip has the right size and resolve
this.setSize(previewer.canvas.width, previewer.canvas.height);
def.resolve();
}
});
} else {
def.reject();
}
return def.promise;
}
};

View File

@ -505,21 +505,27 @@ CssHtmlTree.prototype = {
*/
_buildTooltipContent: function(target)
{
// If the hovered element is not a property view and is not a background
// image, then don't show a tooltip
let isPropertyValue = target.classList.contains("property-value");
if (!isPropertyValue) {
return false;
}
let propName = target.parentNode.querySelector(".property-name");
let isBackgroundImage = propName.textContent === "background-image";
if (!isBackgroundImage) {
return false;
// Test for image url
if (target.classList.contains("theme-link")) {
let propValue = target.parentNode;
let propName = propValue.parentNode.querySelector(".property-name");
if (propName.textContent === "background-image") {
this.tooltip.setCssBackgroundImageContent(propValue.textContent);
return true;
}
}
// Fill some content
this.tooltip.setCssBackgroundImageContent(target.textContent);
return true;
// Test for css transform
if (target.classList.contains("property-value")) {
let def = promise.defer();
let propValue = target;
let propName = target.parentNode.querySelector(".property-name");
if (propName.textContent === "transform") {
this.tooltip.setCssTransformContent(propValue.textContent,
this.pageStyle, this.viewedElement).then(def.resolve);
return def.promise;
}
}
},
/**

View File

@ -1125,27 +1125,32 @@ CssRuleView.prototype = {
* prepare some content for the tooltip
*/
_buildTooltipContent: function(target) {
let isImageHref = target.classList.contains("theme-link") &&
target.parentNode.classList.contains("ruleview-propertyvalue");
let property = target.textProperty, def = promise.defer(), hasTooltip = false;
// If the inplace-editor is visible or if this is not a background image
// don't show the tooltip
if (!isImageHref) {
return false;
// Test for css transform
if (property && property.name === "transform") {
this.previewTooltip.setCssTransformContent(property.value, this.pageStyle,
this._viewedElement).then(def.resolve);
hasTooltip = true;
}
// Retrieve the TextProperty for the hovered element
let property = target.parentNode.textProperty;
let href = property.rule.domRule.href;
// Test for image
let isImageHref = target.classList.contains("theme-link") &&
target.parentNode.classList.contains("ruleview-propertyvalue");
if (isImageHref) {
property = target.parentNode.textProperty;
this.previewTooltip.setCssBackgroundImageContent(property.value,
property.rule.domRule.href);
def.resolve();
hasTooltip = true;
}
// Fill some content
this.previewTooltip.setCssBackgroundImageContent(property.value, href);
if (hasTooltip) {
this.colorPicker.revert();
this.colorPicker.hide();
}
// Hide the color picker tooltip if shown and revert changes
this.colorPicker.revert();
this.colorPicker.hide();
return true;
return def.promise;
},
/**
@ -1301,7 +1306,7 @@ CssRuleView.prototype = {
/**
* Update the highlighted element.
*
* @param {nsIDOMElement} aElement
* @param {NodeActor} aElement
* The node whose style rules we'll inspect.
*/
highlight: function CssRuleView_highlight(aElement)

View File

@ -53,4 +53,6 @@ support-files = browser_ruleview_pseudoelement.html
[browser_bug913014_matched_expand.js]
[browser_bug765105_background_image_tooltip.js]
[browser_bug889638_rule_view_color_picker.js]
[browser_bug726427_csstransform_tooltip.js]
[browser_bug940500_rule_view_pick_gradient_color.js]

View File

@ -0,0 +1,224 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
let contentDoc;
let inspector;
let ruleView;
let computedView;
const PAGE_CONTENT = [
'<style type="text/css">',
' #testElement {',
' width: 500px;',
' height: 300px;',
' background: red;',
' transform: skew(16deg);',
' }',
' .test-element {',
' transform-origin: top left;',
' transform: rotate(45deg);',
' }',
' div {',
' transform: scaleX(1.5);',
' transform-origin: bottom right;',
' }',
' [attr] {',
' }',
'</style>',
'<div id="testElement" class="test-element" attr="value">transformed element</div>'
].join("\n");
function test() {
waitForExplicitFinish();
gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function(evt) {
gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee, true);
contentDoc = content.document;
waitForFocus(createDocument, content);
}, true);
content.location = "data:text/html,rule view css transform tooltip test";
}
function createDocument() {
contentDoc.body.innerHTML = PAGE_CONTENT;
openRuleView((aInspector, aRuleView) => {
inspector = aInspector;
ruleView = aRuleView;
startTests();
});
}
function startTests() {
inspector.selection.setNode(contentDoc.querySelector("#testElement"));
inspector.once("inspector-updated", testTransformTooltipOnIDSelector);
}
function endTests() {
contentDoc = inspector = ruleView = computedView = null;
gBrowser.removeCurrentTab();
finish();
}
function testTransformTooltipOnIDSelector() {
info("Testing that a transform tooltip appears on the #ID rule");
let panel = ruleView.previewTooltip.panel;
ok(panel, "The XUL panel exists for the rule-view preview tooltips");
let {valueSpan} = getRuleViewProperty("#testElement", "transform");
assertTooltipShownOn(ruleView.previewTooltip, valueSpan, () => {
// The transform preview is canvas, so there's not much we can test, so for
// now, let's just be happy with the fact that the tooltips is shown!
ok(true, "Tooltip shown on the transform property of the #ID rule");
ruleView.previewTooltip.hide();
executeSoon(testTransformTooltipOnClassSelector);
});
}
function testTransformTooltipOnClassSelector() {
info("Testing that a transform tooltip appears on the .class rule");
let {valueSpan} = getRuleViewProperty(".test-element", "transform");
assertTooltipShownOn(ruleView.previewTooltip, valueSpan, () => {
// The transform preview is canvas, so there's not much we can test, so for
// now, let's just be happy with the fact that the tooltips is shown!
ok(true, "Tooltip shown on the transform property of the .class rule");
ruleView.previewTooltip.hide();
executeSoon(testTransformTooltipOnTagSelector);
});
}
function testTransformTooltipOnTagSelector() {
info("Testing that a transform tooltip appears on the tag rule");
let {valueSpan} = getRuleViewProperty("div", "transform");
assertTooltipShownOn(ruleView.previewTooltip, valueSpan, () => {
// The transform preview is canvas, so there's not much we can test, so for
// now, let's just be happy with the fact that the tooltips is shown!
ok(true, "Tooltip shown on the transform property of the tag rule");
ruleView.previewTooltip.hide();
executeSoon(testTransformTooltipNotShownOnInvalidTransform);
});
}
function testTransformTooltipNotShownOnInvalidTransform() {
info("Testing that a transform tooltip does not appear for invalid values");
// This is the list of keys to type in the inplace-editor
let keyData = "transform".split("");
keyData.push("VK_TAB");
keyData = keyData.concat("muchTransform(suchAngle)".split(""));
keyData.push("VK_RETURN");
// Focus the inplace editor
let rule = getRule("[attr]");
let brace = rule.querySelector(".ruleview-ruleclose");
waitForEditorFocus(brace.parentNode, editor => {
// Enter an invalid value
typeKeySequence(keyData, () => {
let {valueSpan} = getRuleViewProperty("[attr]", "transform");
assertTooltipNotShownOn(ruleView.previewTooltip, valueSpan, () => {
executeSoon(testTransformTooltipOnComputedView);
});
});
});
brace.click();
}
function testTransformTooltipOnComputedView() {
info("Testing that a transform tooltip appears in the computed view too");
inspector.sidebar.select("computedview");
computedView = inspector.sidebar.getWindowForTab("computedview").computedview.view;
let doc = computedView.styleDocument;
let panel = computedView.tooltip.panel;
let {valueSpan} = getComputedViewProperty("transform");
assertTooltipShownOn(computedView.tooltip, valueSpan, () => {
// The transform preview is canvas, so there's not much we can test, so for
// now, let's just be happy with the fact that the tooltips is shown!
ok(true, "Tooltip shown on the computed transform property");
computedView.tooltip.hide();
executeSoon(endTests);
});
}
function assertTooltipShownOn(tooltip, element, cb) {
// If there is indeed a show-on-hover on element, the xul panel will be shown
tooltip.panel.addEventListener("popupshown", function shown() {
tooltip.panel.removeEventListener("popupshown", shown, true);
cb();
}, true);
tooltip._showOnHover(element);
}
function assertTooltipNotShownOn(tooltip, element, cb) {
// The only way to make sure the tooltip is not shown is try and show it, wait
// for a given amount of time, and then check if it's shown or not
tooltip._showOnHover(element);
setTimeout(() => {
ok(!tooltip.isShown(), "The tooltip did not appear on hover of the element");
cb();
}, tooltip.defaultShowDelay + 100);
}
function typeKeySequence(sequence, cb, index=0) {
if (index === sequence.length) {
return cb();
}
EventUtils.synthesizeKey(sequence[index], {}, ruleView.doc.defaultView);
executeSoon(() => {
typeKeySequence(sequence, cb, index + 1);
});
}
function getRule(selectorText) {
let rule;
[].forEach.call(ruleView.doc.querySelectorAll(".ruleview-rule"), aRule => {
let selector = aRule.querySelector(".ruleview-selector-matched");
if (selector && selector.textContent === selectorText) {
rule = aRule;
}
});
return rule;
}
function getRuleViewProperty(selectorText, propertyName) {
let prop;
let rule = getRule(selectorText);
if (rule) {
// Look for the propertyName in that rule element
[].forEach.call(rule.querySelectorAll(".ruleview-property"), property => {
let nameSpan = property.querySelector(".ruleview-propertyname");
let valueSpan = property.querySelector(".ruleview-propertyvalue");
if (nameSpan.textContent === propertyName) {
prop = {nameSpan: nameSpan, valueSpan: valueSpan};
}
});
}
return prop;
}
function getComputedViewProperty(name) {
let prop;
[].forEach.call(computedView.styleDocument.querySelectorAll(".property-view"), property => {
let nameSpan = property.querySelector(".property-name");
let valueSpan = property.querySelector(".property-value");
if (nameSpan.textContent === name) {
prop = {nameSpan: nameSpan, valueSpan: valueSpan};
}
});
return prop;
}

View File

@ -142,8 +142,9 @@ function testComputedView() {
let panel = computedView.tooltip.panel;
let {valueSpan} = getComputedViewProperty("background-image");
let uriSpan = valueSpan.querySelector(".theme-link");
assertTooltipShownOn(computedView.tooltip, valueSpan, () => {
assertTooltipShownOn(computedView.tooltip, uriSpan, () => {
let images = panel.getElementsByTagName("image");
is(images.length, 1, "Tooltip contains an image");
ok(images[0].src === "chrome://global/skin/icons/warning-64.png");

View File

@ -31,9 +31,9 @@ add-ons-button.label = Add-ons
# LOCALIZATION NOTE(add-ons-button.tooltiptext): %S is the keyboard shortcut
add-ons-button.tooltiptext = Add-ons Manager (%S)
switch-to-metro-button.label = Windows 8 Touch
# LOCALIZATION NOTE(switch-to-metro-button.tooltiptext): %S is the brand short name
switch-to-metro-button.tooltiptext = Relaunch in %S for Windows 8 Touch
switch-to-metro-button2.label = Windows 8 Touch
# LOCALIZATION NOTE(switch-to-metro-button2.tooltiptext): %S is the brand short name
switch-to-metro-button2.tooltiptext = Relaunch in %S for Windows 8 Touch
preferences-button.label = Preferences
# LOCALIZATION NOTE (preferences-button.tooltiptext): Use the unicode ellipsis char,

View File

@ -208,10 +208,6 @@ var BrowserUI = {
DebuggerServer.init();
DebuggerServer.addBrowserActors();
DebuggerServer.addActors('chrome://browser/content/dbg-metro-actors.js');
// Add these globally for chrome, until per-window chrome debugging is supported (bug 928018):
DebuggerServer.addGlobalActor(DebuggerServer.tabActorFactories.inspectorActor, "inspectorActor");
DebuggerServer.addGlobalActor(DebuggerServer.tabActorFactories.styleEditorActor, "styleEditorActor");
}
DebuggerServer.openListener(port);
},

View File

@ -276,7 +276,7 @@ Desktop browser's sync prefs.
</hbox>
<hbox id="toolbar-context-autocomplete" pack="end">
<toolbarbutton id="close-button" class="appbar-secondary"
<toolbarbutton id="close-button" class="appbar-primary"
oncommand="Appbar.onAutocompleteCloseButton()"/>
</hbox>
</stack>
@ -362,19 +362,22 @@ Desktop browser's sync prefs.
<!-- Context button bar -->
<appbar id="contextappbar">
<toolbar id="contextualactions-tray" labelled="true" flex="1">
<toolbarbutton id="pin-selected-button" class="appbar-secondary"
<toolbarbutton id="pin-selected-button" class="appbar-primary"
label-uses-set-name="true" hidden="true" fade="true"
oncommand="Appbar.dispatchContextualAction('pin')"/>
<toolbarbutton id="unpin-selected-button" class="appbar-secondary"
<toolbarbutton id="unpin-selected-button" class="appbar-primary"
label-uses-set-name="true" hidden="true" fade="true"
oncommand="Appbar.dispatchContextualAction('unpin')"/>
<toolbarbutton id="delete-selected-button" class="appbar-secondary"
<toolbarbutton id="hide-selected-button" class="appbar-primary"
label-uses-set-name="true" hidden="true" fade="true"
oncommand="Appbar.dispatchContextualAction('unpin')"/>
<toolbarbutton id="delete-selected-button" class="appbar-primary"
hidden="true" fade="true"
oncommand="Appbar.dispatchContextualAction('delete')"/>
<toolbarbutton id="restore-selected-button" class="appbar-secondary"
<toolbarbutton id="restore-selected-button" class="appbar-primary"
hidden="true" fade="true"
oncommand="Appbar.dispatchContextualAction('restore')"/>
<toolbarbutton id="clear-selected-button" class="appbar-secondary"
<toolbarbutton id="clear-selected-button" class="appbar-primary"
hidden="true" fade="true"
oncommand="Appbar.dispatchContextualAction('clear')"/>
</toolbar>

View File

@ -170,7 +170,7 @@ BookmarksView.prototype = Util.extend(Object.create(View.prototype), {
_setContextActions: function bv__setContextActions(aItem) {
let itemId = this._getBookmarkIdForItem(aItem);
aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(itemId) ? "unpin" : "pin"));
aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(itemId) ? "hide" : "pin"));
if (aItem.refresh) aItem.refresh();
},

View File

@ -107,7 +107,7 @@ HistoryView.prototype = Util.extend(Object.create(View.prototype), {
_setContextActions: function bv__setContextActions(aItem) {
let uri = aItem.getAttribute("value");
aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(uri) ? "unpin" : "pin"));
aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(uri) ? "hide" : "pin"));
if ("refresh" in aItem) aItem.refresh();
},

View File

@ -32,13 +32,13 @@ function tearDown() {
}
gTests.push({
desc: "Test bookmarks StartUI unpin",
desc: "Test bookmarks StartUI hide",
setUp: setup,
tearDown: tearDown,
run: function testBookmarksStartUnpin() {
let unpinButton = document.getElementById("unpin-selected-button");
run: function testBookmarksStartHide() {
let hideButton = document.getElementById("hide-selected-button");
// --------- unpin item 2
// --------- hide item 2
let item = gStartView._getItemForBookmarkId(2);
@ -46,19 +46,19 @@ gTests.push({
sendContextMenuClickToElement(window, item, 10, 10);
yield promise;
ok(!unpinButton.hidden, "Unpin button is visible.");
ok(!hideButton.hidden, "Hide button is visible.");
let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
unpinButton.click();
hideButton.click();
yield promise;
item = gStartView._getItemForBookmarkId(2);
ok(!item, "Item not in grid");
ok(!gStartView._pinHelper.isPinned(2), "Item unpinned");
ok(!gStartView._pinHelper.isPinned(2), "Item hidden");
ok(gStartView._set.itemCount === gStartView._limit, "Grid repopulated");
// --------- unpin multiple items
// --------- hide multiple items
let item1 = gStartView._getItemForBookmarkId(0);
let item2 = gStartView._getItemForBookmarkId(5);
@ -70,10 +70,10 @@ gTests.push({
sendContextMenuClickToElement(window, item3, 10, 10);
yield promise;
ok(!unpinButton.hidden, "Unpin button is visible.");
ok(!hideButton.hidden, "Hide button is visible.");
let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
EventUtils.synthesizeMouse(unpinButton, 10, 10, {}, window);
EventUtils.synthesizeMouse(hideButton, 10, 10, {}, window);
yield promise;
item1 = gStartView._getItemForBookmarkId(0);
@ -81,7 +81,7 @@ gTests.push({
item3 = gStartView._getItemForBookmarkId(12);
ok(!item1 && !item2 && !item3, "Items are not in grid");
ok(!gStartView._pinHelper.isPinned(0) && !gStartView._pinHelper.isPinned(5) && !gStartView._pinHelper.isPinned(12) , "Items unpinned");
ok(!gStartView._pinHelper.isPinned(0) && !gStartView._pinHelper.isPinned(5) && !gStartView._pinHelper.isPinned(12) , "Items hidden");
ok(gStartView._set.itemCount === gStartView._limit - 1, "Grid repopulated");
}
});

View File

@ -43,13 +43,13 @@ function uriFromIndex(aIndex) {
}
gTests.push({
desc: "Test history StartUI unpin",
desc: "Test history StartUI hide",
setUp: setup,
tearDown: tearDown,
run: function testHistoryStartUnpin() {
let unpinButton = document.getElementById("unpin-selected-button");
run: function testHistoryStartHide() {
let hideButton = document.getElementById("hide-selected-button");
// --------- unpin item 2
// --------- hide item 2
let item = gStartView._set.getItemsByUrl(uriFromIndex(2))[0];
@ -57,19 +57,19 @@ gTests.push({
sendContextMenuClickToElement(window, item, 10, 10);
yield promise;
ok(!unpinButton.hidden, "Unpin button is visible.");
ok(!hideButton.hidden, "Hide button is visible.");
let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
unpinButton.click();
hideButton.click();
yield promise;
item = gStartView._set.getItemsByUrl(uriFromIndex(2))[0];
ok(!item, "Item not in grid");
ok(!gStartView._pinHelper.isPinned(uriFromIndex(2)), "Item unpinned");
ok(!gStartView._pinHelper.isPinned(uriFromIndex(2)), "Item hidden");
is(gStartView._set.itemCount, gStartView._limit, "Grid repopulated");
// --------- unpin multiple items
// --------- hide multiple items
let item1 = gStartView._set.getItemsByUrl(uriFromIndex(0))[0];
let item2 = gStartView._set.getItemsByUrl(uriFromIndex(5))[0];
@ -82,10 +82,10 @@ gTests.push({
sendContextMenuClickToElement(window, item3, 10, 10);
yield promise;
ok(!unpinButton.hidden, "Unpin button is visible.");
ok(!hideButton.hidden, "Hide button is visible.");
let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
EventUtils.synthesizeMouse(unpinButton, 10, 10, {}, window);
EventUtils.synthesizeMouse(hideButton, 10, 10, {}, window);
yield promise;
item1 = gStartView._set.getItemsByUrl(uriFromIndex(0))[0];
@ -93,7 +93,7 @@ gTests.push({
item3 = gStartView._set.getItemsByUrl(uriFromIndex(12))[0];
ok(!item1 && !item2 && !item3, "Items are not in grid");
ok(!gStartView._pinHelper.isPinned(uriFromIndex(0)) && !gStartView._pinHelper.isPinned(uriFromIndex(5)) && !gStartView._pinHelper.isPinned(uriFromIndex(12)) , "Items unpinned");
ok(!gStartView._pinHelper.isPinned(uriFromIndex(0)) && !gStartView._pinHelper.isPinned(uriFromIndex(5)) && !gStartView._pinHelper.isPinned(uriFromIndex(12)) , "Items hidden");
ok(gStartView._set.itemCount === gStartView._limit - 1, "Grid repopulated");
}
});

View File

@ -22,8 +22,8 @@ contextAppbar2.pin.recentHistory=Pin to Recent History
contextAppbar2.pin.downloads=Pin to Downloads
contextAppbar2.unpin.topSites=Unpin from Top Sites
contextAppbar2.unpin.bookmarks=Unpin from Bookmarks
contextAppbar2.unpin.recentHistory=Unpin from Recent History
contextAppbar2.hide.bookmarks=Hide Bookmark
contextAppbar2.hide.recentHistory=Hide
contextAppbar2.unpin.downloads=Unpin from Downloads
# LOCALIZATION NOTE (contextAppbar2.delete): Deletes selected pages.

View File

@ -950,50 +950,79 @@ documenttab[selected] .documenttab-selection {
}
#pin-selected-button {
-moz-image-region: rect(0px, 240px, 40px, 200px) !important;
}
#pin-selected-button:hover {
-moz-image-region: rect(40px, 240px, 80px, 200px) !important;
}
#pin-selected-button:active {
-moz-image-region: rect(80px, 240px, 120px, 200px) !important;
list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
}
#unpin-selected-button {
-moz-image-region: rect(0px, 280px, 40px, 240px) !important;
list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
}
#unpin-selected-button:hover {
-moz-image-region: rect(40px, 280px, 80px, 240px) !important;
}
#unpin-selected-button:active {
-moz-image-region: rect(80px, 280px, 120px, 240px) !important;
#hide-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
}
#delete-selected-button {
-moz-image-region: rect(0px, 480px, 40px, 440px) !important;
}
#delete-selected-button:hover {
-moz-image-region: rect(40px, 480px, 80px, 440px) !important;
}
#delete-selected-button:active {
-moz-image-region: rect(80px, 480px, 120px, 440px) !important;
list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
}
#clear-selected-button {
-moz-image-region: rect(0px, 520px, 40px, 480px) !important;
}
#clear-selected-button:hover {
-moz-image-region: rect(40px, 520px, 80px, 480px) !important;
}
#clear-selected-button:active {
-moz-image-region: rect(80px, 520px, 120px, 480px) !important;
list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
}
#restore-selected-button {
-moz-image-region: rect(0px, 560px, 40px, 520px) !important;
list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
}
#restore-selected-button:hover {
-moz-image-region: rect(40px, 560px, 80px, 520px) !important;
@media (min-resolution: @min_res_140pc@) {
#pin-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
}
#unpin-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
}
#hide-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
}
#delete-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
}
#clear-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
}
#restore-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
}
}
#restore-selected-button:active {
-moz-image-region: rect(80px, 560px, 120px, 520px) !important;
@media (min-resolution: @min_res_180pc@) {
#pin-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
}
#unpin-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
}
#hide-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
}
#delete-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
}
#clear-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
}
#restore-selected-button {
list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
}
}
/* Download notifications ======================================================= */

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -27,6 +27,24 @@ chrome.jar:
skin/images/navbar-back.png (images/navbar-back.png)
skin/images/navbar-back@1.4x.png (images/navbar-back@1.4x.png)
skin/images/navbar-back@1.8x.png (images/navbar-back@1.8x.png)
skin/images/navbar-contextual-clear.png (images/navbar-contextual-clear.png)
skin/images/navbar-contextual-clear@1.4x.png (images/navbar-contextual-clear@1.4x.png)
skin/images/navbar-contextual-clear@1.8x.png (images/navbar-contextual-clear@1.8x.png)
skin/images/navbar-contextual-delete.png (images/navbar-contextual-delete.png)
skin/images/navbar-contextual-delete@1.4x.png (images/navbar-contextual-delete@1.4x.png)
skin/images/navbar-contextual-delete@1.8x.png (images/navbar-contextual-delete@1.8x.png)
skin/images/navbar-contextual-hide.png (images/navbar-contextual-hide.png)
skin/images/navbar-contextual-hide@1.4x.png (images/navbar-contextual-hide@1.4x.png)
skin/images/navbar-contextual-hide@1.8x.png (images/navbar-contextual-hide@1.8x.png)
skin/images/navbar-contextual-pin.png (images/navbar-contextual-pin.png)
skin/images/navbar-contextual-pin@1.4x.png (images/navbar-contextual-pin@1.4x.png)
skin/images/navbar-contextual-pin@1.8x.png (images/navbar-contextual-pin@1.8x.png)
skin/images/navbar-contextual-restore.png (images/navbar-contextual-restore.png)
skin/images/navbar-contextual-restore@1.4x.png (images/navbar-contextual-restore@1.4x.png)
skin/images/navbar-contextual-restore@1.8x.png (images/navbar-contextual-restore@1.8x.png)
skin/images/navbar-contextual-unpin.png (images/navbar-contextual-unpin.png)
skin/images/navbar-contextual-unpin@1.4x.png (images/navbar-contextual-unpin@1.4x.png)
skin/images/navbar-contextual-unpin@1.8x.png (images/navbar-contextual-unpin@1.8x.png)
skin/images/navbar-download.png (images/navbar-download.png)
skin/images/navbar-download@1.4x.png (images/navbar-download@1.4x.png)
skin/images/navbar-download@1.8x.png (images/navbar-download@1.8x.png)

View File

@ -636,6 +636,10 @@ tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
.meta {
background-color: @panel_light_color@;
background-image: url("chrome://browser/skin/images/firefox-watermark.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
/* needs to observe the viewstate */

View File

@ -54,7 +54,7 @@
* is hidden by videocontrols.xml, and that alters the position of the
* play button. This workaround moves it back to center.
*/
.controlBar.audio .playButton {
.controlBar.audio-only .playButton {
transform: translateX(28px);
}

View File

@ -510,6 +510,11 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
transition: @forwardTransitionLength@ ease-out;
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
transform: scaleX(-1);
}
/* tabview button */
#tabview-button,

View File

@ -389,14 +389,25 @@
}
#resume {
list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
-moz-image-region: rect(0px,16px,16px,0px);
transition: background 0.15s ease-in-out;
}
#resume[checked] {
background: none;
list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
-moz-image-region: rect(0px,32px,16px,16px);
}
#resume ~ toolbarbutton {
transition: opacity 0.15s ease-in-out;
}
#resume:not([checked]) ~ toolbarbutton {
opacity: 0.5;
}
#step-over {
list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
}

View File

@ -1,288 +0,0 @@
/* 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/. */
#toolbox-controls {
margin: 0 4px;
}
#toolbox-controls > toolbarbutton,
#toolbox-dock-buttons > toolbarbutton {
-moz-appearance: none;
margin: 0 4px;
min-width: 16px;
width: 16px;
}
#toolbox-dock-bottom {
list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
}
#toolbox-dock-side {
list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
}
#toolbox-dock-window {
list-style-image: url("chrome://browser/skin/devtools/undock.png");
}
#toolbox-dock-window,
#toolbox-dock-bottom,
#toolbox-dock-side {
opacity: 0.6;
}
#toolbox-dock-window:hover,
#toolbox-dock-bottom:hover,
#toolbox-dock-side:hover {
opacity: 1;
}
#toolbox-controls-separator {
width: 3px;
background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: 0, 1px, 2px;
-moz-margin-start: 8px;
}
/* Command buttons */
.command-button {
-moz-appearance: none;
padding: 0 8px;
margin: 0;
width: 16px;
}
.command-button:hover {
background-color: hsla(206,37%,4%,.2);
}
.command-button:hover:active, .command-button[checked=true]:not(:hover) {
background-color: hsla(206,37%,4%,.4);
}
#command-button-paintflashing {
list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-paintflashing:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-paintflashing:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-paintflashing[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-responsive {
list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-responsive:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-responsive:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-responsive[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-tilt {
list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-tilt:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-tilt:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-tilt[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-scratchpad {
list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-scratchpad:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-scratchpad:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
/* Tabs */
.devtools-tabbar {
-moz-appearance: none;
background-image: url("background-noise-toolbar.png"),
linear-gradient(#303840, #2d3640);
border-color: #060a0d;
border-style: solid;
border-width: 1px 0;
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
0 -1px 0 hsla(206,37%,4%,.1) inset;
min-height: 32px;
padding: 0;
}
#toolbox-tabs {
margin: 0;
}
.devtools-tab {
-moz-appearance: none;
min-width: 32px;
min-height: 32px;
max-width: 127px;
color: #b6babf;
margin: 0;
padding: 0;
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: left, right;
border-right: 1px solid hsla(206,37%,4%,.45);
-moz-box-align: center;
}
.devtools-tab > image {
border: none;
-moz-margin-end: 0;
-moz-margin-start: 4px;
opacity: 0.6;
max-height: 16px;
width: 16px; /* Prevents collapse during theme switching */
}
#toolbox-tab-options > image {
margin: 0 8px;
}
.devtools-tab > label {
white-space: nowrap;
}
.devtools-tab:hover > image {
opacity: 0.8;
}
.devtools-tab:active > image,
.devtools-tab[selected=true] > label {
opacity: 1;
}
.devtools-tab:hover {
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2));
background-size: 1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
repeat-x;
background-position: left, right;
color: #ced3d9;
}
.devtools-tab:hover:active {
background-color: hsla(206,37%,4%,.2);
color: #f5f7fa;
}
.devtools-tab[selected=true] {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
}
.devtools-tab:not([selected=true]).highlighted {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
}
.devtools-tab:not(.highlighted) > .highlighted-icon,
.devtools-tab[selected=true] > .highlighted-icon,
.devtools-tab:not([selected=true]).highlighted > .default-icon {
visibility: collapse;
}
.options-vertical-pane {
margin: 5px;
width: calc(50% - 30px);
min-width: 400px;
-moz-padding-start: 5px;
}
.options-vertical-pane > label {
padding: 2px 0;
font-size: 1.4rem;
}
.options-groupbox {
-moz-margin-start: 15px;
padding: 2px;
}
.options-groupbox > * {
padding: 2px;
}
.options-citation-label {
font-size: 1rem !important;
/* !important is required otherwise font-size will still be 1.4rem */
font-style: italic;
padding: 4px 0 0; /* To align it with the checkbox */
}
.options-citation-label + label {
padding: 3px 0 0 !important; /* To align it with the checkbox */
font-style: italic;
}
.hidden-labels-box:not(.visible) > label,
.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
display: none;
}

View File

@ -146,9 +146,9 @@ browser.jar:
skin/classic/browser/tabview/stack-expander.png (tabview/stack-expander.png)
skin/classic/browser/tabview/tabview.png (tabview/tabview.png)
skin/classic/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/browser/devtools/common.css (devtools/common.css)
skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
* skin/classic/browser/devtools/common.css (../shared/devtools/common.css)
* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
* skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
@ -229,7 +229,6 @@ browser.jar:
skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
skin/classic/browser/devtools/inspector.css (devtools/inspector.css)
skin/classic/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png)
skin/classic/browser/devtools/toolbox.css (devtools/toolbox.css)
skin/classic/browser/devtools/tool-options.png (devtools/tool-options.png)
skin/classic/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png)
skin/classic/browser/devtools/tool-debugger.png (devtools/tool-debugger.png)

View File

@ -1432,8 +1432,8 @@ toolbar .toolbarbutton-1:not([type="menu-button"]),
margin: 0;
}
#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
padding-top: 2px;
#zoom-controls[cui-areatype="toolbar"]:not(.overflowedItem) > #zoom-reset-button > .toolbarbutton-text {
padding-top: 8px;
margin: 2px;
}

View File

@ -1,354 +0,0 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
%include ../shared.inc
/* Font for code */
:root {
font: message-box;
}
.devtools-monospace {
font-family: Menlo, monospace;
}
/* Toolbar and Toolbar items */
.devtools-toolbar {
-moz-appearance: none;
padding: 4px 3px;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.devtools-menulist,
.devtools-toolbarbutton {
-moz-appearance: none;
-moz-box-align: center;
min-width: 78px;
min-height: 22px;
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(210,8%,5%,.45);
border-radius: @toolbarbuttonCornerRadius@;
background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
color: inherit;
}
.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal;
}
.devtools-menulist {
margin: 0 2px;
}
.devtools-menulist:-moz-focusring,
.devtools-toolbarbutton:-moz-focusring {
outline: 1px dotted hsla(210,30%,85%,0.7);
outline-offset: -4px;
}
.devtools-toolbarbutton > .toolbarbutton-text {
margin: 1px 6px;
}
.devtools-toolbarbutton:not([label]) {
min-width: 32px;
}
.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
display: none;
}
.devtools-toolbarbutton:not([checked=true]):hover:active {
border-color: hsla(210,8%,5%,.6);
background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.devtools-menulist[open=true],
.devtools-toolbarbutton[open=true],
.devtools-toolbarbutton[checked=true] {
border-color: hsla(210,8%,5%,.6);
background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[checked=true] {
color: hsl(208,100%,60%) !important;
}
.devtools-toolbarbutton[checked=true]:hover:active {
background-color: hsla(210,8%,5%,.2);
}
.devtools-option-toolbarbutton {
-moz-appearance: none;
list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-moz-image-region: rect(0px 16px 16px 0px);
background: none;
border: none;
}
.devtools-option-toolbarbutton[open=true] {
-moz-image-region: rect(0px 32px 16px 16px);
}
.devtools-menulist > .menulist-label-box {
text-align: center;
}
.devtools-menulist > .menulist-dropmarker {
-moz-appearance: none;
background-color: transparent;
display: -moz-box;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
border-width: 0;
min-width: 18px;
}
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-moz-appearance: none;
border-width: 0;
-moz-border-end: 1px solid hsla(210,8%,5%,.45);
box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
padding: 0 1px;
}
.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[type=menu-button] {
padding: 0 1px;
-moz-box-align: stretch;
}
.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none !important;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
border: 0;
}
/* Text input */
.devtools-textinput,
.devtools-searchinput {
-moz-appearance: none;
margin: 0 3px;
min-height: 22px;
background-color: transparent;
border: 1px solid hsla(210,8%,5%,.6);
border-radius: 20px;
background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
padding: 3px 8px;
box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
0 0 0 1px hsla(210,16%,76%,.1) inset,
0 1px 0 hsla(210,16%,76%,.15);
color: inherit;
}
.devtools-searchinput {
background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
background-repeat: no-repeat;
background-position: 4px center, top left, top left;
padding-top: 0;
padding-bottom: 0;
-moz-padding-start: 18px;
-moz-padding-end: 12px;
font-size: inherit;
}
.devtools-searchinput:-moz-locale-dir(rtl) {
background-position: calc(100% - 4px) center, top left, top left;
}
.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
display: none;
}
.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
opacity: 1.0;
color: hsl(208,10%,66%);
}
.devtools-no-search-result {
box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;
background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75));
}
/* Close button */
.devtools-closebutton {
list-style-image: url("chrome://browser/skin/devtools/close.png");
-moz-appearance: none;
border: none;
margin: 0 4px;
min-width: 16px;
width: 16px;
opacity: 0.6;
}
.devtools-closebutton > .toolbarbutton-text {
display: none;
}
.devtools-closebutton:hover {
opacity: 0.8;
}
.devtools-closebutton:active {
opacity: 1;
}
/* Splitters */
.devtools-horizontal-splitter {
-moz-appearance: none;
background-image: none;
border-top: 1px solid black;
border-bottom-width: 0;
min-height: 3px;
height: 3px;
margin-bottom: -3px;
position: relative;
}
.devtools-side-splitter {
-moz-appearance: none;
background-image: none;
border: 0;
-moz-border-start: 1px solid black;
min-width: 0;
width: 3px;
-moz-margin-end: -3px;
position: relative;
cursor: e-resize;
}
/* In-tools sidebar */
.devtools-toolbox-side-iframe {
min-width: 465px;
}
.devtools-sidebar-tabs {
-moz-appearance: none;
margin: 0;
}
.devtools-sidebar-tabs > tabpanels {
padding: 0;
}
.devtools-sidebar-tabs > tabs {
-moz-appearance: none;
font: inherit;
position: static;
color: #b6babf;
margin-bottom: 0;
padding: 0;
background-color: #343c45;
border-width: 0 0 1px 0;
border-color: hsla(210,8%,5%,.6);
border-style: solid;
overflow: hidden;
}
.devtools-sidebar-tabs > tabs > .tabs-right,
.devtools-sidebar-tabs > tabs > .tabs-left {
display: none;
}
.devtools-sidebar-tabs > tabs > tab {
-moz-appearance: none;
/* We want to match the height of a toolbar with a toolbarbutton
* First, we need to replicated the padding of toolbar (4px),
* then we need to take the border of the buttons into account (1px).
*/
padding: 5px 3px !important;
-moz-padding-start: 6px;
padding: 0;
min-width: 78px;
/* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px.
* -1px because the parent element (<tabs>) comes with a 1px bottom border.
*/
min-height: 32px;
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
text-align: center;
color: inherit;
-moz-box-flex: 1;
border-width: 0;
position: static;
-moz-margin-start: -1px;
}
.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
position: static;
}
.devtools-sidebar-tabs > tabs > tab:first-of-type {
-moz-margin-start: -3px;
}
.devtools-sidebar-tabs > tabs > tab {
background-size: calc(100% - 2px) 100%, 1px 100%;
background-repeat: no-repeat;
background-position: 1px, 0;
}
.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
background-position: calc(100% - 1px), 100%;
}
.devtools-sidebar-tabs > tabs > tab:last-of-type {
-moz-border-end-width: 0;
}
%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
.devtools-sidebar-tabs > tabs > tab {
background-image: linear-gradient(transparent, transparent), @smallSeparator@;
}
.devtools-sidebar-tabs > tabs > tab:hover {
background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
}
.devtools-sidebar-tabs > tabs > tab:hover:active {
background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
background-image: linear-gradient(transparent, transparent), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] {
color: #f5f7fa;
background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
background-image: linear-gradient(#274f64, #274f64), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@;
}
%include ../../shared/devtools/common.inc.css

View File

@ -391,14 +391,25 @@
}
#resume {
list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
-moz-image-region: rect(0px,16px,16px,0px);
transition: background 0.15s ease-in-out;
}
#resume[checked] {
background: none;
list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
-moz-image-region: rect(0px,32px,16px,16px);
}
#resume ~ toolbarbutton {
transition: opacity 0.15s ease-in-out;
}
#resume:not([checked]) ~ toolbarbutton {
opacity: 0.5;
}
#step-over {
list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
}

View File

@ -1,274 +0,0 @@
/* 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/. */
#toolbox-controls {
margin: 0 4px;
}
#toolbox-controls > toolbarbutton,
#toolbox-dock-buttons > toolbarbutton {
margin: 0 4px;
min-width: 16px;
width: 16px;
}
#toolbox-dock-bottom {
list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
}
#toolbox-dock-side {
list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
}
#toolbox-dock-window {
list-style-image: url("chrome://browser/skin/devtools/undock.png");
}
#toolbox-dock-window,
#toolbox-dock-bottom,
#toolbox-dock-side {
opacity: 0.6;
}
#toolbox-dock-window:hover,
#toolbox-dock-bottom:hover,
#toolbox-dock-side:hover {
opacity: 1;
}
/* Command buttons */
.command-button {
padding: 0 8px;
margin: 0;
border-width: 0;
width: 16px;
}
.command-button:hover {
background-color: hsla(206,37%,4%,.2);
}
.command-button:hover:active, .command-button[checked=true]:not(:hover) {
background-color: hsla(206,37%,4%,.4);
}
#command-button-paintflashing {
list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-paintflashing:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-paintflashing:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-paintflashing[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-responsive {
list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-responsive:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-responsive:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-responsive[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-tilt {
list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-tilt:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-tilt:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-tilt[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-scratchpad {
list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-scratchpad:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-scratchpad:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
/* Tabs */
.devtools-tabbar {
-moz-appearance: none;
background-image: url("background-noise-toolbar.png"),
linear-gradient(#303840, #2d3640);
border-color: #060a0d;
border-style: solid;
border-width: 1px 0;
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
0 -1px 0 hsla(206,37%,4%,.1) inset;
min-height: 32px;
padding: 0;
}
#toolbox-tabs {
margin: 0;
border-left: 1px solid hsla(206,37%,4%,.45);
}
.devtools-tab {
-moz-appearance: none;
min-width: 32px;
min-height: 32px;
max-width: 110px;
color: #b6babf;
margin: 0;
padding: 0;
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: left, right;
border-right: 1px solid hsla(206,37%,4%,.45);
}
.devtools-tab > image {
-moz-margin-end: 0;
-moz-margin-start: 4px;
opacity: 0.6;
width: 16px; /* Prevents collapse during theme switching */
}
#toolbox-tab-options > image {
margin: 0 8px;
}
.devtools-tab > label {
white-space: nowrap;
}
.devtools-tab:hover > image {
opacity: 0.8;
}
.devtools-tab:active > image,
.devtools-tab[selected=true] > image {
opacity: 1;
}
.devtools-tab:hover {
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2));
background-size: 1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
repeat-x;
background-position: left, right;
color: #ced3d9;
}
.devtools-tab:hover:active {
background-color: hsla(206,37%,4%,.2);
color: #f5f7fa;
}
.devtools-tab[selected=true] {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
}
.devtools-tab:not([selected=true]).highlighted {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
}
.devtools-tab:not(.highlighted) > .highlighted-icon,
.devtools-tab[selected=true] > .highlighted-icon,
.devtools-tab:not([selected=true]).highlighted > .default-icon {
visibility: collapse;
}
.options-vertical-pane {
margin: 5px;
width: calc(50% - 30px);
min-width: 400px;
-moz-padding-start: 5px;
}
.options-vertical-pane > label {
padding: 2px 0;
font-size: 1.4rem;
}
.options-groupbox {
-moz-margin-start: 15px;
padding: 2px;
}
.options-groupbox > * {
padding: 2px;
}
.options-citation-label {
font-size: 1rem !important;
/* !important is required otherwise font-size will still be 1.4rem */
font-style: italic;
padding: 4px 0 0; /* To align it with the checkbox */
}
.options-citation-label + label {
padding: 3px 0 0 !important; /* To align it with the checkbox */
font-style: italic;
}
.hidden-labels-box:not(.visible) > label,
.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
display: none;
}

View File

@ -248,9 +248,9 @@ browser.jar:
skin/classic/browser/tabview/stack-expander.png (tabview/stack-expander.png)
skin/classic/browser/tabview/tabview.png (tabview/tabview.png)
skin/classic/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/browser/devtools/common.css (devtools/common.css)
skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
* skin/classic/browser/devtools/common.css (../shared/devtools/common.css)
* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
* skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
@ -331,7 +331,6 @@ browser.jar:
skin/classic/browser/devtools/dock-side.png (devtools/dock-side.png)
* skin/classic/browser/devtools/inspector.css (devtools/inspector.css)
skin/classic/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png)
skin/classic/browser/devtools/toolbox.css (devtools/toolbox.css)
skin/classic/browser/devtools/tool-options.png (devtools/tool-options.png)
skin/classic/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png)
skin/classic/browser/devtools/tool-debugger.png (devtools/tool-debugger.png)

View File

@ -7,9 +7,10 @@
/* UI Tour */
html|div#UITourHighlight {
border-radius: 20px;
border: 2px #5B9CD9 solid;
box-shadow: 0 0 2px #5B9CD9, inset 0 0 1px #5B9CD9;
background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
border-radius: 40px;
border: 1px solid white;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
min-height: 32px;
min-width: 32px;
}

View File

@ -4,6 +4,50 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
:root {
font: message-box;
}
.devtools-monospace {
%ifdef XP_MACOSX
font-family: Menlo, monospace;
%endif
%ifdef XP_LINUX
font-family: monospace;
font-size: 80%;
%endif
%ifdef XP_WIN
font-family: Consolas, monospace;
%endif
}
/* Splitters */
.devtools-horizontal-splitter {
-moz-appearance: none;
border-top: 1px solid black;
border-bottom-width: 0;
min-height: 3px;
height: 3px;
margin-bottom: -3px;
position: relative;
}
.devtools-side-splitter {
-moz-appearance: none;
border: 0;
-moz-border-start: 1px solid black;
min-width: 0;
width: 3px;
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
cursor: e-resize;
}
.devtools-toolbox-side-iframe {
min-width: 465px;
}
/* Autocomplete Popup */
/* Dark and light theme */

View File

@ -47,8 +47,7 @@
background: #26394D;
}
.theme-bg-darker,
.cm-s-mozilla .CodeMirror-gutters {
.theme-bg-darker {
background-color: rgba(0,0,0,0.5);
}
@ -220,6 +219,7 @@ div.CodeMirror span.eval-text {
.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
border-right-color: #343c45;
background-color: #181d20;
}
.cm-s-markup-view pre {
@ -279,3 +279,5 @@ div.CodeMirror span.eval-text {
.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
border-bottom: 0;
}
%include toolbars.inc.css

View File

@ -47,8 +47,7 @@
background-color: #CCC;
}
.theme-bg-darker,
.cm-s-mozilla .CodeMirror-gutters {
.theme-bg-darker {
background: #EFEFEF;
}
@ -219,6 +218,7 @@ div.CodeMirror span.eval-text {
.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
border-right-color: #a6a6a6;
background-color: #f7f7f7;
}
.cm-s-markup-view pre {
@ -278,3 +278,5 @@ div.CodeMirror span.eval-text {
.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
border-bottom: 0;
}
%include toolbars.inc.css

View File

@ -1,20 +1,11 @@
/* vim:set ts=2 sw=2 sts=2 et: */
%if 0
/* 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/. */
/* Font for code */
:root {
font: message-box;
}
.devtools-monospace {
font-family: monospace;
font-size: 80%;
}
/* Toolbar and Toolbar items */
%endif
%filter substitution
%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
.devtools-toolbar {
-moz-appearance: none;
@ -71,7 +62,7 @@
}
.devtools-toolbarbutton[checked=true] {
color: hsl(208,100%,60%) !important;
color: hsl(208,100%,60%);
}
.devtools-toolbarbutton[checked=true]:hover {
@ -139,7 +130,7 @@
margin: 0 3px;
min-height: 22px;
border: 1px solid hsla(210,8%,5%,.6);
border-radius: 2px;
border-radius: 20px;
background-color: transparent;
background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
padding: 3px;
@ -209,36 +200,8 @@
opacity: 1;
}
/* Splitters */
.devtools-horizontal-splitter {
-moz-appearance: none;
border-top: 1px solid black;
border-bottom-width: 0;
min-height: 3px;
height: 3px;
margin-bottom: -3px;
position: relative;
}
.devtools-side-splitter {
-moz-appearance: none;
border: 0;
-moz-border-start: 1px solid black;
min-width: 0;
width: 3px;
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
cursor: e-resize;
}
/* In-tools sidebar */
.devtools-toolbox-side-iframe {
min-width: 465px;
}
.devtools-sidebar-tabs {
-moz-appearance: none;
margin: 0;
@ -253,6 +216,7 @@
.devtools-sidebar-tabs > tabs {
-moz-appearance: none;
position: static;
font: inherit;
color: #b6babf;
margin-bottom: 0;
padding: 0;
@ -287,8 +251,6 @@
color: inherit;
-moz-box-flex: 1;
border-width: 0;
background: transparent;
border-radius: 0;
position: static;
-moz-margin-start: -1px;
}
@ -307,11 +269,8 @@
background-position: calc(100% - 1px), 100%;
}
%filter substitution
%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
.devtools-sidebar-tabs > tabs > tab {
background-color: transparent;
background-image: linear-gradient(transparent, transparent), @smallSeparator@;
}
@ -348,4 +307,269 @@
background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@;
}
%include ../../shared/devtools/common.inc.css
/* Toolbox - moved from toolbox.css.
* Rules that apply to the global toolbox like command buttons,
* devtools tabs, docking buttons, etc. */
#toolbox-controls {
margin: 0 4px;
}
#toolbox-controls > toolbarbutton,
#toolbox-dock-buttons > toolbarbutton {
-moz-appearance: none;
margin: 0 4px;
min-width: 16px;
width: 16px;
}
#toolbox-controls > toolbarbutton > .toolbarbutton-text,
#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
.command-button > .toolbarbutton-text {
display: none;
}
#toolbox-dock-bottom {
list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
}
#toolbox-dock-side {
list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
}
#toolbox-dock-window {
list-style-image: url("chrome://browser/skin/devtools/undock.png");
}
#toolbox-dock-window,
#toolbox-dock-bottom,
#toolbox-dock-side {
opacity: 0.6;
}
#toolbox-dock-window:hover,
#toolbox-dock-bottom:hover,
#toolbox-dock-side:hover {
opacity: 1;
}
#toolbox-controls-separator {
width: 3px;
background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: 0, 1px, 2px;
-moz-margin-start: 8px;
}
/* Command buttons */
.command-button {
-moz-appearance: none;
padding: 0 8px;
margin: 0;
width: 16px;
}
.command-button:hover {
background-color: hsla(206,37%,4%,.2);
}
.command-button:hover:active, .command-button[checked=true]:not(:hover) {
background-color: hsla(206,37%,4%,.4);
}
#command-button-paintflashing {
list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-paintflashing:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-paintflashing:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-paintflashing[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-responsive {
list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-responsive:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-responsive:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-responsive[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-tilt {
list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-tilt:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-tilt:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-tilt[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-scratchpad {
list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-scratchpad:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-scratchpad:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
/* Tabs */
.devtools-tabbar {
-moz-appearance: none;
background-image: url("background-noise-toolbar.png"),
linear-gradient(#303840, #2d3640);
border-color: #060a0d;
border-style: solid;
border-width: 1px 0;
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
0 -1px 0 hsla(206,37%,4%,.1) inset;
min-height: 32px;
padding: 0;
}
#toolbox-tabs {
margin: 0;
}
.devtools-tab {
-moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
-moz-box-align: center;
}
.devtools-tab {
-moz-appearance: none;
min-width: 32px;
min-height: 32px;
max-width: 127px;
color: #b6babf;
margin: 0;
padding: 0;
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: left, right;
border-right: 1px solid hsla(206,37%,4%,.45);
-moz-box-align: center;
}
.devtools-tab > image {
border: none;
-moz-margin-end: 0;
-moz-margin-start: 4px;
opacity: 0.6;
max-height: 16px;
width: 16px; /* Prevents collapse during theme switching */
}
#toolbox-tab-options > image {
margin: 0 8px;
}
.devtools-tab > label {
white-space: nowrap;
}
.devtools-tab:hover > image {
opacity: 0.8;
}
.devtools-tab:active > image,
.devtools-tab[selected=true] > label {
opacity: 1;
}
.devtools-tab:hover {
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2));
background-size: 1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
repeat-x;
background-position: left, right;
color: #ced3d9;
}
.devtools-tab:hover:active {
background-color: hsla(206,37%,4%,.2);
color: #f5f7fa;
}
.devtools-tab[selected=true] {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
}
.devtools-tab:not([selected=true]).highlighted {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
}
.devtools-tab:not(.highlighted) > .highlighted-icon,
.devtools-tab[selected=true] > .highlighted-icon,
.devtools-tab:not([selected=true]).highlighted > .default-icon {
visibility: collapse;
}
.hidden-labels-box:not(.visible) > label,
.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
display: none;
}

View File

@ -30,11 +30,6 @@ toolbarpaletteitem[place="palette"] > #downloads-button {
-moz-image-region: rect(0px, 256px, 32px, 224px);
}
#switch-to-metro-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
-moz-image-region: rect(0px, 800px, 32px, 768px);
}
#add-ons-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #add-ons-button {
-moz-image-region: rect(0px, 288px, 32px, 256px);

View File

@ -16,11 +16,6 @@
-moz-image-region: rect(0, 72px, 18px, 54px);
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
#home-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0, 126px, 18px, 108px);
}
@ -49,10 +44,6 @@
-moz-image-region: rect(0, 216px, 18px, 198px);
}
#switch-to-metro-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0, 648px, 18px, 630px);
}
#open-file-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0, 234px, 18px, 216px);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 609 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -688,6 +688,11 @@ menuitem.bookmark-item {
transition: none;
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
list-style-image: url("chrome://browser/skin/menu-back.png") !important;
@ -2220,6 +2225,19 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
display: none;
}
#switch-to-metro-button[cui-areatype="toolbar"] {
list-style-image: url(chrome://browser/skin/Metro_Glyph.png);
}
#switch-to-metro-button[cui-areatype="toolbar"]:-moz-lwtheme-brighttext {
list-style-image: url(chrome://browser/skin/Metro_Glyph-inverted.png);
}
#switch-to-metro-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png);
}
.toolbarbutton-badge-container {
margin: 0;
padding: 0;

View File

@ -1,364 +0,0 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
/* Font for code */
:root {
font: message-box;
}
.devtools-monospace {
font-family: Consolas, monospace;
}
/* Toolbar and Toolbar items */
.devtools-toolbar {
-moz-appearance: none;
padding: 4px 3px;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.devtools-menulist,
.devtools-toolbarbutton {
-moz-appearance: none;
-moz-box-align: center;
min-width: 78px;
min-height: 22px;
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(211,68%,6%,.5);
border-radius: 3px;
background: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
margin: 0;
-moz-margin-end: 3px;
color: inherit;
}
.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal;
}
.devtools-menulist:-moz-focusring,
.devtools-toolbarbutton:-moz-focusring {
outline: 1px dotted hsla(210,30%,85%,0.7);
outline-offset: -4px;
}
.devtools-toolbarbutton > .toolbarbutton-icon {
margin: 0;
}
.devtools-toolbarbutton:not([label]) {
min-width: 32px;
}
.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
display: none;
}
.devtools-toolbarbutton:not([checked=true]):hover:active {
background-color: hsla(210,18%,9%,.1);
background-image: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
}
.devtools-menulist[open=true],
.devtools-toolbarbutton[open=true],
.devtools-toolbarbutton[checked=true] {
border-color: hsla(211,68%,6%,.6);
background: linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
}
.devtools-toolbarbutton[checked=true] {
color: hsl(200,100%,60%) !important;
}
.devtools-toolbarbutton[checked=true]:hover:active {
background-color: hsla(211,68%,6%,.2);
}
.devtools-option-toolbarbutton {
-moz-appearance: none;
list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-moz-image-region: rect(0px 16px 16px 0px);
background: none;
border: none;
}
.devtools-option-toolbarbutton[open=true] {
-moz-image-region: rect(0px 32px 16px 16px);
}
.devtools-menulist > .menulist-label-box {
text-align: center;
}
.devtools-menulist > .menulist-dropmarker {
-moz-appearance: none;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
border-width: 0;
background-color: transparent;
}
.devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box {
color: hsl(210,30%,85%) !important;
background-color: transparent;
}
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-moz-appearance: none;
color: inherit;
border-width: 0;
-moz-border-end: 1px solid hsla(210,8%,5%,.45);
box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[type=menu-button] {
padding: 0 1px;
-moz-box-align: stretch;
}
.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none !important;
list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-moz-box-align: center;
}
/* Text input */
.devtools-textinput,
.devtools-searchinput {
-moz-appearance: none;
margin: 0 3px;
min-height: 22px;
border: 1px solid hsla(211,68%,6%,.6);
box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
border-radius: 2px;
background-color: transparent;
background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
padding: 3px;
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease;
color: inherit;
}
.devtools-searchinput {
background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
background-repeat: no-repeat;
background-position: 4px center, top left, top left;
padding-top: 0;
padding-bottom: 0;
-moz-padding-start: 18px;
-moz-padding-end: 12px;
font-size: inherit;
}
.devtools-searchinput[focused] {
border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%);
background-origin: padding-box;
background-clip: padding-box;
box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);
}
.devtools-searchinput:-moz-locale-dir(rtl) {
background-position: calc(100% - 4px) center, top left, top left;
}
.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
display: none;
}
.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
opacity: 1.0;
color: hsl(208,10%,66%);
}
.devtools-no-search-result {
box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;
background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75));
}
/* Close button */
.devtools-closebutton {
list-style-image: url("chrome://browser/skin/devtools/close.png");
-moz-appearance: none;
border: none;
margin: 0 4px;
min-width: 16px;
width: 16px;
opacity: 0.6;
}
.devtools-closebutton > .toolbarbutton-text {
display: none;
}
.devtools-closebutton:hover {
opacity: 0.8;
}
.devtools-closebutton:hover:active {
opacity: 1;
}
/* Splitters */
.devtools-horizontal-splitter {
-moz-appearance: none;
border-width: 1px 0 0 0;
-moz-border-top-colors: black;
background-color: transparent;
min-height: 3px;
height: 3px;
margin-bottom: -3px;
position: relative;
}
.devtools-side-splitter {
border: 0;
-moz-border-start: 1px solid #242b33;
min-width: 0;
width: 3px;
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
cursor: e-resize;
}
/* In-tools sidebar */
.devtools-toolbox-side-iframe {
min-width: 465px;
}
.devtools-sidebar-tabs {
-moz-appearance: none;
margin: 0;
}
.devtools-sidebar-tabs > tabpanels {
-moz-appearance: none;
padding: 0;
border: 0;
}
.devtools-sidebar-tabs > tabs {
-moz-appearance: none;
position: static;
color: #b6babf;
margin-bottom: 0;
padding: 0;
background-color: #343c45;
border-width: 0 0 1px 0;
border-color: hsla(210,8%,5%,.6);
border-style: solid;
overflow: hidden;
}
.devtools-sidebar-tabs > tabs > .tabs-right,
.devtools-sidebar-tabs > tabs > .tabs-left {
display: none;
}
.devtools-sidebar-tabs > tabs > tab {
-moz-appearance: none;
/* We want to match the height of a toolbar with a toolbarbutton
* First, we need to replicated the padding of toolbar (4px),
* then we need to take the border of the buttons into account (1px).
*/
padding: 5px 3px;
-moz-padding-start: 6px;
margin: 0;
min-width: 78px;
/* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px.
* -1px because the parent element (<tabs>) comes with a 1px bottom border.
*/
min-height: 32px;
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
text-align: center;
color: inherit;
-moz-box-flex: 1;
border-width: 0;
background: transparent;
border-radius: 0;
position: static;
-moz-margin-start: -1px;
}
.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
position: static;
}
.devtools-sidebar-tabs > tabs > tab:last-of-type {
-moz-border-end-width: 0;
}
.devtools-sidebar-tabs > tabs > tab:first-of-type {
-moz-margin-start: -3px;
}
.devtools-sidebar-tabs > tabs > tab {
background-size: calc(100% - 2px) 100%, 1px 100%;
background-repeat: no-repeat;
background-position: 1px, 0;
}
.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
background-position: calc(100% - 1px), 100%;
}
%filter substitution
%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
.devtools-sidebar-tabs > tabs > tab {
background-image: linear-gradient(transparent, transparent), @smallSeparator@;
}
.devtools-sidebar-tabs > tabs > tab:hover {
background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
}
.devtools-sidebar-tabs > tabs > tab:hover:active {
background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
background-image: linear-gradient(transparent, transparent), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true] {
color: #f5f7fa;
background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
background-image: linear-gradient(#274f64, #274f64), @solidSeparator@;
}
.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@;
}
%include ../../shared/devtools/common.inc.css

View File

@ -389,14 +389,25 @@
}
#resume {
list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
-moz-image-region: rect(0px,16px,16px,0px);
transition: background 0.15s ease-in-out;
}
#resume[checked] {
background: none;
list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
-moz-image-region: rect(0px,32px,16px,16px);
}
#resume ~ toolbarbutton {
transition: opacity 0.15s ease-in-out;
}
#resume:not([checked]) ~ toolbarbutton {
opacity: 0.5;
}
#step-over {
list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
}

View File

@ -1,283 +0,0 @@
/* 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/. */
#toolbox-controls {
margin: 0 4px;
}
#toolbox-controls > toolbarbutton,
#toolbox-dock-buttons > toolbarbutton {
-moz-appearance: none;
border: none;
margin: 0 4px;
min-width: 16px;
width: 16px;
}
#toolbox-dock-bottom {
list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
}
#toolbox-dock-side {
list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
}
#toolbox-dock-window {
list-style-image: url("chrome://browser/skin/devtools/undock.png");
}
#toolbox-dock-window,
#toolbox-dock-bottom,
#toolbox-dock-side {
opacity: 0.6;
}
#toolbox-dock-window:hover,
#toolbox-dock-bottom:hover,
#toolbox-dock-side:hover {
opacity: 1;
}
#toolbox-controls-separator {
width: 3px;
background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: 0, 1px, 2px;
-moz-margin-start: 8px;
}
/* Command buttons */
.command-button {
-moz-appearance: none;
border: none;
margin: 0;
padding: 0 8px;
width: 16px;
}
.command-button:hover {
background-color: hsla(206,37%,4%,.2);
}
.command-button:hover:active, .command-button[checked=true]:not(:hover) {
background-color: hsla(206,37%,4%,.4);
}
#command-button-paintflashing {
list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-paintflashing:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-paintflashing:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-paintflashing[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-responsive {
list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-responsive:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-responsive:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-responsive[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-tilt {
list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-tilt:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-tilt:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
#command-button-tilt[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#command-button-scratchpad {
list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
#command-button-scratchpad:hover {
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
#command-button-scratchpad:hover:active {
-moz-image-region: rect(0px, 48px, 16px, 32px);
}
/* Tabs */
.devtools-tabbar {
-moz-appearance: none;
background-image: url("background-noise-toolbar.png"),
linear-gradient(#303840, #2d3640);
border-bottom: 1px solid #060a0d;
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
0 -1px 0 hsla(206,37%,4%,.1) inset;
min-height: 32px;
padding: 0;
}
#toolbox-tabs {
margin: 0;
}
.devtools-tab {
-moz-appearance: none;
min-width: 32px;
min-height: 32px;
max-width: 110px;
color: #b6babf;
margin: 0;
padding: 0;
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
background-size: 1px 100%;
background-repeat: no-repeat;
background-position: left, right;
border-top: 1px solid #060a0d;
border-right: 1px solid hsla(206,37%,4%,.45);
}
.devtools-tab > image {
-moz-margin-end: 0;
-moz-margin-start: 4px;
opacity: 0.6;
width: 16px; /* Prevents collapse during theme switching */
}
#toolbox-tab-options > image {
margin: 0 8px;
}
.devtools-tab:hover > image {
opacity: 0.8;
}
.devtools-tab:active > image,
.devtools-tab[selected=true] > image {
opacity: 1;
}
.devtools-tab:hover {
background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2));
background-size: 1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
repeat-x;
background-position: left, right;
color: #ced3d9;
}
.devtools-tab:hover:active {
background-color: hsla(206,37%,4%,.2);
color: #f5f7fa;
}
.devtools-tab[selected=true] {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
}
.devtools-tab:not([selected=true]).highlighted {
color: #f5f7fa;
background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
background-size: 100% 1px,
100% 5px,
1px 100%,
1px 100%,
100%;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x;
background-position: top right, top left, left, right;
}
.devtools-tab:not(.highlighted) > .highlighted-icon,
.devtools-tab[selected=true] > .highlighted-icon,
.devtools-tab:not([selected=true]).highlighted > .default-icon {
visibility: collapse;
}
.options-vertical-pane {
margin: 5px;
width: calc(50% - 30px);
min-width: 400px;
-moz-padding-start: 5px;
}
.options-vertical-pane > label {
padding: 2px 0;
font-size: 1.4rem;
}
.options-groupbox {
-moz-margin-start: 15px;
padding: 2px;
}
.options-groupbox > * {
padding: 2px;
}
.options-citation-label {
font-size: 1rem !important;
/* !important is required otherwise font-size will still be 1.4rem */
font-style: italic;
padding: 4px 0 0; /* To align it with the checkbox */
}
.options-citation-label + label {
padding: 3px 0 0 !important; /* To align it with the checkbox */
font-style: italic;
}
.hidden-labels-box:not(.visible) > label,
.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
display: none;
}

View File

@ -50,6 +50,9 @@ browser.jar:
skin/classic/browser/menuPanel-exit.png
skin/classic/browser/menuPanel-help.png
skin/classic/browser/menuPanel-small.png
skin/classic/browser/Metro_Glyph.png (Metro_Glyph-aero.png)
skin/classic/browser/Metro_Glyph-inverted.png
skin/classic/browser/Metro_Glyph-menuPanel.png
skin/classic/browser/mixed-content-blocked-16.png
skin/classic/browser/mixed-content-blocked-64.png
skin/classic/browser/monitor.png
@ -170,9 +173,9 @@ browser.jar:
skin/classic/browser/tabview/tabview.png (tabview/tabview.png)
skin/classic/browser/tabview/tabview-inverted.png (tabview/tabview-inverted.png)
skin/classic/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/browser/devtools/common.css (devtools/common.css)
skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
* skin/classic/browser/devtools/common.css (../shared/devtools/common.css)
* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
* skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
@ -253,7 +256,6 @@ browser.jar:
skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
skin/classic/browser/devtools/inspector.css (devtools/inspector.css)
skin/classic/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png)
skin/classic/browser/devtools/toolbox.css (devtools/toolbox.css)
skin/classic/browser/devtools/tool-options.png (devtools/tool-options.png)
skin/classic/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png)
skin/classic/browser/devtools/tool-debugger.png (devtools/tool-debugger.png)
@ -354,6 +356,9 @@ browser.jar:
skin/classic/aero/browser/menuPanel-exit.png
skin/classic/aero/browser/menuPanel-help.png
skin/classic/aero/browser/menuPanel-small.png (menuPanel-small-aero.png)
skin/classic/aero/browser/Metro_Glyph.png (Metro_Glyph-aero.png)
skin/classic/aero/browser/Metro_Glyph-inverted.png
skin/classic/aero/browser/Metro_Glyph-menuPanel.png
skin/classic/aero/browser/mixed-content-blocked-16.png
skin/classic/aero/browser/mixed-content-blocked-64.png
skin/classic/aero/browser/monitor.png
@ -472,9 +477,9 @@ browser.jar:
skin/classic/aero/browser/tabview/tabview.png (tabview/tabview.png)
skin/classic/aero/browser/tabview/tabview-inverted.png (tabview/tabview-inverted.png)
skin/classic/aero/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/aero/browser/devtools/common.css (devtools/common.css)
skin/classic/aero/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/aero/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
* skin/classic/aero/browser/devtools/common.css (../shared/devtools/common.css)
* skin/classic/aero/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/aero/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/aero/browser/devtools/controls.png (../shared/devtools/controls.png)
* skin/classic/aero/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/aero/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
@ -555,7 +560,6 @@ browser.jar:
skin/classic/aero/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
skin/classic/aero/browser/devtools/inspector.css (devtools/inspector.css)
skin/classic/aero/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png)
skin/classic/aero/browser/devtools/toolbox.css (devtools/toolbox.css)
skin/classic/aero/browser/devtools/tool-options.png (devtools/tool-options.png)
skin/classic/aero/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png)
skin/classic/aero/browser/devtools/tool-debugger.png (devtools/tool-debugger.png)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -31,7 +31,10 @@ _JAVA_HARNESS := \
$(NULL)
java-harness := $(addprefix $(srcdir)/,$(_JAVA_HARNESS))
java-tests := $(wildcard $(TESTPATH)/*.java)
java-tests := \
$(wildcard $(TESTPATH)/*.java) \
$(wildcard $(TESTPATH)/components/*.java) \
$(wildcard $(TESTPATH)/helpers/*.java)
# pre-process TestConstants.java.in
PP_TARGETS += testconstants

View File

@ -8511,11 +8511,17 @@ FireOrClearDelayedEvents(nsTArray<nsCOMPtr<nsIDocument> >& aDocuments,
return;
for (uint32_t i = 0; i < aDocuments.Length(); ++i) {
// NB: Don't bother trying to fire delayed events on documents that were
// closed before this event ran.
if (!aDocuments[i]->EventHandlingSuppressed()) {
fm->FireDelayedEvents(aDocuments[i]);
nsCOMPtr<nsIPresShell> shell = aDocuments[i]->GetShell();
if (shell) {
shell->FireOrClearDelayedEvents(aFireEvents);
// Only fire events for active documents.
bool fire = aFireEvents &&
aDocuments[i]->GetInnerWindow() &&
aDocuments[i]->GetInnerWindow()->IsCurrentInnerWindow();
shell->FireOrClearDelayedEvents(fire);
}
}
}

View File

@ -383,7 +383,7 @@ nsXMLHttpRequest::InitParameters(bool aAnon, bool aSystem)
// Chrome is always allowed access, so do the permission check only
// for non-chrome pages.
if (!IsSystemXHR()) {
if (!IsSystemXHR() && aSystem) {
nsCOMPtr<nsIDocument> doc = window->GetExtantDoc();
if (!doc) {
return;

View File

@ -236,7 +236,7 @@ public:
void SetParameters(bool aAnon, bool aSystem)
{
mIsAnon = aAnon;
mIsAnon = aAnon || aSystem;
mIsSystem = aSystem;
}

View File

@ -5,9 +5,7 @@ function handleRequest(request, response)
request.getHeader("Authorization") == "Basic dXNlciAxOnBhc3N3b3JkIDE=") ||
(request.queryString == "test=user1_evtsrc" &&
request.hasHeader("Authorization") &&
request.getHeader("Authorization") == "Basic dXNlciAxOnBhc3N3b3JkIDE=" &&
request.hasHeader("Cookie") &&
request.getHeader("Cookie") == "test=5c")) {
request.getHeader("Authorization") == "Basic dXNlciAxOnBhc3N3b3JkIDE=")) {
response.setStatusLine(null, 200, "OK");
response.setHeader("Content-Type", "text/event-stream", false);
response.setHeader("Access-Control-Allow-Origin", "http://mochi.test:8888", false);

View File

@ -521,6 +521,7 @@ support-files =
[test_bug895974.html]
[test_bug902847.html]
[test_bug907892.html]
[test_bug927196.html]
[test_caretPositionFromPoint.html]
[test_classList.html]
[test_copypaste.html]

View File

@ -53,12 +53,11 @@ function runTests() {
}
ok(xhr instanceof XMLHttpRequest, "passed " + JSON.stringify(value));
// If the page doesnt have privileges to create a system or anon XHR,
// these flags will always be false no matter what is passed.
let expectedAnon = false;
// If the page doesnt have privileges to create a system XHR,
// this flag will always be false no matter what is passed.
let expectedAnon = Boolean(value && value.mozAnon);
let expectedSystem = false;
if (havePrivileges) {
expectedAnon = Boolean(value && value.mozAnon);
expectedSystem = Boolean(value && value.mozSystem);
}
is(xhr.mozAnon, expectedAnon, "testing mozAnon");
@ -84,13 +83,12 @@ function runTests() {
// ...and once with privileges.
havePrivileges = true;
SpecialPowers.addPermission("systemXHR", true, document);
SpecialPowers.pushPermissions([{'type': 'systemXHR', 'allow': true, 'context': document}], function() {
validParameters.forEach(testValidParameter);
invalidParameters.forEach(testInvalidParameter);
validParameters.forEach(testValidParameter);
invalidParameters.forEach(testInvalidParameter);
SpecialPowers.removePermission("systemXHR", document);
SimpleTest.finish();
SimpleTest.finish();
});
}
</script>

View File

@ -464,8 +464,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
function doTest5_c(test_id)
{
// credentials using the auth cache and cookies
var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
// credentials using the auth cache
var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
xhr.withCredentials = true;
// also, test mixed mode UI
xhr.open("GET", "https://example.com/tests/content/base/test/file_restrictedEventSource.sjs?test=user1_xhr", true, "user 1", "password 1");
@ -494,7 +494,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
function doTest5_d(test_id)
{
var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
xhr.withCredentials = true;
xhr.open("GET", "https://example.com/tests/content/base/test/file_restrictedEventSource.sjs?test=user2_xhr", true, "user 2", "password 2");
xhr.send();
@ -521,8 +521,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
function doTest5_e(test_id)
{
// credentials using the auth cache and cookies
var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
// credentials using the auth cache
var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
xhr.withCredentials = true;
xhr.open("GET", "http://example.org/tests/content/base/test/file_restrictedEventSource.sjs?test=user1_xhr", true, "user 1", "password 1");
xhr.send();
@ -550,7 +550,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
function doTest5_f(test_id)
{
var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
xhr.withCredentials = true;
xhr.open("GET", "http://example.org/tests/content/base/test/file_restrictedEventSource.sjs?test=user2_xhr", true, "user 2", "password 2");
xhr.send();

View File

@ -22,7 +22,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=426308
const SJS_URL = "http://example.org:80/tests/content/base/test/bug426308-redirect.sjs";
function startTest() {
var req = new XMLHttpRequest({mozAnon: false, mozSystem: true});
var req = new XMLHttpRequest({mozAnon: true, mozSystem: true});
req.open("GET", SJS_URL + "?" + window.location.href, false);
req.send(null);

Some files were not shown because too many files have changed in this diff Show More