Why does Web Inspector show User Agent Stylesheet as 'locked' - safari

I think the easiest way to show this is with a picture:
http://oi61.tinypic.com/r2s4f9.jpg
In Web Inspector, I'm trying to change display:block but it's 'locked'. Further, I can't figure out where this is coming from in my source code

It shows as locked because you are not able to edit it directly using DevTools. You have to override the styles in the user agent stylesheet.

Open the Safari Web Inspector and check the Logs, and beware of any browser extensions or content blockers (iOS) you are using which can modify or inject content into a webpage.
The culprit in my case turned out to be a Content Blocker (iOS ad-blocker) which was blocking elements on the page by forcing a User Stylesheet to display:none on certain CSS elements. Because of this, Safari showed it as "locked" like in your screenshot with no way to edit/modify it. A warning appeared in the Web Inspector 'Logs' tab telling me that the content blocker prevented a frame from loading a resource.
Disabling the content blocker removed the forced stylesheet, and fixed the problem in my case.

Related

B2C Hide the Social Intro

I updated our version of self asserted to 2.1.2 to address the new password reset flow. Doing this has added the social_intro to our custom log in page.
I have added the local_intro_generic to the page and it works fine, However the social_intro still show up. We are not allowing for any social login and I don't want it displayed. I can edit it... but I don't see a way to hide it either in the documents or any other search.
You can edit the html file that is getting referenced for that page. Hide the divs that you don't need after checking the class names of the divs using inspect element.

how to find element through appium when The UI Automation View don't provide element information

I am unable to identify element using xpath. The UI Automation View don't provide the element detail information.
I want to click the link on the email content.But there is no link element information.
Please help me. I am struck here.
UI Automation screenshot:
Below is the page source:
Switch the context for handling webview autoamation.
driver.context("WEBVIEW"); //replace with your webview context
Try accessing using the x-path, css, class or simply by
findElement(By.id("message_content"));
You need to use chrome browser for inspecting the web view embedded in Android application. Official doc here
However, there might be a slight issue related to your problem. The thing is to debug a web view embedded in Android application, the web view itself should allow debugging. i.e. the web views object element needs to be changed in the source code. **cached reference here, they have not mentioned this in the updated document.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
WebView.setWebContentsDebuggingEnabled(true);
}
I am not sure if the email application has this enable or not. If you have the source code update the object as mentioned in the snippet.
Use chromes adb plugin to view the web view elements and to perform actions in web view use switch to context , after performing your actions in web view switch context back to native view

Removing Ektron widget

I believe there is a widget on my page that is causing unbelievably slow page loads. I have narrowed down the exact page it is, and I have about 8 widgets on it. I am trying to disable the widgets one by one, but am having a tough time figuring it out. In the documentation to explains how to remove a widget, but I would like to only temporarily disable them.
These widgets are on PageBuilders, and I have tried to deselect them in Settings > Configuration > Template Configuration but this does not seem to disable it.
Is there a different way to disable widgets?
I am using Ektron 8.6.1
To disable the widget, you could remove the .ascx file from the /widgets folder. The Page should open but report "Cannot load widget" where that widget would appear on the page.
The template configuration setting only prevents you from adding that widget to a new page.

Facepile shows a white box with an option to switch when user selects "Use Facebook as:" option from her facebook account

I have facepile plugin on my webpage to show faces who are using the application.
The code snippet to show facepile is
<fb:facepile id="some_id" data-size="medium" data-width="396">
</fb:facepile>
Faces are showing normally.But when I use "Use facebook as:" option from the facebook homepage and selects any of my listed pages, facepile plugin on my webpage turns weird and shows a white box with a small thumbnail and an anchor(with text 'switch') on top of it On inspecting element with chrome's right click context menu I found it's an iframe with width being 396px and height being 1000px which displays in the middle of page hiding html form for normal login too.
If I revert to my profile using "Use facebook as:" option faces start showing normally.
Am I missing something or It's a bug?
I already checked a similar question but that is related to user being not logged.
Also I checked this bug listed
on facebook developer page but it seems to be resolved.
This is intended behaviour, although obviously the error message should be a bit better - the Facepile (and indeed, most of the Social Plugins) is designed to only work with User accounts. You can be fairly sure that 99.9% of people viewing the plugins will not be "Using Facebook as" a Page.
As Pages aren't designed to really interact with Facebook APIs (beyond the manage_pages functionality) then it is likely that these plugins won't be fixed to work for page accounts, but they'd be fixed to show a message informing anyone logged in as a Page to switch back to their user account.
You can find some related bug reports below, you should consider adding your voice to them in order to increase their priority:
https://developers.facebook.com/bugs/372904202778489
https://developers.facebook.com/bugs/313164415437524

jQuery mobile - how do I get rid of the blue highlight on the Home button

I'm using jQuery mobile, and am using a home button in the header. When clicked, the home button has a blue highlight. I want to get rid of this, but can't seem to track down the CSS rule/-webkit CSS rule to do this.
Screenshot:
Can anyone help?
In jQuery Mobile the class added to buttons just pressed is: ui-btn-active. Here is a link to the documentation that talks about this class (although it doesn't say much): http://jquerymobile.com/demos/1.0b2/docs/toolbars/docs-navbar.html
Not sure if this is what you needed but I figured it might help. I'd recommend using FireBug or some such DOM Inspection tool to view the button in real-time.
You sure that's not just the default hi-light that links get when focused?
Try
#buttonID:focus{
border: none;
outline: 0;
}
An idea to help you track the problem as you don't share the link (you can easily just share the first page), is to use Safari, Chrome or even Firefox and make them act as an iPhone so you can use their Inspector / Firebug to track the problem
Firefox has a Agent User Switcher that you can easily make use in order to the browser be intrepertate as an iPhone
Chrome has it as well just add the User Agent string in the Extension options to create a new option
Safari 5 is the easiest one as this is already built in:
Open Safari and go to the Preferences, move to Advanced. At the bottom of the tab there is a check box for Show Develop menu in menu bar.
Go to the Develop menu and move to User Agent and select any iOS device.