How to toggle Firefox responsive design view resolution through code - javascript

I am switching on the firefox responsive design view from my xul based addon with the following code.
var mytmp = {};
Cu.import("resource://gre/modules/Services.jsm");
Services.prefs.setCharPref("devtools.responsiveUI.presets", JSON.stringify([{name:'tmp1', key: "234x899", width:300,height:300}]));
Cu.import("resource:///modules/devtools/responsivedesign.jsm", mytmp);
var win = window.bridge.myWindow;
mytmp.ResponsiveUIManager.toggle(win, win.gBrowser.tabContainer.childNodes[0]);
Following is the code which toggles the resolution
this.menulist.addEventListener("select", this.bound_presetSelected, true);
/**
* When a preset is selected, apply it.
*/
presetSelected: function RUI_presetSelected() {
if (this.menulist.selectedItem.getAttribute("ispreset") === "true") {
this.selectedItem = this.menulist.selectedItem;
this.rotateValue = false;
let selectedPreset = this.menuitems.get(this.selectedItem);
this.loadPreset(selectedPreset);
this.currentPresetKey = selectedPreset.key;
this.saveCurrentPreset();
// Update the buttons hidden status according to the new selected preset
if (selectedPreset == this.customPreset) {
this.addbutton.hidden = false;
this.removebutton.hidden = true;
} else {
this.addbutton.hidden = true;
this.removebutton.hidden = false;
}
}
},
I tried to access the menulist and do a event trigger myself but couldn't access it. How do I select the dropdown?

paa's answer does work but it creates a new custom entry in the screen presets but doesnt select an existing one. You can do so by triggering a click event on the preset select ui.
Like this
var win = window.bridge.myWindow;
var i = 3 // index of the preset to be selected
var responsiveUI= win.gBrowser.selectedTab.__responsiveUI;
$(responsiveUI.menulist.children[0].children[i]).trigger('click');

Assuming the responsive UI is turned on
gBrowser.selectedTab.__responsiveUI.setSize(320,480);
update:
I took as granted that you want to set an arbitrary size, but you actually ask about the presets. Is this still a valid answer?

Related

Gmail Apps script function to display Browser MsgBox from GMail Addon

