I'm trying to set the badge text for my chrome extension with the code below:
chrome.pageAction.setBadgeText({"text":'3'})
This throws an error Object #<Object> has no method setBadgeText.
I have used the canvas feature to get the same result. Here the code that i used.
window.setInterval(function() {
chrome.pageAction.setIcon({imageData: draw(10, 0), tabId: tabId});
}, 1000);
function draw(starty, startx) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = "icon_16.png"
img.onload = function () {
context.drawImage(img,0,2);
}
//context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(startx % 19, starty % 19, 10, 10);
context.fillStyle = "white";
context.font = "11px Arial";
context.fillText("3",0,19);
return context.getImageData(0, 0, 19, 19);
}
here you can chage the positon and color of text you want to show.
No, it is not possible with page actions
But it is possible with browser actions.
Excerpt:
page action docs
Parts of the UI Like browser actions, page actions can have an icon, a
tooltip, and popup; they can't have badges, however. In addition, page
actions can be grayed out. You can find information about icons,
tooltips, and popups by reading about the browser action UI.
What you can do is to replace the current image with another that has a badge included in the image.
Rumor has it that you can use chrome.browserAction.setBadgeText to set a badge on a page action. Since you can only have either a page action or a browser action in your extension, if you opt for the former this method acts on the page action even though it is part of the browserAction API.
Related
I have created MasterPage and page layout. Then I created a page using page layout. Then by editing the page, I added content editor web part but there was one issue that web part context menu was going inside div. Kindly see attached image.
your response would be highly appreacited.
Thanksenter image description here
it may helped somebody that I managed it programmatically using javascript.
when icon will be clicked then javascript function will be fired which will check the height of context menu and if the height is greater than the height of the web part then it will increase the height of the zone height. please see code below.
var menulistheight;
var zoneid;
jQuery('.js-webpart-menuCell').click(function (e) {
if (!menulistheight) {
var dd = jQuery('.ms-core-menu-list');
dd = dd.height();
menulistheight = dd;
}
var zone = $(e.target).closest("#MSOZone")[0];
var id = jQuery(zone).attr("zoneid");
var zHeight = jQuery(zone).height();
if (zHeight < menulistheight) {
jQuery(zone).css("height", zHeight + menulistheight - 100 + "px");
}
});
I need to replace all of my png icons with with svg - it is my employee request. I am using FFImageLoading. Some of the icons displayed in Pages are displaying properly but the problem is that I can't display svg icon in toolbar (toolbar item and hamburger icon).
I am using Xamarin.Forms 4.3.0.908675 and Xamarin.FFImageLoading - all in version 2.4.11.982.
My logo.svg is placed in MyProject.EmbeddedFiles.Images.
Here are the code samples I tried:
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "MyProject.EmbeddedFiles.Images.logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly),
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = new SvgImageSource(ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly), 10,10,true),
Order = ToolbarItemOrder.Primary
});
Neither solution works. My solution based on https://github.com/luberda-molinet/FFImageLoading/issues/1105
What am I missing? Is this even possible?
I am working on a JavaScript based UWP app. Now I need to dynamically show a html page(with a url) in a pop-up window.
I did some search, there is a ContentDialog I can probably use:
var object = new WinJS.UI.ContentDialog(element, options);
but I cannot find any JavaScript sample code for it. I couldn't figure out what should I pass as "element" and how I put the html in ContentDialog.
Thanks in advance for any help.
The WinJS playground shows you how to use the ContentDialog: http://winjs.azurewebsites.net/#contentdialog
The element you pass is the Html element you want to initiate as the dialog.
<div id="myDialog">I am the going to be the dialog content.</div>
var element = document.getElementById('myDialog');
var options = {
title: 'Main instruction',
primaryCommandText: 'Ok',
secondaryCommandText: 'Cancel'
};
var dialog = new WinJS.UI.ContentDialog(element, options);
If you want to set the dialog content dynamically you can do so with
var webview = document.createElement('x-ms-webview');
webview.src = 'http://stackoverflow.com';
dialog.element.querySelector('.win-contentdialog-content').appendChild(webview);
dialog.show();
I am testing the <webview> element in Chrome and I have gone through the documentation but I cannot figure out why the Webview is not resizing when the parent window does.
Index.Html
<body>
<webview src="http://website.com" style="width:1010px; height:700px" minwidth="1010" minheight="700" autosize="on""></webview>
<script src="index.js"></script>
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'bounds': {
'width': 1010,
'height': 700
}});});
Index.js
$(function() {
function resizeWebView() {
$('webview').get(0).width = $(window).width();
$('webview').get(0).height = $(window).height();
}
$(window).resize(resizeWebView);
resizeWebView();
});
I tried also removing the autosize=on as recommended but it does not work.
Another question how to disable the main window (Embedder) from resizing.
Thanks
You should use the chrome.app.window.onBoundsChanged API on the window object returned by chrome.app.window.create. Simple implementation:
background.js
var appWin = null;
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(
'index.html',
{'bounds': {'width': 1010, 'height': 700}},
onWindowCreated
);
});
function onWindowCreated(win) {
appWin = win;
// Resize the webview when the window resizes.
appWin.onBoundsChanged.addListener(onBoundsChanged);
// Initialize the webview size once on launch.
onBoundsChanged();
}
function onBoundsChanged() {
var webview = document.querySelector('webview');
var bounds = appWin.getBounds();
webview.style.height = bounds.height + 'px';
webview.style.width = bounds.width + 'px';
}
index.js
// Nothing here
See a much more elaborate object-oriented example with multiple windows and persisting/reusing the last window size set by the user here: https://github.com/GoogleChrome/chrome-app-samples/tree/master/url-handler.
As to your second question, it would be good if you asked it separately, but nevertheless: just set the resizable parameter of chrome.app.window.create to false:
...
chrome.app.window.create(
'index.html',
{
'bounds': {'width': 1010, 'height': 700},
'resizable': false
},
...
I set out to achieve something similar and the following approach is how I implemented it.
index.html
<webview src="http://website.com" style="width:1010px; height:700px"></webview>
background.js
The code you have here looks correct.
index.js
I approached this in a slightly different way by using the window.onresize event to handle the resize. Please keep in mind that resize event is fired after the screen has been resized and may seem to create a slightly laggy feel.
window.onresize = setWebview;
function setWebview() {
var webview = document.querySelector('webview');
var webviewWidth = document.documentElement.clientWidth;
var webviewHeight = document.documentElement.clientHeight;
webview.style.width = webviewWidth + 'px';
webview.style.height = webviewHeight + 'px';
}
I also call the setWebview(); function in the onLoad or something of the sorts for the initial setting of the webview.
So that is my approach, looking at your index.js I think you may be having an issue in that you are trying to set the width and height of the <webview> when in fact you need to be setting the style width and height, so maybe the following would have worked;
$('webview').get(0).style.width = $(window).width();
$('webview').get(0).style.height = $(window).height();
Notice that I added in .style before .width and .height
Hope that helps..
I don't know if this is a new thing but I did exactly this with CSS:
webview {
height: 100%;
width: 100%;
}
Easy as pie!
My Background:
I am new to WatiN, but not new to writing automated Web UI tests. At my new job, we are trying to use WatiN for our Web UI tests (thanks to a few CUIT fails).
I've solved this problem in the past using ArtOfTest.WebAii, by using a Win32 mouse click with a magic number offset from the containing element, but I can't seem to find documentation on how to do that in WatiN and I can't figure it out myself :\
My problem:
This dialog appears and I can't seem to find a way for WatiN to click it.
The dialog has the following markup:
<OBJECT style="FILTER: alpha(opacity=1); WIDTH: 329px; HEIGHT: 100px; mozOpacity: 0.01; opacity: 0.01; mozopacity: 0.01" data="data:application/x-oleobject;base64, <a bunch of data>" width=329 height=100 type=application/x-silverlight-2></OBJECT>
<param name="source" value="/CuteWebUI_Uploader_Resource.axd?type=file&file=silverlight.xap&_ver=634334311861475176"/>
<param name="windowless" value="true" object="" <=""/>
my test code:
[TestMethod]
public void SomeTest()
{
Settings.MakeNewIeInstanceVisible = true;
Settings.AutoStartDialogWatcher = true;
Settings.AutoMoveMousePointerToTopLeft = false;
using (IE ie2 = new IE())
{
ie2.GoTo(URL);
ie2.Link(SomeButtonID).Click();
ie2.Image(AnotherButtonID).FireEvent("onclick");
// some debugging code wrapped around the next user action
// which is clicking on the attach file button
var helper = new DialogHandlerHelper();
using (new UseDialogOnce(ie2.DialogWatcher, helper))
{
Thread.Sleep(1 * 1000); // wait for attach button to be "ready"
// Click button that triggers the dialog that states:
// "file browsing dialog has been blocked"
// "please click here and try again"
//
ie2.Button(FileAttachButtonID).FireEvent("onclick");
}
foreach(string dialogHandler in helper.CandidateDialogHandlers)
{
// nothing prints out here :(
Console.Out.WriteLine(dialogHandler);
}
// debug print out all elements with tagname = object
foreach (Element objectElement in ie2.ElementsWithTag("object"))
{
StringBuilder elementInfo = new StringBuilder();
elementInfo.AppendLine("--------------------------------------------");
elementInfo.AppendLine("element.tagname = " + objectElement.TagName);
elementInfo.AppendLine("element.style = " + objectElement.Style);
elementInfo.AppendLine("element.type = " + objectElement.GetAttributeValue("type"));
elementInfo.AppendLine("element.data = " + objectElement.GetAttributeValue("data"));
elementInfo.AppendLine("--------------------------------------------");
Console.Out.WriteLine(elementInfo.ToString());
// none of these clicks make the dialog go away
objectElement.ClickNoWait();
objectElement.Click();
objectElement.DoubleClick();
objectElement.MouseEnter();
objectElement.MouseDown();
Thread.Sleep(500);
objectElement.MouseUp();
}
// wait to see if dialog disappears after click
Thread.Sleep(300 * 1000);
}
}
Any and all help will be very much appreciated.
Thanks!
Your control is a silverlight component which can't be automated with WatiN. Fortunately this you can combine WatiN and White to get the job done.
Following code is created and published by Leo Bartnik so ALL the credits go to him! Have a look at his blog post here. The following code in the comments:
He used the following versions.
watin-2.0.50.1179.zip from 2011-02-08 http://sourceforge.net/projects/watin/files/WatiN%202.x/2.0%20Final/
white 0.20 Binaries http://white.codeplex.com/releases/view/29694
public void WatiN_and_White_join_forces()
{
// Navigate to your webpage with WatiN
string url = "http://localhost[port#]/WatinWhiteTestLandingPage.aspx";
WatiN.Core.IE watin = new WatiN.Core.IE(url);
watin.Link(Find.ByText("click here)).Click();
// Attach the IE instance used by WatiN to White
InternetExplorerFactory.Plugin();
string title = "[browser title here]"; // will be something like "WatinWhiteHybrid - Internet Explorer provided by ..."
var ie = (InternetExplorerWindow)Application.Attach(watin.ProcessID).GetWindow(title);
White.WebBrowser.Silverlight.SilverlightDocument sl = ie.SilverlightDocument;
// Click the button in the silverlight control using White
sl.Get(SearchCriteria.ByAutomationId("ClickMeId")).Click();
}
btw don't know why the formating of this code is so way off....
So this was my hack solution:
Use Microsoft's Coded UI Test to click on the Silverlight dialog. However, CUIT is inferior to WatiN, so I run my test in WatiN and load CUIT for one, magical, click.
Additionally, I was not able to easily find the Silverlight object using CUIT, so I find the window behind it, find the window's center pixel and force a Microsoft.VisualStudio.TestTools.UITesting.Mouse.Click(). Yes, a hack inside of a hack, I am a very bad person, but I ran out of time and just needed something working.
If anyone has a more elegant solution, please share.
My solution code:
FileUploadDialogHandler helper = new FileUploadDialogHandler(attachmentPath);
using (new UseDialogOnce(ie.DialogWatcher, helper))
{
Thread.Sleep(1 * 1000); // wait for attach button to be "ready"
ie.Button(browseButtonID).FireEvent("onclick");
// When automating a file upload, there is a Silverlight popup in IE that forces an extra click
// before opening the file open dialog. WatiN does not support Silverlight automation
// and the popup element was acting quirky in Microsoft's Coded UI Test, so we find the
// dialog box UNDERNEATH the Silverlight popup and force one, lovely, mouse click.
//===== Entering Coded UI Test land, beware! =====================================
// initialize Coded UI Test
Playback.Initialize();
BrowserWindow.CurrentBrowser = "IE";
Process watinBrowserProcess = Process.GetProcessById(ie.ProcessID);
BrowserWindow cuitBrowser = BrowserWindow.FromProcess(watinBrowserProcess); // attach Coded UI Test to the IE browser WatiN initialized
// get the window underneath the Silverlight popup
UITestControl modalUnderSilverlightPopup = new UITestControl(cuitBrowser.CurrentDocumentWindow);
modalUnderSilverlightPopup.SearchProperties.Add("id", windowElementUnderPopupID);
// get the X and Y pixel center of the window
int centerX = modalUnderSilverlightPopup.BoundingRectangle.X + modalUnderSilverlightPopup.BoundingRectangle.Width / 2;
int centerY = modalUnderSilverlightPopup.BoundingRectangle.Y + modalUnderSilverlightPopup.BoundingRectangle.Height / 2;
// Click!
Mouse.Click(new Point(centerX, centerY));
// Shutdown Coded UI Test
Playback.Cleanup();
//===== End Coded UI Test land, you survived! yay! ============================
}