@ -1,7 +1,6 @@
'use strict'
var yo = require ( 'yo-yo' )
var remixLib = require ( 'remix-lib' )
var ui = remixLib . helpers . ui
var styleDropdown = require ( './styles/dropdownPanel' )
var TreeView = require ( './TreeView' )
var EventManager = remixLib . EventManager
@ -26,13 +25,29 @@ var css = csjs`
}
. eyeButton {
$ { styles . rightPanel . debuggerTab . button _Debugger }
color : $ { styles . rightPanel . debuggerTab . button _Debugger _icon _Color } ;
margin : 3 px ;
float : right ;
}
. eyeButton : hover {
color : $ { styles . rightPanel . debuggerTab . button _Debugger _icon _HoverColor } ;
}
. dropdownpanel {
$ { styles . rightPanel . debuggerTab . dropdown _Debugger }
width : 100 % ;
}
. dropdownrawcontent {
'padding' : '2px' ,
'word-break' : 'break-all'
}
. message {
'padding' : '2px' ,
'word-break' : 'break-all'
}
. refresh {
margin - left : 4 px ;
margin - top : 4 px ;
animation : spin 2 s linear infinite ;
}
`
function DropdownPanel ( _name , _opts ) {
@ -69,7 +84,7 @@ DropdownPanel.prototype.setLoading = function () {
DropdownPanel . prototype . setUpdating = function ( ) {
if ( this . view ) {
this . view . querySelector ( '.dropdownpanel .dropdowncontent' ) . style . color = 'gray'
this . view . querySelector ( '.dropdownpanel .dropdowncontent' ) . style . color = styles . appProperties . additionalText _Color
}
}
@ -77,7 +92,7 @@ DropdownPanel.prototype.update = function (_data, _header) {
if ( this . view ) {
this . view . querySelector ( '.dropdownpanel .fa-refresh' ) . style . display = 'none'
this . view . querySelector ( '.dropdownpanel .dropdowncontent' ) . style . display = 'block'
this . view . querySelector ( '.dropdownpanel .dropdowncontent' ) . style . color = 'black'
this . view . querySelector ( '.dropdownpanel .dropdowncontent' ) . style . color = styles . appProperties . mainText _Color
this . view . querySelector ( '.dropdownpanel .dropdownrawcontent' ) . innerText = JSON . stringify ( _data , null , '\t' )
this . view . querySelector ( '.dropdownpanel button.btn' ) . style . display = 'block'
this . view . querySelector ( '.title span' ) . innerText = _header || ' '
@ -115,17 +130,17 @@ DropdownPanel.prototype.render = function (overridestyle) {
to { transform : rotate ( 359 deg ) ; }
}
< / s t y l e >
< div class = '${css.title} title' onclick = $ { function ( ) { self . toggle ( ) } } >
< div class = '${css.icon} fa fa-caret-right' > < / d i v >
< div class = $ { css . name } > $ { this . name } < / d i v > < s p a n > < / s p a n >
< div class = "${css.title} title" onclick = $ { function ( ) { self . toggle ( ) } } >
< div class = "${css.icon} fa fa-caret-right" > < / d i v >
< div class = "${css.name}" > $ { this . name } < / d i v > < s p a n > < / s p a n >
< / d i v >
< div class = 'dropdownpanel' style = $ { ui . formatCss ( styleDropdown . content ) } style = 'display:none'>
< div class = 'dropdownpanel' style = 'display:none'>
< button onclick = $ { function ( ) { self . toggleRaw ( ) } } title = 'raw' class = "${css.eyeButton} btn fa fa-eye" type = "button" >
< / b u t t o n >
< i class = "fa fa-refresh" style = $ { ui . formatCss ( styleDropdown . inner , overridestyle , { display : 'none' , 'margin-left' : '4px' , 'margin-top' : '4px' , 'animation' : 'spin 2s linear infinite' } ) } aria - hidden = "true" > < / i >
< div style = $ { ui . formatCss ( styleDropdown . inner , overridestyle ) } class = 'dropdowncontent' > $ { content } < / d i v >
< div style = $ { ui . formatCss ( styleDropdown . inner , overridestyle ) } class = 'dropdownrawcontent' style = 'display:none' > < / d i v >
< div style = $ { ui . formatCss ( styleDropdown . inner , overridestyle ) } class = 'message' style = 'display:none' > < / d i v >
< i class = "${css.refresh} fa fa-refresh" aria - hidden = "true" > < / i >
< div class = 'dropdowncontent' > $ { content } < / d i v >
< div class = 'dropdownrawcontent' style = 'display:none' > < / d i v >
< div class = 'message' style = 'display:none' > < / d i v >
< / d i v >
< / d i v > `
if ( ! this . view ) {