I have the following working code which validates a list of recipients based on specific conditions. However, I'm looking to replace the resulting "Logger.log" actions with "Browser.msgbox" actions, and for some reason, GMail App Addons are not allowing me to do so:
function validateRecipients(e) {
var toEmails = e.draftMetadata.toRecipients, ccEmails = e.draftMetadata.ccRecipients, bccEmails = e.draftMetadata.bccRecipients, domains = [], uniqueDomains = [];
var allEmails = toEmails.concat(ccEmails, bccEmails);
for (var i = 0; i < allEmails.length; i++) {
domains[i] = allEmails[i].split("#").pop().split(".")[0];
}
uniqueDomains = domains.filter(listUnique);
if(uniqueDomains.length <= 2 && uniqueDomains.indexOf("verasafe") != -1) {
Logger.log("This Message is Good to Go");
}
else if(uniqueDomains.length == 0) {
Logger.log("This Message has no recipients");
}
else {
Logger.log("Please Validate Receipients of this Message and Try again");
}
}
Partial answer
Browser.msg can't be used on Gmail Add-ons, because, from https://developers.google.com/apps-script/reference/base/browser
This class provides access to dialog boxes specific to Google Sheets.
You cannot use Browser.msg or any of the UI classes with Gmail.
However, there is a new feature called Card Service that is meant to be used for the creation of UI for Gmail Addons.
Hope this helps!
The closest I could currently find is notification which shows a quick message at the bottom of the card (in Google's Material design it's called a snackbar
https://developers.google.com/apps-script/reference/card-service/notification
Other than that you need to replace the card with a new one.
function _navigateToCard(card: GoogleAppsScript.Card_Service.Card, replace: boolean)
{
var nav = CardService.newNavigation();
replace ? nav.updateCard(card) : nav.pushCard(card)
return CardService.newActionResponseBuilder()
.setNavigation(nav)
.build();
}

Creating whole new view based on current user's group sharepoint 2013

I am trying to generate a view based on the current user's group name. Group Name I am gathering from the custom list.
My question is how to apply the gathered group name to 'Group Name' column as a view parameter.
The only solution I figured:
I have created a view with a parameter.
I have added an HTML Form Web Part into the same page and connected it to the list view (sending the value to the parameter via web part connection). Then with a window.onload function I gather the current user's group name and pass this value via Form Postback function. But since the Postback function triggers full page reload, it falls into the endless loop of form submission > page reload.
Another way I have tried is attaching a click event listener to the BY MY GROUPS tab and it works perfectly, but the only disadvantage is that the page reloads each time user clicks on this tab, which I would like to avoid.
So the solution that I need is a way to post the form without a page reload.
Another option suggested here is to use CSR (client side rendering), but that has its own problems:
This code does not work as it is supposed to. In the console it shows me correct items, but the view appears untouchable.
Even if it worked, the other column values are still viewable in the column filter, as in this screenshot:
So, it seems that CSR just hides items from the view (and they are still available). In other words its behavior is different from, for example, a CAML query.
Or am I getting it wrong and there's something wrong with my code?
Below you can find my CSR code:
<script type='text/javascript'>
(function() {
function listPreRender(renderCtx) {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
var currUserID = _spPageContextInfo.userId;
var cx = new SP.ClientContext('/sites/support');
var list = cx.get_web().get_lists().getByTitle('Group Members');
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
cx.load(items, 'Include(_x006e_x50,DepID)');
cx.executeQueryAsync(
function() {
var i = items.get_count();
while (i--) {
var item = items.getItemAtIndex(i);
var userID = item.get_item('_x006e_x50').get_lookupId();
var group = item.get_item('DepID').get_lookupValue();
if (currUserID === userID) {
var rows = renderCtx.ListData.Row;
var customView = [];
var i = rows.length;
while (i--) {
var show = rows[i]['Group_x0020_Name'] === group;
if (show) {
customView.push(rows[i]);
}
}
renderCtx.ListData.Row = customView;
renderCtx.ListData.LastRow = customView.length;
console.log(JSON.stringify(renderCtx.ListData.Row));
break;
}
}
},
function() {
alert('Something went wrong. Please contact developer')
}
);
});
}
function registerListRenderer() {
var context = {};
context.Templates = {};
context.OnPreRender = listPreRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
}
ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');
})();
</script>

How to dynamically change tab title when it is not selected?

I want to display dynamic information (score) in the window tab of a javascript games running in a browser (chrome) : my goal is to run several instances of the game in different tabs, running in parallel, and to be able to see the current scores in the tab titles. I tried :
document.title = score
... but it works only in the selected tab, the other one are not refreshed until selected (although the games are running well in background).
==> is there a way to force the update of the tab titles... even if not selected ?
I found couple of same questions on the http://stackoverflow.com but they did not work for me.
You can find your solution here: http://www.raymondcamden.com/2010/10/19/Using-JavaScript-to-update-the-browser-window-title-when-the-user-is-away
So, basically that kind of code will work:
var focused = true;
var baseTitle = "";
var chatsMissed = 0;
//I'm the fake function that represents some process. We randomly determine if a new chat happened
function fakeStuff() {
if(Math.random() > 0.5) {
if(!focused) {
chatsMissed++;
window.document.title = baseTitle + " ("+chatsMissed+")";
}
}
}
$(document).ready(function() {
//store the base title
baseTitle = window.document.title;
//When the window is focused...
$(window).focus(function() {
focused = true;
// window.document.title = baseTitle;
//chrome bug: http://heyman.info/2010/oct/7/google-chrome-bug-when-setting-document-title/
setTimeout(function() {
document.title = baseTitle;
}, 100);
chatsMissed = 0;
});
//When the window is blurred...
$(window).blur(function() {
focused = false;
});
//setup a process
window.setInterval('fakeStuff()',2000);
})
Unfortunately JSfiddle do not support title changing. But I tested, and it works.

Javascript Logic In a loop/if statement

