зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset 8e4cadda2d01 (bug 1411160) for build bustage due to duplicate files. r=backout
--HG-- rename : devtools/client/inspector/fonts/components/FontsApp.js => devtools/client/inspector/fonts/components/App.js rename : devtools/client/inspector/layout/components/LayoutApp.js => devtools/client/inspector/layout/components/App.js extra : amend_source : a4d4aaed2a6c13bc79830df4e91d9c36167fe7be
This commit is contained in:
Sebastian Hengst
Родитель
73c42c6cf7
Коммит
ae14b9899c
|
|
@ -1,14 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { createEnum } = require("devtools/client/shared/enum");
|
||||
|
||||
createEnum([
|
||||
|
||||
// Update the entire changes state with the new list of changes.
|
||||
"UPDATE_CHANGES",
|
||||
|
||||
], module.exports);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
|
||||
# vim: set filetype=python:
|
||||
# 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/.
|
||||
|
||||
DevToolsModules(
|
||||
'index.js',
|
||||
)
|
||||
|
|
@ -1,52 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
|
||||
const { Provider } = require("devtools/client/shared/vendor/react-redux");
|
||||
|
||||
const ChangesApp = createFactory(require("./components/ChangesApp"));
|
||||
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
const INSPECTOR_L10N =
|
||||
new LocalizationHelper("devtools/client/locales/inspector.properties");
|
||||
|
||||
class ChangesView {
|
||||
|
||||
constructor(inspector, window) {
|
||||
this.document = window.document;
|
||||
this.inspector = inspector;
|
||||
this.store = inspector.store;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
if (!this.inspector) {
|
||||
return;
|
||||
}
|
||||
|
||||
let changesApp = ChangesApp({});
|
||||
|
||||
let provider = createElement(Provider, {
|
||||
id: "changesview",
|
||||
key: "changesview",
|
||||
store: this.store,
|
||||
title: INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle")
|
||||
}, changesApp);
|
||||
|
||||
// Expose the provider to let inspector.js use it in setupSidebar.
|
||||
this.provider = provider;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.document = null;
|
||||
this.inspector = null;
|
||||
this.store = null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = ChangesView;
|
||||
|
|
@ -1,27 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const {
|
||||
DOM: dom,
|
||||
PureComponent,
|
||||
} = require("devtools/client/shared/vendor/react");
|
||||
const { connect } = require("devtools/client/shared/vendor/react-redux");
|
||||
|
||||
class ChangesApp extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return dom.div(
|
||||
{
|
||||
id: "changes-container",
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(state => state)(ChangesApp);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
|
||||
# vim: set filetype=python:
|
||||
# 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/.
|
||||
|
||||
DevToolsModules(
|
||||
'ChangesApp.js',
|
||||
)
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
|
||||
# vim: set filetype=python:
|
||||
# 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/.
|
||||
|
||||
DIRS += [
|
||||
'actions',
|
||||
'components',
|
||||
'reducers',
|
||||
]
|
||||
|
||||
DevToolsModules(
|
||||
'changes.js',
|
||||
'types.js',
|
||||
)
|
||||
|
|
@ -1,19 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const INITIAL_CHANGES = [];
|
||||
|
||||
let reducers = {
|
||||
|
||||
};
|
||||
|
||||
module.exports = function (changes = INITIAL_CHANGES, action) {
|
||||
let reducer = reducers[action.type];
|
||||
if (!reducer) {
|
||||
return changes;
|
||||
}
|
||||
return reducer(changes, action);
|
||||
};
|
||||
|
|
@ -1,7 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
exports.changes = require("./changes");
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
|
||||
# vim: set filetype=python:
|
||||
# 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/.
|
||||
|
||||
DevToolsModules(
|
||||
'changes.js',
|
||||
'index.js',
|
||||
)
|
||||
|
|
@ -1,9 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
exports.changes = {
|
||||
|
||||
};
|
||||
|
|
@ -4,7 +4,10 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
|
||||
const {
|
||||
createElement, createFactory,
|
||||
} = require("devtools/client/shared/vendor/react");
|
||||
|
||||
const { Provider } = require("devtools/client/shared/vendor/react-redux");
|
||||
|
||||
const ExtensionSidebarComponent = createFactory(require("./components/ExtensionSidebar"));
|
||||
|
|
|
|||
|
|
@ -8,7 +8,4 @@ const { createEnum } = require("devtools/client/shared/enum");
|
|||
|
||||
createEnum([
|
||||
|
||||
// Update the entire flexboxes state with the new list of flexboxes.
|
||||
"UPDATE_FLEXBOXES",
|
||||
|
||||
], module.exports);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const Types = require("../types");
|
|||
|
||||
const PREVIEW_UPDATE_DELAY = 150;
|
||||
|
||||
class FontsApp extends PureComponent {
|
||||
class App extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
fonts: PropTypes.arrayOf(PropTypes.shape(Types.font)).isRequired,
|
||||
|
|
@ -74,4 +74,4 @@ class FontsApp extends PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports = connect(state => state)(FontsApp);
|
||||
module.exports = connect(state => state)(App);
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
DevToolsModules(
|
||||
'App.js',
|
||||
'Font.js',
|
||||
'FontList.js',
|
||||
'FontsApp.js',
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
const { Task } = require("devtools/shared/task");
|
||||
const { getColor } = require("devtools/client/shared/theme");
|
||||
|
||||
const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
|
||||
|
|
@ -13,7 +14,7 @@ const { Provider } = require("devtools/client/shared/vendor/react-redux");
|
|||
|
||||
const { gDevTools } = require("devtools/client/framework/devtools");
|
||||
|
||||
const FontsApp = createFactory(require("./components/FontsApp"));
|
||||
const App = createFactory(require("./components/App"));
|
||||
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
const INSPECTOR_L10N =
|
||||
|
|
@ -22,30 +23,29 @@ const INSPECTOR_L10N =
|
|||
const { updateFonts } = require("./actions/fonts");
|
||||
const { updatePreviewText, updateShowAllFonts } = require("./actions/font-options");
|
||||
|
||||
class FontInspector {
|
||||
function FontInspector(inspector, window) {
|
||||
this.document = window.document;
|
||||
this.inspector = inspector;
|
||||
this.pageStyle = this.inspector.pageStyle;
|
||||
this.store = this.inspector.store;
|
||||
|
||||
constructor(inspector, window) {
|
||||
this.document = window.document;
|
||||
this.inspector = inspector;
|
||||
this.pageStyle = this.inspector.pageStyle;
|
||||
this.store = this.inspector.store;
|
||||
this.update = this.update.bind(this);
|
||||
|
||||
this.update = this.update.bind(this);
|
||||
this.onNewNode = this.onNewNode.bind(this);
|
||||
this.onPreviewFonts = this.onPreviewFonts.bind(this);
|
||||
this.onShowAllFont = this.onShowAllFont.bind(this);
|
||||
this.onThemeChanged = this.onThemeChanged.bind(this);
|
||||
|
||||
this.onNewNode = this.onNewNode.bind(this);
|
||||
this.onPreviewFonts = this.onPreviewFonts.bind(this);
|
||||
this.onShowAllFont = this.onShowAllFont.bind(this);
|
||||
this.onThemeChanged = this.onThemeChanged.bind(this);
|
||||
|
||||
this.init();
|
||||
}
|
||||
this.init();
|
||||
}
|
||||
|
||||
FontInspector.prototype = {
|
||||
init() {
|
||||
if (!this.inspector) {
|
||||
return;
|
||||
}
|
||||
|
||||
let fontsApp = FontsApp({
|
||||
let app = App({
|
||||
onPreviewFonts: this.onPreviewFonts,
|
||||
onShowAllFont: this.onShowAllFont,
|
||||
});
|
||||
|
|
@ -55,7 +55,7 @@ class FontInspector {
|
|||
key: "fontinspector",
|
||||
store: this.store,
|
||||
title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
|
||||
}, fontsApp);
|
||||
}, app);
|
||||
|
||||
// Expose the provider to let inspector.js use it in setupSidebar.
|
||||
this.provider = provider;
|
||||
|
|
@ -69,13 +69,13 @@ class FontInspector {
|
|||
this.store.dispatch(updatePreviewText(""));
|
||||
this.store.dispatch(updateShowAllFonts(false));
|
||||
this.update(false, "");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Destruction function called when the inspector is destroyed. Removes event listeners
|
||||
* and cleans up references.
|
||||
*/
|
||||
destroy() {
|
||||
destroy: function () {
|
||||
this.inspector.selection.off("new-node-front", this.onNewNode);
|
||||
this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
|
||||
gDevTools.off("theme-switched", this.onThemeChanged);
|
||||
|
|
@ -84,7 +84,7 @@ class FontInspector {
|
|||
this.inspector = null;
|
||||
this.pageStyle = null;
|
||||
this.store = null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the font inspector panel is visible, and false otherwise.
|
||||
|
|
@ -92,7 +92,7 @@ class FontInspector {
|
|||
isPanelVisible() {
|
||||
return this.inspector.sidebar &&
|
||||
this.inspector.sidebar.getCurrentTabID() === "fontinspector";
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Selection 'new-node' event handler.
|
||||
|
|
@ -102,23 +102,7 @@ class FontInspector {
|
|||
this.store.dispatch(updateShowAllFonts(false));
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for change in preview input.
|
||||
*/
|
||||
onPreviewFonts(value) {
|
||||
this.store.dispatch(updatePreviewText(value));
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for click on show all fonts button.
|
||||
*/
|
||||
onShowAllFont() {
|
||||
this.store.dispatch(updateShowAllFonts(true));
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for the "theme-switched" event.
|
||||
|
|
@ -127,9 +111,25 @@ class FontInspector {
|
|||
if (frame === this.document.defaultView) {
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async update() {
|
||||
/**
|
||||
* Handler for change in preview input.
|
||||
*/
|
||||
onPreviewFonts(value) {
|
||||
this.store.dispatch(updatePreviewText(value));
|
||||
this.update();
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for click on show all fonts button.
|
||||
*/
|
||||
onShowAllFont() {
|
||||
this.store.dispatch(updateShowAllFonts(true));
|
||||
this.update();
|
||||
},
|
||||
|
||||
update: Task.async(function* () {
|
||||
// Stop refreshing if the inspector or store is already destroyed.
|
||||
if (!this.inspector || !this.store) {
|
||||
return;
|
||||
|
|
@ -158,10 +158,10 @@ class FontInspector {
|
|||
};
|
||||
|
||||
if (showAllFonts) {
|
||||
fonts = await this.pageStyle.getAllUsedFontFaces(options)
|
||||
fonts = yield this.pageStyle.getAllUsedFontFaces(options)
|
||||
.catch(console.error);
|
||||
} else {
|
||||
fonts = await this.pageStyle.getUsedFontFaces(node, options)
|
||||
fonts = yield this.pageStyle.getUsedFontFaces(node, options)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
|
|
@ -172,7 +172,7 @@ class FontInspector {
|
|||
}
|
||||
|
||||
for (let font of fonts) {
|
||||
font.previewUrl = await font.preview.data.string();
|
||||
font.previewUrl = yield font.preview.data.string();
|
||||
}
|
||||
|
||||
// in case we've been destroyed in the meantime
|
||||
|
|
@ -183,8 +183,7 @@ class FontInspector {
|
|||
this.store.dispatch(updateFonts(fonts));
|
||||
|
||||
this.inspector.emit("fontinspector-updated");
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
module.exports = FontInspector;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
"use strict";
|
||||
|
||||
const Services = require("Services");
|
||||
const { Task } = require("devtools/shared/task");
|
||||
|
||||
const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
|
||||
const { throttle } = require("devtools/client/inspector/shared/utils");
|
||||
|
|
@ -43,45 +44,45 @@ const GRID_COLORS = [
|
|||
"#005A71"
|
||||
];
|
||||
|
||||
class GridInspector {
|
||||
function GridInspector(inspector, window) {
|
||||
this.document = window.document;
|
||||
this.highlighters = inspector.highlighters;
|
||||
this.inspector = inspector;
|
||||
this.store = inspector.store;
|
||||
this.telemetry = inspector.telemetry;
|
||||
this.walker = this.inspector.walker;
|
||||
|
||||
constructor(inspector, window) {
|
||||
this.document = window.document;
|
||||
this.highlighters = inspector.highlighters;
|
||||
this.inspector = inspector;
|
||||
this.store = inspector.store;
|
||||
this.telemetry = inspector.telemetry;
|
||||
this.walker = this.inspector.walker;
|
||||
this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
|
||||
this.updateGridPanel = this.updateGridPanel.bind(this);
|
||||
|
||||
this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
|
||||
this.updateGridPanel = this.updateGridPanel.bind(this);
|
||||
this.onHighlighterChange = this.onHighlighterChange.bind(this);
|
||||
this.onNavigate = this.onNavigate.bind(this);
|
||||
this.onReflow = throttle(this.onReflow, 500, this);
|
||||
this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
|
||||
this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
|
||||
this.onShowGridCellHighlight = this.onShowGridCellHighlight.bind(this);
|
||||
this.onShowGridLineNamesHighlight = this.onShowGridLineNamesHighlight.bind(this);
|
||||
this.onSidebarSelect = this.onSidebarSelect.bind(this);
|
||||
this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
|
||||
this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
|
||||
this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
|
||||
this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
|
||||
|
||||
this.onHighlighterChange = this.onHighlighterChange.bind(this);
|
||||
this.onNavigate = this.onNavigate.bind(this);
|
||||
this.onReflow = throttle(this.onReflow, 500, this);
|
||||
this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
|
||||
this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
|
||||
this.onShowGridCellHighlight = this.onShowGridCellHighlight.bind(this);
|
||||
this.onShowGridLineNamesHighlight = this.onShowGridLineNamesHighlight.bind(this);
|
||||
this.onSidebarSelect = this.onSidebarSelect.bind(this);
|
||||
this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
|
||||
this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
|
||||
this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
|
||||
this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
|
||||
this.init();
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
GridInspector.prototype = {
|
||||
|
||||
/**
|
||||
* Initializes the grid inspector by fetching the LayoutFront from the walker, loading
|
||||
* the highlighter settings and initalizing the SwatchColorPicker instance.
|
||||
*/
|
||||
async init() {
|
||||
init: Task.async(function* () {
|
||||
if (!this.inspector) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.layoutInspector = await this.inspector.walker.getLayoutInspector();
|
||||
this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
|
||||
|
||||
this.loadHighlighterSettings();
|
||||
|
||||
|
|
@ -100,7 +101,7 @@ class GridInspector {
|
|||
this.inspector.on("new-root", this.onNavigate);
|
||||
|
||||
this.onSidebarSelect();
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Destruction function called when the inspector is destroyed. Removes event listeners
|
||||
|
|
@ -127,7 +128,7 @@ class GridInspector {
|
|||
this.store = null;
|
||||
this.swatchColorPickerTooltip = null;
|
||||
this.walker = null;
|
||||
}
|
||||
},
|
||||
|
||||
getComponentProps() {
|
||||
return {
|
||||
|
|
@ -141,7 +142,7 @@ class GridInspector {
|
|||
onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
|
||||
onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the initial color linked to a grid container. Will attempt to check the
|
||||
|
|
@ -168,7 +169,7 @@ class GridInspector {
|
|||
}
|
||||
|
||||
return color || fallbackColor;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the color set for the grid highlighter associated with the provided
|
||||
|
|
@ -187,7 +188,7 @@ class GridInspector {
|
|||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a highlighter settings object for the provided nodeFront.
|
||||
|
|
@ -205,14 +206,14 @@ class GridInspector {
|
|||
return Object.assign({}, highlighterSettings, {
|
||||
color
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieve the shared SwatchColorPicker instance.
|
||||
*/
|
||||
getSwatchColorPickerTooltip() {
|
||||
return this.swatchColorPickerTooltip;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a list of new grid fronts, and if we have a currently highlighted grid, check
|
||||
|
|
@ -238,7 +239,7 @@ class GridInspector {
|
|||
const newFragments = newGridFront.gridFragments;
|
||||
|
||||
return !compareFragmentsGeometry(oldFragments, newFragments);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the layout panel is visible, and false otherwise.
|
||||
|
|
@ -247,7 +248,7 @@ class GridInspector {
|
|||
return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
|
||||
this.inspector.toolbox.currentToolId === "inspector" &&
|
||||
this.inspector.sidebar.getCurrentTabID() === "layoutview";
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load the grid highligher display settings into the store from the stored preferences.
|
||||
|
|
@ -262,7 +263,7 @@ class GridInspector {
|
|||
dispatch(updateShowGridAreas(showGridAreas));
|
||||
dispatch(updateShowGridLineNumbers(showGridLineNumbers));
|
||||
dispatch(updateShowInfiniteLines(showInfinteLines));
|
||||
}
|
||||
},
|
||||
|
||||
showGridHighlighter(node, settings) {
|
||||
this.lastHighlighterColor = settings.color;
|
||||
|
|
@ -270,7 +271,7 @@ class GridInspector {
|
|||
this.lastHighlighterState = true;
|
||||
|
||||
this.highlighters.showGridHighlighter(node, settings);
|
||||
}
|
||||
},
|
||||
|
||||
toggleGridHighlighter(node, settings) {
|
||||
this.lastHighlighterColor = settings.color;
|
||||
|
|
@ -278,13 +279,13 @@ class GridInspector {
|
|||
this.lastHighlighterState = node !== this.highlighters.gridHighlighterShown;
|
||||
|
||||
this.highlighters.toggleGridHighlighter(node, settings, "grid");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the grid panel by dispatching the new grid data. This is called when the
|
||||
* layout view becomes visible or the view needs to be updated with new grid data.
|
||||
*/
|
||||
async updateGridPanel() {
|
||||
updateGridPanel: Task.async(function* () {
|
||||
// Stop refreshing if the inspector or store is already destroyed.
|
||||
if (!this.inspector || !this.store) {
|
||||
return;
|
||||
|
|
@ -293,7 +294,7 @@ class GridInspector {
|
|||
// Get all the GridFront from the server if no gridFronts were provided.
|
||||
let gridFronts;
|
||||
try {
|
||||
gridFronts = await this.layoutInspector.getAllGrids(this.walker.rootNode);
|
||||
gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
|
||||
} catch (e) {
|
||||
// This call might fail if called asynchrously after the toolbox is finished
|
||||
// closing.
|
||||
|
|
@ -318,7 +319,7 @@ class GridInspector {
|
|||
// particular DOM Node in the tree yet, or when we are connected to an older server.
|
||||
if (!nodeFront) {
|
||||
try {
|
||||
nodeFront = await this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
|
||||
nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
|
||||
} catch (e) {
|
||||
// This call might fail if called asynchrously after the toolbox is finished
|
||||
// closing.
|
||||
|
|
@ -340,7 +341,7 @@ class GridInspector {
|
|||
}
|
||||
|
||||
this.store.dispatch(updateGrids(grids));
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
|
||||
|
|
@ -373,7 +374,7 @@ class GridInspector {
|
|||
this.lastHighlighterColor = null;
|
||||
this.lastHighlighterNode = null;
|
||||
this.lastHighlighterState = null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for "new-root" event fired by the inspector, which indicates a page
|
||||
|
|
@ -383,7 +384,7 @@ class GridInspector {
|
|||
if (this.isPanelVisible()) {
|
||||
this.updateGridPanel();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for the "reflow" event fired by the inspector's reflow tracker. On reflows,
|
||||
|
|
@ -398,7 +399,7 @@ class GridInspector {
|
|||
* after the reflow, as well as the grid fragment data on the currently highlighted
|
||||
* grid.
|
||||
*/
|
||||
async onReflow() {
|
||||
onReflow: Task.async(function* () {
|
||||
if (!this.isPanelVisible()) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -409,7 +410,7 @@ class GridInspector {
|
|||
// The new list of grids from the server.
|
||||
let newGridFronts;
|
||||
try {
|
||||
newGridFronts = await this.layoutInspector.getAllGrids(this.walker.rootNode);
|
||||
newGridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
|
||||
} catch (e) {
|
||||
// This call might fail if called asynchrously after the toolbox is finished
|
||||
// closing.
|
||||
|
|
@ -443,7 +444,7 @@ class GridInspector {
|
|||
|
||||
// Either the list of containers or the current fragments have changed, do update.
|
||||
this.updateGridPanel(newGridFronts);
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Handler for a change in the grid overlay color picker for a grid container.
|
||||
|
|
@ -466,7 +467,7 @@ class GridInspector {
|
|||
this.showGridHighlighter(node, highlighterSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Highlights the grid area in the CSS Grid Highlighter for the given grid.
|
||||
|
|
@ -490,7 +491,7 @@ class GridInspector {
|
|||
this.showGridHighlighter(node, highlighterSettings);
|
||||
|
||||
this.store.dispatch(updateGridHighlighted(node, true));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Highlights the grid cell in the CSS Grid Highlighter for the given grid.
|
||||
|
|
@ -520,7 +521,7 @@ class GridInspector {
|
|||
this.showGridHighlighter(node, highlighterSettings);
|
||||
|
||||
this.store.dispatch(updateGridHighlighted(node, true));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Highlights the grid line in the CSS Grid Highlighter for the given grid.
|
||||
|
|
@ -553,7 +554,7 @@ class GridInspector {
|
|||
this.showGridHighlighter(node, highlighterSettings);
|
||||
|
||||
this.store.dispatch(updateGridHighlighted(node, true));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for the inspector sidebar "select" event. Starts tracking reflows
|
||||
|
|
@ -568,7 +569,7 @@ class GridInspector {
|
|||
|
||||
this.inspector.reflowTracker.trackReflows(this, this.onReflow);
|
||||
this.updateGridPanel();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for a change in the input checkboxes in the GridList component.
|
||||
|
|
@ -584,7 +585,7 @@ class GridInspector {
|
|||
|
||||
this.store.dispatch(updateGridHighlighted(node,
|
||||
node !== this.highlighters.gridHighlighterShown));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for a change in the show grid areas checkbox in the GridDisplaySettings
|
||||
|
|
@ -610,7 +611,7 @@ class GridInspector {
|
|||
this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for a change in the show grid line numbers checkbox in the
|
||||
|
|
@ -637,7 +638,7 @@ class GridInspector {
|
|||
this.showGridHighlighter(grid.nodeFront, highlighterSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for a change in the extend grid lines infinitely checkbox in the
|
||||
|
|
@ -664,8 +665,8 @@ class GridInspector {
|
|||
this.showGridHighlighter(grid.nodeFront, highlighterSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = GridInspector;
|
||||
|
|
|
|||
|
|
@ -646,38 +646,11 @@ Inspector.prototype = {
|
|||
this.browserRequire("devtools/client/inspector/layout/layout");
|
||||
this.layoutview = new LayoutView(this, this.panelWin);
|
||||
}
|
||||
|
||||
return this.layoutview.provider;
|
||||
}
|
||||
},
|
||||
defaultTab == layoutId);
|
||||
|
||||
if (Services.prefs.getBoolPref("devtools.changesview.enabled")) {
|
||||
// Inject a lazy loaded react tab by exposing a fake React object
|
||||
// with a lazy defined Tab thanks to `panel` being a function
|
||||
let changesId = "changesview";
|
||||
let changesTitle = INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle");
|
||||
this.sidebar.addTab(
|
||||
changesId,
|
||||
changesTitle,
|
||||
{
|
||||
props: {
|
||||
id: changesId,
|
||||
title: changesTitle
|
||||
},
|
||||
panel: () => {
|
||||
if (!this.changesview) {
|
||||
const ChangesView =
|
||||
this.browserRequire("devtools/client/inspector/changes/changes");
|
||||
this.changesview = new ChangesView(this, this.panelWin);
|
||||
}
|
||||
|
||||
return this.changesview.provider;
|
||||
}
|
||||
},
|
||||
defaultTab == changesId);
|
||||
}
|
||||
|
||||
if (this.target.form.animationsActor) {
|
||||
this.sidebar.addFrameTab(
|
||||
"animationinspector",
|
||||
|
|
@ -705,7 +678,6 @@ Inspector.prototype = {
|
|||
this.browserRequire("devtools/client/inspector/fonts/fonts");
|
||||
this.fontinspector = new FontInspector(this, this.panelWin);
|
||||
}
|
||||
|
||||
return this.fontinspector.provider;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
|
|||
const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
|
||||
const GRID_OPENED_PREF = "devtools.layout.grid.opened";
|
||||
|
||||
class LayoutApp extends PureComponent {
|
||||
class App extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
|
||||
|
|
@ -102,4 +102,4 @@ class LayoutApp extends PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports = connect(state => state)(LayoutApp);
|
||||
module.exports = connect(state => state)(App);
|
||||
|
|
@ -7,5 +7,5 @@
|
|||
DevToolsModules(
|
||||
'Accordion.css',
|
||||
'Accordion.js',
|
||||
'LayoutApp.js',
|
||||
'App.js',
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
|
||||
const { Provider } = require("devtools/client/shared/vendor/react-redux");
|
||||
|
||||
const LayoutApp = createFactory(require("./components/LayoutApp"));
|
||||
const App = createFactory(require("./components/App"));
|
||||
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
const INSPECTOR_L10N =
|
||||
|
|
@ -16,15 +16,15 @@ const INSPECTOR_L10N =
|
|||
loader.lazyRequireGetter(this, "FlexboxInspector", "devtools/client/inspector/flexbox/flexbox");
|
||||
loader.lazyRequireGetter(this, "GridInspector", "devtools/client/inspector/grids/grid-inspector");
|
||||
|
||||
class LayoutView {
|
||||
function LayoutView(inspector, window) {
|
||||
this.document = window.document;
|
||||
this.inspector = inspector;
|
||||
this.store = inspector.store;
|
||||
|
||||
constructor(inspector, window) {
|
||||
this.document = window.document;
|
||||
this.inspector = inspector;
|
||||
this.store = inspector.store;
|
||||
this.init();
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
LayoutView.prototype = {
|
||||
|
||||
init() {
|
||||
if (!this.inspector) {
|
||||
|
|
@ -56,7 +56,7 @@ class LayoutView {
|
|||
onToggleShowInfiniteLines,
|
||||
} = this.gridInspector.getComponentProps();
|
||||
|
||||
let layoutApp = LayoutApp({
|
||||
let app = App({
|
||||
getSwatchColorPickerTooltip,
|
||||
setSelectedNode,
|
||||
/**
|
||||
|
|
@ -84,11 +84,11 @@ class LayoutView {
|
|||
key: "layoutview",
|
||||
store: this.store,
|
||||
title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
|
||||
}, layoutApp);
|
||||
}, app);
|
||||
|
||||
// Expose the provider to let inspector.js use it in setupSidebar.
|
||||
this.provider = provider;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Destruction function called when the inspector is destroyed. Cleans up references.
|
||||
|
|
@ -99,8 +99,8 @@ class LayoutView {
|
|||
this.document = null;
|
||||
this.inspector = null;
|
||||
this.store = null;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = LayoutView;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
|
||||
DIRS += [
|
||||
'boxmodel',
|
||||
'changes',
|
||||
'components',
|
||||
'computed',
|
||||
'extensions',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
// settings.
|
||||
|
||||
exports.boxModel = require("devtools/client/inspector/boxmodel/reducers/box-model");
|
||||
exports.changes = require("devtools/client/inspector/changes/reducers/changes");
|
||||
exports.extensionsSidebar = require("devtools/client/inspector/extensions/reducers/sidebar");
|
||||
exports.flexboxes = require("devtools/client/inspector/flexbox/reducers/flexboxes");
|
||||
exports.fontOptions = require("devtools/client/inspector/fonts/reducers/font-options");
|
||||
|
|
|
|||
|
|
@ -349,11 +349,6 @@ inspector.sidebar.layoutViewTitle2=Layout
|
|||
# name. Used to promote new/recent panels such as the layout panel.
|
||||
inspector.sidebar.newBadge=new!
|
||||
|
||||
# LOCALIZATION NOTE (inspector.sidebar.changesViewTitle):
|
||||
# This is the title shown in a tab in the side panel of the Inspector panel
|
||||
# that corresponds to the tool displaying CSS changes.
|
||||
inspector.sidebar.changesViewTitle=Changes
|
||||
|
||||
# LOCALIZATION NOTE (inspector.sidebar.animationInspectorTitle):
|
||||
# This is the title shown in a tab in the side panel of the Inspector panel
|
||||
# that corresponds to the tool displaying animations defined in the page.
|
||||
|
|
|
|||
|
|
@ -60,8 +60,7 @@ pref("devtools.inspector.showAllAnonymousContent", false);
|
|||
pref("devtools.inspector.colorWidget.enabled", false);
|
||||
// Enable the CSS shapes highlighter
|
||||
pref("devtools.inspector.shapesHighlighter.enabled", true);
|
||||
// Enable the Changes View
|
||||
pref("devtools.changesview.enabled", false);
|
||||
|
||||
// Enable the Flexbox Inspector
|
||||
pref("devtools.flexboxinspector.enabled", false);
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ const { AppConstants } = devtools.require("resource://gre/modules/AppConstants.j
|
|||
|
||||
const BROWSER_BASED_DIRS = [
|
||||
"resource://devtools/client/inspector/boxmodel",
|
||||
"resource://devtools/client/inspector/changes",
|
||||
"resource://devtools/client/inspector/computed",
|
||||
"resource://devtools/client/inspector/flexbox",
|
||||
"resource://devtools/client/inspector/fonts",
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче