Skip to content

Commit

Permalink
Merge pull request #82 from szachara/enhance_ux_browser_action
Browse files Browse the repository at this point in the history
Enhance UX for the browser action, possibility to disable popup
  • Loading branch information
mac-cain13 authored Sep 1, 2017
2 parents 862e925 + 947e71f commit 9025661
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 63 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.DS_Store
.DS_Store
.idea/
120 changes: 111 additions & 9 deletions source/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@ chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab)
{
if (chrome.runtime.lastError) {
console.log("Error: ", chrome.runtime.lastError);
} else {
updateIcon(response.status, tabId);
return;
}

// Update the icon
updateIcon(response.status, tabId);
}
);
});
Expand Down Expand Up @@ -99,14 +101,14 @@ chrome.commands.onCommand.addListener(function(command)
},
function(response)
{
// If state is debugging (1) toggle to disabled (0), else toggle to debugging
var newState = (1 == response.status) ? 0 : 1;
// Get new status by current status
const newStatus = getNewStatus(response.status);

chrome.tabs.sendMessage(
tabs[0].id,
{
cmd: "setStatus",
status: newState,
status: newStatus,
idekey: ideKey,
traceTrigger: traceTrigger,
profileTrigger: profileTrigger
Expand All @@ -123,13 +125,98 @@ chrome.commands.onCommand.addListener(function(command)
}
});

// Will not be called, if popup is disabled, so not needed to wrap this in a if statement
chrome.browserAction.onClicked.addListener((tab) => {
var ideKey = "XDEBUG_ECLIPSE";
var traceTrigger = ideKey;
var profileTrigger = ideKey;

// Check if localStorage is available and get the settings out of it
if (localStorage)
{
if (localStorage["xdebugIdeKey"])
{
ideKey = localStorage["xdebugIdeKey"];
}

if (localStorage["xdebugTraceTrigger"])
{
traceTrigger = localStorage["xdebugTraceTrigger"];
}

if (localStorage["xdebugProfileTrigger"])
{
profileTrigger = localStorage["xdebugProfileTrigger"];
}
}

// Get the current state
chrome.tabs.sendMessage(
tab.id,
{
cmd: "getStatus",
idekey: ideKey,
traceTrigger: traceTrigger,
profileTrigger: profileTrigger
},
function(response)
{
// Get new status by current status
const newStatus = getNewStatus(response.status);

chrome.tabs.sendMessage(
tab.id,
{
cmd: "setStatus",
status: newStatus,
idekey: ideKey,
traceTrigger: traceTrigger,
profileTrigger: profileTrigger
},
function(response)
{
// Update the icon
updateIcon(response.status, tab.id);
}
);
}
);
});

/**
* Get new status by current status.
*
* @param {number} status - Current status from sendMessage() cmd: 'getStatus'.
*
* @returns {number}
*/
function getNewStatus(status) {
// Reset status, when trace or profile is selected and popup is disabled
if ((localStorage.xdebugDisablePopup === '1')
&& ((status === 2) || (status === 3))
) {
return 0;
}

// If state is debugging (1) toggle to disabled (0), else toggle to debugging
return (status === 1) ? 0 : 1;
}

function updateIcon(status, tabId)
{
// Figure the correct title/image with the given state
var title = "Debugging, profiling & tracing disabled",
image = "images/bug-gray.png";
// Reset status, when trace or profile is selected and popup is disabled
if ((localStorage.xdebugDisablePopup === '1')
&& ((status === 2) || (status === 3))
) {
status = 0;
}

if (status == 1)
// Figure the correct title / image by the given state
let image = "images/bug-gray.png";
let title = (localStorage.xdebugDisablePopup === '1')
? 'Debugging disabled' : 'Debugging, profiling & tracing disabled';

if (status == 1)
{
title = "Debugging enabled";
image = "images/bug.png";
Expand Down Expand Up @@ -158,6 +245,10 @@ function updateIcon(status, tabId)
});
}

/**
* @deprecated
* @todo to remove silver
*/
function isValueInArray(arr, val)
{
for (i = 0; i < arr.length; i++)
Expand All @@ -171,3 +262,14 @@ function isValueInArray(arr, val)

return false;
}

// Disable / Enable Popup by localStorage
if (localStorage.xdebugDisablePopup === '1') {
chrome.browserAction.setPopup({
popup: '',
});
} else {
chrome.browserAction.setPopup({
popup: 'popup.html',
});
}
21 changes: 20 additions & 1 deletion source/options.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* Base styles */
html,
body {
font-family: 'Roboto', sans-serif;
Expand All @@ -17,6 +18,17 @@ a {
color: #4285f4;
}

/* Fade transition */
.fade {
opacity: 0;
transition: opacity .15s linear;
}

.fade.show {
opacity: 1;
}

/* Page styles */
.contentTxt {
margin-bottom: 5px;
}
Expand Down Expand Up @@ -104,4 +116,11 @@ a {
position: relative;
top: 4px;
margin-right: 5px;
}
}

