Skip to content

SidecarDevTool : Propose some improvements #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ezhdan-sugarcrm wants to merge 1 commit into
base: master
Choose a base branch
from
+216 −48
Open

SidecarDevTool : Propose some improvements #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,11 @@ See [CONTRIBUTING](CONTRIBUTING.md) for how you can contribute changes back into

## Notes

To setup *path* variable used add the following code in MetaDataFiles.php for getClientFileContents method in case of '.hbs' extension:
```php
if (inDeveloperMode()) {
$results[$fileInfo['subPath']]['paths'][$layoutName] = $fileInfo['path'];
}
```

This extension is based on the [backbone-devtools](https://github.com/spect88/backbone-devtools) extension.
2 changes: 1 addition & 1 deletion src/css/appstream.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/css/generate.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 9 additions & 1 deletion src/css/panel.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/css/panel.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/css/performance.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 17 additions & 0 deletions src/js/inject/attach.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,21 @@
if (window.sessionStorage['_sidecar_debug_injection'] === 'enabled') {
document.addEventListener('DOMContentLoaded', inject);
}

if (window.sessionStorage['_sidecar_debug_polygons'] === 'enabled') {
(function() {
var style = document.createElement("style");

// Add a media (and/or media query) here if you'd like!
// style.setAttribute("media", "screen")
// style.setAttribute("media", "only screen and (max-width : 1024px)")

// WebKit hack :(
style.appendChild(document.createTextNode(".polygonHoverView {border: 1px solid orange !important;}"));
style.appendChild(document.createTextNode(".polygonHoverField {border: 1px solid cornflowerblue !important;}"));

// Add the <style> element to the page
document.head.appendChild(style);
})();
}
})();
83 changes: 58 additions & 25 deletions src/js/inject/sidecar.debug.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
path: path || ''
};
return def;
}
};

/**
* Adds a method to the `View.View` class to get information on the current
Expand All @@ -52,6 +52,8 @@
name: this.name,
type: this.type,
compType: 'view',
tplName: this.tplName,
action: this.action,
performance: renderTime,
module: this.module,
path: path || '',
Expand All @@ -72,14 +74,16 @@
Sidecar.view.Field.prototype.getComponentInfo = function() {
var renderTime = App.debug.getComponentRenderTime(this.cid);
renderTime = Math.round(renderTime*10)/10;
var path = this.getJSPath();
var path = this.getJSPath(this.tplName);
var def = {
cid: this.cid,
contextId: this.context.cid,
context: JSON.stringify(this.context),
name: !_.isEmpty(this.fields) ? this.type : this.name,
type: this.type,
compType: 'field',
tplName: this.tplName,
action: this.action,
performance: renderTime,
module: this.module,
path: path || '',
Expand All @@ -98,12 +102,13 @@
*
* @return {String} path The JS source file path
*/
Sidecar.view.Component.prototype.getJSPath = function() {
Sidecar.view.Component.prototype.getJSPath = function(tplName) {
var name = this.type || this.name,
type = this.debugType,
module_prop, // property for App.metadata.getModule() output
module = this.module,
path;
path,
_t;

if(type == 'field') {
module_prop = 'fieldTemplates';
Expand All @@ -119,8 +124,18 @@
) {
path = App.metadata.getModule(module)[module_prop][name].path;
} else {
path = App.metadata.getStrings(type)[name] ?
App.metadata.getStrings(type)[name].path : '';
_t = App.metadata.getStrings(type)[name];
switch (type) {
case 'views':
path = (_t && _t['paths'] && _t['paths'][name]) ? _t['paths'][name] : '';
break;
case 'fields':
path = (_t && _t['paths'] && _t['paths'][tplName]) ? _t['paths'][tplName] : '';
break;
default:
path = _t ? _t.path : '';
break;
}
}

return path;
Expand Down Expand Up @@ -304,7 +319,7 @@

if(window.sessionStorage['_sidecar_debug_tooltips'] === 'enabled') {
// add view info widget
var tooltip_html = '<h5>' + this.cid + '</h5>';
var tooltip_html = '<h5>' + this.cid + ' (view)</h5>';

var attributes = _.pick(this, 'name', 'action', 'module');

Expand All @@ -320,6 +335,17 @@

createTooltip(this.$el, $parent, tooltip_html);
}

if(window.sessionStorage['_sidecar_debug_polygons'] === 'enabled') {
this.$el.hover(
function() {
$(this).addClass('polygonHoverView');
},
function() {
$(this).removeClass('polygonHoverView');
}
);
}
};

Debug.prototype._onHookFieldRender = function() {
Expand Down Expand Up @@ -351,7 +377,7 @@
if(window.sessionStorage['_sidecar_debug_tooltips'] === 'enabled') {
var _createFieldTooltip = function() {
// add field info widget
var tooltip_html = '<h5>' + self.cid + '</h5>';
var tooltip_html = '<h5>' + self.cid + ' (field)</h5>';

tooltip_html += '<ul class="unstyled">';

Expand All @@ -363,7 +389,7 @@
}
);

attributes.path = self.getJSPath();
attributes.path = self.getJSPath(self.tplName);

// check for all sugar action types (*action)
if(/(action|button)/.test(self.type)) {
Expand Down Expand Up @@ -446,6 +472,29 @@
_createFieldTooltip.apply();
self.model.on('change:' + this.name, _createFieldTooltip);
}

if(window.sessionStorage['_sidecar_debug_polygons'] === 'enabled') {
var buggyFieldNames = ['salutation', 'first_name', 'last_name', 'name', 'collection-count'],
element = this.$el,
hoverElement;

if (element.parent().hasClass('fieldset-field') ||
element.children().hasClass('btn') ||
_.indexOf(buggyFieldNames, element.parent().data('fieldname') !== -1)) {
hoverElement = element.children();
} else {
hoverElement = element;
}

hoverElement.hover(
function() {
$(this).addClass('polygonHoverField');
},
function() {
$(this).removeClass('polygonHoverField');
}
);
}
};

Debug.prototype._onHookComponentTrigger = function() {
Expand Down Expand Up @@ -577,26 +626,10 @@
});