I have this function (transComplete) which performs the task of highlighting a relevant indicator showing the user which page they are on, each element of these controllers/indicators represents a page and will highlight appropriately.
This works independently however when I introduce a click function that allows to interact with indicators to move between pages it navigates correctly but does not highlight as needed (works only every two clicks) which leads me to believe its a logic issue in my code.
The boolean logic of true/false is the cause, the highlighting only occurs on the 'true' cases of the variable "isOnSecond" so I essentially need a solution that always highlights the relevant controller when clicked
The main function is below:
function transComplete() {
slideTransStep = 0;
crtSlideIndex = nextSlideIndex;
// for IE filters, removing filters re-enables cleartype
if (nextSlide.style.removeAttribute) {
nextSlide.style.removeAttribute("filter");
// show next slide
showSlide((crtSlideIndex >= totalSlides) ? 1 : crtSlideIndex + 1);
//Highlights a nav circle every two transitions as the boolean alternates
if (isOnSecond == true) {
//unhighlight all controls
for (var i = 0; i < slidesControllersCollection.length; i++) {
if (slidesControllersCollection[i].className === slideHighlightClass) {
slidesControllersCollection[i].className = "";
}
// highlight the control for the next slide
document.getElementById("slide-control-" + crtSlideIndex).className = slideHighlightClass;
}
isOnSecond = false;
}
else {
isOnSecond = true;
}
}
The onclick Function:
function clickSlide(control) {
showSlide(Number(control.id.substr(control.id.lastIndexOf("-")+1)),true);
}
I think you made your trans function when you were still iterating from one page to the very next, now that user can go any frame, you need to clear any highlight each time, then put it again on current one.
Or rather, for performance's sake, store the last highlighted, then highlight the new one.
But ... why not just drop the 'onSecond' logic ? It doesn't make much sense for the user to get a highlight one time over two only...
Anyway if you keep it the onSecond idea, logic would be :
if (lastHighlighted) lastHighlighted.className = "";
if (isOnSecond) {
lastHighLighted = document.getElementById("slide-control-" + crtSlideIndex);
lastHighLighted.className = slideHighlightClass;
} else {
lastHighLighted = null;
}
isOnSecond = ! isOnSecond;
But in fact i wonder if what you want is not the version without onSecond logic :
if (lastHighlighted) lastHighlighted.className = "";
lastHighLighted = document.getElementById("slide-control-" + crtSlideIndex);
lastHighLighted.className = slideHighlightClass;
(Rq declare lastHighlighted as a var so it can be in the scope of transComplete)

firefox javascript window.open _self

My problem is:
When I use:
window.open("example.com","_self");
or
self.open("example.com");
or
window.location.href="example.com";
Firefox removes all menus, buttons, window's window minimization buttons, everything. Also context menu stop working, but site opens fine except this chaos, which ruins everything.
So how to fix this?
EDIT:
I'm using FF22, fresh install.
Looks like its not a simple case so I drop here entire code, it's slightly edited addon for creating new tabs from context menu:
let _ = require("l10n").get;
let winUtils = require("window-utils");
let { isBrowser } = require("api-utils/window/utils");
var delegate = {
onTrack: function (window) {
if (isBrowser(window) ){
let menu = window.document.getElementById("tabContextMenu");
let newtab = window.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","menuitem");
newtab.setAttribute("id", "contexttab-newtab");
newtab.setAttribute("label", _("newtab_string"));
newtab.setAttribute("accesskey", _("newtabaccesskey_string"));
newtab.setAttribute("oncommand", "window.location.href='http://www.example.com'");
menu.insertBefore(newtab, menu.firstChild);
} // End isBrowser
} // End ontrack
} // End delegate function
let tracker = new winUtils.WindowTracker(delegate);
// code to remove the menuitem when extension is disabled for satisfy requirement on AMO for pass a full review
// On uninstall the menuitem is not removed, see: https://bugzilla.mozilla.org/show_bug.cgi?id=627432
exports.onUnload = function(reason) {
var unloader = {
onTrack: function (window) {
if (isBrowser(window) ){
let menu = window.document.getElementById("tabContextMenu");
let newtab = window.document.getElementById("contexttab-newtab");
menu.removeChild(newtab);
}
}
}; // End unloader function
let remover = new winUtils.WindowTracker(unloader);
}
This is the only line I edited:
newtab.setAttribute("oncommand", "window.location.href='http://www.example.com'");
gBrowser.loadURI('http://www.example.com');
works properly.
gBrowser.loadURI loads a page into the selected tab I think.
If you want to open a new window you have to do it like this:
var url = Cc['#mozilla.org/supports-string;1'].createInstance(Ci.nsISupportsString);
url.data = 'http://www.bing.com/';
Services.ww.openWindow(null, 'chrome://browser/content/browser.xul', '_blank', 'chrome,all', url);

Categories

Resources