Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixing page reload on hash change bug.

Added helper class for inspectedWindow, refactoring the Event monitor logic
Attempting to implement right-click menu, but no success yet
  • Loading branch information...
commit 3b7523afb7869b353ed3bac1100f735cd4a03adc 1 parent bd981f2
@arthurakay authored
View
25 app/AppInspector/app/util/InspectedWindow.js
@@ -79,6 +79,31 @@ Ext.define('AI.util.InspectedWindow', {
return false;
}
+ //helper class
+ Ext.define('Ext.ux.AppInspector', {
+ singleton : true,
+
+ //for the Event Monitor
+ eventCache : null,
+ eventCaptureFn : null,
+
+ //for the right-click menu
+ contextRef : null,
+ contextFn : function(evt, target, eOpts) {
+ var cmp = Ext.getCmp(target.id);
+
+ if (cmp) {
+ contextRef = cmp.getId();
+ }
+ else {
+ contextRef = null;
+ }
+ }
+ });
+
+ //hack to access right-click menu
+ Ext.getBody().on('contextmenu', Ext.ux.AppInspector.contextFn, Ext.ux.AppInspector);
+
if (!document.getElementById('_AppInspector')) {
//create a highlighting DIV for use later
var div = document.createElement('div');
View
24 app/AppInspector/app/util/extjs/Events.js
@@ -10,10 +10,10 @@ Ext.define('AI.util.extjs.Events', {
recordEvents : function () {
var o = Ext.util.Observable.prototype;
- if (!o._eventMonitor) {
- o._eventMonitor = [];
+ if (Ext.ux.AppInspector.eventCache === null) {
+ Ext.ux.AppInspector.eventCache = [];
- o._captureFn = function () {
+ Ext.ux.AppInspector.eventCaptureFn = function () {
var eventName = arguments[0],
signature = arguments[1];
@@ -38,7 +38,7 @@ Ext.define('AI.util.extjs.Events', {
}
// </debug>
- Ext.util.Observable.prototype._eventMonitor.push({
+ Ext.ux.AppInspector.eventCache.push({
eventName : eventName,
source : signature.$className,
xtype : signature.xtype,
@@ -47,19 +47,19 @@ Ext.define('AI.util.extjs.Events', {
};
Ext.ComponentManager.each(function (key) {
- Ext.util.Observable.capture(Ext.getCmp(key), o._captureFn);
+ Ext.util.Observable.capture(Ext.getCmp(key), Ext.ux.AppInspector.eventCaptureFn);
});
//be sure we capture all new components added...
Ext.ComponentManager.register = Ext.Function.createSequence(Ext.ComponentManager.register, function (item) {
- Ext.util.Observable.capture(item, Ext.util.Observable.prototype._captureFn);
+ Ext.util.Observable.capture(item, Ext.ux.AppInspector.eventCaptureFn);
});
}
- var events = o._eventMonitor;
+ var events = Ext.ux.AppInspector.eventCache;
//clear each time so we don't duplicate
- o._eventMonitor = [];
+ Ext.ux.AppInspector.eventCache = [];
return events;
},
@@ -68,17 +68,15 @@ Ext.define('AI.util.extjs.Events', {
*
*/
stopEvents : function () {
- var o = Ext.util.Observable.prototype;
-
- if (o._eventMonitor) {
+ if (Ext.ux.AppInspector.eventCache) {
Ext.ComponentManager.each(function (key) {
Ext.util.Observable.releaseCapture(Ext.getCmp(key));
});
//don't break the function sequence we created in recordEvents()
- Ext.util.Observable.prototype._captureFn = Ext.emptyFn;
+ Ext.ux.AppInspector.eventCaptureFn = Ext.emptyFn;
- delete o._eventMonitor;
+ Ext.ux.AppInspector.eventCache = null;
}
}
});
View
22 app/AppInspector/app/util/touch/Events.js
@@ -10,12 +10,12 @@ Ext.define('AI.util.touch.Events', {
recordEvents : function () {
var o = Ext.event.Dispatcher.prototype;
- if (!o._fireEvent) {
- o._fireEvent = o.dispatchEvent; //set reference to restore later
- o._eventMonitor = [];
+ if (Ext.ux.AppInspector.eventCache === null) {
+ Ext.ux.AppInspector.eventCaptureFn = o.dispatchEvent; //set reference to restore later
+ Ext.ux.AppInspector.eventCache = [];
o.dispatchEvent = function (targetType, target, eventName) {
- o._fireEvent.apply(this, arguments);
+ Ext.ux.AppInspector.eventCaptureFn.apply(this, arguments);
var isComponent = (targetType === 'component');
@@ -26,14 +26,14 @@ Ext.define('AI.util.touch.Events', {
id : target
};
- o._eventMonitor.push(x);
+ Ext.ux.AppInspector.eventCache.push(x);
};
}
- var events = o._eventMonitor;
+ var events = Ext.ux.AppInspector.eventCache;
//clear each time so we don't duplicate
- o._eventMonitor = [];
+ Ext.ux.AppInspector.eventCache = [];
return events;
},
@@ -44,11 +44,11 @@ Ext.define('AI.util.touch.Events', {
stopEvents : function () {
var o = Ext.event.Dispatcher.prototype;
- if (o._fireEvent) {
- o.dispatchEvent = o._fireEvent; //set reference to restore later
+ if (Ext.ux.AppInspector.eventCache !== null) {
+ o.dispatchEvent = Ext.ux.AppInspector.eventCaptureFn; //set reference to restore later
- delete o._fireEvent;
- delete o._eventMonitor;
+ Ext.ux.AppInspector.eventCaptureFn = null;
+ Ext.ux.AppInspector.eventCache = null;
}
}
});
View
11 app/AppInspector/bootstrap.css
@@ -1,9 +1,2 @@
-
-
-/*
- * This file is generated by Sencha Cmd and should NOT be edited. It redirects
- * to the most recently built CSS file for the application to allow index.html
- * in the development directory to load properly (i.e., "dev mode").
- */
-@import 'build/production/AI/resources/AI-all.css';
-
+/* generated file */
+@import 'theme/ext-theme-neptune-1b164612-6ea5-4722-8816-f85b69edae67.css'
View
8 app/background/background.html
@@ -1,8 +1,10 @@
<!DOCTYPE html>
<html>
-<head>
-</head>
+ <head>
+ <script type="text/javascript" src="background.js"></script>
+ <!--<script type="text/javascript" src="right-click.js"></script>-->
+ </head>
<body>
-<script src="background.js"></script>
+
</body>
</html>
View
68 app/background/background.js
@@ -1,22 +1,72 @@
'use strict';
+/**
+ * TABS[123] = {
+ * url : 'http://cdn.sencha.com/ext/priv/ext-5.0.0.470/build/examples/kitchensink/#locking-grid',
+ * hash : 'locking-grid'
+ * }
+ */
+var TABS = {};
+
// monitor page refresh
chrome.extension.onConnect.addListener(function (port) {
//when devtools-page connects (when App Inspector is actually opened)
if (port.name === 'AppInspector') {
- //add event listener for tab refresh
- //NOTE: this fires across ALL tabs!
+ //enable the right-click menu
+// chrome.contextMenus.update(CONTEXT_MENU, {
+// enabled : true
+// });
+
+ /**
+ * add event listener for tab refresh
+ * NOTE: this fires across ALL tabs!
+ */
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
- //changeInfo has multiple statuses... only fire on complete
- if (changeInfo.status === 'complete') {
- port.postMessage({
- tabId : tabId,
- message : 'refreshed!'
- });
+ //changeInfo has multiple statuses... only fire on complete
+ if (changeInfo.status === 'complete') {
+ var oldUrl = TABS[tabId],
+ hashLocation;
+
+ //cache the URL so we can compare it later
+ if (!oldUrl || tab.url !== oldUrl.url) {
+ var newTab = {
+ url : tab.url,
+ hash : ''
+ };
+
+ hashLocation = tab.url.indexOf('#');
+
+ if (hashLocation) {
+ newTab.hash = tab.url.substr(hashLocation + 1);
+ }
+
+ TABS[tabId] = newTab;
+ }
+
+ if (oldUrl) {
+ hashLocation = tab.url.indexOf('#');
+
+ var hash = (hashLocation) ? tab.url.substr(hashLocation + 1) : '';
+
+ //don't refresh the page if only the hash changes
+ if (hash && oldUrl.hash !== hash) {
+ TABS[tabId].hash = hash;
+ }
+ //if the hash has not changed, assume the user has manually refreshed the browser
+ else {
+ port.postMessage({
+ tabId : tabId,
+ message : 'refreshed!'
+ });
+ }
+ }
+
+ }
}
- });
+ );
+
}
});
View
12 app/background/right-click.js
@@ -0,0 +1,12 @@
+'use strict';
+
+// right-click context menu
+var CONTEXT_MENU = chrome.contextMenus.create({
+ 'title' : 'App Inspector for Sencha',
+ 'contexts' : ['all'],
+ 'enabled' : false,
+
+ 'onclick' : function (info, tab) {
+ //TODO: get access to inspectedWindow
+ }
+});
View
1  app/devtools-page.html
@@ -5,7 +5,6 @@
<title>App Inspector for Sencha</title>
<script type="text/javascript" src="devtools/panel.js"></script>
<script type="text/javascript" src="devtools/elements.js"></script>
- <script type="text/javascript" src="devtools/right-click.js"></script>
</head>
<body>
View
11 app/devtools/panel.js
@@ -1,5 +1,10 @@
'use strict';
+var AI = {
+ isReady : false,
+ contextMenu : null
+};
+
/**
* Create Sencha Panel
* http://developer.chrome.com/extensions/devtools.html
@@ -10,11 +15,9 @@ chrome.devtools.panels.create(
'AppInspector/index.html',
function (senchaPanel) {
- var READY;
-
senchaPanel.onShown.addListener(function (panelWindow) {
- if (READY) { return; }
- READY = true;
+ if (AI.isReady) { return; }
+ AI.isReady = true;
//connect to logic in background.js
var port = chrome.runtime.connect({ name : 'AppInspector' }),
View
13 app/devtools/right-click.js
@@ -1,13 +0,0 @@
-'use strict';
-
-// right-click context menu
-
-// chrome.contextMenus.create({
-// 'title': 'Open App Inspector for Sencha...',
-// 'contexts': ['all'],
-// 'onclick': function(info, tab) {
-// //TODO: one day allow the user to open DevTools and navigate directly to the Sencha Tab
-// // but right now this isn't possible
-// // http://stackoverflow.com/questions/6801577/can-i-programmatically-open-the-devtools-from-a-google-chrome-extension
-// }
-// });
View
1  app/manifest.json
@@ -17,6 +17,7 @@
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions": [
"tabs",
+ "contextMenus",
"<all_urls>"
]
}

0 comments on commit 3b7523a

Please sign in to comment.
Something went wrong with that request. Please try again.