electron-devtools-vendor
Version:
<div align="center"> <h2>electron-devtools-vendor</h2> <img alt="MIT" src="https://img.shields.io/github/license/BlackHole1/electron-devtools-vendor?color=9cf&style=flat-square"> <img alt="GitHub repo size" src="https://img.shields.io/github/r
145 lines (117 loc) • 6.11 kB
JavaScript
/* View activated when the application is in debug mode. */
define(["backbone", "underscore", "jquery", "views/View", "templates/debugger",
"views/containers/AppViewsView", "views/containers/AppModelsView",
"views/containers/AppCollectionsView", "views/containers/AppRoutersView"],
function(Backbone, _, $, View, template,
AppViewsView, AppModelsView, AppCollectionsView, AppRoutersView) {
var DebuggerView = View.extend({
template: template,
className: "fill", // needed for 100% height layout
tabTypes: { // hash <tabId, tabType>
"appViews": AppViewsView,
"appModels": AppModelsView,
"appCollections": AppCollectionsView,
"appRouters": AppRoutersView
},
tabViews: {}, // hash <tabId, tabView> where tabView is of type tabTypes[tabId]
initialize: function(options) {
View.prototype.initialize.apply(this, arguments);
this.preventBackspaceBackNavigation();
this.render();
// open default tab
var defaultTabElement = this.$(".mainTabs>.active");
var defaultTabContentElement = this.$(defaultTabElement.find('a').attr("href"));
this.openTab(defaultTabElement, defaultTabContentElement);
},
// Prevent the backspace key from navigating back.
// Based on http://stackoverflow.com/a/13756505
preventBackspaceBackNavigation: function() {
this.listenToDOM($(document), 'keydown', function(event) {
if (event.which === 8 && !$(event.target).is("input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]")) {
event.preventDefault();
}
});
},
render: function() {
this.el.innerHTML = this.template(); // DON'T use this.$el.html() because it removes the jQuery event handlers of existing sub-views
// create sub-views for tabs
var tabIndex = 0;
_.each(this.tabTypes, function(TabType, tabId) {
var tabView = this.tabViews[tabId];
if (!tabView) {
tabView = new TabType({
el: this.$('#'+tabId)
});
this.tabViews[tabId] = tabView;
}
// Fix scroll alignment bug on devtools resizing:
// by absolute positioning the tab contents, the contents size change
// doesn't affect the position of the siblings.
// NOTE: the distance between the contents should be greater than the maximum
// devtools width (i.e. the screen width) or the contents may overlap
tabView.$el.css("left", tabIndex*1000+"em");
tabIndex++;
}, this);
return this;
},
openTab: function(tabElement, tabContentElement) {
var currentTabElement = this.$(".mainTabs>.active");
// notify closed to old tab
var currentTabContentElement = this.$(currentTabElement.find('a').attr("href"));
var currentTabId = currentTabContentElement.attr('id');
var currentTabView = this.tabViews[currentTabId];
if (currentTabView && typeof currentTabView.notifyClosed == 'function') {
currentTabView.notifyClosed();
}
// change highlighted tab
currentTabElement.removeClass("active");
tabElement.addClass("active");
// display tab content
var tabsContentContainer = this.$('.mainTabsContent');
tabsContentContainer.scrollLeft(tabsContentContainer.scrollLeft() +
tabContentElement.position().left);
// notify opened to new tab
var tabId = tabContentElement.attr('id');
var tabView = this.tabViews[tabId];
if (tabView && typeof tabView.notifyOpened == 'function') {
tabView.notifyOpened();
}
},
events: {
"keydown": "disableTabKey",
"click .mainTabs>li": "onTabClicked",
"click .inspectComponent": "inspectComponent"
},
// disable tab key default action, since it causes horizontal scrolling to another tab
disableTabKey: function(event) {
if (event.keyCode == 9) event.preventDefault();
},
onTabClicked: function(event) {
var tabElementAnchor = $(event.target);
if (tabElementAnchor.attr("data-toggle") == "tab") { // avoid dropdowns and other tab types
var tabElement = tabElementAnchor.parents('li');
var tabContentElement = this.$(tabElementAnchor.attr("href"));
this.openTab(tabElement, tabContentElement);
return false;
}
},
inspectComponent: function(event) {
var inspectButton = $(event.target);
var componentCategory = inspectButton.attr("data-component-category");
var componentIndex = parseInt(inspectButton.attr("data-component-index"), 10);
var componentsView = this.tabViews["app"+componentCategory+"s"];
// open the component tab
var tabElement = this.$("#app"+componentCategory+"sTab");
var tabContentElement = this.$("#app"+componentCategory+"s");
this.openTab(tabElement, tabContentElement);
componentsView.searchComponent(componentIndex, _.bind(function(componentView) {
// open the component and scroll to it
componentView.open();
tabContentElement.scrollTop(tabContentElement.scrollTop() + componentView.$el.position().top); // obsolete: the search should return just one component
// highlight the component
componentView.highlightAnimation();
}, this));
}
});
return DebuggerView;
});