Debug.prototype.AppStream = new ActivityStream();

/**
* Override error.handleRenderError method to provide more information on render error.
*/
var _handleRenderError = Sidecar.error.handleRenderError;

Debug.prototype._handleRenderError = function(component, method, additionalInfo) {
console.log('=== handleRenderError Information ===');
console.log('Name: ' + additionalInfo.name);
console.log('Type: ' + additionalInfo.type);
console.log('== ComponentInfo ==', component);
console.log('== AdditionalInfo ==', additionalInfo);
return _handleRenderError.apply(_handleRenderError, arguments);
};

return Debug;

})();

Sidecar.debug = new Sidecar.Debug();
Sidecar.error.handleRenderError = Sidecar.error.handleRenderError ? Sidecar.debug._handleRenderError : undefined;

}).call(this);
32 changes: 28 additions & 4 deletions src/js/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,14 @@
window.$view = sidecarComponent;
console.log('***** Current Sidecar Component *****');
console.log('* cid: ' + sidecarComponent.cid);
console.log('* component type: ' + sidecarComponent.debugType);
console.log('* Component type: ' + sidecarComponent.debugType);
console.log('* Name: ' + sidecarComponent.name);
if (sidecarComponent.type) {
console.log('* Type: ' + sidecarComponent.type);
}
if (sidecarComponent.tplName) {
console.log('* Template: ' + sidecarComponent.tplName);
}
console.log('$view = ', sidecarComponent);
console.log('*************************************');
}
Expand Down Expand Up @@ -173,23 +176,32 @@

logComponent: function(cid) {
var componentInfos = App.debug.getComponent(cid).getComponentInfo();
console.log('== Component ==');
console.log('Type: ' + componentInfos.compType);
console.log('tplName: ' + componentInfos.tplName);
console.log('Action: ' + componentInfos.action);
console.log('Name: ' + componentInfos.name);
console.log('Comp type: ' + componentInfos.compType);
console.log('Module: ' + componentInfos.module);
console.log('File path: ' + componentInfos.path);
console.log('Component object:', App.debug.getComponent(cid));
console.log('Path: ' + componentInfos.path);
console.log('Object:', App.debug.getComponent(cid));
},

getLayoutStructure: function() {
return App.controller.layout.getComponentInfo();
},

enableInjection: function() {
$('[name="tooltips"]').prop('disabled', false);
$('[name="polygons"]').prop('disabled', false);
window.sessionStorage['_sidecar_debug_injection'] = 'enabled';
},

disableInjection: function() {
$('[name="tooltips"]').prop('disabled', true);
$('[name="polygons"]').prop('disabled', true);
window.sessionStorage.removeItem('_sidecar_debug_injection');
window.sessionStorage.removeItem('_sidecar_debug_tooltips');
window.sessionStorage.removeItem('_sidecar_debug_polygons');
},

isInjectionEnabled: function() {
Expand All @@ -208,6 +220,18 @@
return window.sessionStorage['_sidecar_debug_tooltips'] === 'enabled';
},

enablePolygons: function() {
window.sessionStorage['_sidecar_debug_polygons'] = 'enabled';
},

disablePolygons: function() {
window.sessionStorage.removeItem('_sidecar_debug_polygons');
},

arePolygonsEnabled: function() {
return window.sessionStorage['_sidecar_debug_polygons'] === 'enabled';
},

updateTimeout: function(ms) {
window.sessionStorage['_sidecar_debug_injection_timeout'] = String(ms);
},
Expand Down
Loading