/* Disable Popup */
.disable-popup-saved {
color: #5cb85c;
font-weight: bold;
margin-left: 5px;
}
14 changes: 14 additions & 0 deletions source/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,20 @@ <h3>Profile Trigger Value</h3>
<input type="text" id="profiletrigger" value="">
<button class="save-button">Save</button>
</p>

<h3>Disable Popup</h3>
<p class="note">
If checked, xdebug session will be enabled / disabled by left click on the
xdebug helper icon, xdebug helper's popup will be disabled.
</p>
<p>
<label>
<input type="checkbox" id="disable-popup" value="1">
<span>Disable Popup</span>
</label>
<span class="disable-popup-saved fade">Saved</span>
</p>

<footer id="footer">
<a href="https://github.com/mac-cain13/xdebug-helper-for-chrome" class="contribute" target="_blank">
Feel free to submit ideas, bugs and pull request to our <span>Github project</span>
Expand Down
138 changes: 86 additions & 52 deletions source/options.js
Original file line number Diff line number Diff line change
@@ -1,69 +1,103 @@
function save_options()
{
localStorage["xdebugIdeKey"] = document.getElementById("idekey").value;
localStorage["xdebugTraceTrigger"] = document.getElementById("tracetrigger").value;
localStorage["xdebugProfileTrigger"] = document.getElementById("profiletrigger").value;
}

function restore_options()
{
// Restore IDE Key
idekey = localStorage["xdebugIdeKey"];

if (!idekey)
{
idekey = "XDEBUG_ECLIPSE";
}
(function () {

if (idekey == "XDEBUG_ECLIPSE" || idekey == "netbeans-xdebug" || idekey == "macgdbp" || idekey == "PHPSTORM")
// setTimeout() return value
let disablePopupTimeout;

function save_options()
{
$("#ide").val(idekey);
$("#idekey").prop('disabled', true);
localStorage["xdebugIdeKey"] = document.getElementById("idekey").value;
localStorage["xdebugTraceTrigger"] = document.getElementById("tracetrigger").value;
localStorage["xdebugProfileTrigger"] = document.getElementById("profiletrigger").value;
localStorage.xdebugDisablePopup = document.getElementById('disable-popup').checked ? '1' : '0';
}
else

function restore_options()
{
$("#ide").val("null");
$("#idekey").prop('disabled', false);
}
$('#idekey').val(idekey);

// Restore Trace Triggers
var traceTrigger = localStorage["xdebugTraceTrigger"];
if (traceTrigger !== null) {
$("#tracetrigger").val(traceTrigger);
} else {
$("#tracetrigger").val(null);
}
// Restore IDE Key
idekey = localStorage["xdebugIdeKey"];

// Restore Profile Triggers
var profileTrigger = localStorage["xdebugProfileTrigger"];
if (profileTrigger !== null) {
$("#profiletrigger").val(profileTrigger);
} else {
$("#profiletrigger").val(null);
}
}
if (!idekey)
{
idekey = "XDEBUG_ECLIPSE";
}

$(function()
{
$("#ide").change(function ()
{
if ($("#ide").val() != "null")
if (idekey == "XDEBUG_ECLIPSE" || idekey == "netbeans-xdebug" || idekey == "macgdbp" || idekey == "PHPSTORM")
{
$("#ide").val(idekey);
$("#idekey").prop('disabled', true);
$("#idekey").val($("#ide").val());

save_options();
}
else
{
$("#ide").val("null");
$("#idekey").prop('disabled', false);
}
$('#idekey').val(idekey);

// Restore Trace Triggers
var traceTrigger = localStorage["xdebugTraceTrigger"];
if (traceTrigger !== null) {
$("#tracetrigger").val(traceTrigger);
} else {
$("#tracetrigger").val(null);
}

// Restore Profile Triggers
var profileTrigger = localStorage["xdebugProfileTrigger"];
if (profileTrigger !== null) {
$("#profiletrigger").val(profileTrigger);
} else {
$("#profiletrigger").val(null);
}

// Restore Disable Popup
document.getElementById('disable-popup').checked = (localStorage.xdebugDisablePopup === '1') ? true : false;
}

$(function()
{
$("#ide").change(function ()
{
if ($("#ide").val() != "null")
{
$("#idekey").prop('disabled', true);
$("#idekey").val($("#ide").val());

save_options();
}
else
{
$("#idekey").prop('disabled', false);
}
});

$("#idekey").change(save_options);

// Persist Disable Popup on onChange event
$('#disable-popup').change(disablePopupChanged);

$('.save-button').click(save_options);

restore_options();
});

$("#idekey").change(save_options);
/**
* Disable Popup checkbox changed, persist it.
*/
function disablePopupChanged() {
const $disablePopupSaved = $('.disable-popup-saved');

$disablePopupSaved.addClass('show');

$('.save-button').click(save_options);
// First clear interval
clearInterval(disablePopupTimeout);
// Hide after 2 seconds
disablePopupTimeout = setTimeout(() => $disablePopupSaved.removeClass('show'), 2000);

// Persist
save_options();

// We need to reload the extension, because to hide the popup
chrome.extension.getBackgroundPage().window.location.reload(true);
}

restore_options();
});
})();

0 comments on commit 9025661

Please sign in to comment.