Webkit page scaling in Cocoa - macos

I'm making a WebKit-based text editor app for Mac, and I need to find a way to zoom the document in and out.
I've seen this StackOverflow article here, it suggests just scaling the view that Webkit is rendered into. The problem is, since Webkit doesn't know about it, this breaks things like drag & drop and causes Javascript to report the wrong cursor locations. Unfortunately, for some reason, the Cocoa WebKit API only supports scaling text up or down, not the whole page.
Safari and Chrome are both able to do this properly. I've gone as far as to look through the Chromium source code to figure out how it's done, but unfortunately it's using a completely different cross-platform API.
Any advice would be greatly appreciated. I'm not opposed to using private APIs, if I can figure out how to use them in a safe way.
-Keaton

The APIs for doing this aren't currently public, but they've been around for years and aren't likely to change. You can find them in WebKit's WebViewPrivate.h header. You won't find that header on your system, so you'll have to redeclare those methods yourself in a category. Something like:
#interface WebView (Zoom)
- (IBAction)zoomPageIn:(id)sender;
- (IBAction)zoomPageOut:(id)sender;
- (IBAction)resetPageZoom:(id)sender;
#end
Another option is just to set the CSS zoom property on the html element in your editor. You can do that in markup (<html style="zoom: 1.5">) or in JavaScript (document.documentElement.style.zoom = "1.5"). That doesn't require using any private APIs.

Related

Are there any visual differences between WKWebView and UIWebView?

I wanted to migrate away from the deprecated UIWebView in Xamarin Forms iOS, and I read online that WKWebView is now the default in Xamarin Forms 4.x, and I was currently in 3.6.0.x.
So I decided to update hoping that the Webview would automatically update for me, but I realized there is no way to tell because I don't know what, and if there even is a difference in how the webviews look. I've looked online but can't find any side by side pictures of the same app/interface using WK vs. UI. Is there a difference at all?
The only difference I saw after updating, was that on one of the pages, the loading icon wouldn't disappear whereas it did after a couple of seconds in UI.
Thanks!
Welcome to StackOverflow! :)
The easiest way to answer this question is simply going to be to test it. To my knowledge, both UIWebView and WKWebView use the exact same underlying WebKit code/engine to render HTML content. There may be differences due to separate defaults and properties that one has vs. the other, but for the most part, they should be identical. But you shouldn't take my word for it! If you can, give it a try.

High Sierra WebView blocks anchor tag navigation

I have a Mac app that displays info in a WebView. Quite an old app now and in Objective-C which I am rapidly forgetting.
The WebView contains anchor tags to allow navigation within the pages, both by clicking on links in the page displayed, or by clicking tabs in the UI which send Javascript to the WebView. In High Sierra this no longer works although it displays no error.
It appears that I need to implement isKeyExcludedFromWebScript: but my attempts to do so have failed.
Do I need to sub-class WebView? Putting isKeyExcludedFromWebScript: and isSelectorExcludedFromWebScript: in the View Controller containing the WebView doesn't work - they never get called.
If anyone has any advice or examples, I would be most grateful.
I am afraid that the answer will be to upgrade the app to use WKWebView but I was hoping for a quick work-around until I get time to do that.
Answering my own question here as I have worked out a solution.
The problem was that I was loading an HTML string into the WebView and when I tried to use internal navigation links, it didn't have a base URL to use as a prefix and so the anchor navigation never worked.
It used to work, prior to High Sierra, so there must be something new about how WebViews operate.
The solution was to save the HTML string to a temporary file and have the WebView load that file's URL instead of loading the string directly.
This applies to both WebView and WKWebView.

WebKit shell browser for internal web application

I am creating an in-house web application that I want to run in a WebKit shell browser on the Mac. I searched and came up empty. Basically, I want the site rendered and shown in a window with no chrome for navigating to other pages, bookmarks, etc. Seems to me that there should be a relatively easy way to get something like that up and running in Xcode, but alas I don't know how. The more barebones the better. Anybody know the answer?
Not sure if this is what you're looking for, but you could use a WebView. The content is rendered by Safari/WebKit.
As for chrome, if you just put the view, that's all you'll have. You can shape the rest of the User Interface however you'd like.
Apple's documentation has a couple of examples using WebView... Should this solve your problem.
Did you take a look at the phonegap mac project.
Its a full screen webkit without any chrome in which you can put your html / css / javascript to run:
https://github.com/callback/callback-mac

Is there a workaround to be able to drag and drop input types with Firefox and HTML 5?

I have a cross browser solution for dragging and dropping using HTML 5 that works for all elements in IE 9, Chrome, and Safari. Firefox works for everything except input types such as textboxes.
I have done a lot of research on this with a lot of help from these resources:
http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
http://html5doctor.com/native-drag-and-drop/
I have also scoured the HTML 5 spec and the Firefox MDN and other resources and have found no solution to the problem. I would hate to fall back to a jQuery library, but it just looks like HTML 5 is not ready for prime time and that I may have to do so.
Has anyone tried this and have a solution or am I going too far over the edge here? Glad to see workarounds are so prevalent in HTML 5 already and my dream of HTML 5 being cross browser so quickly destroyed with the first new thing I try. The spec makes it sound simple. Add a draggable attribute and handle a few events. Except, IE only supports anchor tags and image tags. Webkit browsers need CSS and Firefox apparently doesn't support input fields.
Try dragable attribute for firefox and -webkit-user-drag css property for webkit-based browsers.
See http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html#link9

Premade Cocoa component for a UI control like this? (rounded rectangle showing a stack of items)

Update
Luckily, the code that WebKit uses to make this control draws onto a canvas using basic drawing operations, so it shouldn't be too hard to convert into a Cocoa control. This is what I have so far:Development progress so far http://img413.imageshack.us/img413/8418/capturedcran20100623074.png
I'll update here again once I get it finished.
Original question
I don't know what to call this sort of control, so I'll show pictures (from the iTunes dialog for a media player and the WebKit Web Inspector's Resource panel):
iTunes showing disk usage using this control http://img13.imageshack.us/img13/8245/capturedcran20100622144.png
Google Chrome's use of the control to show resource download speed http://img695.imageshack.us/img695/8245/capturedcran20100622144.png
I'm interested in using this sort of control in my Cocoa application. I've searched all over the Internets but haven't found much, seeing as I don't know its name - is there some sort of shared component that I can use for this?
Thanks!
On Safari it's implemented using javascript, see: SummaryBar.js.
That's a totally custom control, and I don't know of any open source counterpart (other than the one inside the Webkit source). Would you care to provide one? :)

Resources